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

feat(SW-453): Fixed new filter buttons and updated price in summary

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-28 10:43:53 +01:00
parent 7b36139684
commit 8da94fc259
39 changed files with 367 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/HotelReservation/SelectRate/RoomFilter/index.tsx
View File

@@ -6,16 +6,19 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { z } from "zod"
import { RoomPackageCode } from "@/server/routers/hotels/schemas/packages"
import Chip from "@/components/TempDesignSystem/Chip"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import { InfoCircleIcon } from "@/components/Icons"
import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
import { getIconForFeatureCode } from "../utils"
import styles from "./roomFilter.module.css"
import { RoomFilterProps } from "@/types/components/hotelReservation/selectRate/roomFilter"
import {
RoomFilterProps,
RoomPackageCodeEnum,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
export default function RoomFilter({
numberOfRooms,
@@ -43,8 +46,8 @@ export default function RoomFilter({
})
const { watch, getValues, handleSubmit } = methods
const petFriendly = watch(RoomPackageCode.PETR)
const allergyFriendly = watch(RoomPackageCode.ALLG)
const petFriendly = watch(RoomPackageCodeEnum.PETR)
const allergyFriendly = watch(RoomPackageCodeEnum.ALLG)
const submitFilter = useCallback(() => {
const data = getValues()
@@ -65,21 +68,27 @@ export default function RoomFilter({
<form onSubmit={handleSubmit(submitFilter)}>
<div className={styles.roomsFilter}>
{filterOptions.map((option) => (
<Checkbox
<CheckboxChip
name={option.code}
key={option.code}
registerOptions={{
required: false,
disabled:
(option.code === RoomPackageCode.PETR && allergyFriendly) ||
(option.code === RoomPackageCode.ALLG && petFriendly),
}}
>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: option.description })}
</Caption>
</Checkbox>
label={intl.formatMessage({ id: option.description })}
disabled={
(option.code === RoomPackageCodeEnum.ALLG && petFriendly) ||
(option.code === RoomPackageCodeEnum.PETR && allergyFriendly)
}
selected={getValues(option.code)}
Icon={getIconForFeatureCode(option.code)}
/>
))}
<Tooltip
text={intl.formatMessage({
id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
})}
position="bottom"
arrow="right"
>
<InfoCircleIcon className={styles.infoIcon} />
</Tooltip>
</div>
</form>
</FormProvider>

10
components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
View File

@@ -2,10 +2,18 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.roomsFilter {
display: flex;
flex-direction: row;
gap: var(--Spacing-x3);
gap: var(--Spacing-x1);
align-items: center;
}
.roomsFilter .infoIcon,
.roomsFilter .infoIcon path {
stroke: var(--UI-Text-Medium-contrast);
fill: transparent;
}

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

@@ -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)
}

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

@@ -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
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
View File

@@ -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);
}

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

@@ -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 && (

9
components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
View File

@@ -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);

2
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -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>

1
components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
View File

@@ -3,7 +3,6 @@
}
.roomList {
margin-top: var(--Spacing-x4);
list-style: none;
display: grid;
grid-template-columns: 1fr;

5
components/HotelReservation/SelectRate/Rooms/index.tsx
View File

@@ -9,15 +9,15 @@ import RoomSelection from "../RoomSelection"
import styles from "./rooms.module.css"
import { RoomProps } from "@/types/components/hotelReservation/selectRate/room"
import { RoomPackageCodes } from "@/types/components/hotelReservation/selectRate/roomFilter"
import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
export default function Rooms({
roomsAvailability,
roomCategories = [],
user,
packages,
}: RoomProps) {
}: RoomSelectionProps) {
const [rooms, setRooms] = useState<RoomsAvailability>(roomsAvailability)
function handleFilter(filter: Record<string, boolean | undefined>) {
@@ -47,6 +47,7 @@ export default function Rooms({
roomsAvailability={rooms}
roomCategories={roomCategories}
user={user}
packages={packages}
/>
</div>
)

2
components/HotelReservation/SelectRate/Rooms/rooms.module.css
View File

@@ -3,6 +3,6 @@
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--Spacing-x7);
gap: var(--Spacing-x2);
padding: var(--Spacing-x2);
}

19
components/HotelReservation/SelectRate/utils.ts Normal file
View File

@@ -0,0 +1,19 @@
import { AllergyIcon,PetsIcon, WheelchairIcon } from "@/components/Icons"
import {
RoomPackageCodeEnum,
RoomPackageCodes,
} from "@/types/components/hotelReservation/selectRate/roomFilter"
export function getIconForFeatureCode(featureCode: RoomPackageCodes) {
switch (featureCode) {
case RoomPackageCodeEnum.ACCE:
return WheelchairIcon
case RoomPackageCodeEnum.ALLG:
return AllergyIcon
case RoomPackageCodeEnum.PETR:
return PetsIcon
default:
return PetsIcon
}
}