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/Confirm/index.tsx

@@ -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 && (
+        {guarantee ? (
-          <>
+          <PaymentOptionsGroup
-            {savedCreditCards?.length ? (
+            name="paymentMethod"
-              <Typography variant="Title/Overline/sm">
+            label={
-                <h4>
+              savedCreditCards?.length
-                  {intl.formatMessage({
+                ? intl.formatMessage({
                     defaultMessage: "OTHER",
-                  })}
+                  })
-                </h4>
+                : undefined
-              </Typography>
+            }
-            ) : null}
+          >
             <PaymentOption
-              name="paymentMethod"
               value={PaymentMethodEnum.card}
               label={intl.formatMessage({
                 defaultMessage: "Credit card",
               })}
             />
-          </>
+          </PaymentOptionsGroup>
-        )}
+        ) : null}
       </div>
       <div className={styles.checkboxContainer}>
         <TermsAndConditions />

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

@@ -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">
+      <PaymentOptionsGroup
-        <h4>
+        name="paymentMethod"
-          {intl.formatMessage({
+        label={mySavedCardsLabel}
-            defaultMessage: "MY SAVED CARDS",
+        className={styles.paymentOptionContainer}
-          })}
+      >
-        </h4>
-      </Typography>
-      <div 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>
   )
 }

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

@@ -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 ? (
+                <PaymentOptionsGroup
-                  <Body color="uiTextHighContrast" textTransform="bold">
+                  name="paymentMethod"
-                    {intl.formatMessage({
+                  label={
-                      defaultMessage: "OTHER PAYMENT METHODS",
+                    savedCreditCards?.length
-                    })}
+                      ? intl.formatMessage({
-                  </Body>
+                          defaultMessage: "OTHER PAYMENT METHODS",
-                ) : null}
+                        })
-                <div className={styles.paymentOptionContainer}>
+                      : 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}

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

@@ -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}>
+    <Radio
-      <div className={styles.titleContainer}>
+      value={value}
-        <input
+      className={({ isFocusVisible }) =>
-          aria-hidden
+        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
-          hidden
+      }
-          type="radio"
+    >
-          id={value}
+      {({ isSelected }) => (
-          value={value}
-          onClick={() => trackUpdatePaymentMethod("", value)}
-          {...register(name, registerOptions)}
-        />
-        <span className={styles.radio} />
-        <Body>{label}</Body>
-      </div>
-      {cardNumber ? (
         <>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <div className={styles.titleContainer}>
-          <Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
+            <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>
   )
 }

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

@@ -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 {

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

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

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

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

@@ -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
+            <PaymentOptionsGroup name="paymentMethod">
-              name="paymentMethod"
+              <PaymentOption
-              value={PaymentMethodEnum.card}
+                value={PaymentMethodEnum.card}
-              cardNumber={guaranteeInfo.maskedCard.slice(-4)}
+                cardNumber={guaranteeInfo.maskedCard.slice(-4)}
-              label={intl.formatMessage({
+                label={intl.formatMessage({
-                defaultMessage: "Credit card",
+                  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} />
-              )}
+              ) : null}
-              <>
+              <PaymentOptionsGroup
-                {savedCreditCards?.length && (
+                name="paymentMethod"
-                  <Typography variant="Title/Overline/sm">
+                label={
-                    <h4>
+                  savedCreditCards?.length
-                      {intl.formatMessage({
+                    ? intl.formatMessage({
                         defaultMessage: "OTHER",
-                      })}
+                      })
-                    </h4>
+                    : undefined
-                  </Typography>
+                }
-                )}
+              >
                 <PaymentOption
-                  name="paymentMethod"
                   value={PaymentMethodEnum.card}
                   label={intl.formatMessage({
                     defaultMessage: "Credit card",
                   })}
                 />
-              </>
+              </PaymentOptionsGroup>
             </>
           )}
         </>

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

@@ -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} />
-                <MySavedCards savedCreditCards={savedCreditCards} />
-                <Body color="uiTextHighContrast" textTransform="bold">
-                  {intl.formatMessage({
-                    defaultMessage: "OTHER",
-                  })}
-                </Body>
-              </>
             ) : null}
-            <PaymentOption
+            <PaymentOptionsGroup
               name="paymentMethod"
-              value={PaymentMethodEnum.card}
+              label={
-              label={intl.formatMessage({
+                savedCreditCards?.length
-                defaultMessage: "Credit card",
+                  ? 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>