Merged in fix/SW-3020-paymentInfo-tracking (pull request #2403)

fix(SW-3020): add correct paymentInfo in booking flow and ancillary flow

* fix(SW-3020): add correct paymentInfo in booking flow and ancillary flow

* fix(SW-3020): fix pr comments


Approved-by: Tobias Johansson

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx

@@ -11,6 +11,10 @@ import { trackPaymentEvent } from "@/utils/tracking"
 import { trackEvent } from "@/utils/tracking/base"
 import { serializeBookingSearchParams } from "@/utils/url"
 
+import {
+  clearPaymentInfoSessionStorage,
+  readPaymentInfoFromSessionStorage,
+} from "../helpers"
 import { clearGlaSessionStorage, readGlaFromSessionStorage } from "./helpers"
 
 import type { PersistedState } from "@/types/stores/enter-details"
@@ -41,6 +45,7 @@ export default function HandleErrorCallback({
       )
 
       const glaSessionData = readGlaFromSessionStorage()
+      const paymentInfoSessionData = readPaymentInfoFromSessionStorage()
 
       if (status === PaymentCallbackStatusEnum.Cancel) {
         if (glaSessionData) {
@@ -54,6 +59,8 @@ export default function HandleErrorCallback({
             paymentInfo: {
               hotelId: glaSessionData.hotelId,
               status: "glacardsavecancelled",
+              type: glaSessionData.paymentMethod,
+              isSavedCreditCard: glaSessionData.isSavedCreditCard,
             },
           })
         } else {
@@ -61,6 +68,8 @@ export default function HandleErrorCallback({
             event: "paymentCancel",
             hotelId: detailsStorage.booking.hotelId,
             status: "cancelled",
+            method: paymentInfoSessionData?.paymentMethod,
+            isSavedCreditCard: paymentInfoSessionData?.isSavedCreditCard,
           })
         }
       }
@@ -76,6 +85,8 @@ export default function HandleErrorCallback({
             paymentInfo: {
               hotelId: glaSessionData.hotelId,
               status: "glacardsavefailed",
+              type: glaSessionData.paymentMethod,
+              isSavedCreditCard: glaSessionData.isSavedCreditCard,
             },
           })
         } else {
@@ -84,10 +95,13 @@ export default function HandleErrorCallback({
             hotelId: detailsStorage.booking.hotelId,
             errorMessage,
             status: "failed",
+            method: paymentInfoSessionData?.paymentMethod,
+            isSavedCreditCard: paymentInfoSessionData?.isSavedCreditCard,
           })
         }
       }
       clearGlaSessionStorage()
+      clearPaymentInfoSessionStorage()
 
       if (searchParams.size > 0) {
         router.replace(`${returnUrl}?${searchParams.toString()}`)

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx

@@ -66,6 +66,11 @@ export default function HandleSuccessCallback({
             hotelId: glaSessionData.hotelId,
             guaranteedProduct: "room",
           },
+          paymentInfo: {
+            hotelId: glaSessionData.hotelId,
+            type: glaSessionData.paymentMethod,
+            isSavedCreditCard: glaSessionData.isSavedCreditCard,
+          },
         })
         clearGlaSessionStorage()
       }

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers.ts

@@ -5,6 +5,8 @@ export const glaStorageName = "gla-storage"
 type GlaSessionData = {
   lateArrivalGuarantee: string
   hotelId: string
+  paymentMethod?: string
+  isSavedCreditCard?: boolean
 }
 
 export function readGlaFromSessionStorage(): GlaSessionData | null {
@@ -20,12 +22,19 @@ export function readGlaFromSessionStorage(): GlaSessionData | null {
 
 export function writeGlaToSessionStorage(
   lateArrivalGuarantee: string,
-  hotelId: string
+  hotelId: string,
+  paymentMethod: string,
+  isSavedCreditCard: boolean
 ) {
   try {
     sessionStorage.setItem(
       glaStorageName,
-      JSON.stringify({ lateArrivalGuarantee, hotelId })
+      JSON.stringify({
+        lateArrivalGuarantee,
+        hotelId,
+        paymentMethod,
+        isSavedCreditCard,
+      })
     )
   } catch (error) {
     console.error("Error writing to session storage:", error)

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -43,7 +43,12 @@ import PriceChangeDialog from "../PriceChangeDialog"
 import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import BookingAlert from "./BookingAlert"
 import GuaranteeDetails from "./GuaranteeDetails"
-import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
+import {
+  hasFlexibleRate,
+  hasPrepaidRate,
+  isPaymentMethodEnum,
+  writePaymentInfoToSessionStorage,
+} from "./helpers"
 import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
 import PaymentOptionsGroup from "./PaymentOptionsGroup"
 import { type PaymentFormData, paymentSchema } from "./schema"
@@ -216,10 +221,12 @@ export default function PaymentClient({
       const currentPaymentMethod = methods.getValues("paymentMethod")
       const smsEnable = methods.getValues("smsConfirmation")
       const guarantee = methods.getValues("guarantee")
-      const isSavedCreditCard = savedCreditCards?.some(
+      const savedCreditCard = savedCreditCards?.find(
         (card) => card.id === currentPaymentMethod
       )
 
+      const isSavedCreditCard = !!savedCreditCard
+
       if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
         const lateArrivalGuarantee = guarantee ? "yes" : "mandatory"
         trackEvent({
@@ -233,13 +240,14 @@ export default function PaymentClient({
             isSavedCreditCard,
             hotelId,
             status: "glacardsavefailed",
+            type: savedCreditCard ? savedCreditCard.type : currentPaymentMethod,
           },
         })
       } else {
         trackPaymentEvent({
           event: "paymentFail",
           hotelId,
-          method: currentPaymentMethod,
+          method: savedCreditCard ? savedCreditCard.type : currentPaymentMethod,
           isSavedCreditCard,
           smsEnable,
           errorMessage,
@@ -355,21 +363,29 @@ export default function PaymentClient({
             cancel: `${paymentRedirectUrl}/cancel`,
           }
         : undefined
-
+      const paymentMethodType = savedCreditCard
+        ? savedCreditCard.type
+        : paymentMethod
       if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
         const lateArrivalGuarantee = guarantee ? "yes" : "mandatory"
-        writeGlaToSessionStorage(lateArrivalGuarantee, hotelId)
+        writeGlaToSessionStorage(
+          lateArrivalGuarantee,
+          hotelId,
+          paymentMethodType,
+          !!savedCreditCard
+        )
         trackGlaSaveCardAttempt(hotelId, savedCreditCard, lateArrivalGuarantee)
       } else if (!hasOnlyFlexRates) {
         trackPaymentEvent({
           event: "paymentAttemptStart",
           hotelId,
-          method: savedCreditCard ? savedCreditCard.type : paymentMethod,
+          method: paymentMethodType,
           isSavedCreditCard: !!savedCreditCard,
           smsEnable: data.smsConfirmation,
           status: "attempt",
         })
       }
+      writePaymentInfoToSessionStorage(paymentMethodType, !!savedCreditCard)
 
       const payload = {
         checkInDate: fromDate,

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/helpers.ts

@@ -45,3 +45,46 @@ export function calculateTotalRoomPrice(
     comparisonPrice,
   }
 }
+
+export const paymentInfoStorageName = "payment-info-storage"
+
+type PaymentInfoSessionData = {
+  paymentMethod: string
+  isSavedCreditCard: boolean
+}
+
+export function readPaymentInfoFromSessionStorage():
+  | PaymentInfoSessionData
+  | undefined {
+  try {
+    const paymentInfoSessionData = sessionStorage.getItem(
+      paymentInfoStorageName
+    )
+    if (!paymentInfoSessionData) return undefined
+    return JSON.parse(paymentInfoSessionData)
+  } catch (error) {
+    console.error("Error reading from session storage:", error)
+    return undefined
+  }
+}
+
+export function writePaymentInfoToSessionStorage(
+  paymentMethod: string,
+  isSavedCreditCard: boolean
+) {
+  try {
+    sessionStorage.setItem(
+      paymentInfoStorageName,
+      JSON.stringify({
+        paymentMethod,
+        isSavedCreditCard,
+      })
+    )
+  } catch (error) {
+    console.error("Error writing to session storage:", error)
+  }
+}
+
+export function clearPaymentInfoSessionStorage() {
+  sessionStorage.removeItem(paymentInfoStorageName)
+}