scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor of my stay

Browse Source
This commit is contained in:
Simon Emanuelsson
2025-04-25 14:08:14 +02:00
committed by Simon.Emanuelsson
parent b5deb84b33
commit ec087a3d15
208 changed files with 5458 additions and 4569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MySavedCards/index.tsx
View File

@@ -1,47 +0,0 @@
import { useIntl } from "react-intl"
import {
PAYMENT_METHOD_TITLES,
type PaymentMethodEnum,
} from "@/constants/booking"
import PaymentOption from "../PaymentOption"
import PaymentOptionsGroup from "../PaymentOptionsGroup"
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>
)
}

11
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MySavedCards/mySavedCards.module.css
View File

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

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

@@ -22,6 +22,8 @@ import { env } from "@/env/client"
import { trpc } from "@/lib/trpc/client"
import { useEnterDetailsStore } from "@/stores/enter-details"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import LoadingSpinner from "@/components/LoadingSpinner"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -40,9 +42,7 @@ import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
import GuaranteeDetails from "./GuaranteeDetails"
import { hasFlexibleRate, hasPrepaidRate, isPaymentMethodEnum } from "./helpers"
import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import MySavedCards from "./MySavedCards"
import PaymentAlert from "./PaymentAlert"
import PaymentOption from "./PaymentOption"
import PaymentOptionsGroup from "./PaymentOptionsGroup"
import { type PaymentFormData, paymentSchema } from "./schema"
import TermsAndConditions from "./TermsAndConditions"

56
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx
View File

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

41
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.module.css
View File

@@ -1,41 +0,0 @@
.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);
}

5
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts
View File

@@ -1,5 +0,0 @@
export interface PaymentOptionProps {
value: string
label: string
cardNumber?: string
}