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 { 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 Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import { trackPaymentSectionOpen } from "@/utils/tracking/booking"

import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
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"
              registerOptions={{
                onChange: (e) => {
                  if (e.target.value) {
                    trackPaymentSectionOpen()
                  }
                },
              }}
            />
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {intl.formatMessage({
                  defaultMessage: "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)}
          >
            <MaterialIcon icon="info" size={20} color="CurrentColor" />
            {intl.formatMessage({
              defaultMessage: "How does it work",
            })}
          </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 color="subtle" />
        <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",
              })}
            />
          </PaymentOptionsGroup>
        ) : null}
      </div>
      <div className={styles.checkboxContainer}>
        <TermsAndConditions />
      </div>
    </div>
  )
}

export function ConfirmBookingRedemption() {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.guaranteeContainer}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              defaultMessage:
                "When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
            })}
          </p>
        </Typography>
      </div>
      <div className={styles.checkboxContainer}>
        <TermsAndConditions />
      </div>
    </div>
  )
}