50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import {
|
|
PAYMENT_METHOD_TITLES,
|
|
type PaymentMethodEnum,
|
|
} from "@/constants/booking"
|
|
|
|
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()
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<Typography variant="Title/Overline/sm">
|
|
<h4>
|
|
{intl.formatMessage({
|
|
defaultMessage: "MY SAVED CARDS",
|
|
})}
|
|
</h4>
|
|
</Typography>
|
|
<div className={styles.paymentOptionContainer}>
|
|
{savedCreditCards?.map((savedCreditCard) => (
|
|
<PaymentOption
|
|
key={savedCreditCard.id}
|
|
name="paymentMethod"
|
|
value={savedCreditCard.id}
|
|
label={
|
|
PAYMENT_METHOD_TITLES[
|
|
savedCreditCard.cardType as PaymentMethodEnum
|
|
]
|
|
}
|
|
cardNumber={savedCreditCard.truncatedNumber}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|