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:",
+ })}
+
+
+
+ - {intl.formatMessage({ id: "Complete the booking" })}
+
+
+ -
+ {intl.formatMessage({
+ id: "Provide a payment card in the next step",
+ })}
+
+
+
+
+ {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 (