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

"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 { Typography } from "@scandic-hotels/design-system/Typography"

import { PaymentMethodEnum } from "@/constants/booking"

import { InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"

import MySavedCards from "../Payment/MySavedCards"
import PaymentOption from "../Payment/PaymentOption"
import TermsAndConditions from "../Payment/TermsAndConditions"

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

import type { CreditCard } from "@/types/user"

interface ConfirmBookingProps {
  savedCreditCards: CreditCard[] | null
}

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({
                  id: "Guarantee room for late arrival",
                })}
              </p>
            </Typography>
          </div>
          <Button
            variant="Text"
            size="Small"
            typography="Body/Supporting text (caption)/smBold"
            className={styles.infoButton}
            onPress={() => setModalOpen(true)}
          >
            <InfoCircleIcon
              width={20}
              height={20}
              color="uiTextMediumContrast"
            />
            {intl.formatMessage({ id: "How does it work" })}
          </Button>

          <Modal isOpen={isModalOpen} onToggle={() => setModalOpen(false)}>
            <div className={styles.modalContainer}>
              <Typography variant="Title/smRegular">
                <h3>
                  {intl.formatMessage({ id: "Guarantee for late arrival" })}
                </h3>
              </Typography>
              <Typography variant="Body/Lead text">
                <p className={styles.modalText}>
                  {intl.formatMessage({
                    id: "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({
                    id: "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({ id: "Close" })}
              </Button>
            </div>
          </Modal>
        </div>
        <Divider color="subtle" />
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              id: "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 && (
          <>
            {savedCreditCards?.length && (
              <Typography variant="Title/Overline/sm">
                <h4>{intl.formatMessage({ id: "OTHER" })}</h4>
              </Typography>
            )}
            <PaymentOption
              name="paymentMethod"
              value={PaymentMethodEnum.card}
              label={intl.formatMessage({ id: "Credit card" })}
            />
          </>
        )}
      </div>
      <div className={styles.checkboxContainer}>
        <TermsAndConditions />
      </div>
    </div>
  )
}