web/packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx

"use client"
import { useIntl } from "react-intl"

import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import TermsAndConditions from "../Payment/TermsAndConditions"
import { Guarantee } from "./Guarantee"
import { ConfirmBookingPaymentOptions } from "./PaymentOptions"
import SmsConfirmation from "./SmsConfirmation"

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

import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import type { CreditCard } from "@scandic-hotels/trpc/types/user"

interface ConfirmBookingProps {
  savedCreditCards: CreditCard[] | null
  otherPaymentOptions: PaymentMethodEnum[]
  hasOnlyFlexRates: boolean
  hasMixedRates: boolean
  isRedemptionBooking: boolean
  bookingMustBeGuaranteed: boolean
}

export default function ConfirmBooking({
  savedCreditCards,
  otherPaymentOptions,
  hasOnlyFlexRates,
  hasMixedRates,
  isRedemptionBooking,
  bookingMustBeGuaranteed,
}: ConfirmBookingProps) {
  const intl = useIntl()

  if (isRedemptionBooking) {
    return (
      <div className={styles.confirmBooking}>
        <div className={styles.redemptionInfo}>
          <MaterialIcon icon="calendar_clock" size={24} color="Icon/Intense" />
          <div className={styles.textWrapper}>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <p>
                {intl.formatMessage({
                  id: "enterDetails.guarantee.guaranteeLabel",
                  defaultMessage: "Guarantee for late arrival",
                })}
              </p>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage({
                  id: "enterDetails.confirmBooking.rewardNightGuaranteeInfo",
                  defaultMessage:
                    "When you complete the booking the room will be guaranteed for late arrival. The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, you will be charged for one reward night.",
                })}
              </p>
            </Typography>
          </div>
        </div>
        <Divider color="Border/Divider/Subtle" />
        <TermsAndConditions isFlexBookingTerms />
        <SmsConfirmation />
      </div>
    )
  }

  if (hasOnlyFlexRates) {
    return (
      <div className={styles.confirmBooking}>
        <Guarantee
          mustBeGuaranteed={bookingMustBeGuaranteed}
          savedCreditCards={savedCreditCards}
        />
        <Divider color="Border/Divider/Subtle" />
        <TermsAndConditions isFlexBookingTerms />
        <SmsConfirmation />
      </div>
    )
  }

  return (
    <div className={styles.confirmBooking}>
      {hasMixedRates ? (
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "enterDetails.payment.mixedRatesInfo",
              defaultMessage:
                "As your booking includes rooms with different terms, we will be charging part of the booking now and the remainder will be collected by the reception at check-in.",
            })}
          </p>
        </Typography>
      ) : null}

      <ConfirmBookingPaymentOptions
        savedCreditCards={savedCreditCards}
        hasMixedRates={hasMixedRates}
        otherPaymentOptions={otherPaymentOptions}
      />

      <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
      <SmsConfirmation />
    </div>
  )
}