feat(SW-453): Fixed new filter buttons and updated price in summary
This commit is contained in:
Pontus Dreij
@@ -19,6 +19,7 @@ export default function FlexibilityOption({
|
||||
priceInformation,
|
||||
roomType,
|
||||
roomTypeCode,
|
||||
features,
|
||||
handleSelectRate,
|
||||
}: FlexibilityOptionProps) {
|
||||
const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
|
||||
@@ -52,6 +53,7 @@ export default function FlexibilityOption({
|
||||
priceName: name,
|
||||
public: publicPrice,
|
||||
member: memberPrice,
|
||||
features,
|
||||
}
|
||||
handleSelectRate(rate)
|
||||
}
|
||||
|
||||
@@ -7,15 +7,28 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
import styles from "./rateSummary.module.css"
|
||||
|
||||
import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
|
||||
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
|
||||
|
||||
export default function RateSummary({
|
||||
rateSummary,
|
||||
isUserLoggedIn,
|
||||
packages,
|
||||
}: RateSummaryProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
|
||||
|
||||
const isPetRoomSelect = rateSummary.features.some(
|
||||
(feature) => feature.code === RoomPackageCodeEnum.PETR
|
||||
)
|
||||
|
||||
const petRoomPackage = packages.find(
|
||||
(pkg) => pkg.code === RoomPackageCodeEnum.PETR
|
||||
)
|
||||
|
||||
const petRoomPrice = petRoomPackage ? petRoomPackage.calculatedPrice : null
|
||||
const petRoomCurrency = petRoomPackage ? petRoomPackage.currency : null
|
||||
|
||||
return (
|
||||
<div className={styles.summary}>
|
||||
<div className={styles.summaryText}>
|
||||
@@ -34,6 +47,16 @@ export default function RateSummary({
|
||||
{priceToShow?.requestedPrice?.currency}
|
||||
</Body>
|
||||
</div>
|
||||
{isPetRoomSelect && (
|
||||
<div className={styles.petInfo}>
|
||||
<Body color="uiTextHighContrast" textTransform="bold">
|
||||
+ {petRoomPrice} {petRoomCurrency}
|
||||
</Body>
|
||||
<Body color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Pet charge" })}
|
||||
</Body>
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" theme="base">
|
||||
{intl.formatMessage({ id: "Continue" })}
|
||||
</Button>
|
||||
|
||||
+5
@@ -15,3 +15,8 @@
|
||||
display: flex;
|
||||
gap: var(--Spacing-x4);
|
||||
}
|
||||
|
||||
.petInfo {
|
||||
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
|
||||
padding-left: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { createElement } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { RateDefinition } from "@/server/routers/hotels/output"
|
||||
@@ -12,6 +13,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
|
||||
import ImageGallery from "../../ImageGallery"
|
||||
import RoomSidePeek from "../RoomSidePeek"
|
||||
import { getIconForFeatureCode } from "../../utils"
|
||||
|
||||
import styles from "./roomCard.module.css"
|
||||
|
||||
@@ -47,16 +49,16 @@ export default function RoomCard({
|
||||
: undefined
|
||||
}
|
||||
|
||||
function getPriceForRate(
|
||||
function getPriceInformationForRate(
|
||||
rate: typeof saveRate | typeof changeRate | typeof flexRate
|
||||
) {
|
||||
return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
|
||||
?.generalTerms
|
||||
}
|
||||
|
||||
const selectedRoom = roomCategories.find(
|
||||
(room) => room.name === roomConfiguration.roomType
|
||||
)
|
||||
|
||||
const roomSize = selectedRoom?.roomSize
|
||||
const occupancy = selectedRoom?.occupancy.total
|
||||
const roomDescription = selectedRoom?.descriptions.short
|
||||
@@ -68,7 +70,6 @@ export default function RoomCard({
|
||||
<div className={styles.cardBody}>
|
||||
<div className={styles.specification}>
|
||||
<Caption color="uiTextMediumContrast" className={styles.guests}>
|
||||
{/*TODO: Handle pluralisation*/}
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "booking.guests",
|
||||
@@ -105,44 +106,58 @@ export default function RoomCard({
|
||||
value="non-refundable"
|
||||
paymentTerm={intl.formatMessage({ id: "Pay now" })}
|
||||
product={findProductForRate(saveRate)}
|
||||
priceInformation={getPriceForRate(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={getPriceForRate(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={getPriceForRate(flexRate)}
|
||||
priceInformation={getPriceInformationForRate(flexRate)}
|
||||
handleSelectRate={handleSelectRate}
|
||||
roomType={roomConfiguration.roomType}
|
||||
roomTypeCode={roomConfiguration.roomTypeCode}
|
||||
features={roomConfiguration.features}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{mainImage && (
|
||||
<div className={styles.imageContainer}>
|
||||
{roomConfiguration.roomsLeft < 5 && (
|
||||
<span className={styles.roomsLeft}>
|
||||
<Footnote
|
||||
color="burgundy"
|
||||
textTransform="uppercase"
|
||||
>{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
|
||||
</span>
|
||||
)}
|
||||
<div className={styles.chipContainer}>
|
||||
{roomConfiguration.roomsLeft < 5 && (
|
||||
<span className={styles.chip}>
|
||||
<Footnote
|
||||
color="burgundy"
|
||||
textTransform="uppercase"
|
||||
>{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
|
||||
</span>
|
||||
)}
|
||||
{roomConfiguration.features.map((feature) => (
|
||||
<span className={styles.chip} key={feature.code}>
|
||||
{createElement(getIconForFeatureCode(feature.code), {
|
||||
width: 16,
|
||||
height: 16,
|
||||
color: "burgundy",
|
||||
})}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/*NOTE: images from the test API are hosted on test3.scandichotels.com,
|
||||
which can't be accessed unless on Scandic's Wifi or using Citrix. */}
|
||||
{images && (
|
||||
|
||||
@@ -64,10 +64,17 @@
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.roomsLeft {
|
||||
.chipContainer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.chip {
|
||||
background-color: var(--Main-Grey-White);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
|
||||
@@ -15,6 +15,7 @@ export default function RoomSelection({
|
||||
roomsAvailability,
|
||||
roomCategories,
|
||||
user,
|
||||
packages,
|
||||
}: RoomSelectionProps) {
|
||||
const [rateSummary, setRateSummary] = useState<Rate | null>(null)
|
||||
|
||||
@@ -69,6 +70,7 @@ export default function RoomSelection({
|
||||
<RateSummary
|
||||
rateSummary={rateSummary}
|
||||
isUserLoggedIn={isUserLoggedIn}
|
||||
packages={packages}
|
||||
/>
|
||||
)}
|
||||
</form>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
}
|
||||
|
||||
.roomList {
|
||||
margin-top: var(--Spacing-x4);
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user