Merged in fix/SW-2177 (pull request #1907)

fix: combine radiogroups on payment step

* fix: combine radiogroups on payment step


Approved-by: Christian Andolf

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

@@ -3,9 +3,12 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
+import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import {
   BOOKING_CONFIRMATION_NUMBER,
   BookingErrorCodeEnum,
@@ -22,7 +25,6 @@ import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -490,24 +492,49 @@ export default function PaymentClient({
                 </Body>
               ) : null}
 
-              {savedCreditCards?.length ? (
-                <section className={styles.section}>
-                  <MySavedCards savedCreditCards={savedCreditCards} />
-                </section>
-              ) : null}
-
               <section className={styles.section}>
                 <PaymentOptionsGroup
                   name="paymentMethod"
-                  label={
-                    savedCreditCards?.length
-                      ? intl.formatMessage({
-                          defaultMessage: "OTHER PAYMENT METHODS",
-                        })
-                      : undefined
-                  }
                   className={styles.paymentOptionContainer}
                 >
+                  <Label className="sr-only">
+                    {intl.formatMessage({
+                      defaultMessage: "Payment methods",
+                    })}
+                  </Label>
+
+                  {savedCreditCards?.length ? (
+                    <>
+                      <Typography variant="Title/Overline/sm">
+                        <span>
+                          {intl.formatMessage({
+                            defaultMessage: "MY SAVED CARDS",
+                          })}
+                        </span>
+                      </Typography>
+
+                      {savedCreditCards.map((savedCreditCard) => (
+                        <PaymentOption
+                          key={savedCreditCard.id}
+                          value={savedCreditCard.id}
+                          label={
+                            PAYMENT_METHOD_TITLES[
+                              savedCreditCard.cardType as PaymentMethodEnum
+                            ]
+                          }
+                          cardNumber={savedCreditCard.truncatedNumber}
+                        />
+                      ))}
+
+                      <Typography variant="Title/Overline/sm">
+                        <span>
+                          {intl.formatMessage({
+                            defaultMessage: "OTHER PAYMENT METHODS",
+                          })}
+                        </span>
+                      </Typography>
+                    </>
+                  ) : null}
                   <PaymentOption
                     value={PaymentMethodEnum.card}
                     label={intl.formatMessage({