57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { cx } from "class-variance-authority"
|
|
import Image from "next/image"
|
|
import { Radio } from "react-aria-components"
|
|
|
|
import {
|
|
PAYMENT_METHOD_ICONS,
|
|
type PaymentMethodEnum,
|
|
} from "@/constants/booking"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./paymentOption.module.css"
|
|
|
|
import type { PaymentOptionProps } from "./paymentOption"
|
|
|
|
export default function PaymentOption({
|
|
value,
|
|
label,
|
|
cardNumber,
|
|
}: PaymentOptionProps) {
|
|
return (
|
|
<Radio
|
|
value={value}
|
|
className={({ isFocusVisible }) =>
|
|
cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
|
|
}
|
|
>
|
|
{({ isSelected }) => (
|
|
<>
|
|
<div className={styles.titleContainer}>
|
|
<span
|
|
className={cx(styles.radio, { [styles.selected]: isSelected })}
|
|
aria-hidden
|
|
/>
|
|
<Body>{label}</Body>
|
|
</div>
|
|
{cardNumber ? (
|
|
<>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
|
|
</>
|
|
) : (
|
|
<Image
|
|
className={styles.paymentOptionIcon}
|
|
src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
|
|
alt={label}
|
|
width={48}
|
|
height={32}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</Radio>
|
|
)
|
|
}
|