feat: change GLA to be more clear to the user

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -1,23 +1,13 @@
 "use client"
-
-import { useState } from "react"
-import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { PaymentMethodEnum } from "@/constants/booking"
-
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
-import Modal from "@/components/Modal"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 
-import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
 import TermsAndConditions from "../Payment/TermsAndConditions"
+import Guarantee from "./Guarantee"
 
 import styles from "./confirm.module.css"
 
@@ -31,108 +21,21 @@ export default function ConfirmBooking({
   savedCreditCards,
 }: ConfirmBookingProps) {
   const intl = useIntl()
-  const [isModalOpen, setModalOpen] = useState(false)
-
-  const { watch } = useFormContext()
-  const guarantee = watch("guarantee")
-
   return (
     <div className={styles.container}>
-      <div className={styles.guaranteeContainer}>
-        <div className={styles.title}>
-          <div className={styles.checkbox}>
-            <Checkbox name="guarantee" />
-            <Typography variant="Body/Paragraph/mdBold">
-              <p>
-                {intl.formatMessage({
-                  defaultMessage: "Guarantee booking for late arrival",
-                })}
-              </p>
-            </Typography>
-          </div>
-          <Button
-            variant="Text"
-            size="Small"
-            typography="Body/Supporting text (caption)/smBold"
-            className={styles.infoButton}
-            onPress={() => setModalOpen(true)}
-          >
-            <MaterialIcon icon="info" size={20} color="CurrentColor" />
-            {intl.formatMessage({
-              defaultMessage: "How it works",
-            })}
-          </Button>
-
-          <Modal isOpen={isModalOpen} onToggle={() => setModalOpen(false)}>
-            <div className={styles.modalContainer}>
-              <Typography variant="Title/smRegular">
-                <h3>
-                  {intl.formatMessage({
-                    defaultMessage: "Guarantee for late arrival",
-                  })}
-                </h3>
-              </Typography>
-              <Typography variant="Body/Lead text">
-                <p className={styles.modalText}>
-                  {intl.formatMessage({
-                    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/Supporting text (caption)/smRegular">
-                <p className={styles.modalText}>
-                  {intl.formatMessage({
-                    defaultMessage:
-                      "In case of a no-show, your credit card will be charged for the first night.",
-                  })}
-                </p>
-              </Typography>
-              <Button
-                typography="Body/Paragraph/mdBold"
-                variant="Secondary"
-                size="Small"
-                onPress={() => setModalOpen(false)}
-                className={styles.closeButton}
-              >
-                {intl.formatMessage({
-                  defaultMessage: "Close",
-                })}
-              </Button>
-            </div>
-          </Modal>
-        </div>
-        <Divider />
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p>
-            {intl.formatMessage({
-              defaultMessage:
-                "I may arrive later than 18:00 and want to guarantee my booking with a credit card.",
-            })}
-          </p>
-        </Typography>
-        {savedCreditCards?.length && guarantee ? (
-          <MySavedCards savedCreditCards={savedCreditCards} />
-        ) : null}
-        {guarantee ? (
-          <PaymentOptionsGroup
-            name="paymentMethod"
-            label={
-              savedCreditCards?.length
-                ? intl.formatMessage({
-                    defaultMessage: "OTHER",
-                  })
-                : undefined
-            }
-          >
-            <PaymentOption
-              value={PaymentMethodEnum.card}
-              label={intl.formatMessage({
-                defaultMessage: "Credit card",
+      <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({
+                defaultMessage:
+                  "I would like to get my booking confirmation via sms",
               })}
-            />
-          </PaymentOptionsGroup>
-        ) : null}
+            </span>
+          </Typography>
+        </Checkbox>
       </div>
       <div className={styles.checkboxContainer}>
         <TermsAndConditions isFlexBookingTerms />