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
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import {
|
|
PAYMENT_METHOD_TITLES,
|
|
type PaymentMethodEnum,
|
|
} from "@/constants/booking"
|
|
|
|
import PaymentOption from "../PaymentOption"
|
|
import PaymentOptionsGroup from "../PaymentOptionsGroup"
|
|
|
|
import styles from "./mySavedCards.module.css"
|
|
|
|
import type { CreditCard } from "@/types/user"
|
|
|
|
interface MySavedCardsProps {
|
|
savedCreditCards: CreditCard[] | null
|
|
}
|
|
|
|
export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
|
|
const intl = useIntl()
|
|
const mySavedCardsLabel = intl.formatMessage({
|
|
defaultMessage: "MY SAVED CARDS",
|
|
})
|
|
|
|
return (
|
|
<section className={styles.section}>
|
|
<PaymentOptionsGroup
|
|
name="paymentMethod"
|
|
label={mySavedCardsLabel}
|
|
className={styles.paymentOptionContainer}
|
|
>
|
|
{savedCreditCards?.map((savedCreditCard) => (
|
|
<PaymentOption
|
|
key={savedCreditCard.id}
|
|
value={savedCreditCard.id}
|
|
label={
|
|
PAYMENT_METHOD_TITLES[
|
|
savedCreditCard.cardType as PaymentMethodEnum
|
|
]
|
|
}
|
|
cardNumber={savedCreditCard.truncatedNumber}
|
|
/>
|
|
))}
|
|
</PaymentOptionsGroup>
|
|
</section>
|
|
)
|
|
}
|