feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Approved-by: Bianca Widstam

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

@@ -4,14 +4,10 @@ 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 { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import {
   bookingConfirmation,
   selectRate,
@@ -19,11 +15,7 @@ import {
 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 {
@@ -37,27 +29,25 @@ 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 ConfirmBooking from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
 import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import BookingAlert from "./BookingAlert"
-import GuaranteeDetails from "./GuaranteeDetails"
+import { GuaranteeInfo } from "./GuaranteeInfo"
 import {
   hasFlexibleRate,
   hasPrepaidRate,
   isPaymentMethodEnum,
   writePaymentInfoToSessionStorage,
 } from "./helpers"
-import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
 import { type PaymentFormData, paymentSchema } from "./schema"
-import TermsAndConditions from "./TermsAndConditions"
+import { getPaymentHeadingConfig } from "./utils"
 
 import styles from "./payment.module.css"
 
@@ -125,8 +115,6 @@ export default function PaymentClient({
   const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
     useState(false)
 
-  const availablePaymentOptions =
-    useAvailablePaymentOptions(otherPaymentOptions)
   const [priceChangeData, setPriceChangeData] =
     useState<PriceChangeData | null>(null)
 
@@ -136,6 +124,7 @@ export default function PaymentClient({
   const hasFlexRates = rooms.some(hasFlexibleRate)
   const hasOnlyFlexRates = rooms.every(hasFlexibleRate)
   const hasMixedRates = hasPrepaidRates && hasFlexRates
+  const isRedemptionBooking = booking.searchType === SEARCH_TYPE_REDEMPTION
 
   const methods = useForm<PaymentFormData>({
     defaultValues: {
@@ -527,15 +516,6 @@ export default function PaymentClient({
     ]
   )
 
-  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) {
@@ -543,159 +523,62 @@ export default function PaymentClient({
     }
   }
 
+  const { preHeading, heading, subHeading, showLearnMore } =
+    getPaymentHeadingConfig(intl, bookingMustBeGuaranteed, hasOnlyFlexRates)
+
   return (
     <section
       className={cx(styles.paymentSection, {
-        [styles.disabled]: isSubmitting,
+        [styles.isSubmitting]: isSubmitting,
       })}
     >
-      <header>
-        <Typography variant="Title/Subtitle/md">
-          <span>{hasOnlyFlexRates ? finalStep : selectPayment}</span>
-        </Typography>
-        <BookingAlert isVisible={showBookingAlert} />
+      <header className={styles.header}>
+        <div>
+          {preHeading ? (
+            <Typography variant="Title/Overline/sm">
+              <p>{preHeading}</p>
+            </Typography>
+          ) : null}
+          <Typography variant="Title/Subtitle/md">
+            <h2>{heading}</h2>
+          </Typography>
+          {subHeading ? (
+            <Typography variant="Body/Paragraph/mdBold">
+              <p>{subHeading}</p>
+            </Typography>
+          ) : null}
+        </div>
+        {showLearnMore ? <GuaranteeInfo /> : null}
       </header>
+      <BookingAlert isVisible={showBookingAlert} />
       <FormProvider {...methods}>
         <form
-          className={styles.paymentContainer}
+          className={styles.paymentForm}
           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}
+          <ConfirmBooking
+            savedCreditCards={savedCreditCards}
+            otherPaymentOptions={otherPaymentOptions}
+            hasOnlyFlexRates={hasOnlyFlexRates}
+            hasMixedRates={hasMixedRates}
+            isRedemptionBooking={isRedemptionBooking}
+            bookingMustBeGuaranteed={bookingMustBeGuaranteed}
+          />
 
-              {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>
+          <Button
+            className={styles.submitButton}
+            type="submit"
+            isDisabled={isSubmitting}
+            isPending={isSubmitting}
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+          >
+            {intl.formatMessage({
+              id: "enterDetails.completeBooking",
+              defaultMessage: "Complete booking",
+            })}
+          </Button>
         </form>
       </FormProvider>
       {priceChangeData ? (