web/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx

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

import { PaymentOptionsGroup } from "../PaymentOption/PaymentOptionsGroup"
import { PaymentOption } from "../PaymentOption/PaymentOption"
import { Typography } from "../../../components/Typography"

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

import {
  PAYMENT_METHOD_TITLES,
  PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"

type PaymentMethod = {
  id: string
  truncatedNumber: string
  alias: string
  cardType: PaymentMethodEnum
}

type SelectPaymentMethodProps = {
  paymentMethods: PaymentMethod[]
  onChange: (value: string) => void
  formName: string
}

export function SelectPaymentMethod({
  paymentMethods,
  onChange,
  formName,
}: SelectPaymentMethodProps) {
  const intl = useIntl()
  const hasSavedCards = paymentMethods.length > 0

  if (!hasSavedCards) {
    return null
  }

  const mySavedCardsLabel = paymentMethods.length
    ? intl.formatMessage({
        id: "payment.mySavedCards",
        defaultMessage: "My saved cards",
      })
    : undefined

  const otherCardLabel = paymentMethods.length
    ? intl.formatMessage({
        id: "common.other",
        defaultMessage: "Other",
      })
    : undefined

  return (
    <section className={styles.section}>
      <PaymentOptionsGroup
        name={formName}
        className={styles.paymentOptionContainer}
        onChange={onChange}
        initalValue={
          //set credit card as default checked if user has no saved cards
          !hasSavedCards ? PAYMENT_METHOD_TITLES.card : undefined
        }
      >
        <Label className="sr-only">
          {intl.formatMessage({
            id: "enterDetails.guarantee.cardOptions",
            defaultMessage: "Card options",
          })}
        </Label>
        <Typography variant="Title/Overline/sm">
          <span>{mySavedCardsLabel}</span>
        </Typography>
        {paymentMethods?.map((paymentMethods) => {
          const label =
            PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
            paymentMethods.alias ||
            paymentMethods.cardType

          return (
            <PaymentOption
              type={paymentMethods.cardType}
              key={paymentMethods.id}
              value={paymentMethods.id}
              label={label}
              cardNumber={paymentMethods.truncatedNumber}
            />
          )
        })}
        <Typography variant="Title/Overline/sm">
          <span>{otherCardLabel}</span>
        </Typography>
        <PaymentOption
          value={PaymentMethodEnum.card}
          type={PaymentMethodEnum.card}
          label={intl.formatMessage({
            id: "common.creditCard",
            defaultMessage: "Credit card",
          })}
        />
      </PaymentOptionsGroup>
    </section>
  )
}