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

26
apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx
View File

@@ -17,6 +17,7 @@ import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
import MySavedCards from "../Payment/MySavedCards"
import PaymentOption from "../Payment/PaymentOption"
import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
import TermsAndConditions from "../Payment/TermsAndConditions"
import styles from "./confirm.module.css"
@@ -123,26 +124,25 @@ export default function ConfirmBooking({
{savedCreditCards?.length && guarantee ? (
<MySavedCards savedCreditCards={savedCreditCards} />
) : null}
{guarantee && (
<>
{savedCreditCards?.length ? (
<Typography variant="Title/Overline/sm">
<h4>
{intl.formatMessage({
{guarantee ? (
<PaymentOptionsGroup
name="paymentMethod"
label={
savedCreditCards?.length
? intl.formatMessage({
defaultMessage: "OTHER",
})}
</h4>
</Typography>
) : null}
})
: undefined
}
>
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
</>
)}
</PaymentOptionsGroup>
) : null}
</div>
<div className={styles.checkboxContainer}>
<TermsAndConditions />

22
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MySavedCards/index.tsx
View File

@@ -1,13 +1,12 @@
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import {
PAYMENT_METHOD_TITLES,
type PaymentMethodEnum,
} from "@/constants/booking"
import PaymentOption from "../PaymentOption"
import PaymentOptionsGroup from "../PaymentOptionsGroup"
import styles from "./mySavedCards.module.css"
@@ -19,21 +18,20 @@ interface MySavedCardsProps {
export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
const intl = useIntl()
const mySavedCardsLabel = intl.formatMessage({
defaultMessage: "MY SAVED CARDS",
})
return (
<section className={styles.section}>
<Typography variant="Title/Overline/sm">
<h4>
{intl.formatMessage({
defaultMessage: "MY SAVED CARDS",
})}
</h4>
</Typography>
<div className={styles.paymentOptionContainer}>
<PaymentOptionsGroup
name="paymentMethod"
label={mySavedCardsLabel}
className={styles.paymentOptionContainer}
>
{savedCreditCards?.map((savedCreditCard) => (
<PaymentOption
key={savedCreditCard.id}
name="paymentMethod"
value={savedCreditCard.id}
label={
PAYMENT_METHOD_TITLES[
@@ -43,7 +41,7 @@ export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
cardNumber={savedCreditCard.truncatedNumber}
/>
))}
</div>
</PaymentOptionsGroup>
</section>
)
}

24
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -43,6 +43,7 @@ import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import MySavedCards from "./MySavedCards"
import PaymentAlert from "./PaymentAlert"
import PaymentOption from "./PaymentOption"
import PaymentOptionsGroup from "./PaymentOptionsGroup"
import { type PaymentFormData, paymentSchema } from "./schema"
import TermsAndConditions from "./TermsAndConditions"
@@ -496,16 +497,18 @@ export default function PaymentClient({
) : null}
<section className={styles.section}>
{savedCreditCards?.length ? (
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({
defaultMessage: "OTHER PAYMENT METHODS",
})}
</Body>
) : null}
<div className={styles.paymentOptionContainer}>
<PaymentOptionsGroup
name="paymentMethod"
label={
savedCreditCards?.length
? intl.formatMessage({
defaultMessage: "OTHER PAYMENT METHODS",
})
: undefined
}
className={styles.paymentOptionContainer}
>
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({
defaultMessage: "Credit card",
@@ -515,7 +518,6 @@ export default function PaymentClient({
availablePaymentOptions.map((paymentMethod) => (
<PaymentOption
key={paymentMethod}
name="paymentMethod"
value={paymentMethod}
label={
PAYMENT_METHOD_TITLES[
@@ -524,7 +526,7 @@ export default function PaymentClient({
}
/>
))}
</div>
</PaymentOptionsGroup>
{hasMixedRates ? (
<MixedRatePaymentBreakdown
rooms={rooms}

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
}

49
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx Normal file
View File

@@ -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>
)
}

43
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
View File

@@ -14,6 +14,7 @@ import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
import MySavedCards from "@/components/HotelReservation/EnterDetails/Payment/MySavedCards"
import PaymentOption from "@/components/HotelReservation/EnterDetails/Payment/PaymentOption"
import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
import Alert from "@/components/TempDesignSystem/Alert"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
@@ -117,14 +118,15 @@ export default function ConfirmationStep({
</p>
</Typography>
{guaranteeInfo ? (
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
cardNumber={guaranteeInfo.maskedCard.slice(-4)}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
<PaymentOptionsGroup name="paymentMethod">
<PaymentOption
value={PaymentMethodEnum.card}
cardNumber={guaranteeInfo.maskedCard.slice(-4)}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
</PaymentOptionsGroup>
) : (
<>
<Alert
@@ -134,27 +136,26 @@ export default function ConfirmationStep({
"By adding a card you also guarantee your room booking for late arrival.",
})}
/>
{savedCreditCards?.length && (
{savedCreditCards?.length ? (
<MySavedCards savedCreditCards={savedCreditCards} />
)}
<>
{savedCreditCards?.length && (
<Typography variant="Title/Overline/sm">
<h4>
{intl.formatMessage({
) : null}
<PaymentOptionsGroup
name="paymentMethod"
label={
savedCreditCards?.length
? intl.formatMessage({
defaultMessage: "OTHER",
})}
</h4>
</Typography>
)}
})
: undefined
}
>
<PaymentOption
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
</>
</PaymentOptionsGroup>
</>
)}
</>

32
apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/index.tsx
View File

@@ -32,6 +32,7 @@ import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
import MySavedCards from "../../EnterDetails/Payment/MySavedCards"
import PaymentOption from "../../EnterDetails/Payment/PaymentOption"
import PaymentOptionsGroup from "../../EnterDetails/Payment/PaymentOptionsGroup"
import { type GuaranteeFormData, paymentSchema } from "./schema"
import styles from "./guaranteeLateArrival.module.css"
@@ -135,22 +136,25 @@ export default function GuaranteeLateArrival({
})}
</Caption>
{savedCreditCards?.length ? (
<>
<MySavedCards savedCreditCards={savedCreditCards} />
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({
defaultMessage: "OTHER",
})}
</Body>
</>
<MySavedCards savedCreditCards={savedCreditCards} />
) : null}
<PaymentOption
<PaymentOptionsGroup
name="paymentMethod"
value={PaymentMethodEnum.card}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
label={
savedCreditCards?.length
? intl.formatMessage({
defaultMessage: "OTHER",
})
: undefined
}
>
<PaymentOption
value={PaymentMethodEnum.card}
label={intl.formatMessage({
defaultMessage: "Credit card",
})}
/>
</PaymentOptionsGroup>
<div className={styles.termsAndConditions}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>