diff --git a/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index 1cd297438..0db81b6ce 100644
--- a/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -14,7 +14,7 @@ export default async function EmptyUpcomingStaysBlock() {
return (
-
+ <Title as="h4" level="h3" color="red" className={styles.title}>
{formatMessage({ id: "You have no upcoming stays." })}
<span className={styles.burgundyTitle}>
{formatMessage({ id: "Where should you go next?" })}
diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx
index 6a594199e..af4bf4c48 100644
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -1,17 +1,18 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { dt } from "@/lib/dt"
+import { StickyElementNameEnum } from "@/stores/sticky-position"
import Form from "@/components/Forms/BookingWidget"
import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
import { CloseLargeIcon } from "@/components/Icons"
+import useStickyPosition from "@/hooks/useStickyPosition"
import { debounce } from "@/utils/debounce"
import { getFormattedUrlQueryParams } from "@/utils/url"
-import getHotelReservationQueryParams from "../HotelReservation/SelectRate/RoomSelection/utils"
import MobileToggleButton from "./MobileToggleButton"
import styles from "./bookingWidget.module.css"
@@ -29,6 +30,11 @@ export default function BookingWidgetClient({
searchParams,
}: BookingWidgetClientProps) {
const [isOpen, setIsOpen] = useState(false)
+ const bookingWidgetRef = useRef(null)
+ useStickyPosition({
+ ref: bookingWidgetRef,
+ name: StickyElementNameEnum.BOOKING_WIDGET,
+ })
const sessionStorageSearchData =
typeof window !== "undefined"
@@ -61,12 +67,14 @@ export default function BookingWidgetClient({
return undefined
}
+ const reqFromDate = bookingWidgetSearchData?.fromDate?.toString()
+ const reqToDate = bookingWidgetSearchData?.toDate?.toString()
+
const isDateParamValid =
- bookingWidgetSearchData?.fromDate &&
- bookingWidgetSearchData?.toDate &&
- dt(bookingWidgetSearchData?.toDate.toString()).isAfter(
- dt(bookingWidgetSearchData?.fromDate.toString())
- )
+ reqFromDate &&
+ reqToDate &&
+ dt(reqFromDate).isAfter(dt().subtract(1, "day")) &&
+ dt(reqToDate).isAfter(dt(reqFromDate))
const selectedLocation = bookingWidgetSearchData
? getLocationObj(
@@ -140,7 +148,10 @@ export default function BookingWidgetClient({
return (
<FormProvider {...methods}>
- <section className={styles.container} data-open={isOpen}>
+ <section ref={bookingWidgetRef} className={styles.containerDesktop}>
+ <Form locations={locations} type={type} />
+ </section>
+ <section className={styles.containerMobile} data-open={isOpen}>
<button
className={styles.close}
onClick={closeMobileSearch}
diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx
index a58bdd1b2..80026ff93 100644
--- a/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/components/BookingWidget/MobileToggleButton/index.tsx
@@ -1,15 +1,17 @@
"use client"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
+import { StickyElementNameEnum } from "@/stores/sticky-position"
import { EditIcon, SearchIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
+import useStickyPosition from "@/hooks/useStickyPosition"
import styles from "./button.module.css"
@@ -29,6 +31,12 @@ export default function MobileToggleButton({
const location = useWatch({ name: "location" })
const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" })
+ const bookingWidgetMobileRef = useRef(null)
+ useStickyPosition({
+ ref: bookingWidgetMobileRef,
+ name: StickyElementNameEnum.BOOKING_WIDGET_MOBILE,
+ })
+
const parsedLocation: Location | null = location
? JSON.parse(decodeURIComponent(location))
: null
@@ -46,70 +54,82 @@ export default function MobileToggleButton({
return null
}
- if (parsedLocation && d) {
- const totalRooms = rooms.length
- const totalAdults = rooms.reduce((acc, room) => {
- if (room.adults) {
- acc = acc + room.adults
- }
- return acc
- }, 0)
- const totalChildren = rooms.reduce((acc, room) => {
- if (room.child) {
- acc = acc + room.child.length
- }
- return acc
- }, 0)
- return (
- <div className={styles.complete} onClick={openMobileSearch} role="button">
- <div>
- <Caption color="red">{parsedLocation.name}</Caption>
- <Caption>
- {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
- { id: "booking.nights" },
- { totalNights: nights }
- )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${
- totalChildren > 0
- ? intl.formatMessage(
- { id: "booking.children" },
- { totalChildren }
- ) + ", "
- : ""
- }${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
- </Caption>
- </div>
- <div className={styles.icon}>
- <EditIcon color="white" />
- </div>
- </div>
- )
- }
+ const locationAndDateIsSet = parsedLocation && d
+
+ const totalRooms = rooms.length
+ const totalAdults = rooms.reduce((acc, room) => {
+ if (room.adults) {
+ acc = acc + room.adults
+ }
+ return acc
+ }, 0)
+ const totalChildren = rooms.reduce((acc, room) => {
+ if (room.child) {
+ acc = acc + room.child.length
+ }
+ return acc
+ }, 0)
return (
- <div className={styles.partial} onClick={openMobileSearch} role="button">
- <div>
- <Caption color="red">{intl.formatMessage({ id: "Where to" })}</Caption>
- <Body color="uiTextPlaceholder">
- {parsedLocation
- ? parsedLocation.name
- : intl.formatMessage({ id: "Destination" })}
- </Body>
- </div>
- <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
- <div>
- <Caption color="red">
- {intl.formatMessage(
- { id: "booking.nights" },
- { totalNights: nights }
- )}
- </Caption>
- <Body>
- {selectedFromDate} - {selectedToDate}
- </Body>
- </div>
- <div className={styles.icon}>
- <SearchIcon color="white" />
- </div>
+ <div
+ className={locationAndDateIsSet ? styles.complete : styles.partial}
+ onClick={openMobileSearch}
+ role="button"
+ ref={bookingWidgetMobileRef}
+ >
+ {!locationAndDateIsSet && (
+ <>
+ <div>
+ <Caption type="bold" color="red">
+ {intl.formatMessage({ id: "Where to" })}
+ </Caption>
+ <Body color="uiTextPlaceholder">
+ {parsedLocation
+ ? parsedLocation.name
+ : intl.formatMessage({ id: "Destination" })}
+ </Body>
+ </div>
+ <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
+ <div>
+ <Caption type="bold" color="red">
+ {intl.formatMessage(
+ { id: "booking.nights" },
+ { totalNights: nights }
+ )}
+ </Caption>
+ <Body>
+ {selectedFromDate} - {selectedToDate}
+ </Body>
+ </div>
+ <div className={styles.icon}>
+ <SearchIcon color="white" />
+ </div>
+ </>
+ )}
+
+ {locationAndDateIsSet && (
+ <>
+ <div>
+ <Caption color="red">{parsedLocation?.name}</Caption>
+ <Caption>
+ {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
+ { id: "booking.nights" },
+ { totalNights: nights }
+ )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${
+ totalChildren > 0
+ ? intl.formatMessage(
+ { id: "booking.children" },
+ { totalChildren }
+ ) + ", "
+ : ""
+ }${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
+ </Caption>
+ </div>
+ <div className={styles.icon}>
+ <EditIcon color="white" />
+ </div>
+ </>
+ )}
</div>
)
}
diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css
index d8235bae8..f0dec979d 100644
--- a/components/BookingWidget/bookingWidget.module.css
+++ b/components/BookingWidget/bookingWidget.module.css
@@ -1,5 +1,11 @@
+.containerDesktop,
+.containerMobile,
+.close {
+ display: none;
+}
+
@media screen and (max-width: 767px) {
- .container {
+ .containerMobile {
background-color: var(--UI-Input-Controls-Surface-Normal);
bottom: -100%;
display: grid;
@@ -14,7 +20,7 @@
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
}
- .container[data-open="true"] {
+ .containerMobile[data-open="true"] {
bottom: 0;
}
@@ -25,7 +31,7 @@
justify-self: flex-end;
}
- .container[data-open="true"] + .backdrop {
+ .containerMobile[data-open="true"] + .backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
@@ -37,7 +43,7 @@
}
@media screen and (min-width: 768px) {
- .container {
+ .containerDesktop {
display: block;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
position: sticky;
@@ -45,10 +51,6 @@
z-index: 10;
background-color: var(--Base-Surface-Primary-light-Normal);
}
-
- .close {
- display: none;
- }
}
@media screen and (min-width: 1367px) {
diff --git a/components/Breadcrumbs/breadcrumbs.module.css b/components/Breadcrumbs/breadcrumbs.module.css
index 9523fd4c9..93bedd5a6 100644
--- a/components/Breadcrumbs/breadcrumbs.module.css
+++ b/components/Breadcrumbs/breadcrumbs.module.css
@@ -19,6 +19,7 @@
.listItem {
align-items: center;
display: flex;
+ gap: var(--Spacing-x-quarter);
}
.homeLink {
diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx
index 1939e47fa..adf892011 100644
--- a/components/Breadcrumbs/index.tsx
+++ b/components/Breadcrumbs/index.tsx
@@ -1,6 +1,6 @@
import { serverClient } from "@/lib/trpc/server"
-import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import { ChevronRightSmallIcon, HouseIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -24,9 +24,9 @@ export default async function Breadcrumbs() {
href={homeBreadcrumb.href!}
variant="breadcrumb"
>
- <HouseIcon color="peach80" />
+ <HouseIcon width={16} height={16} color="peach80" />
</Link>
- <ChevronRightIcon aria-hidden="true" color="peach80" />
+ <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
</li>
) : null}
@@ -41,7 +41,7 @@ export default async function Breadcrumbs() {
>
{breadcrumb.title}
</Link>
- <ChevronRightIcon aria-hidden="true" color="peach80" />
+ <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
</li>
)
}
diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
index e35dc13a6..d3e5d9d91 100644
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -18,6 +18,7 @@
.amenityItem {
display: inline-flex;
gap: var(--Spacing-x1);
+ align-items: center;
}
.icon {
diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 8c90f19c2..03244ea7a 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -1,7 +1,7 @@
import { amenities } from "@/constants/routes/hotelPageParams"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { ChevronRightIcon } from "@/components/Icons"
+import { ChevronRightSmallIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -29,7 +29,12 @@ export default async function AmenitiesList({
return (
<div className={styles.amenityItem} key={facility.id}>
{IconComponent && (
- <IconComponent className={styles.icon} color="grey80" />
+ <IconComponent
+ className={styles.icon}
+ color="grey80"
+ width={20}
+ height={20}
+ />
)}
<Body color="textMediumContrast">{facility.name}</Body>
</div>
@@ -44,7 +49,7 @@ export default async function AmenitiesList({
className={styles.showAllAmenities}
>
{intl.formatMessage({ id: "Show all amenities" })}
- <ChevronRightIcon color="burgundy" />
+ <ChevronRightSmallIcon color="burgundy" />
</Link>
</section>
)
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index 360d0f8df..010530f74 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -1,7 +1,6 @@
import { about } from "@/constants/routes/hotelPageParams"
-import { ChevronRightIcon } from "@/components/Icons"
-import ArrowRight from "@/components/Icons/ArrowRight"
+import { ChevronRightSmallIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -48,7 +47,7 @@ export default async function IntroSection({
<div className={styles.mainContent}>
<div className={styles.titleContainer}>
<BiroScript tilted="medium" color="red">
- {intl.formatMessage({ id: "Welcome to" })}:
+ {intl.formatMessage({ id: "Welcome to" })}
</BiroScript>
<Title level="h2">{hotelName}
@@ -77,7 +76,7 @@ export default async function IntroSection({
scroll={false}
>
{intl.formatMessage({ id: "Read more about the hotel" })}
-
+