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

feat(SW-415): Added content from API

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-10 10:34:00 +02:00
parent 87547bf128
commit 4c06a1b98d
26 changed files with 467 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx
View File

@@ -1,7 +1,11 @@
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./priceTable.module.css"
import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
export default function PriceTable({
@@ -18,39 +22,81 @@ export default function PriceTable({
const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
return (
<dl>
<div>
<dt>{intl.formatMessage({ id: "Standard price" })}</dt>
<dl className={styles.priceTable}>
<div className={styles.priceRow}>
<dt>
<Caption
textTransform="bold"
color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
>
{intl.formatMessage({ id: "Standard price" })}
</Caption>
</dt>
<dd>
{publicLocalPrice ? (
<>
{publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
{intl.formatMessage({ id: "night" })}
</>
<div className={styles.price}>
<Subtitle type="two" color="uiTextHighContrast">
{publicLocalPrice.pricePerNight}
</Subtitle>
<Body color="uiTextHighContrast" textTransform="bold">
{publicLocalPrice.currency}
</Body>
</div>
) : (
<Subtitle type="two">{intl.formatMessage({ id: "n/a" })}</Subtitle>
<Subtitle type="two" color="disabled">
{intl.formatMessage({ id: "n/a" })}
</Subtitle>
)}
</dd>
</div>
{memberLocalPrice && (
<div>
<dt>{intl.formatMessage({ id: "Member price" })}</dt>
<dd>
{memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
{intl.formatMessage({ id: "night" })}
</dd>
</div>
)}
{showRequestedPrice && (
<div>
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
<dd>
{publicRequestedPrice.pricePerNight}/
{memberRequestedPrice.pricePerNight} {publicRequestedPrice.currency}
</dd>
</div>
)}
<div className={styles.priceRow}>
<dt>
<Caption
textTransform="bold"
color={memberLocalPrice ? "red" : "disabled"}
>
{intl.formatMessage({ id: "Member price" })}
</Caption>
</dt>
<dd>
{memberLocalPrice ? (
<div className={styles.price}>
<Subtitle type="two" color="red">
{memberLocalPrice.pricePerNight}
</Subtitle>
<Body color="red" textTransform="bold">
{memberLocalPrice.currency}
</Body>
</div>
) : (
<Body textTransform="bold" color="disabled">
- {intl.formatMessage({ id: "Currency Code" })}
</Body>
)}
</dd>
</div>
<div className={styles.priceRow}>
<dt>
<Caption
color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
>
{intl.formatMessage({ id: "Approx." })}
</Caption>
</dt>
<dd>
{showRequestedPrice ? (
<Caption color="uiTextMediumContrast">
{publicRequestedPrice.pricePerNight}/
{memberRequestedPrice.pricePerNight}{" "}
{publicRequestedPrice.currency}
</Caption>
) : (
<Caption color="disabled">- / - EUR</Caption>
)}
</dd>
</div>
</dl>
)
}

14
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/priceTable.module.css Normal file
View File

@@ -0,0 +1,14 @@
.priceRow {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x-quarter) 0;
}
.priceTable {
margin: 0;
}
.price {
display: flex;
gap: var(--Spacing-x-half);
}