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

feat(SW-415): Update Room card UI

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-09 11:03:02 +02:00
parent 67df5f0771
commit 79442d80b8
19 changed files with 378 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
View File

@@ -1,9 +1,11 @@
"use client"
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import { InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import PriceTable from "./PriceTable"
import styles from "./flexibilityOption.module.css"
import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
@@ -16,55 +18,35 @@ export default function FlexibilityOption({
const intl = useIntl()
if (!product) {
// TODO: Implement empty state when this rate can't be booked
return <div>TBI: Rate not available</div>
return (
<div className={styles.disabledCard}>
<div className={styles.header}>
<InfoCircleIcon className={styles.infoIcon} />
<Caption>{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
<PriceTable />
</div>
</div>
)
}
const { productType } = product
const { public: publicPrice, member: memberPrice } = productType
const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
publicPrice
const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
memberPrice
return (
<label>
<input
type="radio"
name="rateCode"
value={product.productType.public.rateCode}
value={product.productType.public?.rateCode}
/>
<div className={styles.card}>
<div className={styles.header}>
<Body>{name}</Body>
<Caption>{paymentTerm}</Caption>
<InfoCircleIcon className={styles.infoIcon} />
<Caption>{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
<PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
</div>
<dl>
<div>
<dt>{intl.formatMessage({ id: "Standard price" })}</dt>
<dd>
{publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd>
</div>
<div>
<dt>{intl.formatMessage({ id: "Member price" })}</dt>
<dd>
{memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd>
</div>
{publicRequestedPrice && memberRequestedPrice && (
<div>
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
<dd>
{publicRequestedPrice.pricePerNight}/
{memberRequestedPrice.pricePerNight}{" "}
{publicRequestedPrice.currency}
</dd>
</div>
)}
</dl>
</div>
</label>
)