Merged in refactor/SW-2476-use-react-aria-radio-group-for-payment-options (pull request #1849)

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

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx

@@ -0,0 +1,49 @@
+"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>
+  )
+}