web/utils/tracking.ts

import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type {
  LowestRoomPriceEvent,
  PaymentEvent,
  PaymentFailEvent,
  TrackingPosition,
  TrackingSDKData,
} from "@/types/components/tracking"

export function trackClick(
  name: string,
  additionalParams?: Record<string, string>
) {
  pushToDataLayer({
    event: "linkClick",
    cta: {
      ...additionalParams,
      name,
    },
  })
}

export function trackPageViewStart() {
  pushToDataLayer({
    event: "pageViewStart",
  })
}

export function trackLoginClick(position: TrackingPosition) {
  const event = {
    event: "loginStart",
    login: {
      position,
      action: "login start",
      ctaName: "login",
    },
  }
  pushToDataLayer(event)
}

export function trackSocialMediaClick(socialMediaName: string) {
  const event = {
    event: "social media",
    social: {
      socialIconClicked: socialMediaName,
    },
  }
  pushToDataLayer(event)
}

export function trackFooterClick(group: string, name: string) {
  const event = {
    event: "footer link",
    footer: {
      footerLinkClicked: `${group}:${name}`,
    },
  }
  pushToDataLayer(event)
}

export function trackHotelMapClick() {
  const event = {
    event: "map click",
    map: {
      action: "map click - open/explore mearby",
    },
  }
  pushToDataLayer(event)
}

export function trackAccordionClick(option: string) {
  const event = {
    event: "accordionClick",
    accordion: {
      action: "accordion open click",
      option,
    },
  }
  pushToDataLayer(event)
}

export function trackHotelTabClick(name: string) {
  pushToDataLayer({
    event: "linkClick",
    link: {
      action: "hotel menu click",
      option: `hotel menu:${name}`,
    },
  })
}

export function trackUpdatePaymentMethod(hotelId: string, method: string) {
  const paymentSelectionEvent = {
    event: "paymentSelection",
    hotelInfo: {
      hotelId: hotelId,
    },
    cta: {
      name: method,
    },
  }
  pushToDataLayer(paymentSelectionEvent)
}

export function trackOpenSidePeekEvent(
  sidePeek: SidePeekEnum | null,
  hotelId: string,
  pathName: string,
  roomTypeCode?: string | null
) {
  const openSidePeekEvent = {
    event: "openSidePeek",
    hotelInfo: {
      hotelId: hotelId,
    },
    cta: {
      name: sidePeek,
      roomTypeCode,
      pathName,
    },
  }
  pushToDataLayer(openSidePeekEvent)
}

export function trackPaymentEvent(paymentEvent: PaymentEvent) {
  const paymentAttempt = {
    event: paymentEvent.event,
    hotelInfo: {
      hotelId: paymentEvent.hotelId,
    },
    paymentInfo: {
      isSavedCreditCard: paymentEvent.isSavedCreditCard,
      status: "attempt",
      type: paymentEvent.method,
      smsEnable: paymentEvent.smsEnable,
      errorMessage: isPaymentFailEvent(paymentEvent)
        ? paymentEvent.errorMessage
        : undefined,
    },
  }
  pushToDataLayer(paymentAttempt)
}

export function trackLowestRoomPrice(event: LowestRoomPriceEvent) {
  const lowestRoomPrice = {
    event: "lowestRoomPrice",
    hotelInfo: {
      hotelId: event.hotelId,
      arrivalDate: event.arrivalDate,
      departureDate: event.departureDate,
    },
    price: {
      lowestPrice: event.lowestPrice,
      currency: event.currency,
    },
  }
  pushToDataLayer(lowestRoomPrice)
}

export function pushToDataLayer(data: any) {
  if (typeof window !== "undefined" && window.adobeDataLayer) {
    window.adobeDataLayer.push(data)
  }
}

export function createSDKPageObject(
  trackingData: TrackingSDKData
): TrackingSDKData {
  let pageName = convertSlashToPipe(trackingData.pageName)
  let siteSections = convertSlashToPipe(trackingData.siteSections)

  if (trackingData.pathName.indexOf("/webview/") > -1) {
    pageName = "webview|" + pageName
    siteSections = "webview|" + siteSections
  }

  return {
    ...trackingData,
    domain: typeof window !== "undefined" ? window.location.host : "",
    pageName: pageName,
    siteSections: siteSections,
  }
}

function convertSlashToPipe(url: string) {
  const formattedUrl = url.startsWith("/") ? url.slice(1) : url
  return formattedUrl.replaceAll("/", "|")
}

function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent {
  return "errorMessage" in event
}