b33381d1b4
feat(SW-588): Added saved card to payment step * feat(SW-588): Added saved card to payment step * feat(SW-588): Add proper label for saved card * feat(SW-588): fix from PR feedback * feat(SW-588): Add preloading of data * feat(SW-588): remove onChange logic for PaymentOption * feat(SW-588): moved payment files to correct folder * feat(SW-588): moved preload to layout * fix: remove unused prop Approved-by: Simon.Emanuelsson
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import Image from "next/image"
|
|
import { useFormContext } from "react-hook-form"
|
|
|
|
import { PAYMENT_METHOD_ICONS, PaymentMethodEnum } from "@/constants/booking"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import { PaymentOptionProps } from "./paymentOption"
|
|
|
|
import styles from "./paymentOption.module.css"
|
|
|
|
export default function PaymentOption({
|
|
name,
|
|
value,
|
|
label,
|
|
cardNumber,
|
|
registerOptions = {},
|
|
}: PaymentOptionProps) {
|
|
const { register } = useFormContext()
|
|
|
|
return (
|
|
<label key={value} className={styles.paymentOption}>
|
|
<div className={styles.titleContainer}>
|
|
<input
|
|
aria-hidden
|
|
hidden
|
|
type="radio"
|
|
id={value}
|
|
value={value}
|
|
{...register(name, registerOptions)}
|
|
/>
|
|
<span className={styles.radio} />
|
|
<Body>{label}</Body>
|
|
</div>
|
|
{cardNumber ? (
|
|
<Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
|
|
) : (
|
|
<Image
|
|
className={styles.paymentOptionIcon}
|
|
src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
|
|
alt={label}
|
|
width={48}
|
|
height={32}
|
|
/>
|
|
)}
|
|
</label>
|
|
)
|
|
}
|