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

Approved-by: Bianca Widstam

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() {
-  const intl = useIntl()
-  return (
-    <div className={styles.container}>
-      <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">
+  if (isRedemptionBooking) {
+    return (
+      <div className={styles.confirmBooking}>
+        <Typography variant="Body/Paragraph/mdRegular">
           <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>
   )
 }