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

95
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -12,8 +12,8 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import ImageGallery from "../../ImageGallery"
import RoomSidePeek from "../RoomSidePeek"
import { getIconForFeatureCode } from "../../utils"
import RoomSidePeek from "../RoomSidePeek"
import styles from "./roomCard.module.css"
@@ -26,17 +26,19 @@ export default function RoomCard({
handleSelectRate,
}: RoomCardProps) {
const intl = useIntl()
const saveRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "NonCancellable"
)
const changeRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "Modifiable"
)
const flexRate = rateDefinitions.find(
// TODO: Update string when API has decided
(rate) => rate.cancellationRule === "CancellableBefore6PM"
// TODO: Update string when API has decided
const rateTypes = {
saveRate: "NonCancellable",
changeRate: "Modifiable",
flexRate: "CancellableBefore6PM",
}
const rates = Object.fromEntries(
Object.entries(rateTypes).map(([key, rule]) => [
key,
rateDefinitions.find((rate) => rate.cancellationRule === rule),
])
)
function findProductForRate(rate: RateDefinition | undefined) {
@@ -49,9 +51,7 @@ export default function RoomCard({
: undefined
}
function getPriceInformationForRate(
rate: typeof saveRate | typeof changeRate | typeof flexRate
) {
function getPriceInformationForRate(rate: RateDefinition | undefined) {
return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
?.generalTerms
}
@@ -59,10 +59,7 @@ export default function RoomCard({
const selectedRoom = roomCategories.find(
(room) => room.name === roomConfiguration.roomType
)
const roomSize = selectedRoom?.roomSize
const occupancy = selectedRoom?.occupancy.total
const roomDescription = selectedRoom?.descriptions.short
const images = selectedRoom?.images
const { roomSize, occupancy, descriptions, images } = selectedRoom || {}
const mainImage = images?.[0]
return (
@@ -74,7 +71,7 @@ export default function RoomCard({
{
id: "booking.guests",
},
{ nrOfGuests: occupancy }
{ nrOfGuests: occupancy?.total }
)}
</Caption>
<Caption color="uiTextMediumContrast">
@@ -93,7 +90,7 @@ export default function RoomCard({
<Subtitle className={styles.name} type="two">
{roomConfiguration.roomType}
</Subtitle>
<Body>{roomDescription}</Body>
<Body>{descriptions?.short}</Body>
</div>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
@@ -101,39 +98,29 @@ export default function RoomCard({
})}
</Caption>
<div className={styles.flexibilityOptions}>
<FlexibilityOption
name={intl.formatMessage({ id: "Non-refundable" })}
value="non-refundable"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={findProductForRate(saveRate)}
priceInformation={getPriceInformationForRate(saveRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
features={roomConfiguration.features}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })}
value="free-rebooking"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={findProductForRate(changeRate)}
priceInformation={getPriceInformationForRate(changeRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
features={roomConfiguration.features}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })}
value="free-cancellation"
paymentTerm={intl.formatMessage({ id: "Pay later" })}
product={findProductForRate(flexRate)}
priceInformation={getPriceInformationForRate(flexRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
features={roomConfiguration.features}
/>
{Object.entries(rates).map(([key, rate]) => (
<FlexibilityOption
key={key}
name={intl.formatMessage({
id:
key === "flexRate"
? "Free cancellation"
: key === "saveRate"
? "Non-refundable"
: "Free rebooking",
})}
value={key.toLowerCase()}
paymentTerm={intl.formatMessage({
id: key === "flexRate" ? "Pay later" : "Pay now",
})}
product={findProductForRate(rate)}
priceInformation={getPriceInformationForRate(rate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
roomTypeCode={roomConfiguration.roomTypeCode}
features={roomConfiguration.features}
/>
))}
</div>
</div>
</div>