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

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