From ebb007b7f062677de66543274c69f8f3f3fdb8b9 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Sat, 8 Feb 2025 10:40:42 +0000 Subject: [PATCH] Merged in feat/booking-flow-performance (pull request #1282) feat: booking flow performance * feat: booking flow performance * Cleanup Approved-by: Michael Zetterberg Approved-by: Pontus Dreij --- .../Forms/BookingWidget/FormContent/index.tsx | 2 + components/Forms/BookingWidget/index.tsx | 8 +- .../MainMenu/MobileMenuWrapper/index.tsx | 13 ++- components/Header/index.tsx | 3 +- .../HotelInfoCard/NoRoomsAlert.module.css | 5 -- .../SelectRate/HotelInfoCard/NoRoomsAlert.tsx | 85 ------------------- .../SelectRate/HotelInfoCard/index.tsx | 8 -- .../SelectRate/Rooms/RoomsContainer.tsx | 19 ++++- .../SelectRate/Rooms/rooms.module.css | 6 ++ types/components/form/bookingwidget.ts | 1 + 10 files changed, 39 insertions(+), 111 deletions(-) delete mode 100644 components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.module.css delete mode 100644 components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index 544562c6a..0bf6eb6ca 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -22,6 +22,7 @@ export default function FormContent({ locations, formId, onSubmit, + isSearching, }: BookingWidgetFormContentProps) { const intl = useIntl() const selectedDate = useWatch({ name: "date" }) @@ -84,6 +85,7 @@ export default function FormContent({ intent="primary" theme="base" type="submit" + disabled={isSearching} > { + router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`) + }) if (!data.bookingCode?.value) { setValue("bookingCode.remember", false) localStorage.removeItem("bookingCode") @@ -72,6 +75,7 @@ export default function Form({ locations={locations} formId={formId} onSubmit={handleSubmit(onSubmit)} + isSearching={isPending} /> diff --git a/components/Header/MainMenu/MobileMenuWrapper/index.tsx b/components/Header/MainMenu/MobileMenuWrapper/index.tsx index 43a1c7c79..36eab4774 100644 --- a/components/Header/MainMenu/MobileMenuWrapper/index.tsx +++ b/components/Header/MainMenu/MobileMenuWrapper/index.tsx @@ -1,8 +1,7 @@ -import { - getHeader, - getLanguageSwitcher, - getName, -} from "@/lib/trpc/memoizedRequests" +import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests" + +import { auth } from "@/auth" +import { isValidSession } from "@/utils/session" import MobileMenu from "../MobileMenu" @@ -12,7 +11,7 @@ export default async function MobileMenuWrapper({ // preloaded const languages = await getLanguageSwitcher() const header = await getHeader() - const user = await getName() + const session = await auth() if (!languages || !header) { return null @@ -22,7 +21,7 @@ export default async function MobileMenuWrapper({ {children} diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 37741c5b9..0ac5517c2 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -11,11 +11,10 @@ import TopMenu, { TopMenuSkeleton } from "./TopMenu" import styles from "./header.module.css" -export default async function Header() { +export default function Header() { void getHeader() void getLanguageSwitcher() void getName() - return (
}> diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.module.css deleted file mode 100644 index 3bb1f51a7..000000000 --- a/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.hotelAlert { - max-width: var(--max-width-navigation); - margin: 0 auto; - padding-top: var(--Spacing-x-one-and-half); -} diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx deleted file mode 100644 index 3aee40107..000000000 --- a/components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { dt } from "@/lib/dt" -import { getRoomsAvailability } from "@/lib/trpc/memoizedRequests" - -import Alert from "@/components/TempDesignSystem/Alert" -import { getIntl } from "@/i18n" -import { safeTry } from "@/utils/safeTry" - -import { generateChildrenString } from "../../utils" -import { combineRoomAvailabilities } from "../utils" - -import styles from "./NoRoomsAlert.module.css" - -import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate" -import { AlertTypeEnum } from "@/types/enums/alert" -import type { Lang } from "@/constants/languages" - -type Props = { - hotelId: number - lang: Lang - adultArray: number[] - childArray?: Child[] - fromDate: Date - toDate: Date -} - -export async function NoRoomsAlert({ - hotelId, - fromDate, - toDate, - childArray, - adultArray, - lang, -}: Props) { - const fromDateString = dt(fromDate).format("YYYY-MM-DD") - const toDateString = dt(toDate).format("YYYY-MM-DD") - - const uniqueAdultCounts = [...new Set(adultArray)] - const roomsAvailabilityPromises = uniqueAdultCounts.map((adultCount) => { - return safeTry( - getRoomsAvailability({ - hotelId: hotelId, - roomStayStartDate: fromDateString, - roomStayEndDate: toDateString, - adults: adultCount, - children: - childArray && childArray.length > 0 - ? generateChildrenString(childArray) - : undefined, - }) - ) - }) - - const roomsAvailabilityResults = await Promise.all(roomsAvailabilityPromises) - - const roomsAvailability = combineRoomAvailabilities({ - availabilityResults: roomsAvailabilityResults, - }) - - if (!roomsAvailability) { - return null - } - - const noRoomsAvailable = roomsAvailability.roomConfigurations.reduce( - (acc, room) => { - return acc && room.status === "NotAvailable" - }, - true - ) - - if (!noRoomsAvailable) { - return null - } - - const intl = await getIntl(lang) - return ( -
- -
- ) -} diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx index bc4341a5f..eb52f1d85 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx +++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx @@ -1,5 +1,3 @@ -import { Suspense } from "react" - import { getHotel } from "@/lib/trpc/memoizedRequests" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" @@ -15,7 +13,6 @@ import { getSingleDecimal } from "@/utils/numberFormatting" import ReadMore from "../../ReadMore" import TripAdvisorChip from "../../TripAdvisorChip" -import { NoRoomsAlert } from "./NoRoomsAlert" import styles from "./hotelInfoCard.module.css" @@ -24,7 +21,6 @@ import type { HotelInfoCardProps } from "@/types/components/hotelReservation/sel export default async function HotelInfoCard({ hotelId, lang, - ...props }: HotelInfoCardProps) { const hotelData = await getHotel({ hotelId: hotelId.toString(), @@ -119,10 +115,6 @@ export default async function HotelInfoCard({ ) })} - - - - ) } diff --git a/components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx b/components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx index 322361f79..0dfcd9f8c 100644 --- a/components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx +++ b/components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx @@ -6,6 +6,8 @@ import { } from "@/lib/trpc/memoizedRequests" import { auth } from "@/auth" +import Alert from "@/components/TempDesignSystem/Alert" +import { getIntl } from "@/i18n" import { safeTry } from "@/utils/safeTry" import { isValidSession } from "@/utils/session" @@ -13,8 +15,11 @@ import { generateChildrenString } from "../../utils" import { combineRoomAvailabilities } from "../utils" import Rooms from "." +import styles from "./rooms.module.css" + import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer" +import { AlertTypeEnum } from "@/types/enums/alert" export async function RoomsContainer({ adultArray, @@ -77,14 +82,24 @@ export async function RoomsContainer({ availabilityResults: roomsAvailabilityResults, }) + const intl = await getIntl(lang) + if (packagesError) { // TODO: Log packages error console.error("[RoomsContainer] unable to fetch packages") } if (!roomsAvailability) { - // HotelInfoCard has the logic for displaying when there are no rooms available - return null + return ( +
+ +
+ ) } return ( diff --git a/components/HotelReservation/SelectRate/Rooms/rooms.module.css b/components/HotelReservation/SelectRate/Rooms/rooms.module.css index ebc7eb0be..7e252e4fc 100644 --- a/components/HotelReservation/SelectRate/Rooms/rooms.module.css +++ b/components/HotelReservation/SelectRate/Rooms/rooms.module.css @@ -48,3 +48,9 @@ opacity: 1; height: auto; } + +.hotelAlert { + max-width: var(--max-width-navigation); + margin: 0 auto; + padding: var(--Spacing-x-one-and-half); +} diff --git a/types/components/form/bookingwidget.ts b/types/components/form/bookingwidget.ts index 15712f2e9..3902115a0 100644 --- a/types/components/form/bookingwidget.ts +++ b/types/components/form/bookingwidget.ts @@ -11,6 +11,7 @@ export interface BookingWidgetFormContentProps { locations: Locations formId: string onSubmit: () => void + isSearching: boolean } export enum ActionType {