web/packages/booking-flow/lib/components/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 useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment"

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

import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
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({
                id: "enterDetails.confirmBooking.guaranteeLabel",
                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({
                  id: "common.howItWorks",
                  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({
                            id: "enterDetails.confirmBooking.guaranteeInfoModalTitle",
                            defaultMessage: "Guarantee for late arrival",
                          })}
                        </h3>
                      </Typography>
                      <Typography variant="Body/Lead text">
                        <p className={styles.text}>
                          {intl.formatMessage({
                            id: "enterDetails.confirmBooking.guaranteeInfoModalDescription",
                            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({
                            id: "enterDetails.confirmBooking.guaranteeInfoModalNoShowInfo",
                            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({
                          id: "common.close",
                          defaultMessage: "Close",
                        })}
                      </Button>
                      <RestoreOverflow />
                    </div>
                  )}
                </Dialog>
              </Modal>
            </ModalOverlay>
          </DialogTrigger>
        </div>
      </Checkbox>

      {guarantee && (
        <SelectPaymentMethod
          paymentMethods={(savedCreditCards ?? []).map((card) => ({
            ...card,
            cardType: card.cardType as PaymentMethodEnum,
          }))}
          onChange={(method) => {
            trackUpdatePaymentMethod({ method })
          }}
          formName={"paymentMethod"}
        />
      )}
    </div>
  )
}

function RestoreOverflow() {
  const setOverflowVisible = useSetOverflowVisibleOnRA()
  useLayoutEffect(() => {
    setOverflowVisible(true)
  }, [setOverflowVisible])
  return null
}