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

feat(sw-453): fixed mobile view and some improvements

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-28 13:11:24 +01:00
parent 8da94fc259
commit 917f44f323
20 changed files with 299 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
View File

@@ -2,6 +2,8 @@ import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./rateSummary.module.css"
@@ -13,12 +15,19 @@ export default function RateSummary({
rateSummary,
isUserLoggedIn,
packages,
roomsAvailability,
}: RateSummaryProps) {
const intl = useIntl()
const {
member,
public: publicRate,
features,
roomType,
priceName,
} = rateSummary
const priceToShow = isUserLoggedIn ? member : publicRate
const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
const isPetRoomSelect = rateSummary.features.some(
const isPetRoomSelect = features.some(
(feature) => feature.code === RoomPackageCodeEnum.PETR
)
@@ -26,17 +35,23 @@ export default function RateSummary({
(pkg) => pkg.code === RoomPackageCodeEnum.PETR
)
const petRoomPrice = petRoomPackage ? petRoomPackage.calculatedPrice : null
const petRoomCurrency = petRoomPackage ? petRoomPackage.currency : null
const petRoomPrice = petRoomPackage?.calculatedPrice ?? null
const petRoomCurrency = petRoomPackage?.currency ?? null
const checkInDate = new Date(roomsAvailability.checkInDate)
const checkOutDate = new Date(roomsAvailability.checkOutDate)
const nights = Math.ceil(
(checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24)
)
return (
<div className={styles.summary}>
<div className={styles.summaryText}>
<Subtitle color="uiTextHighContrast">{rateSummary.roomType}</Subtitle>
<Body color="uiTextMediumContrast">{rateSummary.priceName}</Body>
<Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
<Body color="uiTextMediumContrast">{priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceText}>
<div className={styles.summaryPriceTextDesktop}>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
@@ -47,6 +62,38 @@ export default function RateSummary({
{priceToShow?.requestedPrice?.currency}
</Body>
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Total price" })}
</Caption>
<Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
{priceToShow?.localPrice.pricePerStay}{" "}
{priceToShow?.localPrice.currency}
</Subtitle>
<Footnote
color="uiTextMediumContrast"
className={styles.summaryPriceTextMobile}
>
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
,{" "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: roomsAvailability.occupancy?.adults }
)}
{roomsAvailability.occupancy?.children && (
<>
,{" "}
{intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: roomsAvailability.occupancy.children }
)}
</>
)}
</Footnote>
</div>
{isPetRoomSelect && (
<div className={styles.petInfo}>
<Body color="uiTextHighContrast" textTransform="bold">
@@ -57,7 +104,7 @@ export default function RateSummary({
</Body>
</div>
)}
<Button type="submit" theme="base">
<Button type="submit" theme="base" className={styles.continueButton}>
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>

42
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
View File

@@ -5,7 +5,7 @@
left: 0;
right: 0;
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
display: flex;
justify-content: space-between;
align-items: center;
@@ -13,10 +13,50 @@
.summaryPrice {
display: flex;
width: 100%;
gap: var(--Spacing-x4);
}
.petInfo {
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding-left: var(--Spacing-x2);
display: none;
}
.summaryText {
display: none;
}
.summaryPriceTextDesktop {
display: none;
}
.continueButton {
margin-left: auto;
height: fit-content;
width: 100%;
}
.summaryPriceTextMobile {
white-space: nowrap;
}
@media (min-width: 768px) {
.summary {
padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
}
.petInfo,
.summaryText,
.summaryPriceTextDesktop {
display: block;
}
.summaryPriceTextMobile {
display: none;
}
.summaryPrice {
width: auto;
}
.continueButton {
width: auto;
}
}