feat: change GLA to be more clear to the user

2025-06-10 11:26:15 +02:00
parent 002d5f9c68
commit 2f553bb945
8 changed files with 292 additions and 187 deletions
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
@@ -0,0 +1,140 @@
+"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 { Button } from "@scandic-hotels/design-system/Button"
+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 Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
+
+import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
+
+import styles from "./guarantee.module.css"
+
+import type { CreditCard } from "@/types/user"
+
+interface GuaranteeProps {
+  savedCreditCards: CreditCard[] | null
+}
+
+export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
+  const intl = useIntl()
+  const guarantee = useWatch({ name: "guarantee" })
+  return (
+    <div className={styles.guarantee}>
+      <Checkbox name="guarantee">
+        <div className={styles.checkboxContainer}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <span>
+              {intl.formatMessage({
+                defaultMessage:
+                  "I may arrive later than 18:00 and want to guarantee my booking.",
+              })}
+            </span>
+          </Typography>
+          <DialogTrigger>
+            <Button
+              className={styles.infoButton}
+              size="Small"
+              typography="Body/Supporting text (caption)/smBold"
+              variant="Text"
+            >
+              <MaterialIcon icon="info" size={20} color="CurrentColor" />
+              <span className={styles.btnText}>
+                {intl.formatMessage({ defaultMessage: "How it works" })}
+              </span>
+            </Button>
+            <ModalOverlay className={styles.overlay} isDismissable>
+              <Modal className={styles.modal}>
+                <Dialog>
+                  {({ close }) => (
+                    <div className={styles.container}>
+                      <Typography variant="Title/Subtitle/lg">
+                        <h3>
+                          {intl.formatMessage({
+                            defaultMessage: "Guarantee for late arrival",
+                          })}
+                        </h3>
+                      </Typography>
+                      <Typography variant="Body/Lead text">
+                        <p className={styles.text}>
+                          {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/Paragraph/mdRegular">
+                        <p className={styles.text}>
+                          {intl.formatMessage({
+                            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({
+                          defaultMessage: "Close",
+                        })}
+                      </Button>
+                      <RestoreOverflow />
+                    </div>
+                  )}
+                </Dialog>
+              </Modal>
+            </ModalOverlay>
+          </DialogTrigger>
+        </div>
+      </Checkbox>
+      {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",
+            })}
+          />
+        </PaymentOptionsGroup>
+      ) : null}
+    </div>
+  )
+}
+
+function RestoreOverflow() {
+  const setOverflowVisible = useSetOverflowVisibleOnRA()
+  useLayoutEffect(() => {
+    setOverflowVisible(true)
+  }, [setOverflowVisible])
+  return null
+}