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

packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { fn, expect } from 'storybook/test'
+import { SelectPaymentMethod } from './index'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+
+const meta: Meta<typeof SelectPaymentMethod> = {
+  title: 'Components/Payment/SelectCreditCard',
+  component: SelectPaymentMethod,
+  argTypes: {},
+  decorators: [FormDecorator],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SelectPaymentMethod>
+
+export const PrimaryDefault: Story = {
+  args: {
+    onChange: fn(),
+    paymentMethods: [
+      {
+        id: 'klarna',
+        alias: 'Card 1',
+        cardType: PaymentMethodEnum.klarna,
+        truncatedNumber: '1234',
+      },
+      {
+        id: 'applePay',
+        alias: 'Card 2',
+        cardType: PaymentMethodEnum.applePay,
+        truncatedNumber: '1234',
+      },
+    ],
+  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    const options = await canvas.findAllByRole('radio')
+    expect(options[0]).toBeInTheDocument()
+
+    expect(args.onChange).not.toHaveBeenCalled()
+    await userEvent.click(options[0])
+    expect(args.onChange).toHaveBeenCalledWith('klarna')
+  },
+}

packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx

@@ -0,0 +1,62 @@
+import { useIntl } from 'react-intl'
+
+import { PaymentOptionsGroup } from '../PaymentOption/PaymentOptionsGroup'
+import { PaymentOption } from '../PaymentOption/PaymentOption'
+
+import styles from './selectPaymentMethod.module.css'
+
+import {
+  PAYMENT_METHOD_TITLES,
+  type PaymentMethodEnum,
+} from '@scandic-hotels/common/constants/paymentMethod'
+
+type PaymentMethod = {
+  id: string
+  truncatedNumber: string
+  alias: string
+  cardType: PaymentMethodEnum
+}
+
+type SelectPaymentMethodProps = {
+  paymentMethods: PaymentMethod[]
+  onChange: (value: string) => void
+  formName: string
+}
+
+export function SelectPaymentMethod({
+  paymentMethods,
+  onChange,
+  formName,
+}: SelectPaymentMethodProps) {
+  const intl = useIntl()
+  const mySavedCardsLabel = intl.formatMessage({
+    defaultMessage: 'MY SAVED CARDS',
+  })
+
+  return (
+    <section className={styles.section}>
+      <PaymentOptionsGroup
+        name={formName}
+        label={mySavedCardsLabel}
+        className={styles.paymentOptionContainer}
+        onChange={onChange}
+      >
+        {paymentMethods?.map((paymentMethods) => {
+          const label =
+            PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
+            paymentMethods.alias ||
+            paymentMethods.cardType
+
+          return (
+            <PaymentOption
+              key={paymentMethods.id}
+              value={paymentMethods.id as PaymentMethodEnum}
+              label={label}
+              cardNumber={paymentMethods.truncatedNumber}
+            />
+          )
+        })}
+      </PaymentOptionsGroup>
+    </section>
+  )
+}

packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css

@@ -0,0 +1,11 @@
+.paymentOptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}