Merge branch 'master' into feat/sw-929-release-preps

components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+import { detailsStorageName } from "@/stores/enter-details"
+
+import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import type { DetailsState } from "@/types/stores/enter-details"
+
+export default function PaymentCallback({
+  returnUrl,
+  searchObject,
+}: {
+  returnUrl: string
+  searchObject: URLSearchParams
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const bookingData = window.sessionStorage.getItem(detailsStorageName)
+
+    if (bookingData) {
+      const detailsStorage: Record<
+        "state",
+        Pick<DetailsState, "booking">
+      > = JSON.parse(bookingData)
+      const searchParams = createQueryParamsForEnterDetails(
+        detailsStorage.state.booking,
+        searchObject
+      )
+
+      if (searchParams.size > 0) {
+        router.replace(`${returnUrl}?${searchParams.toString()}`)
+      }
+    }
+  }, [returnUrl, router, searchObject])
+
+  return <LoadingSpinner />
+}

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -2,8 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
-import { Label as AriaLabel } from "react-aria-components"
+import { useCallback, useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -16,9 +15,10 @@ import {
   bookingTermsAndConditions,
   privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { selectRate } from "@/constants/routes/hotelReservation"
 import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
-import { useDetailsStore } from "@/stores/details"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -27,11 +27,13 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
+import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
 import useLang from "@/hooks/useLang"
 
 import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
+import PriceChangeDialog from "../PriceChangeDialog"
 import GuaranteeDetails from "./GuaranteeDetails"
 import PaymentOption from "./PaymentOption"
 import { PaymentFormData, paymentSchema } from "./schema"
@@ -39,7 +41,7 @@ import { PaymentFormData, paymentSchema } from "./schema"
 import styles from "./payment.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
+import type { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
 
 const maxRetries = 4
 const retryInterval = 2000
@@ -51,6 +53,7 @@ function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
 }
 
 export default function Payment({
+  user,
   roomPrice,
   otherPaymentOptions,
   savedCreditCards,
@@ -59,30 +62,28 @@ export default function Payment({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
-  const queryParams = useSearchParams()
-  const { booking, ...userData } = useDetailsStore((state) => state.data)
-  const setIsSubmittingDisabled = useDetailsStore(
+  const searchParams = useSearchParams()
+  const totalPrice = useEnterDetailsStore((state) => state.totalPrice)
+  const { bedType, booking, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    booking: state.booking,
+    breakfast: state.breakfast,
+  }))
+  const userData = useEnterDetailsStore((state) => state.guest)
+  const setIsSubmittingDisabled = useEnterDetailsStore(
     (state) => state.actions.setIsSubmittingDisabled
   )
 
-  const {
-    firstName,
-    lastName,
-    email,
-    phoneNumber,
-    countryCode,
-    breakfast,
-    bedType,
-    membershipNo,
-    join,
-    dateOfBirth,
-    zipCode,
-  } = userData
-  const { toDate, fromDate, rooms, hotel } = booking
-
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
-  const [availablePaymentOptions, setAvailablePaymentOptions] =
-    useState(otherPaymentOptions)
+  const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
+    useState(false)
+
+  const availablePaymentOptions =
+    useAvailablePaymentOptions(otherPaymentOptions)
+  const [priceChangeData, setPriceChangeData] = useState<{
+    oldPrice: number
+    newPrice: number
+  } | null>()
 
   usePaymentFailedToast()
 
@@ -103,6 +104,15 @@ export default function Payment({
     onSuccess: (result) => {
       if (result?.confirmationNumber) {
         setConfirmationNumber(result.confirmationNumber)
+
+        if (result.metadata?.priceChangedMetadata) {
+          setPriceChangeData({
+            oldPrice: roomPrice.publicPrice,
+            newPrice: result.metadata.priceChangedMetadata.totalPrice,
+          })
+        } else {
+          setIsPollingForBookingStatus(true)
+        }
       } else {
         toast.error(
           intl.formatMessage({
@@ -121,25 +131,31 @@ export default function Payment({
     },
   })
 
+  const priceChange = trpc.booking.priceChange.useMutation({
+    onSuccess: (result) => {
+      if (result?.confirmationNumber) {
+        setIsPollingForBookingStatus(true)
+      } else {
+        toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+      }
+
+      setPriceChangeData(null)
+    },
+    onError: (error) => {
+      console.error("Error", error)
+      setPriceChangeData(null)
+      toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+    },
+  })
+
   const bookingStatus = useHandleBookingStatus({
     confirmationNumber,
     expectedStatus: BookingStatusEnum.BookingCompleted,
     maxRetries,
     retryInterval,
+    enabled: isPollingForBookingStatus,
   })
 
-  useEffect(() => {
-    if (window.ApplePaySession) {
-      setAvailablePaymentOptions(otherPaymentOptions)
-    } else {
-      setAvailablePaymentOptions(
-        otherPaymentOptions.filter(
-          (option) => option !== PaymentMethodEnum.applePay
-        )
-      )
-    }
-  }, [otherPaymentOptions, setAvailablePaymentOptions])
-
   useEffect(() => {
     if (bookingStatus?.data?.paymentUrl) {
       router.push(bookingStatus.data.paymentUrl)
@@ -162,76 +178,102 @@ export default function Payment({
     setIsSubmittingDisabled,
   ])
 
-  function handleSubmit(data: PaymentFormData) {
-    const allQueryParams =
-      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+  const handleSubmit = useCallback(
+    (data: PaymentFormData) => {
+      const {
+        firstName,
+        lastName,
+        email,
+        phoneNumber,
+        countryCode,
+        membershipNo,
+        join,
+        dateOfBirth,
+        zipCode,
+      } = userData
+      const { toDate, fromDate, rooms, hotel } = booking
 
-    // set payment method to card if saved card is submitted
-    const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
-      ? data.paymentMethod
-      : PaymentMethodEnum.card
+      // set payment method to card if saved card is submitted
+      const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
+        ? data.paymentMethod
+        : PaymentMethodEnum.card
 
-    const savedCreditCard = savedCreditCards?.find(
-      (card) => card.id === data.paymentMethod
-    )
+      const savedCreditCard = savedCreditCards?.find(
+        (card) => card.id === data.paymentMethod
+      )
 
-    initiateBooking.mutate({
-      hotelId: hotel,
-      checkInDate: fromDate,
-      checkOutDate: toDate,
-      rooms: rooms.map((room) => ({
-        adults: room.adults,
-        childrenAges: room.children?.map((child) => ({
-          age: child.age,
-          bedType: bedTypeMap[parseInt(child.bed.toString())],
+      const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback`
+
+      initiateBooking.mutate({
+        hotelId: hotel,
+        checkInDate: fromDate,
+        checkOutDate: toDate,
+        rooms: rooms.map((room) => ({
+          adults: room.adults,
+          childrenAges: room.children?.map((child) => ({
+            age: child.age,
+            bedType: bedTypeMap[parseInt(child.bed.toString())],
+          })),
+          rateCode:
+            user || join || membershipNo ? room.counterRateCode : room.rateCode,
+          roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
+          guest: {
+            firstName,
+            lastName,
+            email,
+            phoneNumber,
+            countryCode,
+            membershipNumber: membershipNo,
+            becomeMember: join,
+            dateOfBirth,
+            postalCode: zipCode,
+          },
+          packages: {
+            breakfast: !!(breakfast && breakfast.code),
+            allergyFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ??
+              false,
+            petFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
+            accessibility:
+              room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
+              false,
+          },
+          smsConfirmationRequested: data.smsConfirmation,
+          roomPrice,
         })),
-        rateCode: room.rateCode,
-        roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
-        guest: {
-          title: "",
-          firstName,
-          lastName,
-          email,
-          phoneNumber,
-          countryCode,
-          membershipNumber: membershipNo,
-          becomeMember: join,
-          dateOfBirth,
-          postalCode: zipCode,
-        },
-        packages: {
-          breakfast: !!(breakfast && breakfast.code),
-          allergyFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ?? false,
-          petFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
-          accessibility:
-            room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
-            false,
-        },
-        smsConfirmationRequested: data.smsConfirmation,
-        roomPrice,
-      })),
-      payment: {
-        paymentMethod,
-        card: savedCreditCard
-          ? {
-              alias: savedCreditCard.alias,
-              expiryDate: savedCreditCard.expirationDate,
-              cardType: savedCreditCard.cardType,
-            }
-          : undefined,
+        payment: {
+          paymentMethod,
+          card: savedCreditCard
+            ? {
+                alias: savedCreditCard.alias,
+                expiryDate: savedCreditCard.expirationDate,
+                cardType: savedCreditCard.cardType,
+              }
+            : undefined,
 
-        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
-        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
-        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
-      },
-    })
-  }
+          success: `${paymentRedirectUrl}/success`,
+          error: `${paymentRedirectUrl}/error`,
+          cancel: `${paymentRedirectUrl}/cancel`,
+        },
+      })
+    },
+    [
+      breakfast,
+      bedType,
+      userData,
+      booking,
+      roomPrice,
+      savedCreditCards,
+      lang,
+      user,
+      initiateBooking,
+    ]
+  )
 
   if (
     initiateBooking.isPending ||
-    (confirmationNumber && !bookingStatus.data?.paymentUrl)
+    (isPollingForBookingStatus && !bookingStatus.data?.paymentUrl)
   ) {
     return <LoadingSpinner />
   }
@@ -241,79 +283,70 @@ export default function Payment({
   const paymentVerb = mustBeGuaranteed ? guaranteeing : paying
 
   return (
-    <FormProvider {...methods}>
-      <form
-        className={styles.paymentContainer}
-        onSubmit={methods.handleSubmit(handleSubmit)}
-        id={formId}
-      >
-        {mustBeGuaranteed ? (
+    <>
+      <FormProvider {...methods}>
+        <form
+          className={styles.paymentContainer}
+          onSubmit={methods.handleSubmit(handleSubmit)}
+          id={formId}
+        >
+          {mustBeGuaranteed ? (
+            <section className={styles.section}>
+              <Body>
+                {intl.formatMessage({
+                  id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
+                })}
+              </Body>
+              <GuaranteeDetails />
+            </section>
+          ) : null}
+          {savedCreditCards?.length ? (
+            <section className={styles.section}>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "MY SAVED CARDS" })}
+              </Body>
+              <div className={styles.paymentOptionContainer}>
+                {savedCreditCards?.map((savedCreditCard) => (
+                  <PaymentOption
+                    key={savedCreditCard.id}
+                    name="paymentMethod"
+                    value={savedCreditCard.id}
+                    label={
+                      PAYMENT_METHOD_TITLES[
+                        savedCreditCard.cardType as PaymentMethodEnum
+                      ]
+                    }
+                    cardNumber={savedCreditCard.truncatedNumber}
+                  />
+                ))}
+              </div>
+            </section>
+          ) : null}
           <section className={styles.section}>
-            <Body>
-              {intl.formatMessage({
-                id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
-              })}
-            </Body>
-            <GuaranteeDetails />
-          </section>
-        ) : null}
-        {savedCreditCards?.length ? (
-          <section className={styles.section}>
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "MY SAVED CARDS" })}
-            </Body>
+            {savedCreditCards?.length ? (
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
+              </Body>
+            ) : null}
             <div className={styles.paymentOptionContainer}>
-              {savedCreditCards?.map((savedCreditCard) => (
+              <PaymentOption
+                name="paymentMethod"
+                value={PaymentMethodEnum.card}
+                label={intl.formatMessage({ id: "Credit card" })}
+              />
+              {availablePaymentOptions.map((paymentMethod) => (
                 <PaymentOption
-                  key={savedCreditCard.id}
+                  key={paymentMethod}
                   name="paymentMethod"
-                  value={savedCreditCard.id}
+                  value={paymentMethod}
                   label={
-                    PAYMENT_METHOD_TITLES[
-                      savedCreditCard.cardType as PaymentMethodEnum
-                    ]
+                    PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                   }
-                  cardNumber={savedCreditCard.truncatedNumber}
                 />
               ))}
             </div>
           </section>
-        ) : null}
-        <section className={styles.section}>
-          {savedCreditCards?.length ? (
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
-            </Body>
-          ) : null}
-          <div className={styles.paymentOptionContainer}>
-            <PaymentOption
-              name="paymentMethod"
-              value={PaymentMethodEnum.card}
-              label={intl.formatMessage({ id: "Credit card" })}
-            />
-            {availablePaymentOptions.map((paymentMethod) => (
-              <PaymentOption
-                key={paymentMethod}
-                name="paymentMethod"
-                value={paymentMethod}
-                label={
-                  PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
-                }
-              />
-            ))}
-          </div>
-        </section>
-        <section className={styles.section}>
-          <Checkbox name="smsConfirmation">
-            <Caption>
-              {intl.formatMessage({
-                id: "I would like to get my booking confirmation via sms",
-              })}
-            </Caption>
-          </Checkbox>
-
-          <AriaLabel className={styles.terms}>
-            <Checkbox name="termsAndConditions" />
+          <section className={styles.section}>
             <Caption>
               {intl.formatMessage<React.ReactNode>(
                 {
@@ -344,19 +377,48 @@ export default function Payment({
                 }
               )}
             </Caption>
-          </AriaLabel>
-        </section>
-        <div className={styles.submitButton}>
-          <Button
-            type="submit"
-            disabled={
-              !methods.formState.isValid || methods.formState.isSubmitting
-            }
-          >
-            {intl.formatMessage({ id: "Complete booking" })}
-          </Button>
-        </div>
-      </form>
-    </FormProvider>
+            <Checkbox name="termsAndConditions">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I accept the terms and conditions",
+                })}
+              </Caption>
+            </Checkbox>
+            <Checkbox name="smsConfirmation">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I would like to get my booking confirmation via sms",
+                })}
+              </Caption>
+            </Checkbox>
+          </section>
+          <div className={styles.submitButton}>
+            <Button
+              type="submit"
+              disabled={
+                !methods.formState.isValid || methods.formState.isSubmitting
+              }
+            >
+              {intl.formatMessage({ id: "Complete booking" })}
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
+      {priceChangeData ? (
+        <PriceChangeDialog
+          isOpen={!!priceChangeData}
+          oldPrice={priceChangeData.oldPrice}
+          newPrice={priceChangeData.newPrice}
+          currency={totalPrice.local.currency}
+          onCancel={() => {
+            const allSearchParams = searchParams.size
+              ? `?${searchParams.toString()}`
+              : ""
+            router.push(`${selectRate(lang)}${allSearchParams}`)
+          }}
+          onAccept={() => priceChange.mutate({ confirmationNumber })}
+        />
+      ) : null}
+    </>
   )
 }