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>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css
+++ b/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css
@@ -0,0 +1,41 @@
+.paymentOption {
+  position: relative;
+  background-color: var(--UI-Input-Controls-Surface-Normal);
+  padding: var(--Spacing-x3);
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Spacing-x2);
+  cursor: pointer;
+}
+
+.paymentOption.focused {
+  outline: 2px solid var(--UI-Input-Controls-Border-Focus);
+  outline-offset: 2px;
+}
+
+.radio {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.radio.selected {
+  border: 8px solid var(--UI-Input-Controls-Fill-Selected);
+}
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.paymentOptionIcon {
+  position: absolute;
+  right: var(--Spacing-x3);
+  top: calc(50% - 16px);
+}
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
+++ b/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
@@ -0,0 +1,5 @@
+export interface PaymentOptionProps {
+  value: string
+  label: string
+  cardNumber?: string
+}