web/packages/tracking/lib/form.ts

import { trackEvent } from "./base"

export type FormType = "checkout" | "signup"

export function trackFormInputStarted(
  type: FormType,
  nameSuffix?: string,
  startField?: string
) {
  if (type === "checkout") {
    trackEvent({
      event: "formStart",
      form: {
        action: "checkout form start",
        name: "checkout enter detail" + nameSuffix,
        type: type,
      },
    })
  } else if (type === "signup") {
    trackEvent({
      event: "formStart",
      form: {
        action: "signup form start",
        name: "member registration" + nameSuffix,
        type: type,
      },
      formStartField: startField,
    })
  }
}

export function trackFormAbandonment(
  type: FormType,
  lastAccessedField: string,
  nameSuffix?: string
) {
  if (type === "checkout") {
    trackEvent({
      event: "formAbandonment",
      form: {
        action: "checkout form abandonment",
        name: "checkout enter detail" + nameSuffix,
        type: type,
        lastAccessedField,
      },
    })
  } else if (type === "signup") {
    trackEvent({
      event: "formAbandonment",
      form: {
        action: "signup form abandonment",
        name: "member registration" + nameSuffix,
        type: type,
        lastAccessedField,
      },
    })
  }
}

export function trackFormValidationError(
  type: FormType,
  errorMessage: string,
  nameSuffix?: string
) {
  if (type === "checkout") {
    trackEvent({
      event: "formError",
      form: {
        action: "checkout form error",
        name: "checkout enter detail" + nameSuffix,
        type: type,
        errorMessage,
      },
    })
  } else if (type === "signup") {
    trackEvent({
      event: "formError",
      form: {
        action: "signup form error",
        name: "member registration" + nameSuffix,
        type: type,
        errorMessage,
      },
    })
  }
}

export function trackFormCompletion(type: FormType, nameSuffix?: string) {
  if (type === "checkout") {
    trackEvent({
      event: "formCompletion",
      form: {
        action: "checkout form completion",
        name: "checkout enter detail" + nameSuffix,
        type: type,
      },
    })
  } else if (type === "signup") {
    trackEvent({
      event: "formCompletion",
      form: {
        action: "signup form completion",
        name: "member registration" + nameSuffix,
        type: type,
      },
    })
  }
}