From e8e23a21138bd23489d9c41f8631f85cfc86d6b8 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Mon, 4 Nov 2024 16:11:25 +0100 Subject: [PATCH] feat: Convert Selected-Room to Steplike design and fix select-rate link --- .../(standard)/[step]/page.tsx | 7 +- .../EnterDetails/SectionAccordion/index.tsx | 2 +- .../EnterDetails/SelectedRoom/index.tsx | 109 ++++++++---------- .../SelectedRoom/selectedRoom.module.css | 88 ++++++++------ .../SelectRate/RoomSelection/utils.ts | 24 ++++ .../Text/Footnote/footnote.module.css | 3 + .../Text/Footnote/variants.ts | 1 + next-env.d.ts | 2 +- stores/enter-details.ts | 12 +- .../hotelReservation/enterDetails/room.ts | 7 ++ 10 files changed, 148 insertions(+), 107 deletions(-) create mode 100644 types/components/hotelReservation/enterDetails/room.ts diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx index 7b8d2da86..5b445c4a3 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx @@ -100,8 +100,11 @@ export default async function StepPage({ return (
- - + {/* TODO: How to handle no beds found? */} {roomAvailability.bedTypes ? ( diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx index 05a2f038e..b809da02a 100644 --- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx +++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx @@ -78,7 +78,7 @@ export default function SectionAccordion({ asChild textTransform="uppercase" type="label" - color="uiTextPlaceholder" + color="uiTextHighContrast" >

{header}

diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx index 523c06c1c..4f673e923 100644 --- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx +++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx @@ -2,10 +2,9 @@ import { useIntl } from "react-intl" -import { RoomConfiguration } from "@/server/routers/hotels/output" +import { useEnterDetailsStore } from "@/stores/enter-details" -import { EditIcon, ImageIcon } from "@/components/Icons" -import Button from "@/components/TempDesignSystem/Button" +import { CheckIcon, EditIcon } from "@/components/Icons" import Link from "@/components/TempDesignSystem/Link" import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" @@ -14,82 +13,64 @@ import ToggleSidePeek from "./ToggleSidePeek" import styles from "./selectedRoom.module.css" +import { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room" + export default function SelectedRoom({ hotelId, room, -}: { - hotelId: string - room: RoomConfiguration -}) { + rateDescription, +}: SelectedRoomProps) { const intl = useIntl() + + const selectRateUrl = useEnterDetailsStore((state) => state.selectRateUrl) + return ( -
-
- +
+
+
+ +
-
-
-
+
+
+
- {intl.formatMessage({ id: "Your room" })} +

{intl.formatMessage({ id: "Your room" })}

 -
- {/** - * [TEMP] - * No translation on Subtitles as they will be derived - * from Room selection. - */} - - {room.roomType} - - - Free rebooking - - - Pay now - -
+ + {room.roomType}{" "} + {`(${rateDescription})`} +
- {room?.roomTypeCode && ( + + + + {intl.formatMessage({ id: "Change room" })}{" "} + +
+ {room?.roomTypeCode && ( +
- )} -
- +
+ )}
-
+ ) } diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css index 5e64327cf..120ddc4e5 100644 --- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css +++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css @@ -1,51 +1,65 @@ -.container { - background-color: var(--Base-Surface-Primary-light-Normal); - border-radius: var(--Corner-radius-Large); - display: grid; - grid-template-columns: 144px 1fr; +.wrapper { + position: relative; + display: flex; + flex-direction: row; gap: var(--Spacing-x3); - padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2) - var(--Spacing-x2); + padding-top: var(--Spacing-x3); } -.tempImage { - align-items: center; - background-color: lightgray; - border-radius: var(--Corner-radius-Medium); +.wrapper::after { + position: absolute; + left: 12px; + bottom: 0; + top: var(--Spacing-x5); + height: 100%; + content: ""; + border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); +} + +.main { + display: grid; + width: 100%; + border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle); + padding-bottom: var(--Spacing-x3); + grid-template-rows: 2em 0fr; +} + +.headerContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.selection { + font-weight: 450; + font-size: var(--typography-Title-4-fontSize); +} + +.iconWrapper { + position: relative; + top: var(--Spacing-x1); + z-index: 2; +} + +.circle { + width: 24px; + height: 24px; + border-radius: 100px; + border: 2px solid var(--Base-Border-Inverted); display: flex; - height: auto; justify-content: center; - min-height: 80px; -} - -.content { align-items: center; - display: grid; - gap: var(--Spacing-x3); - grid-template-columns: 1fr auto; } -.textContainer { - display: grid; +.circle { + background-color: var(--UI-Input-Controls-Fill-Selected); } -.label { - grid-column: 1 / -1; +.rate { + color: var(--UI-Text-Placeholder); } -.text { +.details { display: flex; - flex-wrap: wrap; - gap: var(--Spacing-x1); -} - -p.invertFontWeight { - font-weight: 400; -} - -.invertFontWeight:not(:last-of-type)::after, -.room::after { - color: var(--UI-Text-Medium-contrast); - content: "∙"; - padding-left: var(--Spacing-x1); + justify-content: flex-start; } diff --git a/components/HotelReservation/SelectRate/RoomSelection/utils.ts b/components/HotelReservation/SelectRate/RoomSelection/utils.ts index a087c1ce6..999004eba 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/utils.ts +++ b/components/HotelReservation/SelectRate/RoomSelection/utils.ts @@ -1,6 +1,7 @@ import { getFormattedUrlQueryParams } from "@/utils/url" import { BedTypeEnum } from "@/types/components/bookingWidget/enums" +import { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData" import type { Child, SelectRateSearchParams, @@ -52,3 +53,26 @@ export function getQueryParamsForEnterDetails(searchParams: URLSearchParams) { rateCode: room[0].ratecode, } } + +export function createSelectRateUrl(roomData: BookingData) { + const { hotel, fromDate, toDate } = roomData + const params = new URLSearchParams({ fromDate, toDate, hotel }) + + roomData.room.forEach((room, index) => { + params.set(`room[${index}].adults`, room.adults.toString()) + + if (room.child) { + room.child.forEach((child, childIndex) => { + params.set( + `room[${index}].child[${childIndex}].age`, + child.age.toString() + ) + params.set( + `room[${index}].child[${childIndex}].bed`, + child.bed.toString() + ) + }) + } + }) + return params +} diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css index e1b1d550d..31fd9b16b 100644 --- a/components/TempDesignSystem/Text/Footnote/footnote.module.css +++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css @@ -66,6 +66,9 @@ color: var(--UI-Text-Medium-contrast); } +.uiTextHighContrast { + color: var(--UI-Text-High-contrast); +} .uiTextPlaceholder { color: var(--UI-Text-Placeholder); } diff --git a/components/TempDesignSystem/Text/Footnote/variants.ts b/components/TempDesignSystem/Text/Footnote/variants.ts index 311d81a58..5b9c2d4b1 100644 --- a/components/TempDesignSystem/Text/Footnote/variants.ts +++ b/components/TempDesignSystem/Text/Footnote/variants.ts @@ -15,6 +15,7 @@ const config = { pale: styles.pale, peach50: styles.peach50, uiTextMediumContrast: styles.uiTextMediumContrast, + uiTextHighContrast: styles.uiTextHighContrast, uiTextPlaceholder: styles.uiTextPlaceholder, white: styles.white, }, diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..40c3d6809 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/stores/enter-details.ts b/stores/enter-details.ts index 994d24e81..e40100bb3 100644 --- a/stores/enter-details.ts +++ b/stores/enter-details.ts @@ -9,7 +9,10 @@ import { guestDetailsSchema, signedInDetailsSchema, } from "@/components/HotelReservation/EnterDetails/Details/schema" -import { getQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils" +import { + createSelectRateUrl, + getQueryParamsForEnterDetails, +} from "@/components/HotelReservation/SelectRate/RoomSelection/utils" import { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData" import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast" @@ -26,6 +29,7 @@ interface EnterDetailsState { } & DetailsSchema roomData: BookingData steps: StepEnum[] + selectRateUrl: string currentStep: StepEnum isValid: Record completeStep: (updatedData: Partial) => void @@ -47,8 +51,11 @@ export function initEditDetailsState( : null let roomData: BookingData + let selectRateUrl: string if (searchParams?.size) { - roomData = getQueryParamsForEnterDetails(searchParams) + const data = getQueryParamsForEnterDetails(searchParams) + roomData = data + selectRateUrl = `select-rate?${createSelectRateUrl(data)}` } const defaultUserData: EnterDetailsState["userData"] = { @@ -115,6 +122,7 @@ export function initEditDetailsState( return create()((set, get) => ({ userData: initialData, roomData, + selectRateUrl, steps: Object.values(StepEnum), setCurrentStep: (step) => set({ currentStep: step }), navigate: (step, updatedData) => diff --git a/types/components/hotelReservation/enterDetails/room.ts b/types/components/hotelReservation/enterDetails/room.ts new file mode 100644 index 000000000..60e5e2646 --- /dev/null +++ b/types/components/hotelReservation/enterDetails/room.ts @@ -0,0 +1,7 @@ +import { RoomConfiguration } from "@/server/routers/hotels/output" + +export interface SelectedRoomProps { + hotelId: string + room: RoomConfiguration + rateDescription: string +}