Merged in SW-3396-move-my-saved-cards-to-design-system (pull request #2762)

SW-3396 move my saved cards to design system

* Move PaymentOption, PaymentOptionsGroup, PaymentIcons and MySavedCards (renamed SelectPaymentMethod) to design-system

* Remove unused svg payment icons

* cleanu

* cleanup

* trackUpdatePaymentMethod: remove hotelId argument that was never passed


Approved-by: Anton Gunnarsson

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx

@@ -13,13 +13,13 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
+import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
-
-import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
 import styles from "./guarantee.module.css"
 
@@ -105,11 +105,19 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
         </div>
       </Checkbox>
       {savedCreditCards?.length && guarantee ? (
-        <MySavedCards savedCreditCards={savedCreditCards} />
+        <SelectPaymentMethod
+          formName="paymentMethod"
+          onChange={(method) => trackUpdatePaymentMethod({ method })}
+          paymentMethods={savedCreditCards.map((x) => ({
+            ...x,
+            cardType: x.cardType as PaymentMethodEnum,
+          }))}
+        />
       ) : null}
       {guarantee ? (
         <PaymentOptionsGroup
           name="paymentMethod"
+          onChange={(method) => trackUpdatePaymentMethod({ method })}
           label={
             savedCreditCards?.length
               ? intl.formatMessage({

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

@@ -8,7 +8,10 @@ import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import {
+  PAYMENT_METHOD_TITLES,
+  PaymentMethodEnum,
+} from "@scandic-hotels/common/constants/paymentMethod"
 import {
   bookingConfirmation,
   selectRate,
@@ -20,6 +23,8 @@ import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
 import Body from "@scandic-hotels/design-system/Body"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap"
@@ -27,15 +32,13 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
-import { PAYMENT_METHOD_TITLES } from "@/constants/booking"
 import { env } from "@/env/client"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
-import { trackPaymentEvent } from "@/utils/tracking"
+import { trackPaymentEvent, trackUpdatePaymentMethod } from "@/utils/tracking"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
 
 import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
@@ -50,7 +53,6 @@ import {
   writePaymentInfoToSessionStorage,
 } from "./helpers"
 import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
-import PaymentOptionsGroup from "./PaymentOptionsGroup"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import TermsAndConditions from "./TermsAndConditions"
 
@@ -551,6 +553,7 @@ export default function PaymentClient({
                 <PaymentOptionsGroup
                   name="paymentMethod"
                   className={styles.paymentOptionContainer}
+                  onChange={(method) => trackUpdatePaymentMethod({ method })}
                 >
                   <Label className="sr-only">
                     {intl.formatMessage({
@@ -571,7 +574,7 @@ export default function PaymentClient({
                       {savedCreditCards.map((savedCreditCard) => (
                         <PaymentOption
                           key={savedCreditCard.id}
-                          value={savedCreditCard.id}
+                          value={savedCreditCard.id as PaymentMethodEnum}
                           label={
                             PAYMENT_METHOD_TITLES[
                               savedCreditCard.cardType as PaymentMethodEnum

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

@@ -1,49 +0,0 @@
-"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>
-  )
-}