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

Approved-by: Bianca Widstam

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}
+    </>
+  )
+}