scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-04-24 11:22:36 +00:00
parent 055f9ab139
commit 169094fc37
9 changed files with 163 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx
View File

@@ -1,5 +1,6 @@
import { cx } from "class-variance-authority"
import Image from "next/image"
import { useFormContext } from "react-hook-form"
import { Radio } from "react-aria-components"
import {
PAYMENT_METHOD_ICONS,
@@ -8,50 +9,48 @@ import {
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { trackUpdatePaymentMethod } from "@/utils/tracking"
import styles from "./paymentOption.module.css"
import type { PaymentOptionProps } from "./paymentOption"
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}
onClick={() => trackUpdatePaymentMethod("", value)}
{...register(name, registerOptions)}
/>
<span className={styles.radio} />
<Body>{label}</Body>
</div>
{cardNumber ? (
<Radio
value={value}
className={({ isFocusVisible }) =>
cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
}
>
{({ isSelected }) => (
<>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
<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}
/>
)}
</>
) : (
<Image
className={styles.paymentOptionIcon}
src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
alt={label}
width={48}
height={32}
/>
)}
</label>
</Radio>
)
}

10
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.module.css
View File

@@ -11,7 +11,12 @@
cursor: pointer;
}
.paymentOption .radio {
.paymentOption.focused {
outline: 2px solid var(--UI-Input-Controls-Border-Focus);
outline-offset: 2px;
}
.radio {
width: 24px;
height: 24px;
border: 1px solid var(--Base-Border-Normal);
@@ -19,7 +24,7 @@
cursor: pointer;
}
.paymentOption input:checked + .radio {
.radio.selected {
border: 8px solid var(--UI-Input-Controls-Fill-Selected);
}
@@ -27,7 +32,6 @@
display: flex;
align-items: center;
gap: var(--Spacing-x-one-and-half);
pointer-events: none;
}
.paymentOptionIcon {

5
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts
View File

@@ -1,10 +1,5 @@
import type { RegisterOptions } from "react-hook-form"
export interface PaymentOptionProps {
name: string
value: string
label: string
cardNumber?: string
registerOptions?: RegisterOptions
onChange?: () => void
}