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

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css

@@ -0,0 +1,21 @@
+.content {
+  display: grid;
+  gap: var(--Space-x3);
+  align-content: start;
+  margin-top: var(--Space-x2);
+}
+
+.closeButton {
+  justify-self: stretch;
+}
+
+@media screen and (min-width: 768px) {
+  .dialog {
+    width: 560px;
+  }
+
+  .closeButton {
+    justify-self: end;
+    min-width: 150px;
+  }
+}

packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Modal from "@scandic-hotels/design-system/Modal"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./guaranteeInfo.module.css"
+
+interface GuaranteeInfoProps {
+  buttonClassName?: string
+}
+
+export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const intl = useIntl()
+
+  return (
+    <>
+      <Button
+        variant="Text"
+        color="Primary"
+        size="Small"
+        type="button"
+        typography="Body/Supporting text (caption)/smBold"
+        wrapping={false}
+        className={buttonClassName}
+        onPress={() => setIsOpen(true)}
+      >
+        <MaterialIcon icon="info" size={20} color="CurrentColor" />
+        {intl.formatMessage({
+          id: "common.learnMore",
+          defaultMessage: "Learn more",
+        })}
+      </Button>
+      <Modal
+        title={intl.formatMessage({
+          id: "enterDetails.guaranteeInfo.heading",
+          defaultMessage: "Guarantee room for late arrival",
+        })}
+        isOpen={isOpen}
+        onToggle={setIsOpen}
+        className={styles.dialog}
+      >
+        <div className={styles.content}>
+          <Typography variant="Body/Lead text">
+            <p>
+              {intl.formatMessage({
+                id: "enterDetails.guaranteeInfo.description",
+                defaultMessage:
+                  "The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, your credit card will be charged for the first night.",
+              })}
+            </p>
+          </Typography>
+          <Button
+            className={styles.closeButton}
+            variant="Secondary"
+            color="Primary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+            onPress={() => setIsOpen(false)}
+          >
+            {intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}

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 ? (

packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -1,15 +1,14 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../hooks/useLang"
 import { paymentError } from "../schema"
 
-import styles from "../payment.module.css"
+import styles from "./termsAndConditions.module.css"
 
 type TermsAndConditionsProps = {
   isFlexBookingTerms: boolean
@@ -22,81 +21,10 @@ export default function TermsAndConditions({
   const { routes } = useBookingFlowConfig()
 
   return (
-    <>
-      <Caption>
-        {isFlexBookingTerms
-          ? intl.formatMessage(
-              {
-                id: "enterDetails.payment.flexBookingTermsAndConditions",
-                defaultMessage:
-                  "I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
-              },
-              {
-                termsAndConditionsLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    textDecoration="underline"
-                    href={routes.bookingTermsAndConditions[lang]}
-                    target="_blank"
-                    weight="bold"
-                    size="small"
-                  >
-                    {str}
-                  </Link>
-                ),
-                privacyPolicyLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    textDecoration="underline"
-                    href={routes.privacyPolicy[lang]}
-                    target="_blank"
-                    weight="bold"
-                    size="small"
-                  >
-                    {str}
-                  </Link>
-                ),
-              }
-            )
-          : intl.formatMessage(
-              {
-                id: "enterDetails.payment.termsAndConditions",
-                defaultMessage:
-                  "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
-              },
-              {
-                termsAndConditionsLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    textDecoration="underline"
-                    href={routes.bookingTermsAndConditions[lang]}
-                    target="_blank"
-                    weight="bold"
-                    size="small"
-                  >
-                    {str}
-                  </Link>
-                ),
-                privacyPolicyLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    textDecoration="underline"
-                    href={routes.privacyPolicy[lang]}
-                    target="_blank"
-                    weight="bold"
-                    size="small"
-                  >
-                    {str}
-                  </Link>
-                ),
-              }
-            )}
-      </Caption>
+    <div className={styles.termsAndConditions}>
       <Checkbox
         name="termsAndConditions"
-        registerOptions={{
-          required: true,
-        }}
+        registerOptions={{ required: true }}
         errorCodeMessages={{
           [paymentError.TERMS_REQUIRED]: intl.formatMessage({
             id: "common.mustAcceptTermsError",
@@ -104,7 +32,7 @@ export default function TermsAndConditions({
           }),
         }}
       >
-        <Typography variant="Body/Paragraph/mdBold">
+        <Typography variant="Body/Supporting text (caption)/smBold">
           <span>
             {intl.formatMessage({
               id: "booking.acceptBookingTerms",
@@ -113,6 +41,73 @@ export default function TermsAndConditions({
           </span>
         </Typography>
       </Checkbox>
-    </>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {isFlexBookingTerms
+            ? intl.formatMessage(
+                {
+                  id: "enterDetails.payment.flexBookingTermsAndConditions",
+                  defaultMessage:
+                    "I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
+                },
+                {
+                  termsAndConditionsLink: (str) => (
+                    <TextLink
+                      href={routes.bookingTermsAndConditions[lang]}
+                      theme="InteractiveDefault"
+                      typography="Link/sm"
+                      target="_blank"
+                      isInline
+                    >
+                      {str}
+                    </TextLink>
+                  ),
+                  privacyPolicyLink: (str) => (
+                    <TextLink
+                      href={routes.privacyPolicy[lang]}
+                      theme="InteractiveDefault"
+                      typography="Link/sm"
+                      target="_blank"
+                      isInline
+                    >
+                      {str}
+                    </TextLink>
+                  ),
+                }
+              )
+            : intl.formatMessage(
+                {
+                  id: "enterDetails.payment.termsAndConditions",
+                  defaultMessage:
+                    "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
+                },
+                {
+                  termsAndConditionsLink: (str) => (
+                    <TextLink
+                      href={routes.bookingTermsAndConditions[lang]}
+                      theme="InteractiveDefault"
+                      typography="Link/sm"
+                      target="_blank"
+                      isInline
+                    >
+                      {str}
+                    </TextLink>
+                  ),
+                  privacyPolicyLink: (str) => (
+                    <TextLink
+                      href={routes.privacyPolicy[lang]}
+                      theme="InteractiveDefault"
+                      typography="Link/sm"
+                      target="_blank"
+                      isInline
+                    >
+                      {str}
+                    </TextLink>
+                  ),
+                }
+              )}
+        </p>
+      </Typography>
+    </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/termsAndConditions.module.css

@@ -0,0 +1,5 @@
+.termsAndConditions {
+  display: grid;
+  gap: var(--Space-x1);
+  justify-items: start;
+}

packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css

@@ -1,63 +1,51 @@
 .paymentSection {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x4);
+  display: grid;
+  gap: var(--Space-x2);
+  width: min(100%, 696px);
+
+  &.isSubmitting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
-.disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.header {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: flex-start;
 }
 
-.paymentContainer {
-  display: flex;
-  flex-direction: column;
+.paymentForm {
+  display: grid;
   gap: var(--Space-x4);
   max-width: 696px;
 }
 
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x2);
+@media screen and (max-width: 767px) {
+  .header {
+    flex-direction: column;
+  }
 }
 
-.paymentOptionContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Space-x15);
-}
-
-.submitButton {
-  display: none;
-}
-
-.paymentContainer .link {
-  font-weight: 500;
-  font-size: var(--Typography-Caption-Regular-fontSize);
-}
-
-.terms {
-  display: flex;
-  flex-direction: row;
-  gap: var(--Space-x15);
-}
-
-.checkboxContainer {
-  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-Large);
-  padding: var(--Space-x2);
-}
-
-@media screen and (min-width: 1367px) {
-  .submitButton {
-    display: flex;
-    align-self: flex-start;
+@media screen and (min-width: 768px) {
+  .header {
+    justify-content: space-between;
   }
 }
 
 @media screen and (max-width: 1366px) {
-  .paymentContainer {
+  .paymentForm {
     margin-bottom: 200px;
   }
+
+  .submitButton {
+    display: none;
+  }
 }
+
+@media screen and (min-width: 1367px) {
+  .submitButton {
+    justify-self: start;
+  }
+}
+

packages/booking-flow/lib/components/EnterDetails/Payment/utils.ts

@@ -0,0 +1,41 @@
+import type { IntlShape } from "react-intl"
+
+export function getPaymentHeadingConfig(
+  intl: IntlShape,
+  bookingMustBeGuaranteed: boolean,
+  hasOnlyFlexRates: boolean
+) {
+  if (hasOnlyFlexRates) {
+    return bookingMustBeGuaranteed
+      ? {
+          heading: intl.formatMessage({
+            id: "enterDetails.payment.guaranteePaymentHeading",
+            defaultMessage: "Guarantee with card",
+          }),
+          subHeading: intl.formatMessage({
+            id: "enterDetails.payment.guaranteePaymentSubheading",
+            defaultMessage: "(your card won't be charged now)",
+          }),
+          showLearnMore: true,
+        }
+      : {
+          heading: intl.formatMessage({
+            id: "enterDetails.payment.onlyFlexRatesTitle",
+            defaultMessage: "Final step",
+          }),
+          showLearnMore: false,
+        }
+  }
+
+  return {
+    preHeading: intl.formatMessage({
+      id: "enterDetails.payment.label",
+      defaultMessage: "Payment",
+    }),
+    heading: intl.formatMessage({
+      id: "enterDetails.payment.title",
+      defaultMessage: "Select payment method",
+    }),
+    showLearnMore: false,
+  }
+}