diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx index 2e06a60b2..41eeca363 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx @@ -13,13 +13,13 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA" import { Button } from "@scandic-hotels/design-system/Button" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" +import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption" +import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup" +import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import MySavedCards from "@/components/HotelReservation/MySavedCards" -import PaymentOption from "@/components/HotelReservation/PaymentOption" - -import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup" +import { trackUpdatePaymentMethod } from "@/utils/tracking" import styles from "./guarantee.module.css" @@ -105,11 +105,19 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) { {savedCreditCards?.length && guarantee ? ( - + trackUpdatePaymentMethod({ method })} + paymentMethods={savedCreditCards.map((x) => ({ + ...x, + cardType: x.cardType as PaymentMethodEnum, + }))} + /> ) : null} {guarantee ? ( trackUpdatePaymentMethod({ method })} label={ savedCreditCards?.length ? intl.formatMessage({ diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index 182ddfb82..7eefda5e4 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -8,7 +8,10 @@ import { Label } from "react-aria-components" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" -import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod" +import { + PAYMENT_METHOD_TITLES, + PaymentMethodEnum, +} from "@scandic-hotels/common/constants/paymentMethod" import { bookingConfirmation, selectRate, @@ -20,6 +23,8 @@ import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone" import Body from "@scandic-hotels/design-system/Body" import { Button } from "@scandic-hotels/design-system/Button" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" +import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption" +import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap" @@ -27,15 +32,13 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus" import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" -import { PAYMENT_METHOD_TITLES } from "@/constants/booking" import { env } from "@/env/client" import { useEnterDetailsStore } from "@/stores/enter-details" -import PaymentOption from "@/components/HotelReservation/PaymentOption" import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions" import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import useLang from "@/hooks/useLang" -import { trackPaymentEvent } from "@/utils/tracking" +import { trackPaymentEvent, trackUpdatePaymentMethod } from "@/utils/tracking" import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay" import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm" @@ -50,7 +53,6 @@ import { writePaymentInfoToSessionStorage, } from "./helpers" import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown" -import PaymentOptionsGroup from "./PaymentOptionsGroup" import { type PaymentFormData, paymentSchema } from "./schema" import TermsAndConditions from "./TermsAndConditions" @@ -551,6 +553,7 @@ export default function PaymentClient({ trackUpdatePaymentMethod({ method })} >