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

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css

@@ -1,102 +1,46 @@
-@keyframes overlay-fade {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-anim {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
 .guarantee {
-  display: flex;
+  display: grid;
-  flex-direction: column;
-  gap: var(--Space-x1);
-}
-
-.checkboxContainer {
-  align-items: center;
-  display: flex;
-  flex: 1;
-  gap: var(--Space-x1);
-  justify-content: space-between;
-}
-
-.infoButton {
-  display: flex;
-  gap: var(--Space-x05);
-  justify-self: flex-end;
-  outline: none;
-}
-.infoButton:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color;
-  outline-offset: 1px;
-}
-
-.overlay {
-  align-items: center;
-  background-color: var(--Overlay-40);
-  display: flex;
-  inset: 0;
-  justify-content: center;
-  position: fixed;
-  z-index: var(--default-modal-overlay-z-index);
-
-  &[data-entering] {
-    animation: overlay-fade 200ms;
-  }
-
-  &[data-exiting] {
-    animation: overlay-fade 150ms reverse ease-in;
-  }
-}
-
-.modal {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-lg);
-  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
-  overflow: hidden;
-  padding: var(--Space-x5) var(--Space-x3);
-  width: min(90dvw, 560px);
-
-  &[data-entering] {
-    animation: modal-anim 200ms;
-  }
-
-  &[data-exiting] {
-    animation: modal-anim 150ms reverse ease-in;
-  }
-}
-
-.container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
   gap: var(--Space-x2);
+  background-color: var(--Surface-Secondary-Default);
+  border-radius: var(--Corner-radius-lg);
+  padding: var(--Space-x2);
 }
 
-.text {
+.paymentRequired {
-  text-align: center;
+  display: flex;
+  gap: var(--Space-x15);
+  align-items: flex-start;
 }
 
-.closeButton {
+.guaranteeQuestion {
-  margin-top: var(--Space-x15);
+  display: grid;
-  outline: none;
+  gap: var(--Space-x1);
-  width: min(164px, 100%);
+  justify-items: start;
 }
 
-@media screen and (max-width: 767px) {
+.textWrapper {
-  .btnText {
+  display: grid;
-    display: none;
+  gap: var(--Space-x025);
+  flex-grow: 1;
+}
+
+.checkbox {
+  flex-grow: 1;
+}
+
+.guaranteeInfoButton {
+  flex-shrink: 0;
+  margin-left: calc(var(--Space-x3) + var(--Space-x15)); /* Align with checkbox */
+}
+
+@media screen and (min-width: 768px) {
+  .guaranteeQuestion {
+    display: flex;
+    gap: var(--Space-x15);
+    align-items: center;
+  }
+
+  .guaranteeInfoButton {
+    margin-left: 0;
   }
 }

packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx

@@ -1,21 +1,13 @@
-"use client"
-import { useLayoutEffect } from "react"
-import {
-  Dialog,
-  DialogTrigger,
-  Modal,
-  ModalOverlay,
-} from "react-aria-components"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
+import { Divider } from "@scandic-hotels/design-system/Divider"
-import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-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 { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment"
+
+import { GuaranteeInfo } from "../../Payment/GuaranteeInfo"
+import { ConfirmBookingPaymentOptions } from "../PaymentOptions"
 
 import styles from "./guarantee.module.css"
 
@@ -23,114 +15,89 @@ import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/payment
 import type { CreditCard } from "@scandic-hotels/trpc/types/user"
 
 interface GuaranteeProps {
+  mustBeGuaranteed: boolean
   savedCreditCards: CreditCard[] | null
+  otherPaymentOptions: PaymentMethodEnum[]
 }
 
-export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
+export function Guarantee({
+  mustBeGuaranteed,
+  savedCreditCards,
+  otherPaymentOptions,
+}: GuaranteeProps) {
   const intl = useIntl()
   const guarantee = useWatch({ name: "guarantee" })
 
   return (
     <div className={styles.guarantee}>
-      <Checkbox name="guarantee">
+      {!mustBeGuaranteed ? (
-        <div className={styles.checkboxContainer}>
+        <>
-          <Typography variant="Body/Supporting text (caption)/smRegular">
+          <div className={styles.guaranteeQuestion}>
-            <span>
+            <Checkbox name="guarantee" topAlign className={styles.checkbox}>
-              {intl.formatMessage({
+              <div className={styles.textWrapper}>
-                id: "enterDetails.confirmBooking.guaranteeLabel",
+                <Typography variant="Body/Supporting text (caption)/smBold">
-                defaultMessage:
+                  <p>
-                  "I may arrive later than 18:00 and want to guarantee my booking.",
+                    {intl.formatMessage({
-              })}
+                      id: "enterDetails.guarantee.guaranteeLabel",
-            </span>
+                      defaultMessage: "Guarantee for late arrival",
-          </Typography>
+                    })}
-          <DialogTrigger>
+                  </p>
-            <Button
+                </Typography>
-              className={styles.infoButton}
+                <Typography variant="Body/Supporting text (caption)/smRegular">
-              size="Small"
+                  <p>
-              typography="Body/Supporting text (caption)/smBold"
+                    {intl.formatMessage({
-              variant="Text"
+                      id: "enterDetails.guarantee.guaranteeInfo",
-            >
+                      defaultMessage:
-              <MaterialIcon icon="info" size={20} color="CurrentColor" />
+                        "I may arrive later than 18:00 and want the hotel to hold my booking.",
-              <span className={styles.btnText}>
+                    })}
-                {intl.formatMessage({
+                  </p>
-                  id: "common.howItWorks",
+                </Typography>
-                  defaultMessage: "How it works",
+              </div>
-                })}
+            </Checkbox>
-              </span>
+            <GuaranteeInfo buttonClassName={styles.guaranteeInfoButton} />
-            </Button>
+          </div>
-            <ModalOverlay className={styles.overlay} isDismissable>
+          {guarantee ? <Divider color="Border/Divider/Default" /> : null}
-              <Modal className={styles.modal}>
+        </>
-                <Dialog>
+      ) : null}
-                  {({ close }) => (
-                    <div className={styles.container}>
-                      <Typography variant="Title/Subtitle/lg">
-                        <h3>
-                          {intl.formatMessage({
-                            id: "enterDetails.confirmBooking.guaranteeInfoModalTitle",
-                            defaultMessage: "Guarantee for late arrival",
-                          })}
-                        </h3>
-                      </Typography>
-                      <Typography variant="Body/Lead text">
-                        <p className={styles.text}>
-                          {intl.formatMessage({
-                            id: "enterDetails.confirmBooking.guaranteeInfoModalDescription",
-                            defaultMessage:
-                              "When guaranteeing your booking with a credit card, we will hold the booking until 07:00 the day after check-in.",
-                          })}
-                        </p>
-                      </Typography>
-                      <Typography variant="Body/Paragraph/mdRegular">
-                        <p className={styles.text}>
-                          {intl.formatMessage({
-                            id: "enterDetails.confirmBooking.guaranteeInfoModalNoShowInfo",
-                            defaultMessage:
-                              "In case of a no-show, your credit card will be charged for the first night.",
-                          })}
-                        </p>
-                      </Typography>
-                      <Button
-                        className={styles.closeButton}
-                        onPress={close}
-                        size="Small"
-                        typography="Body/Paragraph/mdBold"
-                        variant="Secondary"
-                      >
-                        {intl.formatMessage({
-                          id: "common.close",
-                          defaultMessage: "Close",
-                        })}
-                      </Button>
-                      <RestoreOverflow />
-                    </div>
-                  )}
-                </Dialog>
-              </Modal>
-            </ModalOverlay>
-          </DialogTrigger>
-        </div>
-      </Checkbox>
 
-      {guarantee && (
+      {mustBeGuaranteed || guarantee ? (
-        <SelectPaymentMethod
+        <>
-          paymentMethods={(savedCreditCards ?? []).map((card) => ({
+          <div className={styles.paymentRequired}>
-            ...card,
+            <MaterialIcon icon="credit_card" size={24} color="CurrentColor" />
-            cardType: card.cardType as PaymentMethodEnum,
+            <div className={styles.textWrapper}>
-          }))}
+              <Typography variant="Body/Supporting text (caption)/smBold">
-          onChange={(method) => {
+                <p>
-            trackUpdatePaymentMethod({ method })
+                  {intl.formatMessage({
-          }}
+                    id: "enterDetails.guarantee.paymentCardRequiredLabel",
-          formName={"paymentMethod"}
+                    defaultMessage:
-        />
+                      "Payment card required to hold your booking",
-      )}
+                  })}
+                </p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>
+                  {intl.formatMessage({
+                    id: "enterDetails.guarantee.paymentCardRequiredInfo",
+                    defaultMessage:
+                      "Complete the booking and provide your payment card details in the next step.",
+                  })}
+                </p>
+              </Typography>
+            </div>
+          </div>
+
+          {savedCreditCards && savedCreditCards.length ? (
+            <>
+              <Divider color="Border/Divider/Default" />
+              <ConfirmBookingPaymentOptions
+                savedCreditCards={savedCreditCards}
+                hasMixedRates={false}
+                otherPaymentOptions={otherPaymentOptions}
+              />
+            </>
+          ) : null}
+        </>
+      ) : null}
     </div>
   )
 }
-
-function RestoreOverflow() {
-  const setOverflowVisible = useSetOverflowVisibleOnRA()
-  useLayoutEffect(() => {
-    setOverflowVisible(true)
-  }, [setOverflowVisible])
-  return null
-}

packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { Label } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import {
+  PAYMENT_METHOD_TITLES,
+  PaymentMethodEnum,
+} from "@scandic-hotels/common/constants/paymentMethod"
+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 { useAvailablePaymentOptions } from "../../../../hooks/useAvailablePaymentOptions"
+import { useEnterDetailsStore } from "../../../../stores/enter-details"
+import MixedRatePaymentBreakdown from "../../Payment/MixedRatePaymentBreakdown"
+
+import styles from "./paymentOptions.module.css"
+
+import type { CreditCard } from "@scandic-hotels/trpc/types/user"
+
+interface ConfirmBookingPaymentOptionsProps {
+  savedCreditCards: CreditCard[] | null
+  hasMixedRates: boolean
+  otherPaymentOptions: PaymentMethodEnum[]
+}
+
+export function ConfirmBookingPaymentOptions({
+  savedCreditCards,
+  hasMixedRates,
+  otherPaymentOptions,
+}: ConfirmBookingPaymentOptionsProps) {
+  const intl = useIntl()
+  const { rooms, currency } = useEnterDetailsStore((state) => ({
+    rooms: state.rooms,
+    currency: state.totalPrice.local.currency,
+  }))
+  const availablePaymentOptions =
+    useAvailablePaymentOptions(otherPaymentOptions)
+
+  return (
+    <>
+      <PaymentOptionsGroup
+        name="paymentMethod"
+        className={styles.paymentOptions}
+      >
+        <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]}
+              />
+            ))
+          : null}
+      </PaymentOptionsGroup>
+
+      {hasMixedRates ? (
+        <MixedRatePaymentBreakdown rooms={rooms} currency={currency} />
+      ) : null}
+    </>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/paymentOptions.module.css

@@ -0,0 +1,4 @@
+.paymentOptions {
+  display: grid;
+  gap: var(--Space-x15);
+}

packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx

@@ -0,0 +1,21 @@
+import { useIntl } from "react-intl"
+
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+export default function SmsConfirmation() {
+  const intl = useIntl()
+  return (
+    <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>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css

@@ -1,12 +1,11 @@
-.container {
+.confirmBooking {
-  display: flex;
+  display: grid;
-  flex-direction: column;
   gap: var(--Space-x3);
 }
 
 .selections {
   background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-Large);
+  border-radius: var(--Corner-radius-lg);
   display: flex;
   flex-direction: column;
   gap: var(--Space-x2);

packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx

@@ -2,67 +2,41 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import TermsAndConditions from "../Payment/TermsAndConditions"
-import Guarantee from "./Guarantee"
+import { Guarantee } from "./Guarantee"
+import { ConfirmBookingPaymentOptions } from "./PaymentOptions"
+import SmsConfirmation from "./SmsConfirmation"
 
 import styles from "./confirm.module.css"
 
+import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import type { CreditCard } from "@scandic-hotels/trpc/types/user"
 
 interface ConfirmBookingProps {
   savedCreditCards: CreditCard[] | null
+  otherPaymentOptions: PaymentMethodEnum[]
+  hasOnlyFlexRates: boolean
+  hasMixedRates: boolean
+  isRedemptionBooking: boolean
+  bookingMustBeGuaranteed: boolean
 }
 
 export default function ConfirmBooking({
   savedCreditCards,
+  otherPaymentOptions,
+  hasOnlyFlexRates,
+  hasMixedRates,
+  isRedemptionBooking,
+  bookingMustBeGuaranteed,
 }: ConfirmBookingProps) {
   const intl = useIntl()
-  return (
-    <div className={styles.container}>
-      <div className={styles.selections}>
-        <Guarantee savedCreditCards={savedCreditCards} />
-        <Divider color="Border/Divider/Default" />
-        <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>
-      <div className={styles.checkboxContainer}>
-        <TermsAndConditions isFlexBookingTerms />
-      </div>
-    </div>
-  )
-}
 
-export function ConfirmBookingRedemption() {
+  if (isRedemptionBooking) {
-  const intl = useIntl()
+    return (
-  return (
+      <div className={styles.confirmBooking}>
-    <div className={styles.container}>
+        <Typography variant="Body/Paragraph/mdRegular">
-      <div className={styles.selections}>
-        <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>
-      <div className={styles.guaranteeContainer}>
-        <Typography variant="Body/Supporting text (caption)/smRegular">
           <p>
             {intl.formatMessage({
               id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
@@ -71,10 +45,49 @@ export function ConfirmBookingRedemption() {
             })}
           </p>
         </Typography>
-      </div>
-      <div className={styles.checkboxContainer}>
         <TermsAndConditions isFlexBookingTerms />
+        <SmsConfirmation />
       </div>
+    )
+  }
+
+  if (hasOnlyFlexRates) {
+    return (
+      <div className={styles.confirmBooking}>
+        <Guarantee
+          mustBeGuaranteed={bookingMustBeGuaranteed}
+          savedCreditCards={savedCreditCards}
+          otherPaymentOptions={otherPaymentOptions}
+        />
+        <Divider color="Border/Divider/Subtle" />
+        <TermsAndConditions isFlexBookingTerms />
+        <SmsConfirmation />
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.confirmBooking}>
+      {hasMixedRates ? (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {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.",
+            })}
+          </p>
+        </Typography>
+      ) : null}
+
+      <ConfirmBookingPaymentOptions
+        savedCreditCards={savedCreditCards}
+        hasMixedRates={hasMixedRates}
+        otherPaymentOptions={otherPaymentOptions}
+      />
+
+      <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
+      <SmsConfirmation />
     </div>
   )
 }

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 {
+import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
-  PAYMENT_METHOD_TITLES,
-  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>
+      <header className={styles.header}>
-        <Typography variant="Title/Subtitle/md">
+        <div>
-          <span>{hasOnlyFlexRates ? finalStep : selectPayment}</span>
+          {preHeading ? (
-        </Typography>
+            <Typography variant="Title/Overline/sm">
-        <BookingAlert isVisible={showBookingAlert} />
+              <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 ? (
+          <ConfirmBooking
-            <ConfirmBookingRedemption />
+            savedCreditCards={savedCreditCards}
-          ) : hasOnlyFlexRates && !bookingMustBeGuaranteed ? (
+            otherPaymentOptions={otherPaymentOptions}
-            <ConfirmBooking savedCreditCards={savedCreditCards} />
+            hasOnlyFlexRates={hasOnlyFlexRates}
-          ) : (
+            hasMixedRates={hasMixedRates}
-            <>
+            isRedemptionBooking={isRedemptionBooking}
-              {hasOnlyFlexRates && bookingMustBeGuaranteed ? (
+            bookingMustBeGuaranteed={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 ? (
+          <Button
-                <Body>
+            className={styles.submitButton}
-                  {intl.formatMessage({
+            type="submit"
-                    id: "enterDetails.payment.mixedRatesInfo",
+            isDisabled={isSubmitting}
-                    defaultMessage:
+            isPending={isSubmitting}
-                      "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.",
+            size="Medium"
-                  })}
+            typography="Body/Paragraph/mdBold"
-                </Body>
+          >
-              ) : null}
+            {intl.formatMessage({
-
+              id: "enterDetails.completeBooking",
-              <section className={styles.section}>
+              defaultMessage: "Complete booking",
-                <PaymentOptionsGroup
+            })}
-                  name="paymentMethod"
+          </Button>
-                  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 ? (

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 (
-    <>
+    <div className={styles.termsAndConditions}>
-      <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>
       <Checkbox
         name="termsAndConditions"
-        registerOptions={{
+        registerOptions={{ required: true }}
-          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;
+  display: grid;
-  flex-direction: column;
+  gap: var(--Space-x2);
-  gap: var(--Space-x4);
+  width: min(100%, 696px);
+
+  &.isSubmitting {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
-.disabled {
+.header {
-  opacity: 0.5;
+  display: flex;
-  pointer-events: none;
+  gap: var(--Space-x1);
+  align-items: flex-start;
 }
 
-.paymentContainer {
+.paymentForm {
-  display: flex;
+  display: grid;
-  flex-direction: column;
   gap: var(--Space-x4);
   max-width: 696px;
 }
 
-.section {
+@media screen and (max-width: 767px) {
-  display: flex;
+  .header {
-  flex-direction: column;
+    flex-direction: column;
-  gap: var(--Space-x2);
+  }
 }
 
-.paymentOptionContainer {
+@media screen and (min-width: 768px) {
-  display: flex;
+  .header {
-  flex-direction: column;
+    justify-content: space-between;
-  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 (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,
+  }
+}

packages/design-system/lib/components/Modal/index.tsx

@@ -4,15 +4,14 @@ import { cx } from 'class-variance-authority'
 import { AnimatePresence, motion } from 'motion/react'
 import { type PropsWithChildren, useEffect, useState } from 'react'
 import {
+  Modal as AriaModal,
   Dialog,
   DialogTrigger,
-  Modal as AriaModal,
   ModalOverlay,
 } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
-import Subtitle from '../Subtitle'
 
 import {
   type AnimationState,
@@ -23,8 +22,9 @@ import {
 import { fade, slideInOut } from './motionVariants'
 import { modalContentVariants } from './variants'
 
-import styles from './modal.module.css'
+import { IconButton } from '../IconButton'
 import { Typography } from '../Typography'
+import styles from './modal.module.css'
 
 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -45,7 +45,7 @@ function InnerModal({
   const intl = useIntl()
 
   const contentClassNames = modalContentVariants({
-    withActions: withActions,
+    withActions,
   })
 
   function modalStateHandler(newAnimationState: AnimationState) {
@@ -97,13 +97,15 @@ function InnerModal({
             <>
               {!hideHeader && (
                 <header
-                  className={`${styles.header} ${!subtitle ? styles.verticalCenter : ''}`}
+                  className={cx(styles.header, {
+                    [styles.verticalCenter]: !subtitle,
+                  })}
                 >
                   <div>
                     {title && (
-                      <Subtitle type="one" color="uiTextHighContrast">
+                      <Typography variant="Title/Subtitle/lg">
-                        {title}
+                        <h3>{title}</h3>
-                      </Subtitle>
+                      </Typography>
                     )}
                     {subtitle && (
                       <Typography variant="Body/Lead text">
@@ -112,13 +114,23 @@ function InnerModal({
                     )}
                   </div>
 
-                  <button
+                  <IconButton
-                    onClick={close}
+                    onPress={close}
-                    type="button"
                     className={styles.close}
+                    type="button"
+                    aria-label={intl.formatMessage({
+                      id: 'common.close',
+                      defaultMessage: 'Close',
+                    })}
+                    theme="Black"
+                    style="Muted"
                   >
-                    <MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
+                    <MaterialIcon
-                  </button>
+                      icon="close"
+                      color="Icon/Feedback/Neutral"
+                      size={24}
+                    />
+                  </IconButton>
                 </header>
               )}
 

packages/design-system/lib/components/Modal/modal.module.css

@@ -30,14 +30,10 @@
 }
 
 .header {
-  --button-dimension: 32px;
-
-  box-sizing: content-box;
   display: flex;
   align-items: flex-start;
-  min-height: var(--button-dimension);
   position: relative;
-  padding: var(--Space-x3) var(--Space-x3) 0;
+  padding: var(--Space-x3) var(--Space-x7) 0 var(--Space-x3);
 }
 
 .content {
@@ -57,17 +53,9 @@
 }
 
 .close {
-  background: none;
-  border: none;
-  cursor: pointer;
   position: absolute;
+  top: var(--Space-x2);
   right: var(--Space-x2);
-  width: var(--button-dimension);
-  height: var(--button-dimension);
-  display: flex;
-  align-items: center;
-  padding: 0;
-  justify-content: center;
 }
 
 .verticalCenter {

packages/design-system/lib/components/TextLink/textLink.module.css

@@ -32,3 +32,11 @@
     opacity: 0.7;
   }
 }
+
+.theme-interactive-default:not(.disabled) {
+  color: var(--Text-Interactive-Default);
+
+  &:hover {
+    color: var(--Text-Interactive-Default-Hover);
+  }
+}

packages/design-system/lib/components/TextLink/variants.ts

@@ -13,6 +13,7 @@ export const config = {
     theme: {
       Primary: styles['theme-primary'],
       Inverted: styles['theme-inverted'],
+      InteractiveDefault: styles['theme-interactive-default'],
     },
   },
   defaultVariants: {