feat: refactor of my stay

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

@@ -0,0 +1,47 @@
+import { useIntl } from "react-intl"
+
+import {
+  PAYMENT_METHOD_TITLES,
+  type PaymentMethodEnum,
+} from "@/constants/booking"
+
+import PaymentOptionsGroup from "../EnterDetails/Payment/PaymentOptionsGroup"
+import PaymentOption from "../PaymentOption"
+
+import styles from "./mySavedCards.module.css"
+
+import type { CreditCard } from "@/types/user"
+
+interface MySavedCardsProps {
+  savedCreditCards: CreditCard[] | null
+}
+
+export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
+  const intl = useIntl()
+  const mySavedCardsLabel = intl.formatMessage({
+    defaultMessage: "MY SAVED CARDS",
+  })
+
+  return (
+    <section className={styles.section}>
+      <PaymentOptionsGroup
+        name="paymentMethod"
+        label={mySavedCardsLabel}
+        className={styles.paymentOptionContainer}
+      >
+        {savedCreditCards?.map((savedCreditCard) => (
+          <PaymentOption
+            key={savedCreditCard.id}
+            value={savedCreditCard.id}
+            label={
+              PAYMENT_METHOD_TITLES[
+                savedCreditCard.cardType as PaymentMethodEnum
+              ]
+            }
+            cardNumber={savedCreditCard.truncatedNumber}
+          />
+        ))}
+      </PaymentOptionsGroup>
+    </section>
+  )
+}

apps/scandic-web/components/HotelReservation/MySavedCards/mySavedCards.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);
+}