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

"use client"

import { Label } from "react-aria-components"
import { useIntl } from "react-intl"

import {
  PAYMENT_METHOD_TITLES,
  PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useAvailablePaymentOptions } from "../../../../hooks/useAvailablePaymentOptions"
import { useEnterDetailsStore } from "../../../../stores/enter-details"
import MixedRatePaymentBreakdown from "../../Payment/MixedRatePaymentBreakdown"

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

import type { CreditCard } from "@scandic-hotels/trpc/types/user"

interface ConfirmBookingPaymentOptionsProps {
  savedCreditCards: CreditCard[] | null
  hasMixedRates: boolean
  otherPaymentOptions: PaymentMethodEnum[]
}

export function ConfirmBookingPaymentOptions({
  savedCreditCards,
  hasMixedRates,
  otherPaymentOptions,
}: ConfirmBookingPaymentOptionsProps) {
  const intl = useIntl()
  const { rooms, currency } = useEnterDetailsStore((state) => ({
    rooms: state.rooms,
    currency: state.totalPrice.local.currency,
  }))
  const availablePaymentOptions =
    useAvailablePaymentOptions(otherPaymentOptions)

  return (
    <>
      <PaymentOptionsGroup
        name="paymentMethod"
        className={styles.paymentOptions}
      >
        <Label className="sr-only">
          {intl.formatMessage({
            id: "enterDetails.payment.paymentMethods",
            defaultMessage: "Payment methods",
          })}
        </Label>

        {savedCreditCards?.length ? (
          <>
            <Typography variant="Title/Overline/sm">
              <span>
                {intl.formatMessage({
                  id: "payment.mySavedCards",
                  defaultMessage: "My saved cards",
                })}
              </span>
            </Typography>

            {savedCreditCards.map((savedCreditCard) => (
              <PaymentOption
                type={savedCreditCard.cardType as PaymentMethodEnum}
                key={savedCreditCard.id}
                value={savedCreditCard.id}
                label={
                  PAYMENT_METHOD_TITLES[
                    savedCreditCard.cardType as PaymentMethodEnum
                  ]
                }
                cardNumber={savedCreditCard.truncatedNumber}
              />
            ))}

            <Typography variant="Title/Overline/sm">
              <span>
                {intl.formatMessage({
                  id: "enterDetails.payment.otherPaymentMethods",
                  defaultMessage: "Other payment methods",
                })}
              </span>
            </Typography>
          </>
        ) : null}
        <PaymentOption
          type={PaymentMethodEnum.card}
          value={PaymentMethodEnum.card}
          label={intl.formatMessage({
            id: "common.creditCard",
            defaultMessage: "Credit card",
          })}
        />

        {!hasMixedRates
          ? availablePaymentOptions.map((paymentMethod) => (
              <PaymentOption
                type={paymentMethod}
                key={paymentMethod}
                value={paymentMethod}
                label={PAYMENT_METHOD_TITLES[paymentMethod]}
              />
            ))
          : null}
      </PaymentOptionsGroup>

      {hasMixedRates ? (
        <MixedRatePaymentBreakdown rooms={rooms} currency={currency} />
      ) : null}
    </>
  )
}