48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import {
|
|
PAYMENT_METHOD_TITLES,
|
|
type PaymentMethodEnum,
|
|
} from "@/constants/booking"
|
|
|
|
import PaymentOptionsGroup from "../EnterDetails/Payment/PaymentOptionsGroup"
|
|
import PaymentOption from "../PaymentOption"
|
|
|
|
import styles from "./mySavedCards.module.css"
|
|
|
|
import type { CreditCard } from "@/types/user"
|
|
|
|
interface MySavedCardsProps {
|
|
savedCreditCards: CreditCard[] | null
|
|
}
|
|
|
|
export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
|
|
const intl = useIntl()
|
|
const mySavedCardsLabel = intl.formatMessage({
|
|
defaultMessage: "MY SAVED CARDS",
|
|
})
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<PaymentOptionsGroup
|
|
name="paymentMethod"
|
|
label={mySavedCardsLabel}
|
|
className={styles.paymentOptionContainer}
|
|
>
|
|
{savedCreditCards?.map((savedCreditCard) => (
|
|
<PaymentOption
|
|
key={savedCreditCard.id}
|
|
value={savedCreditCard.id}
|
|
label={
|
|
PAYMENT_METHOD_TITLES[
|
|
savedCreditCard.cardType as PaymentMethodEnum
|
|
]
|
|
}
|
|
cardNumber={savedCreditCard.truncatedNumber}
|
|
/>
|
|
))}
|
|
</PaymentOptionsGroup>
|
|
</section>
|
|
)
|
|
}
|