169094fc37
Refactor(SW-2177): Use react aria RadioGroup & Radio for payment options * fix(SW-SW-2177): enhance accessibility for payment options * Added keyboard navigation support to payment options. * Updated CSS to improve focus styles for payment option labels. * refactor: use RadioGroup & Radio from react aria for payment options * refactor(SW-2177): replace setValue and watch with useController for payment method handling * fix(SW-2177): remove comment and use cx for styles on PaymentOption * fix(SW-2177): Add keyboard focus indicator to payment option Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import { Label, RadioGroup } from "react-aria-components"
|
|
import { useController, useFormContext } from "react-hook-form"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { trackUpdatePaymentMethod } from "@/utils/tracking"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
interface PaymentOptionsGroupProps {
|
|
name: string
|
|
label?: string
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export default function PaymentOptionsGroup({
|
|
name,
|
|
label,
|
|
children,
|
|
className,
|
|
}: PaymentOptionsGroupProps) {
|
|
const { control } = useFormContext()
|
|
|
|
const {
|
|
field: { value, onChange },
|
|
} = useController({
|
|
name,
|
|
control,
|
|
})
|
|
|
|
const handleChange = (newValue: string) => {
|
|
onChange(newValue)
|
|
trackUpdatePaymentMethod("", newValue)
|
|
}
|
|
|
|
return (
|
|
<RadioGroup value={value} onChange={handleChange} className={className}>
|
|
{label ? (
|
|
<Typography variant="Title/Overline/sm">
|
|
<Label>{label}</Label>
|
|
</Typography>
|
|
) : null}
|
|
{children}
|
|
</RadioGroup>
|
|
)
|
|
}
|