fix(SW-1273): move find my booking page to the correct folder after monorepo migration
This commit is contained in:
Christian Andolf
@@ -0,0 +1,12 @@
|
||||
.main {
|
||||
width: var(--max-width-content);
|
||||
padding: var(--Spacing-x5) var(--Spacing-x1);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.form {
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import FindMyBooking from "@/components/HotelReservation/FindMyBooking"
|
||||
|
||||
import styles from "./page.module.css"
|
||||
|
||||
export default function GetBookingPage() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.form}>
|
||||
<FindMyBooking />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
.form {
|
||||
box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form > div {
|
||||
padding: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.inputs {
|
||||
grid-template-areas:
|
||||
"a a"
|
||||
"b c"
|
||||
"d d";
|
||||
}
|
||||
|
||||
.inputs > div:nth-child(1) {
|
||||
grid-area: a;
|
||||
}
|
||||
.inputs > div:nth-child(2) {
|
||||
grid-area: b;
|
||||
}
|
||||
.inputs > div:nth-child(3) {
|
||||
grid-area: c;
|
||||
}
|
||||
.inputs > div:nth-child(4) {
|
||||
grid-area: d;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.buttons > button {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.footnote {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
"use client"
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { trpc } from "@/lib/trpc/client"
|
||||
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Input from "@/components/TempDesignSystem/Form/Input"
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema"
|
||||
|
||||
import styles from "./findMyBooking.module.css"
|
||||
|
||||
export default function Form() {
|
||||
const router = useRouter()
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const form = useForm<FindMyBookingFormSchema>({
|
||||
defaultValues: {
|
||||
reservationNumber: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
},
|
||||
resolver: zodResolver(findMyBookingFormSchema),
|
||||
mode: "all",
|
||||
criteriaMode: "all",
|
||||
reValidateMode: "onChange",
|
||||
})
|
||||
|
||||
const update = trpc.booking.createRefId.useMutation({
|
||||
onSuccess: (result) => {
|
||||
router.push(
|
||||
`/${lang}/hotelreservation/my-stay/${encodeURIComponent(result.refId)}`
|
||||
)
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log("Failed to create ref id", error)
|
||||
},
|
||||
})
|
||||
|
||||
async function onSubmit(data: FindMyBookingFormSchema) {
|
||||
const value = new URLSearchParams(data).toString()
|
||||
document.cookie = `bv=${value}; Path=/; Max-Age=30; Secure; SameSite=Strict`
|
||||
update.mutate({
|
||||
confirmationNumber: data.reservationNumber,
|
||||
lastName: data.lastName,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
|
||||
<div>
|
||||
<Title level="h2">
|
||||
{intl.formatMessage({ id: "Find your stay" })}
|
||||
</Title>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "View and manage your stay made on Scandic's website",
|
||||
})}
|
||||
</Body>
|
||||
</div>
|
||||
<div className={styles.inputs}>
|
||||
<Input
|
||||
label="Reservation number"
|
||||
name="reservationNumber"
|
||||
placeholder="XXXXXX"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Input
|
||||
label="First name"
|
||||
name="firstName"
|
||||
placeholder="Anna"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Input
|
||||
label="Last name"
|
||||
name="lastName"
|
||||
placeholder="Andersson"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
name="email"
|
||||
placeholder="anna@scandichotels.com"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
<div className={styles.footnote}>
|
||||
<Caption type="bold">
|
||||
{intl.formatMessage({ id: "Can't find your stay?" })}
|
||||
</Caption>
|
||||
<Caption>
|
||||
{intl.formatMessage(
|
||||
{ id: "Please call customer service at {phoneNr}" },
|
||||
{ phoneNr: <Link href="tel:XXXXXX">XXXXXX</Link> }
|
||||
)}
|
||||
</Caption>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
intent="primary"
|
||||
theme="base"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{intl.formatMessage({ id: "Find" })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { z } from "zod"
|
||||
|
||||
export const findMyBookingFormSchema = z.object({
|
||||
reservationNumber: z.string(),
|
||||
firstName: z.string().max(250).trim().min(1, {
|
||||
message: "First name is required",
|
||||
}),
|
||||
lastName: z.string().max(250).trim().min(1, {
|
||||
message: "Last name is required",
|
||||
}),
|
||||
email: z.string().max(250).email(),
|
||||
})
|
||||
|
||||
export interface FindMyBookingFormSchema
|
||||
extends z.output<typeof findMyBookingFormSchema> {}
|
||||
Reference in New Issue
Block a user