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,
  type 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 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

  const hasSavedCards = paymentMethods.length > 0

  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>
        {hasSavedCards ? (
          <>
            <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
                  key={paymentMethods.id}
                  value={paymentMethods.id as PaymentMethodEnum}
                  label={label}
                  cardNumber={paymentMethods.truncatedNumber}
                />
              )
            })}
            <Typography variant="Title/Overline/sm">
              <span>{otherCardLabel}</span>
            </Typography>
          </>
        ) : null}

        <PaymentOption
          value={PAYMENT_METHOD_TITLES.card as PaymentMethodEnum}
          label={intl.formatMessage({
            id: 'common.creditCard',
            defaultMessage: 'Credit card',
          })}
        />
      </PaymentOptionsGroup>
    </section>
  )
}