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

"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 { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"

import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"

import styles from "./guarantee.module.css"

import type { CreditCard } from "@scandic-hotels/trpc/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
}