002d093af4
feat(SW-2863): Move contentstack router to trpc package * Add exports to packages and lint rule to prevent relative imports * Add env to trpc package * Add eslint to trpc package * Apply lint rules * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * WIP first step * update internal imports in trpc * Fix most errors in scandic-web Just 100 left... * Move Props type out of trpc * Fix CategorizedFilters types * Move more schemas in hotel router * Fix deps * fix getNonContentstackUrls * Fix import error * Fix entry error handling * Fix generateMetadata metrics * Fix alertType enum * Fix duplicated types * lint:fix * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package * Fix broken imports * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package Approved-by: Linus Flood
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { cx } from "class-variance-authority"
|
|
import Image from "next/image"
|
|
import { Radio } from "react-aria-components"
|
|
|
|
import { PAYMENT_METHOD_ICONS } 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 { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
|
|
|
|
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>
|
|
)
|
|
}
|