diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx index 77ec20203..45191398d 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx @@ -5,6 +5,7 @@ import { getCreditCardsSafely, getHotelData, getProfileSafely, + getRoomAvailability, } from "@/lib/trpc/memoizedRequests" import BedType from "@/components/HotelReservation/EnterDetails/BedType" @@ -21,6 +22,7 @@ import type { LangParams, PageArgs } from "@/types/params" export function preload() { void getProfileSafely() void getCreditCardsSafely() + void getRoomAvailability("811", 1, "2024-11-01", "2024-11-02") } function isValidStep(step: string): step is StepEnum { @@ -43,10 +45,19 @@ export default async function StepPage({ const savedCreditCards = await getCreditCardsSafely() const breakfastPackages = await getBreakfastPackages(searchParams.hotel) - if (!isValidStep(params.step) || !hotel) { + const roomAvailability = await getRoomAvailability( + searchParams.hotel, + Number(searchParams.adults), + searchParams.checkIn, + searchParams.checkOut + ) + + if (!isValidStep(params.step) || !hotel || !roomAvailability) { return notFound() } + const mustBeGuaranteed = false + return (
@@ -72,17 +83,24 @@ export default async function StepPage({
diff --git a/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css b/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css new file mode 100644 index 000000000..a14bc3473 --- /dev/null +++ b/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css @@ -0,0 +1,26 @@ +.content { + display: flex; + flex-direction: column; + gap: var(--Spacing-x1); + padding-top: var(--Spacing-x2); +} + +.content ol { + margin: 0; +} + +.summary { + list-style: none; + display: flex; + align-items: center; + gap: var(--Spacing-x-half); +} + +.summary::-webkit-details-marker, +.summary::marker { + display: none; +} + +.summary .icon { + height: 16px; +} diff --git a/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx b/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx new file mode 100644 index 000000000..99021715a --- /dev/null +++ b/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx @@ -0,0 +1,50 @@ +import { useIntl } from "react-intl" + +import ChevronDown from "@/components/Icons/ChevronDown" +import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" + +import styles from "./guaranteeDetails.module.css" + +export default function GuaranteeDetails() { + const intl = useIntl() + return ( +
+ + + {intl.formatMessage({ id: "How it works" })} + + + +
+ + {intl.formatMessage({ + id: "When guaranteeing your booking, we will hold the booking until 07:00 until the day after check-in. This will provide you as a guest with added flexibility for check-in times.", + })} + + + {intl.formatMessage({ + id: "What you have to do to guarantee booking:", + })} + +
    + +
  1. {intl.formatMessage({ id: "Complete the booking" })}
  2. + + +
  3. + {intl.formatMessage({ + id: "Provide a payment card in the next step", + })} +
  4. + +
+ + {intl.formatMessage({ + id: "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.", + })} + +
+
+ ) +} diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx index ba126c1f2..f31ea816b 100644 --- a/components/HotelReservation/EnterDetails/Payment/index.tsx +++ b/components/HotelReservation/EnterDetails/Payment/index.tsx @@ -30,6 +30,7 @@ import { toast } from "@/components/TempDesignSystem/Toasts" import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import useLang from "@/hooks/useLang" +import GuaranteeDetails from "./GuaranteeDetails" import PaymentOption from "./PaymentOption" import { PaymentFormData, paymentSchema } from "./schema" @@ -48,6 +49,7 @@ export default function Payment({ hotelId, otherPaymentOptions, savedCreditCards, + mustBeGuaranteed, }: PaymentProps) { const router = useRouter() const lang = useLang() @@ -169,12 +171,26 @@ export default function Payment({ return } + const paymentVerb = mustBeGuaranteed + ? intl.formatMessage({ id: "guaranteeing" }) + : intl.formatMessage({ id: "paying" }) + return (
+ {mustBeGuaranteed ? ( +
+ + {intl.formatMessage({ + id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.", + })} + + +
+ ) : null} {savedCreditCards?.length ? (
@@ -238,6 +254,7 @@ export default function Payment({ id: "booking.terms", }, { + paymentVerb, termsLink: (str) => (