740419bad2
Feat/SW-459 payment flow ui ux * feat(SW-431): List payment methods and handle booking status and redirection * feat(SW-431): small fix * fix(SW-431): Added intl string and sorted dictionaries * fix(SW-431): add todo comments * feat(SW-459): Added payment method icons * feat(SW-459): refactored into new component and added form * feat(SW-459): Localized strings * feat(SW-459): added checkbox * feat(SW-459): Refactored payment options and updated payment form * feat(SW-459): update input bg color * feat(SW-459): add current web links and style fixes * fix(SW-459): fix issue with booking confirmation not being accessible * feat(SW-459): style changes * feat(SW-459): update max width of payment container * feat(SW-459): update create booking schema * feat(SW-459): fixes from PR Approved-by: Arvid Norlin
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import Image from "next/image"
|
|
import { useFormContext } from "react-hook-form"
|
|
|
|
import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import { PaymentOptionProps } from "./paymentOption"
|
|
|
|
import styles from "./paymentOption.module.css"
|
|
|
|
export default function PaymentOption({
|
|
name,
|
|
value,
|
|
label,
|
|
}: PaymentOptionProps) {
|
|
const { register } = useFormContext()
|
|
return (
|
|
<label key={value} className={styles.paymentOption} htmlFor={value}>
|
|
<div className={styles.titleContainer}>
|
|
<input
|
|
aria-hidden
|
|
hidden
|
|
type="radio"
|
|
id={value}
|
|
value={value}
|
|
{...register(name)}
|
|
/>
|
|
<span className={styles.radio} />
|
|
<Body asChild>
|
|
<label htmlFor={value}>{label}</label>
|
|
</Body>
|
|
</div>
|
|
<Image
|
|
className={styles.paymentOptionIcon}
|
|
src={PAYMENT_METHOD_ICONS[value]}
|
|
alt={label}
|
|
width={48}
|
|
height={32}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|