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

Merged in fix/STAY-17-find-my-booking-errors (pull request #3181)

Browse Source 
fix: improve error messages in find my booking flow

* fix: improve error messages in find my booking flow


Approved-by: Linus Flood
Approved-by: Erik Tiekstra
This commit is contained in:
Christel Westerberg
2025-11-24 14:46:39 +00:00
parent 2346daec25
commit 2ae3fcb609
9 changed files with 213 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/get-booking/page.tsx
View File

@@ -1,3 +1,5 @@
import { cookies } from "next/headers"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK" import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { import {
TrackingChannelEnum, TrackingChannelEnum,
@@ -9,8 +11,11 @@ import { getIntl } from "@/i18n"
import styles from "./page.module.css" import styles from "./page.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
import type { Lang } from "@scandic-hotels/common/constants/language" import type { Lang } from "@scandic-hotels/common/constants/language"
import type { FindMyBookingErrorEnum } from "@/components/HotelReservation/FindMyBooking/utils"
export default async function GetBookingPage( export default async function GetBookingPage(
props: PageProps<"/[lang]/hotelreservation/get-booking"> props: PageProps<"/[lang]/hotelreservation/get-booking">
) { ) {
@@ -27,11 +32,23 @@ export default async function GetBookingPage(
siteVersion: "new-web", siteVersion: "new-web",
} }
const searchParams = await props.searchParams
const error = searchParams.error as FindMyBookingErrorEnum | undefined
const cookieStore = await cookies()
const previousValuesCookie = cookieStore.get("bv")?.value
let defaultValues: AdditionalInfoCookieValue | undefined
// Only prepopulate previous values if there is an error
if (previousValuesCookie && error) {
defaultValues = JSON.parse(previousValuesCookie)
}
return ( return (
<main className={styles.main}> <main className={styles.main}>
<TrackingSDK pageData={pageTrackingData} /> <TrackingSDK pageData={pageTrackingData} />
<div className={styles.form}> <div className={styles.form}>
<FindMyBooking /> <FindMyBooking error={error} defaultValues={defaultValues} />
</div> </div>
</main> </main>
) )

26
apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
View File

@@ -5,9 +5,7 @@ import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form" import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body" import { Button } from "@scandic-hotels/design-system/Button"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
@@ -15,6 +13,7 @@ import {
type AdditionalInfoFormSchema, type AdditionalInfoFormSchema,
additionalInfoFormSchema, additionalInfoFormSchema,
} from "./schema" } from "./schema"
import { Title } from "./Title"
import styles from "./findMyBooking.module.css" import styles from "./findMyBooking.module.css"
@@ -51,20 +50,7 @@ export default function AdditionalInfoForm({
return ( return (
<FormProvider {...form}> <FormProvider {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}> <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
<div> <Title isAdditional />
<Title level="h2" as="h3">
{intl.formatMessage({
id: "hotelReservation.findMyBooking.title",
defaultMessage: "Find your booking",
})}
</Title>
<Body>
{intl.formatMessage({
id: "hotelReservation.findMyBooking.additionalInfoText",
defaultMessage: "We need some details to confirm your identity.",
})}
</Body>
</div>
<div className={styles.inputs}> <div className={styles.inputs}>
<Input <Input
label={intl.formatMessage({ label={intl.formatMessage({
@@ -87,9 +73,9 @@ export default function AdditionalInfoForm({
<div className={styles.buttons}> <div className={styles.buttons}>
<Button <Button
type="submit" type="submit"
intent="primary" variant="Primary"
theme="base" size="Medium"
disabled={form.formState.isSubmitting} isDisabled={form.formState.isSubmitting}
> >
{intl.formatMessage({ {intl.formatMessage({
id: "common.confirm", id: "common.confirm",

3
apps/scandic-web/components/HotelReservation/FindMyBooking/Title/findMyBookingTitle.module.css Normal file
View File

@@ -0,0 +1,3 @@
.title {
color: var(--Text-Heading);
}

36
apps/scandic-web/components/HotelReservation/FindMyBooking/Title/index.tsx Normal file
View File

@@ -0,0 +1,36 @@
"use client"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./findMyBookingTitle.module.css"
export function Title({ isAdditional = false }: { isAdditional?: boolean }) {
const intl = useIntl()
const message = isAdditional
? intl.formatMessage({
id: "hotelReservation.findMyBooking.additionalInfoText",
defaultMessage: "We need some details to confirm your identity.",
})
: intl.formatMessage({
id: "findMyBooking.manageBooking",
defaultMessage:
"View and manage your booking made via our website or app.",
})
return (
<div>
<Typography variant="Title/sm" className={styles.title}>
<h2>
{intl.formatMessage({
id: "findMyBooking.findYourStay",
defaultMessage: "Find your stay",
})}
</h2>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<h3>{message}</h3>
</Typography>
</div>
)
}

4
apps/scandic-web/components/HotelReservation/FindMyBooking/findMyBooking.module.css
View File

@@ -9,6 +9,10 @@
padding: 0 var(--Space-x3); padding: 0 var(--Space-x3);
} }
.alert {
margin: 0 var(--Space-x3);
}
.inputs { .inputs {
display: grid; display: grid;
gap: var(--Space-x3); gap: var(--Space-x3);

125
apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
View File

@@ -5,37 +5,48 @@ import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form" import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { customerService } from "@scandic-hotels/common/constants/routes/customerService" import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay" import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import { logger } from "@scandic-hotels/common/logger" import { logger } from "@scandic-hotels/common/logger"
import Body from "@scandic-hotels/design-system/Body" import { Alert } from "@scandic-hotels/design-system/Alert"
import Caption from "@scandic-hotels/design-system/Caption" import { Button } from "@scandic-hotels/design-system/Button"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { TextLink } from "@scandic-hotels/design-system/TextLink"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title"
import { toast } from "@scandic-hotels/design-system/Toast" import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client" import { trpc } from "@scandic-hotels/trpc/client"
import Input from "@/components/TempDesignSystem/Form/Input" import Input from "@/components/TempDesignSystem/Form/Input"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema" import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
import { Title } from "./Title"
import { type FindMyBookingErrorEnum, getErrorMessage } from "./utils"
import styles from "./findMyBooking.module.css" import styles from "./findMyBooking.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue" import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
export default function FindMyBooking() { const DEFAULT_VALUES: FindMyBookingFormSchema = {
confirmationNumber: "",
firstName: "",
lastName: "",
email: "",
}
export default function FindMyBooking({
error,
defaultValues = DEFAULT_VALUES,
}: {
error?: FindMyBookingErrorEnum
defaultValues: AdditionalInfoCookieValue | undefined
}) {
const router = useRouter() const router = useRouter()
const intl = useIntl() const intl = useIntl()
const lang = useLang() const lang = useLang()
const form = useForm<FindMyBookingFormSchema>({ const form = useForm<FindMyBookingFormSchema>({
defaultValues: { defaultValues,
confirmationNumber: "",
firstName: "",
lastName: "",
email: "",
},
resolver: zodResolver(findMyBookingFormSchema), resolver: zodResolver(findMyBookingFormSchema),
mode: "all", mode: "all",
criteriaMode: "all", criteriaMode: "all",
@@ -69,24 +80,20 @@ export default function FindMyBooking() {
}) })
} }
const errorMessage = getErrorMessage(intl, error)
return ( return (
<FormProvider {...form}> <FormProvider {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}> <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
<div> <Title />
<Title level="h2" as="h3"> {errorMessage ? (
{intl.formatMessage({ <Alert
id: "findMyBooking.findYourStay", type={AlertTypeEnum.Alarm}
defaultMessage: "Find your stay", heading={errorMessage.heading}
})} text={errorMessage.text}
</Title> className={styles.alert}
<Body> />
{intl.formatMessage({ ) : null}
id: "findMyBooking.manageBooking",
defaultMessage:
"View and manage your booking made via our website or app.",
})}
</Body>
</div>
<div className={[styles.inputs, styles.grid].join(" ")}> <div className={[styles.inputs, styles.grid].join(" ")}>
<Input <Input
label={intl.formatMessage({ label={intl.formatMessage({
@@ -124,39 +131,43 @@ export default function FindMyBooking() {
</div> </div>
<div className={styles.buttons}> <div className={styles.buttons}>
<div className={styles.footnote}> <div className={styles.footnote}>
<Caption type="bold"> <Typography variant="Body/Supporting text (caption)/smBold">
{intl.formatMessage({ <p>
id: "findMyBooking.cantFindYourStay", {intl.formatMessage({
defaultMessage: "Can't find your stay?", id: "findMyBooking.cantFindYourStay",
})} defaultMessage: "Can't find your stay?",
</Caption> })}
<Caption> </p>
{intl.formatMessage( </Typography>
{ <Typography variant="Body/Supporting text (caption)/smRegular">
id: "findMyBooking.customerService", <p>
defaultMessage: {intl.formatMessage(
"Please contact <link>customer service</link>.", {
}, id: "findMyBooking.customerService",
{ defaultMessage:
link: (str) => ( "Please contact <link>customer service</link>.",
<Link },
href={customerService[lang]} {
size="small" link: (str) => (
textDecoration="underline" <TextLink
target="_blank" isInline
> href={customerService[lang]}
{str} typography="Link/sm"
</Link> target="_blank"
), >
} {str}
)} </TextLink>
</Caption> ),
}
)}
</p>
</Typography>
</div> </div>
<Button <Button
type="submit" type="submit"
intent="primary" variant="Primary"
theme="base" size="Large"
disabled={form.formState.isSubmitting || update.isPending} isDisabled={form.formState.isSubmitting || update.isPending}
> >
{intl.formatMessage({ {intl.formatMessage({
id: "common.find", id: "common.find",

40
apps/scandic-web/components/HotelReservation/FindMyBooking/utils.ts Normal file
View File

@@ -0,0 +1,40 @@
import type { IntlShape } from "react-intl"
export enum FindMyBookingErrorEnum {
BOOKING_NOT_FOUND = "BOOKING_NOT_FOUND",
BOOKING_ACCESS_DENIED = "BOOKING_ACCESS_DENIED",
}
export function getErrorMessage(
intl: IntlShape,
error?: FindMyBookingErrorEnum
) {
switch (error) {
case FindMyBookingErrorEnum.BOOKING_ACCESS_DENIED:
return {
heading: intl.formatMessage({
id: "myStay.accessDenied.loginRequired",
defaultMessage: "You need to be logged in to view your booking",
}),
text: intl.formatMessage({
id: "myStay.accessDenied.loginRequiredMessage",
defaultMessage:
"And you need to be logged in with the same member account that made the booking.",
}),
}
case FindMyBookingErrorEnum.BOOKING_NOT_FOUND:
return {
heading: intl.formatMessage({
id: "myStay.accessDenied.bookingNotFound",
defaultMessage: "We couldn't find your booking",
}),
text: intl.formatMessage({
id: "myStay.accessDenied.bookingNotFoundMessage",
defaultMessage:
"Please make sure you have entered the correct booking details and try again.",
}),
}
default:
return null
}
}

78
apps/scandic-web/components/HotelReservation/MyStay/index.tsx
View File

@@ -1,13 +1,13 @@
import { cookies } from "next/headers" import { cookies } from "next/headers"
import { notFound } from "next/navigation" import { notFound, redirect } from "next/navigation"
import { BookingFlowConfig } from "@scandic-hotels/booking-flow/BookingFlowConfig" import { BookingFlowConfig } from "@scandic-hotels/booking-flow/BookingFlowConfig"
import { filterOverlappingDates } from "@scandic-hotels/booking-flow/utils/SelectRate" import { filterOverlappingDates } from "@scandic-hotels/booking-flow/utils/SelectRate"
import { findMyBookingRoutes } from "@scandic-hotels/common/constants/routes/findMyBookingRoutes"
import { dt } from "@scandic-hotels/common/dt" import { dt } from "@scandic-hotels/common/dt"
import { logger } from "@scandic-hotels/common/logger" import { logger } from "@scandic-hotels/common/logger"
import * as maskValue from "@scandic-hotels/common/utils/maskValue" import * as maskValue from "@scandic-hotels/common/utils/maskValue"
import Image from "@scandic-hotels/design-system/Image" import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
import { parseRefId } from "@scandic-hotels/trpc/utils/refId" import { parseRefId } from "@scandic-hotels/trpc/utils/refId"
@@ -40,6 +40,9 @@ import { getIntl } from "@/i18n"
import MyStayProvider from "@/providers/MyStay" import MyStayProvider from "@/providers/MyStay"
import { isLoggedInUser } from "@/utils/isLoggedInUser" import { isLoggedInUser } from "@/utils/isLoggedInUser"
import FindMyBooking from "../FindMyBooking"
import { FindMyBookingErrorEnum } from "../FindMyBooking/utils"
import styles from "./index.module.css" import styles from "./index.module.css"
import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue" import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue"
@@ -72,9 +75,6 @@ async function MyStay(props: {
} }
const { confirmationNumber, lastName } = parseRefId(refId) const { confirmationNumber, lastName } = parseRefId(refId)
if (!confirmationNumber) {
return notFound()
}
const isLoggedIn = await isLoggedInUser() const isLoggedIn = await isLoggedInUser()
@@ -85,10 +85,11 @@ async function MyStay(props: {
bookingConfirmation = await getBookingConfirmation(refId) bookingConfirmation = await getBookingConfirmation(refId)
} else if (bv) { } else if (bv) {
logger.info(`MyStay: bv`, bv) logger.info(`MyStay: bv`, bv)
const values = JSON.parse(bv) as AdditionalInfoCookieValue const {
const firstName = values.firstName firstName,
const email = values.email email,
const bvConfirmationNo = values.confirmationNumber confirmationNumber: bvConfirmationNo,
} = JSON.parse(bv) as AdditionalInfoCookieValue
if (firstName && email && bvConfirmationNo === confirmationNumber) { if (firstName && email && bvConfirmationNo === confirmationNumber) {
bookingConfirmation = await findBooking( bookingConfirmation = await findBooking(
@@ -115,7 +116,9 @@ async function MyStay(props: {
} }
if (!bookingConfirmation) { if (!bookingConfirmation) {
return notFound() redirect(
`${findMyBookingRoutes[lang]}?error=${FindMyBookingErrorEnum.BOOKING_NOT_FOUND}`
)
} }
const { additionalData, booking, hotel, roomCategories } = bookingConfirmation const { additionalData, booking, hotel, roomCategories } = bookingConfirmation
@@ -288,41 +291,34 @@ async function MyStay(props: {
if (access === ERROR_BAD_REQUEST) { if (access === ERROR_BAD_REQUEST) {
return ( return (
<main className={styles.main}> <RenderAdditionalInfoForm
<div className={styles.form}> confirmationNumber={confirmationNumber}
<AdditionalInfoForm lastName={lastName}
confirmationNumber={confirmationNumber} />
lastName={lastName}
/>
</div>
</main>
) )
} }
if (access === ERROR_UNAUTHORIZED) { if (access === ERROR_UNAUTHORIZED) {
return ( if (bv) {
<main className={styles.main}> const { firstName, email } = JSON.parse(bv) as AdditionalInfoCookieValue
<div className={styles.logIn}>
<Typography variant="Title/md"> return (
<h1> <main className={styles.main}>
{intl.formatMessage({ <div className={styles.form}>
id: "myStay.accessDenied.loginRequired", <FindMyBooking
defaultMessage: "You need to be logged in to view your booking", error={FindMyBookingErrorEnum.BOOKING_ACCESS_DENIED}
})} defaultValues={{
</h1> firstName,
</Typography> lastName,
<Typography variant="Body/Lead text"> confirmationNumber,
<p> email,
{intl.formatMessage({ }}
id: "myStay.accessDenied.loginRequiredMessage", />
defaultMessage: </div>
"And you need to be logged in with the same member account that made the booking.", </main>
})} )
</p> } else {
</Typography> }
</div>
</main>
)
} }
return notFound() return notFound()

2
packages/trpc/lib/routers/booking/utils.ts
View File

@@ -90,7 +90,7 @@ export async function findBooking(
// If the booking is not found, return null. // If the booking is not found, return null.
// This scenario is expected to happen when a logged in user trying to access a booking that doesn't belong to them. // This scenario is expected to happen when a logged in user trying to access a booking that doesn't belong to them.
if (apiResponse.status === 400) { if (apiResponse.status === 400 || apiResponse.status === 404) {
return null return null
} }