feat: refactor of my stay

2025-04-25 14:08:14 +02:00
parent b5deb84b33
commit ec087a3d15
208 changed files with 5458 additions and 4569 deletions
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
@@ -0,0 +1,56 @@
+import { cx } from "class-variance-authority"
+import Image from "next/image"
+import { Radio } from "react-aria-components"
+
+import {
+  PAYMENT_METHOD_ICONS,
+  type PaymentMethodEnum,
+} from "@/constants/booking"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./paymentOption.module.css"
+
+import type { PaymentOptionProps } from "./paymentOption"
+
+export default function PaymentOption({
+  value,
+  label,
+  cardNumber,
+}: PaymentOptionProps) {
+  return (
+    <Radio
+      value={value}
+      className={({ isFocusVisible }) =>
+        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
+      }
+    >
+      {({ isSelected }) => (
+        <>
+          <div className={styles.titleContainer}>
+            <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}
+            />
+          )}
+        </>
+      )}
+    </Radio>
+  )
+}