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

feat(SW-614): Add mustBeGuaranteed flag and update content based on this

Browse Source
This commit is contained in:
Tobias Johansson
2024-10-23 13:22:49 +02:00
parent 6523e2329b
commit a690750c36
12 changed files with 144 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
View File

@@ -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 (
<section>
<HistoryStateManager />
@@ -72,17 +83,24 @@ export default async function StepPage({
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
header={mustBeGuaranteed ? "Payment Guarantee" : "Payment"}
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
label={
mustBeGuaranteed
? intl.formatMessage({ id: "Guarantee booking with credit card" })
: intl.formatMessage({ id: "Select payment method" })
}
>
<Payment
hotelId={hotel.data.attributes.operaId}
hotelId={searchParams.hotel}
otherPaymentOptions={
hotel.data.attributes.merchantInformationData
.alternatePaymentOptions
mustBeGuaranteed
? []
: hotel.data.attributes.merchantInformationData
.alternatePaymentOptions
}
savedCreditCards={savedCreditCards}
mustBeGuaranteed={mustBeGuaranteed}
/>
</SectionAccordion>
</section>

26
components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css Normal file
View File

@@ -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;
}

50
components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx Normal file
View File

@@ -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 (
<details>
<Caption color="burgundy" type="bold" asChild>
<summary className={styles.summary}>
{intl.formatMessage({ id: "How it works" })}
<ChevronDown color="burgundy" className={styles.icon} />
</summary>
</Caption>
<section className={styles.content}>
<Body>
{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.",
})}
</Body>
<Body>
{intl.formatMessage({
id: "What you have to do to guarantee booking:",
})}
</Body>
<ol>
<Body asChild>
<li>{intl.formatMessage({ id: "Complete the booking" })}</li>
</Body>
<Body asChild>
<li>
{intl.formatMessage({
id: "Provide a payment card in the next step",
})}
</li>
</Body>
</ol>
<Body>
{intl.formatMessage({
id: "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.",
})}
</Body>
</section>
</details>
)
}

17
components/HotelReservation/EnterDetails/Payment/index.tsx
View File

@@ -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 <LoadingSpinner />
}
const paymentVerb = mustBeGuaranteed
? intl.formatMessage({ id: "guaranteeing" })
: intl.formatMessage({ id: "paying" })
return (
<FormProvider {...methods}>
<form
className={styles.paymentContainer}
onSubmit={methods.handleSubmit(handleSubmit)}
>
{mustBeGuaranteed ? (
<section className={styles.section}>
<Body>
{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.",
})}
</Body>
<GuaranteeDetails />
</section>
) : null}
{savedCreditCards?.length ? (
<section className={styles.section}>
<Body color="uiTextHighContrast" textTransform="bold">
@@ -238,6 +254,7 @@ export default function Payment({
id: "booking.terms",
},
{
paymentVerb,
termsLink: (str) => (
<Link
className={styles.link}

2
i18n/dictionaries/da.json
View File

@@ -335,7 +335,7 @@
"Welcome": "Velkommen",
"Welcome to": "Velkommen til",
"Wellness & Exercise": "Velvære & Motion",
"What you have to do to guarantee booking": "Hvad du skal gøre for at garantere booking",
"What you have to do to guarantee booking:": "Hvad du skal gøre for at garantere booking:",
"When": "Hvornår",
"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.": "Når du garanterer din booking, vil vi holde bookingen indtil 07:00 til dagen efter check-in. Dette vil give dig som gæst tilføjet fleksibilitet til check-in-tider.",
"Where should you go next?": "Find inspiration til dit næste ophold",

2
i18n/dictionaries/de.json
View File

@@ -334,7 +334,7 @@
"Welcome": "Willkommen",
"Welcome to": "Willkommen zu",
"Wellness & Exercise": "Wellness & Bewegung",
"What you have to do to guarantee booking": "Was Sie tun müssen, um eine Buchung zu garantieren",
"What you have to do to guarantee booking:": "Was Sie tun müssen, um eine Buchung zu garantieren:",
"When": "Wann",
"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.": "Wenn Sie Ihre Buchung garantieren, halten wir die Buchung bis 07:00 am Tag nach dem Check-in. Dies wird Ihnen als Gast zusätzliche Flexibilität für die Check-in-Zeiten gewähren.",
"Where should you go next?": "Wo geht es als Nächstes hin?",

2
i18n/dictionaries/en.json
View File

@@ -351,7 +351,7 @@
"Welcome": "Welcome",
"Welcome to": "Welcome to",
"Wellness & Exercise": "Wellness & Exercise",
"What you have to do to guarantee booking": "What you have to do to guarantee booking",
"What you have to do to guarantee booking:": "What you have to do to guarantee booking:",
"When": "When",
"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.": "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.",
"Where should you go next?": "Where should you go next?",

2
i18n/dictionaries/fi.json
View File

@@ -336,7 +336,7 @@
"Welcome": "Tervetuloa",
"Welcome to": "Tervetuloa",
"Wellness & Exercise": "Hyvinvointi & Liikunta",
"What you have to do to guarantee booking": "Mitä sinun on tehtävä varmistaaksesi varauksen",
"What you have to do to guarantee booking:": "Mitä sinun on tehtävä varmistaaksesi varauksen:",
"When": "Kun",
"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.": "Jos varaat varauksen, pidämme varauksen 07:00 päivän jälkeen tarkistuspäivän jälkeen. Tämä tarjoaa sinulle lisään tarkistuspäivän aikaan.",
"Where should you go next?": "Mihin menisit seuraavaksi?",

2
i18n/dictionaries/no.json
View File

@@ -333,7 +333,7 @@
"Welcome": "Velkommen",
"Welcome to": "Velkommen til",
"Wellness & Exercise": "Velvære & Trening",
"What you have to do to guarantee booking": "Hva du må gjøre for å garantere reservasjonen",
"What you have to do to guarantee booking:": "Hva du må gjøre for å garantere reservasjonen:",
"When": "Når",
"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.": "Når du garanterer din reservasjon, vil vi holde reservasjonen til 07:00 til dagen etter check-in. Dette vil gi deg som gjest tilføjet fleksibilitet for check-in-tider.",
"Where should you go next?": "Hvor ønsker du å reise neste gang?",

2
i18n/dictionaries/sv.json
View File

@@ -333,7 +333,7 @@
"Welcome": "Välkommen",
"Welcome to": "Välkommen till",
"Wellness & Exercise": "Hälsa & Träning",
"What you have to do to guarantee booking": "Vad du måste göra för att garantera bokningen",
"What you have to do to guarantee booking:": "Vad du måste göra för att garantera bokningen:",
"When": "När",
"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.": "När du garanterar din bokning kommer vi att hålla bokningen till 07:00 till dagen efter check-in. Detta ger dig som gäst extra flexibilitet för check-in-tider.",
"Where should you go next?": "Låter inte en spontanweekend härligt?",

20
lib/trpc/memoizedRequests/index.ts
View File

@@ -60,6 +60,26 @@ export const getHotelData = cache(async function getMemoizedHotelData(
})
})
export const getRoomAvailability = cache(
async function getMemoizedRoomAvailability(
hotelId: string,
adults: number,
roomStayStartDate: string,
roomStayEndDate: string,
children?: number,
promotionCode?: string
) {
return serverClient().hotel.availability.rooms({
hotelId: parseInt(hotelId),
adults,
roomStayStartDate,
roomStayEndDate,
children,
promotionCode,
})
}
)
export const getFooter = cache(async function getMemoizedFooter() {
return serverClient().contentstack.base.footer()
})

1
types/components/hotelReservation/selectRate/section.ts
View File

@@ -31,6 +31,7 @@ export interface PaymentProps {
hotelId: string
otherPaymentOptions: string[]
savedCreditCards: CreditCard[] | null
mustBeGuaranteed: boolean
}
export interface SectionPageProps {