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

Merge remote-tracking branch 'origin' into feature/tracking

Browse Source
This commit is contained in:
Linus Flood
2024-12-16 09:11:28 +01:00
parent 276253057c 01c0d5c35e
commit f91d74294e
42 changed files with 630 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
+2 -1
View File
@@ -17,6 +17,7 @@ export default function ClientCurrentRewards({
rewards,
pageSize,
showRedeem,
membershipNumber,
}: CurrentRewardsClientProps) {
const containerRef = useRef<HTMLDivElement>(null)
const [currentPage, setCurrentPage] = useState(1)
@@ -55,7 +56,7 @@ export default function ClientCurrentRewards({
</div>
{showRedeem && "redeem_description" in reward && (
<div className={styles.btnContainer}>
<Redeem reward={reward} />
<Redeem reward={reward} membershipNumber={membershipNumber} />
</div>
)}
</article>
components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+83 -12
View File
@@ -18,6 +18,7 @@ import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
import { RewardIcon } from "../RewardIcon"
@@ -28,11 +29,12 @@ import type {
RedeemProps,
RedeemStep,
} from "@/types/components/myPages/myPage/accountPage"
import type { Reward } from "@/server/routers/contentstack/reward/output"
const MotionOverlay = motion(ModalOverlay)
const MotionModal = motion(Modal)
export default function Redeem({ reward }: RedeemProps) {
export default function Redeem({ reward, membershipNumber }: RedeemProps) {
const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
const intl = useIntl()
const update = trpc.contentstack.rewards.redeem.useMutation()
@@ -100,17 +102,7 @@ export default function Redeem({ reward }: RedeemProps) {
</header>
<div className={styles.modalContent}>
{redeemStep === "redeemed" && (
<div className={styles.badge}>
<div className={styles.redeemed}>
<CheckCircleIcon color="uiSemanticSuccess" />
<Caption>
{intl.formatMessage({
id: "Redeemed & valid through:",
})}
</Caption>
</div>
<Countdown />
</div>
<ConfirmationBadge reward={reward} />
)}
<RewardIcon rewardId={reward.reward_id} />
<Title level="h3" textAlign="center" textTransform="regular">
@@ -127,6 +119,13 @@ export default function Redeem({ reward }: RedeemProps) {
{reward.redeem_description}
</Body>
)}
{redeemStep === "redeemed" &&
isRestaurantOnSiteTierReward(reward) &&
membershipNumber && (
<MembershipNumberBadge
membershipNumber={membershipNumber}
/>
)}
</div>
{redeemStep === "initial" && (
<footer className={styles.modalFooter}>
@@ -189,3 +188,75 @@ const variants = {
},
},
}
function ConfirmationBadge({ reward }: { reward: Reward }) {
return (
<div className={styles.badge}>
{isRestaurantOnSiteTierReward(reward) ? (
<ActiveRedeemedBadge />
) : (
<TimedRedeemedBadge />
)}
</div>
)
}
function ActiveRedeemedBadge() {
const intl = useIntl()
return (
<div className={styles.redeemed}>
<motion.div
animate={{
opacity: [1, 0.4, 1],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut",
}}
>
<CheckCircleIcon color="uiSemanticSuccess" />
</motion.div>
<Caption>{intl.formatMessage({ id: "Active" })}</Caption>
</div>
)
}
function TimedRedeemedBadge() {
const intl = useIntl()
return (
<>
<div className={styles.redeemed}>
<CheckCircleIcon color="uiSemanticSuccess" />
<Caption>
{intl.formatMessage({
id: "Redeemed & valid through:",
})}
</Caption>
</div>
<Countdown />
</>
)
}
function MembershipNumberBadge({
membershipNumber,
}: {
membershipNumber: string
}) {
const intl = useIntl()
return (
<div className={styles.membershipNumberBadge}>
<Caption
textTransform="uppercase"
textAlign="center"
color="uiTextHighContrast"
>
{intl.formatMessage({ id: "Membership ID:" })} {membershipNumber}
</Caption>
</div>
)
}
components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
+13
View File
@@ -130,3 +130,16 @@
display: flex;
align-items: center;
}
.active {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
color: var(--UI-Semantic-Success);
}
.membershipNumberBadge {
border-radius: var(--Small);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
background: var(--Base-Surface-Secondary-light-Normal);
}
components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
+9 -2
View File
@@ -1,5 +1,8 @@
import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import {
getCurrentRewards,
getMembershipLevel,
} from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
@@ -14,7 +17,10 @@ export default async function CurrentRewardsBlock({
subtitle,
link,
}: AccountPageComponentProps) {
const rewardsResponse = await serverClient().contentstack.rewards.current()
const [rewardsResponse, membershipLevel] = await Promise.all([
getCurrentRewards(),
getMembershipLevel(),
])
if (!rewardsResponse?.rewards.length) {
return null
@@ -27,6 +33,7 @@ export default async function CurrentRewardsBlock({
rewards={rewardsResponse.rewards}
pageSize={6}
showRedeem={env.USE_NEW_REWARDS_ENDPOINT && env.USE_NEW_REWARD_MODEL}
membershipNumber={membershipLevel?.membershipNumber}
/>
<SectionLink link={link} variant="mobile" />
</SectionContainer>
components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
+22 -20
View File
@@ -1,53 +1,55 @@
import { REWARD_IDS } from "@/constants/rewards"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { isValidRewardId } from "@/utils/rewards"
import type { FC } from "react"
import { IconName, type IconProps } from "@/types/components/icon"
import { RewardId } from "@/types/enums/rewards"
import type { RewardId } from "@/types/components/myPages/rewards"
function getIconForRewardId(rewardId: RewardId): IconName {
switch (rewardId) {
// Food & beverage
case RewardId.TenPercentFood:
case RewardId.FifteenPercentFood:
case REWARD_IDS.TenPercentFood:
case REWARD_IDS.FifteenPercentFood:
return IconName.CroissantCoffeeEgg
case RewardId.TwoForOneBreakfast:
case REWARD_IDS.TwoForOneBreakfast:
return IconName.CutleryTwo
case RewardId.FreeBreakfast:
case REWARD_IDS.FreeBreakfast:
return IconName.CutleryOne
case RewardId.FreeKidsDrink:
case REWARD_IDS.FreeKidsDrink:
return IconName.KidsMocktail
// Monetary vouchers
case RewardId.Bonus50SEK:
case RewardId.Bonus75SEK:
case RewardId.Bonus100SEK:
case RewardId.Bonus150SEK:
case RewardId.Bonus200SEK:
case REWARD_IDS.Bonus50SEK:
case REWARD_IDS.Bonus75SEK:
case REWARD_IDS.Bonus100SEK:
case REWARD_IDS.Bonus150SEK:
case REWARD_IDS.Bonus200SEK:
return IconName.Voucher
// Hotel perks
case RewardId.EarlyCheckin:
case REWARD_IDS.EarlyCheckin:
return IconName.HandKey
case RewardId.LateCheckout:
case REWARD_IDS.LateCheckout:
return IconName.HotelNight
case RewardId.FreeUpgrade:
case REWARD_IDS.FreeUpgrade:
return IconName.MagicWand
case RewardId.RoomGuarantee48H:
case REWARD_IDS.RoomGuarantee48H:
return IconName.Bed
// Earnings
case RewardId.EarnRate25Percent:
case RewardId.EarnRate50Percent:
case REWARD_IDS.EarnRate25Percent:
case REWARD_IDS.EarnRate50Percent:
return IconName.MoneyHand
case RewardId.StayBoostForKids:
case REWARD_IDS.StayBoostForKids:
return IconName.Kids
case RewardId.MemberRate:
case REWARD_IDS.MemberRate:
return IconName.Coin
// Special
case RewardId.YearlyExclusiveGift:
case REWARD_IDS.YearlyExclusiveGift:
return IconName.GiftOpen
default: {
components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+3 -1
View File
@@ -218,7 +218,9 @@ export default function PaymentClient({
bedType: bedTypeMap[parseInt(child.bed.toString())],
})),
rateCode:
user || join || membershipNo ? room.counterRateCode : room.rateCode,
(user || join || membershipNo) && room.counterRateCode
? room.counterRateCode
: room.rateCode,
roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
guest: {
firstName,
components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export default function SummaryUI({
}
: null
const showMemberPrice = !!(isMember || join || membershipNo)
const showMemberPrice = !!(isMember || join || membershipNo) && memberPrice
const diff = dt(booking.toDate).diff(booking.fromDate, "days")
components/HotelReservation/HotelCardListing/index.tsx
+11 -57
View File
@@ -1,6 +1,6 @@
"use client"
import { useSearchParams } from "next/navigation"
import { useEffect, useMemo, useState } from "react"
import { useEffect, useMemo } from "react"
import { useIntl } from "react-intl"
import { useHotelFilterStore } from "@/stores/hotel-filters"
@@ -8,18 +8,18 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
import Alert from "@/components/TempDesignSystem/Alert"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import HotelCard from "../HotelCard"
import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
import { getSortedHotels } from "./utils"
import styles from "./hotelCardListing.module.css"
import {
type HotelCardListingProps,
HotelCardListingTypeEnum,
type HotelData,
} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
import { AlertTypeEnum } from "@/types/enums/alert"
export default function HotelCardListing({
@@ -29,82 +29,36 @@ export default function HotelCardListing({
const searchParams = useSearchParams()
const activeFilters = useHotelFilterStore((state) => state.activeFilters)
const setResultCount = useHotelFilterStore((state) => state.setResultCount)
const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
const intl = useIntl()
const { activeHotelCard } = useHotelsMapStore()
const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
const sortBy = useMemo(
() => searchParams.get("sort") ?? DEFAULT_SORT,
[searchParams]
)
const sortedHotels = useMemo(() => {
switch (sortBy) {
case SortOrder.Name:
return [...hotelData].sort((a, b) =>
a.hotelData.name.localeCompare(b.hotelData.name)
)
case SortOrder.TripAdvisorRating:
return [...hotelData].sort(
(a, b) =>
(b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
(a.hotelData.ratings?.tripAdvisor.rating ?? 0)
)
case SortOrder.Price:
const getPricePerNight = (hotel: HotelData): number => {
return (
hotel.price?.member?.localPrice?.pricePerNight ??
hotel.price?.public?.localPrice?.pricePerNight ??
Infinity
)
}
return [...hotelData].sort(
(a, b) => getPricePerNight(a) - getPricePerNight(b)
)
case SortOrder.Distance:
default:
return [...hotelData].sort(
(a, b) =>
a.hotelData.location.distanceToCentre -
b.hotelData.location.distanceToCentre
)
}
}, [hotelData, sortBy])
const sortedHotels = useMemo(
() => getSortedHotels({ hotels: hotelData, sortBy }),
[hotelData, sortBy]
)
const hotels = useMemo(() => {
if (activeFilters.length === 0) {
return sortedHotels
}
if (activeFilters.length === 0) return sortedHotels
const filteredHotels = sortedHotels.filter((hotel) =>
return sortedHotels.filter((hotel) =>
activeFilters.every((appliedFilterId) =>
hotel.hotelData.detailedFacilities.some(
(facility) => facility.id.toString() === appliedFilterId
)
)
)
return filteredHotels
}, [activeFilters, sortedHotels])
useEffect(() => {
const handleScroll = () => {
const hasScrolledPast = window.scrollY > 490
setShowBackToTop(hasScrolledPast)
}
window.addEventListener("scroll", handleScroll, { passive: true })
return () => window.removeEventListener("scroll", handleScroll)
}, [])
useEffect(() => {
setResultCount(hotels ? hotels.length : 0)
setResultCount(hotels?.length ?? 0)
}, [hotels, setResultCount])
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" })
}
return (
<section className={styles.hotelCards}>
{hotels?.length ? (
components/HotelReservation/HotelCardListing/utils.ts
+35
View File
@@ -0,0 +1,35 @@
import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
export function getSortedHotels({
hotels,
sortBy,
}: {
hotels: HotelData[]
sortBy: string
}) {
const getPricePerNight = (hotel: HotelData): number =>
hotel.price?.member?.localPrice?.pricePerNight ??
hotel.price?.public?.localPrice?.pricePerNight ??
Infinity
const sortingStrategies: Record<
string,
(a: HotelData, b: HotelData) => number
> = {
[SortOrder.Name]: (a: HotelData, b: HotelData) =>
a.hotelData.name.localeCompare(b.hotelData.name),
[SortOrder.TripAdvisorRating]: (a: HotelData, b: HotelData) =>
(b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
(a.hotelData.ratings?.tripAdvisor.rating ?? 0),
[SortOrder.Price]: (a: HotelData, b: HotelData) =>
getPricePerNight(a) - getPricePerNight(b),
[SortOrder.Distance]: (a: HotelData, b: HotelData) =>
a.hotelData.location.distanceToCentre -
b.hotelData.location.distanceToCentre,
}
return [...hotels].sort(
sortingStrategies[sortBy] ?? sortingStrategies[SortOrder.Distance]
)
}
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+12 -28
View File
@@ -15,6 +15,7 @@ import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import { debounce } from "@/utils/debounce"
import FilterAndSortModal from "../../FilterAndSortModal"
@@ -41,13 +42,17 @@ export default function SelectHotelContent({
const isAboveMobile = useMediaQuery("(min-width: 768px)")
const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
const listingContainerRef = useRef<HTMLDivElement | null>(null)
const activeFilters = useHotelFilterStore((state) => state.activeFilters)
const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
const { showBackToTop, scrollToTop } = useScrollToTop({
threshold: 490,
elementRef: listingContainerRef,
})
const coordinates = useMemo(
() =>
isAboveMobile
@@ -66,28 +71,6 @@ export default function SelectHotelContent({
}
}, [activeHotelCard, activeHotelPin])
useEffect(() => {
const hotelListingElement = document.querySelector(
`.${styles.listingContainer}`
)
if (!hotelListingElement) return
const handleScroll = () => {
const hasScrolledPast = hotelListingElement.scrollTop > 490
setShowBackToTop(hasScrolledPast)
}
hotelListingElement.addEventListener("scroll", handleScroll)
return () => hotelListingElement.removeEventListener("scroll", handleScroll)
}, [])
function scrollToTop() {
const hotelListingElement = document.querySelector(
`.${styles.listingContainer}`
)
hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
}
const filteredHotelPins = useMemo(
() =>
hotelPins.filter((hotel) =>
@@ -102,7 +85,7 @@ export default function SelectHotelContent({
const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
setVisibleHotels(visibleHotels)
setTimeout(() => {
setShowSkeleton(true)
setShowSkeleton(false)
}, SKELETON_LOAD_DELAY)
}, [hotels, filteredHotelPins, map])
@@ -116,7 +99,7 @@ export default function SelectHotelContent({
() =>
debounce(() => {
if (!map) return
setShowSkeleton(false)
setShowSkeleton(true)
getHotelCards()
}, 100),
[map, getHotelCards]
@@ -155,11 +138,12 @@ export default function SelectHotelContent({
</Button>
<FilterAndSortModal filters={filterList} />
</div>
{showSkeleton ? (
<>
<div className={styles.skeletonContainer}>
<RoomCardSkeleton />
<RoomCardSkeleton />
</>
</div>
) : (
<HotelListing hotels={visibleHotels} />
)}
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+6
View File
@@ -48,4 +48,10 @@
padding: 0 0 var(--Spacing-x1);
position: static;
}
.skeletonContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
}
components/HotelReservation/SelectHotel/index.tsx
+11 -9
View File
@@ -47,9 +47,9 @@ export default async function SelectHotel({
const {
selectHotelParams,
searchParams,
adultsParams,
childrenParams,
child,
adultsInRoom,
childrenInRoom,
childrenInRoomArray,
} = reservationParams
const intl = await getIntl()
@@ -59,8 +59,8 @@ export default async function SelectHotel({
cityId: city.id,
roomStayStartDate: searchParams.fromDate,
roomStayEndDate: searchParams.toDate,
adults: adultsParams,
children: childrenParams?.toString(),
adults: adultsInRoom,
children: childrenInRoom,
})
)
@@ -115,10 +115,12 @@ export default async function SelectHotel({
searchTerm: searchParams.city,
arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
departureDate: format(departureDate, "yyyy-MM-dd"),
noOfAdults: adultsParams,
noOfChildren: child?.length,
ageOfChildren: child?.map((c) => c.age).join(","),
childBedPreference: child?.map((c) => ChildBedMapEnum[c.bed]).join("|"),
noOfAdults: adultsInRoom,
noOfChildren: childrenInRoomArray?.length,
ageOfChildren: childrenInRoomArray?.map((c) => c.age).join(","),
childBedPreference: childrenInRoomArray
?.map((c) => ChildBedMapEnum[c.bed])
.join("|"),
noOfRooms: 1, // // TODO: Handle multiple rooms
duration: differenceInCalendarDays(departureDate, arrivalDate),
leadTime: differenceInCalendarDays(arrivalDate, new Date()),
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+15 -17
View File
@@ -28,7 +28,10 @@ export default function PriceList({
const petRoomLocalPrice = petRoomPackage?.localPrice
const petRoomRequestedPrice = petRoomPackage?.requestedPrice
const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
const showRequestedPrice =
publicRequestedPrice &&
memberRequestedPrice &&
publicRequestedPrice.currency !== publicLocalPrice.currency
const searchParams = useSearchParams()
const fromDate = searchParams.get("fromDate")
const toDate = searchParams.get("toDate")
@@ -114,27 +117,22 @@ export default function PriceList({
)}
</dd>
</div>
<div className={styles.priceRow}>
<dt>
<Caption
color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
>
{intl.formatMessage({ id: "Approx." })}
</Caption>
</dt>
<dd>
{showRequestedPrice ? (
{showRequestedPrice && (
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}
</Caption>
</dt>
<dd>
<Caption color="uiTextMediumContrast">
{totalPublicRequestedPricePerNight}/
{totalMemberRequestedPricePerNight}{" "}
{publicRequestedPrice.currency}
</Caption>
) : (
<Caption color="disabled">- / - EUR</Caption>
)}
</dd>
</div>
</dd>
</div>
)}
</dl>
)
}
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+7 -4
View File
@@ -7,6 +7,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
import Popover from "@/components/TempDesignSystem/Popover"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { rateCardEqualHeightSelector } from "../utils"
import PriceTable from "./PriceList"
import styles from "./flexibilityOption.module.css"
@@ -26,11 +27,13 @@ export default function FlexibilityOption({
if (!product) {
return (
<div className={styles.noPricesCard}>
<div className={`${styles.noPricesCard} ${rateCardEqualHeightSelector}`}>
<div className={styles.header}>
<InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
<Caption>{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
<div className={styles.priceType}>
<Caption>{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
</div>
</div>
<Label size="regular" className={styles.noPricesLabel}>
<Caption color="uiTextHighContrast" type="bold">
@@ -70,7 +73,7 @@ export default function FlexibilityOption({
value={publicPrice?.rateCode}
onClick={onClick}
/>
<div className={styles.card}>
<div className={`${styles.card} ${rateCardEqualHeightSelector}`}>
<div className={styles.header}>
<Popover
placement="bottom left"
components/HotelReservation/SelectRate/RoomSelection/index.tsx
+71 -5
View File
@@ -1,10 +1,15 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useMemo } from "react"
import { useCallback, useEffect, useMemo, useRef } from "react"
import { debounce } from "@/utils/debounce"
import RateSummary from "./RateSummary"
import RoomCard from "./RoomCard"
import { getHotelReservationQueryParams } from "./utils"
import {
getHotelReservationQueryParams,
rateCardEqualHeightSelector,
} from "./utils"
import styles from "./roomSelection.module.css"
@@ -23,9 +28,65 @@ export default function RoomSelection({
const router = useRouter()
const searchParams = useSearchParams()
const isUserLoggedIn = !!user
const roomRefs = useRef<HTMLLIElement[]>([])
const { roomConfigurations, rateDefinitions } = roomsAvailability
const equalizePriceOptionHeights = useCallback(() => {
if (!roomRefs.current.length) return
roomRefs.current.forEach((room) => {
const options = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)
options.forEach((option) => {
option.style.height = "auto"
})
})
const numOptions =
roomRefs.current[0]?.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
).length || 0
for (let i = 0; i < numOptions; i++) {
let maxHeight = 0
roomRefs.current.forEach((room) => {
const option = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)[i]
if (option) {
maxHeight = Math.max(maxHeight, option.offsetHeight)
}
})
roomRefs.current.forEach((room) => {
const option = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)[i]
if (option) {
option.style.height = `${maxHeight}px`
}
})
}
}, [])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
equalizePriceOptionHeights()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [roomRefs, equalizePriceOptionHeights])
const queryParams = useMemo(() => {
const params = new URLSearchParams(searchParams)
const searchParamsObject = getHotelReservationQueryParams(searchParams)
@@ -64,8 +125,13 @@ export default function RoomSelection({
onSubmit={handleSubmit}
>
<ul className={styles.roomList}>
{roomConfigurations.map((roomConfiguration) => (
<li key={roomConfiguration.roomTypeCode}>
{roomConfigurations.map((roomConfiguration, index) => (
<li
key={roomConfiguration.roomTypeCode}
ref={(el) => {
if (el) roomRefs.current[index] = el
}}
>
<RoomCard
hotelId={roomsAvailability.hotelId.toString()}
hotelType={hotelType}
components/HotelReservation/SelectRate/RoomSelection/utils.ts
+2
View File
@@ -101,3 +101,5 @@ export function createQueryParamsForEnterDetails(
return searchParams
}
export const rateCardEqualHeightSelector = "rateCardEqualHeight"