web/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { cx } from "class-variance-authority"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useState } from "react"
import { Label } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import {
  PAYMENT_METHOD_TITLES,
  PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"
import {
  bookingConfirmation,
  selectRate,
} from "@scandic-hotels/common/constants/routes/hotelReservation"
import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
import { logger } from "@scandic-hotels/common/logger"
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 { trackEvent } from "@scandic-hotels/tracking/base"
import {
  trackGlaSaveCardAttempt,
  trackPaymentEvent,
} from "@scandic-hotels/tracking/payment"
import { trpc } from "@scandic-hotels/trpc/client"
import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap"
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 { env } from "../../../../env/client"
import { useAvailablePaymentOptions } from "../../../hooks/useAvailablePaymentOptions"
import { useBookingFlowContext } from "../../../hooks/useBookingFlowContext"
import { clearBookingWidgetState } from "../../../hooks/useBookingWidgetState"
import { useHandleBookingStatus } from "../../../hooks/useHandleBookingStatus"
import { useIsLoggedIn } from "../../../hooks/useIsLoggedIn"
import useLang from "../../../hooks/useLang"
import { useEnterDetailsStore } from "../../../stores/enter-details"
import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
import PriceChangeDialog from "../PriceChangeDialog"
import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
import BookingAlert from "./BookingAlert"
import GuaranteeDetails from "./GuaranteeDetails"
import {
  hasFlexibleRate,
  hasPrepaidRate,
  isPaymentMethodEnum,
  writePaymentInfoToSessionStorage,
} from "./helpers"
import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import { type PaymentFormData, paymentSchema } from "./schema"
import TermsAndConditions from "./TermsAndConditions"

import styles from "./payment.module.css"

import type { CreateBookingInput } from "@scandic-hotels/trpc/routers/booking/mutation/create/schema"
import type { CreditCard } from "@scandic-hotels/trpc/types/user"

import type { PriceChangeData } from "../PriceChangeData"

const maxRetries = 15
const retryInterval = 2000

type PaymentClientProps = {
  otherPaymentOptions: PaymentMethodEnum[]
  savedCreditCards: CreditCard[] | null
}

export const formId = "submit-booking"
export default function PaymentClient({
  otherPaymentOptions,
  savedCreditCards,
}: PaymentClientProps) {
  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const isUserLoggedIn = useIsLoggedIn()
  const { getTopOffset } = useStickyPosition({})
  const { user } = useBookingFlowContext()

  const [showBookingAlert, setShowBookingAlert] = useState(false)

  const {
    booking,
    rooms,
    totalPrice,
    isSubmitting,
    setIsSubmitting,
    runPreSubmitCallbacks,
  } = useEnterDetailsStore((state) => ({
    booking: state.booking,
    rooms: state.rooms,
    totalPrice: state.totalPrice,
    isSubmitting: state.isSubmitting,
    setIsSubmitting: state.actions.setIsSubmitting,
    runPreSubmitCallbacks: state.actions.runPreSubmitCallbacks,
  }))

  const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => {
    if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) {
      return true
    }

    if (
      (room.guest.join || room.guest.membershipNo) &&
      booking.rooms[idx].counterRateCode
    ) {
      return room.memberMustBeGuaranteed
    }

    return room.mustBeGuaranteed
  })

  const [refId, setRefId] = useState("")
  const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
    useState(false)

  const availablePaymentOptions =
    useAvailablePaymentOptions(otherPaymentOptions)
  const [priceChangeData, setPriceChangeData] =
    useState<PriceChangeData | null>(null)

  const { toDate, fromDate, hotelId } = booking

  const hasPrepaidRates = rooms.some(hasPrepaidRate)
  const hasFlexRates = rooms.some(hasFlexibleRate)
  const hasOnlyFlexRates = rooms.every(hasFlexibleRate)
  const hasMixedRates = hasPrepaidRates && hasFlexRates

  const methods = useForm<PaymentFormData>({
    defaultValues: {
      paymentMethod: savedCreditCards?.length
        ? savedCreditCards[0].id
        : PaymentMethodEnum.card,
      smsConfirmation: false,
      termsAndConditions: false,
      guarantee: false,
    },
    mode: "all",
    reValidateMode: "onChange",
    resolver: zodResolver(paymentSchema),
  })

  const initiateBooking = trpc.booking.create.useMutation({
    onSuccess: (result) => {
      if (result) {
        if ("error" in result) {
          const queryParams = new URLSearchParams(searchParams.toString())
          queryParams.set("errorCode", result.cause)
          window.history.replaceState(
            {},
            "",
            `${pathname}?${queryParams.toString()}`
          )
          handlePaymentError(result.cause)
          return
        }

        const { booking } = result
        const mainRoom = booking.rooms[0]

        if (booking.reservationStatus == BookingStatusEnum.BookingCompleted) {
          clearBookingWidgetState()
          // Cookie is used by Booking Confirmation page to validate that the user came from payment callback
          document.cookie = `bcsig=${result.sig}; Path=/; Max-Age=60; Secure; SameSite=Strict`
          const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${encodeURIComponent(mainRoom.refId)}`
          router.push(confirmationUrl)
          return
        }

        setRefId(mainRoom.refId)

        const hasPriceChange = booking.rooms.some((r) => r.priceChangedMetadata)
        if (hasPriceChange) {
          const priceChangeData = booking.rooms.map(
            (room) => room.priceChangedMetadata || null
          )
          setPriceChangeData(priceChangeData)
        } else {
          setIsPollingForBookingStatus(true)
        }
      } else {
        handlePaymentError("No confirmation number")
      }
    },
    onError: (error) => {
      logger.error("Booking error", error)
      handlePaymentError(error.message)
    },
  })

  const priceChange = trpc.booking.priceChange.useMutation({
    onSuccess: (result) => {
      if (result?.id) {
        setIsPollingForBookingStatus(true)
      } else {
        handlePaymentError("No confirmation number")
      }
      setPriceChangeData(null)
    },
    onError: (error) => {
      logger.error("Price change error", error)
      setPriceChangeData(null)
      handlePaymentError(error.message)
    },
  })

  const bookingStatus = useHandleBookingStatus({
    refId,
    expectedStatuses: [BookingStatusEnum.BookingCompleted],
    maxRetries,
    retryInterval,
    enabled: isPollingForBookingStatus,
  })

  const handlePaymentError = useCallback(
    (errorMessage: string) => {
      setShowBookingAlert(true)
      setIsSubmitting(false)

      const currentPaymentMethod = methods.getValues("paymentMethod")
      const smsEnable = methods.getValues("smsConfirmation")
      const guarantee = methods.getValues("guarantee")
      const savedCreditCard = savedCreditCards?.find(
        (card) => card.id === currentPaymentMethod
      )

      const isSavedCreditCard = !!savedCreditCard

      if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
        const lateArrivalGuarantee = guarantee ? "yes" : "mandatory"
        trackEvent({
          event: "glaCardSaveFailed",
          hotelInfo: {
            hotelId,
            lateArrivalGuarantee,
            guaranteedProduct: "room",
          },
          paymentInfo: {
            isSavedCreditCard,
            hotelId,
            status: "glacardsavefailed",
            type: savedCreditCard ? savedCreditCard.type : currentPaymentMethod,
          },
        })
      } else {
        trackPaymentEvent({
          event: "paymentFail",
          hotelId,
          method: savedCreditCard ? savedCreditCard.type : currentPaymentMethod,
          isSavedCreditCard,
          smsEnable,
          errorMessage,
          status: "failed",
        })
      }
    },
    [
      methods,
      savedCreditCards,
      hotelId,
      bookingMustBeGuaranteed,
      hasOnlyFlexRates,
      setIsSubmitting,
    ]
  )

  useEffect(() => {
    if (bookingStatus?.data?.booking.paymentUrl) {
      router.push(bookingStatus.data.booking.paymentUrl)
    } else if (
      bookingStatus?.data?.booking.reservationStatus ===
      BookingStatusEnum.BookingCompleted
    ) {
      const mainRoom = bookingStatus.data.booking.rooms[0]
      clearBookingWidgetState()
      // Cookie is used by Booking Confirmation page to validate that the user came from payment callback
      document.cookie = `bcsig=${bookingStatus.data.sig}; Path=/; Max-Age=60; Secure; SameSite=Strict`
      const confirmationUrl = `${bookingConfirmation(lang)}?RefId=${encodeURIComponent(mainRoom.refId)}`
      router.push(confirmationUrl)
    } else if (bookingStatus.isTimeout) {
      handlePaymentError("Timeout")
    }
  }, [
    bookingStatus.data,
    bookingStatus.isTimeout,
    router,
    intl,
    lang,
    handlePaymentError,
  ])

  const getPaymentMethod = useCallback(
    (paymentMethod: string | null | undefined): PaymentMethodEnum => {
      if (hasFlexRates) {
        return PaymentMethodEnum.card
      }
      return paymentMethod && isPaymentMethodEnum(paymentMethod)
        ? paymentMethod
        : PaymentMethodEnum.card
    },
    [hasFlexRates]
  )

  const scrollToInvalidField = useCallback(async (): Promise<boolean> => {
    // If any room is not complete/valid, scroll to the first invalid field, this is needed as rooms and other fields are in separate forms

    const invalidField = await runPreSubmitCallbacks()
    const errorNames = Object.keys(methods.formState.errors)
    const firstIncompleteRoomIndex = rooms.findIndex((room) => !room.isComplete)

    const scrollToElement = (el: HTMLElement) => {
      const offset = getTopOffset()
      const top = el.getBoundingClientRect().top + window.scrollY - offset - 20
      window.scrollTo({ top, behavior: "smooth" })
      const input = el.querySelector<HTMLElement>("input")
      input?.focus({ preventScroll: true })
    }

    if (invalidField) {
      scrollToElement(invalidField)
    } else if (errorNames.length > 0) {
      const firstErrorEl = document.querySelector(`[name="${errorNames[0]}"]`)
      if (firstErrorEl) {
        scrollToElement(firstErrorEl as HTMLElement)
      }
    }

    return firstIncompleteRoomIndex !== -1
  }, [runPreSubmitCallbacks, rooms, methods.formState.errors, getTopOffset])

  const handleSubmit = useCallback(
    async (data: PaymentFormData) => {
      setIsSubmitting(true)

      const isRoomInvalid = await scrollToInvalidField()
      if (isRoomInvalid) {
        setIsSubmitting(false)
        return
      }

      const paymentMethod = getPaymentMethod(data.paymentMethod)

      const savedCreditCard = savedCreditCards?.find(
        (card) => card.id === data.paymentMethod
      )

      const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback`
      const guarantee = data.guarantee
      const useSavedCard = savedCreditCard
        ? {
            card: {
              alias: savedCreditCard.alias,
              expiryDate: savedCreditCard.expirationDate,
              cardType: savedCreditCard.cardType,
            },
          }
        : {}

      const shouldUsePayment =
        guarantee || bookingMustBeGuaranteed || !hasOnlyFlexRates
      const payment = shouldUsePayment
        ? {
            paymentMethod: paymentMethod,
            ...useSavedCard,
            success: `${paymentRedirectUrl}/success`,
            error: `${paymentRedirectUrl}/error`,
            cancel: `${paymentRedirectUrl}/cancel`,
          }
        : undefined
      const paymentMethodType = savedCreditCard
        ? savedCreditCard.type
        : paymentMethod
      if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
        const lateArrivalGuarantee = guarantee ? "yes" : "mandatory"
        writeGlaToSessionStorage(
          lateArrivalGuarantee,
          hotelId,
          paymentMethodType,
          !!savedCreditCard
        )
        trackGlaSaveCardAttempt({
          hotelId,
          hasSavedCreditCard: !!savedCreditCard,
          creditCardType: savedCreditCard?.cardType,
          lateArrivalGuarantee,
        })
      } else if (!hasOnlyFlexRates) {
        trackPaymentEvent({
          event: "paymentAttemptStart",
          hotelId,
          method: paymentMethodType,
          isSavedCreditCard: !!savedCreditCard,
          smsEnable: data.smsConfirmation,
          status: "attempt",
        })
      }
      writePaymentInfoToSessionStorage(paymentMethodType, !!savedCreditCard)

      const payload: CreateBookingInput = {
        checkInDate: fromDate,
        checkOutDate: toDate,
        hotelId,
        language: lang,
        payment,
        rooms: rooms.map(
          ({ room }, idx): CreateBookingInput["rooms"][number] => {
            const isMainRoom = idx === 0
            let rateCode = ""
            if (isMainRoom && isUserLoggedIn) {
              rateCode = booking.rooms[idx].rateCode
            } else if (
              (room.guest.join || room.guest.membershipNo) &&
              booking.rooms[idx].counterRateCode
            ) {
              rateCode = booking.rooms[idx].counterRateCode
            } else {
              rateCode = booking.rooms[idx].rateCode
            }

            const phoneNumber = formatPhoneNumber(
              room.guest.phoneNumber,
              room.guest.phoneNumberCC
            )

            const guest: CreateBookingInput["rooms"][number]["guest"] = {
              becomeMember: room.guest.join,
              countryCode: room.guest.countryCode,
              email: room.guest.email,
              firstName: room.guest.firstName,
              lastName: room.guest.lastName,
              membershipNumber: room.guest.membershipNo,
              phoneNumber,
              partnerLoyaltyNumber: null,
            }

            if (isMainRoom) {
              // Only valid for main room
              guest.partnerLoyaltyNumber =
                user?.data?.partnerLoyaltyNumber || null
              guest.dateOfBirth =
                "dateOfBirth" in room.guest && room.guest.dateOfBirth
                  ? room.guest.dateOfBirth
                  : undefined
              guest.postalCode =
                "zipCode" in room.guest && room.guest.zipCode
                  ? room.guest.zipCode
                  : undefined
            }

            const packages: CreateBookingInput["rooms"][number]["packages"] = {
              accessibility:
                room.roomFeatures?.some(
                  (feature) =>
                    feature.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
                ) ?? false,
              allergyFriendly:
                room.roomFeatures?.some(
                  (feature) => feature.code === RoomPackageCodeEnum.ALLERGY_ROOM
                ) ?? false,
              breakfast: !!(room.breakfast && room.breakfast.code),
              petFriendly:
                room.roomFeatures?.some(
                  (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
                ) ?? false,
            }

            return {
              adults: room.adults,
              bookingCode: room.roomRate.bookingCode,
              childrenAges: room.childrenInRoom?.map((child) => ({
                age: child.age,
                bedType: bedTypeMap[parseInt(child.bed.toString())],
              })),
              guest,
              packages,
              rateCode,
              roomPrice: {
                memberPrice:
                  "member" in room.roomRate
                    ? room.roomRate.member?.localPrice.pricePerStay
                    : undefined,
                publicPrice:
                  "public" in room.roomRate
                    ? room.roomRate.public?.localPrice.pricePerStay
                    : undefined,
              },
              roomTypeCode: room.bedType!.roomTypeCode, // A selection has been made in order to get to this step.
              smsConfirmationRequested: data.smsConfirmation,
              specialRequest: {
                comment: room.specialRequest.comment
                  ? room.specialRequest.comment
                  : undefined,
              },
            }
          }
        ),
      }
      initiateBooking.mutate(payload)
    },
    [
      setIsSubmitting,
      scrollToInvalidField,
      getPaymentMethod,
      savedCreditCards,
      lang,
      bookingMustBeGuaranteed,
      hasOnlyFlexRates,
      fromDate,
      toDate,
      hotelId,
      rooms,
      initiateBooking,
      isUserLoggedIn,
      booking.rooms,
      user?.data?.partnerLoyaltyNumber,
    ]
  )

  const finalStep = intl.formatMessage({
    id: "enterDetails.payment.onlyFlexRatesTitle",
    defaultMessage: "Final step",
  })
  const selectPayment = intl.formatMessage({
    id: "enterDetails.payment.title",
    defaultMessage: "Select payment method",
  })

  const handleInvalidSubmit = async () => {
    const valid = await methods.trigger()
    if (!valid) {
      await scrollToInvalidField()
    }
  }

  return (
    <section
      className={cx(styles.paymentSection, {
        [styles.disabled]: isSubmitting,
      })}
    >
      <header>
        <Typography variant="Title/Subtitle/md">
          <span>{hasOnlyFlexRates ? finalStep : selectPayment}</span>
        </Typography>
        <BookingAlert isVisible={showBookingAlert} />
      </header>
      <FormProvider {...methods}>
        <form
          className={styles.paymentContainer}
          onSubmit={methods.handleSubmit(handleSubmit, handleInvalidSubmit)}
          id={formId}
        >
          {booking.searchType === SEARCH_TYPE_REDEMPTION ? (
            <ConfirmBookingRedemption />
          ) : hasOnlyFlexRates && !bookingMustBeGuaranteed ? (
            <ConfirmBooking savedCreditCards={savedCreditCards} />
          ) : (
            <>
              {hasOnlyFlexRates && bookingMustBeGuaranteed ? (
                <section className={styles.section}>
                  <Body>
                    {intl.formatMessage({
                      id: "enterDetails.payment.guaranteeInfo",
                      defaultMessage:
                        "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}

              {hasMixedRates ? (
                <Body>
                  {intl.formatMessage({
                    id: "enterDetails.payment.mixedRatesInfo",
                    defaultMessage:
                      "As your booking includes rooms with different terms, we will be charging part of the booking now and the remainder will be collected by the reception at check-in.",
                  })}
                </Body>
              ) : null}

              <section className={styles.section}>
                <PaymentOptionsGroup
                  name="paymentMethod"
                  className={styles.paymentOptionContainer}
                >
                  <Label className="sr-only">
                    {intl.formatMessage({
                      id: "enterDetails.payment.paymentMethods",
                      defaultMessage: "Payment methods",
                    })}
                  </Label>

                  {savedCreditCards?.length ? (
                    <>
                      <Typography variant="Title/Overline/sm">
                        <span>
                          {intl.formatMessage({
                            id: "payment.mySavedCards",
                            defaultMessage: "My saved cards",
                          })}
                        </span>
                      </Typography>

                      {savedCreditCards.map((savedCreditCard) => (
                        <PaymentOption
                          key={savedCreditCard.id}
                          value={savedCreditCard.id as PaymentMethodEnum}
                          label={
                            PAYMENT_METHOD_TITLES[
                              savedCreditCard.cardType as PaymentMethodEnum
                            ]
                          }
                          cardNumber={savedCreditCard.truncatedNumber}
                        />
                      ))}

                      <Typography variant="Title/Overline/sm">
                        <span>
                          {intl.formatMessage({
                            id: "enterDetails.payment.otherPaymentMethods",
                            defaultMessage: "Other payment methods",
                          })}
                        </span>
                      </Typography>
                    </>
                  ) : null}
                  <PaymentOption
                    value={PaymentMethodEnum.card}
                    label={intl.formatMessage({
                      id: "common.creditCard",
                      defaultMessage: "Credit card",
                    })}
                  />
                  {!hasMixedRates &&
                    availablePaymentOptions.map((paymentMethod) => (
                      <PaymentOption
                        key={paymentMethod}
                        value={paymentMethod}
                        label={
                          PAYMENT_METHOD_TITLES[
                            paymentMethod as PaymentMethodEnum
                          ]
                        }
                      />
                    ))}
                </PaymentOptionsGroup>
                {hasMixedRates ? (
                  <MixedRatePaymentBreakdown
                    rooms={rooms}
                    currency={totalPrice.local.currency}
                  />
                ) : null}
              </section>

              <div className={styles.checkboxContainer}>
                <Checkbox name="smsConfirmation">
                  <Typography variant="Body/Supporting text (caption)/smRegular">
                    <span>
                      {intl.formatMessage({
                        id: "booking.smsConfirmationLabel",
                        defaultMessage:
                          "I would like to get my booking confirmation via sms",
                      })}
                    </span>
                  </Typography>
                </Checkbox>
              </div>

              <section className={styles.section}>
                <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
              </section>
            </>
          )}
          <div className={styles.submitButton}>
            <Button
              type="submit"
              isDisabled={isSubmitting}
              isPending={isSubmitting}
              typography="Body/Supporting text (caption)/smBold"
            >
              {intl.formatMessage({
                id: "enterDetails.completeBooking",
                defaultMessage: "Complete booking",
              })}
            </Button>
          </div>
        </form>
      </FormProvider>
      {priceChangeData ? (
        <PriceChangeDialog
          isOpen={!!priceChangeData}
          priceChangeData={priceChangeData}
          prevTotalPrice={totalPrice.local.price}
          currency={totalPrice.local.currency}
          onCancel={() => {
            const allSearchParams = searchParams.size
              ? `?${searchParams.toString()}`
              : ""
            router.push(`${selectRate(lang)}${allSearchParams}`)
          }}
          onAccept={() => priceChange.mutate({ refId })}
        />
      ) : null}
    </section>
  )
}