"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 { 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 Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import Title from "@scandic-hotels/design-system/Title" import { toast } from "@scandic-hotels/design-system/Toast" import { trpc } from "@scandic-hotels/trpc/client" import { customerService } from "@/constants/webHrefs" import Input from "@/components/TempDesignSystem/Form/Input" import useLang from "@/hooks/useLang" import { type FindMyBookingFormSchema, findMyBookingFormSchema } from "./schema" import styles from "./findMyBooking.module.css" import type { AdditionalInfoCookieValue } from "@scandic-hotels/booking-flow/types/components/findMyBooking/additionalInfoCookieValue" export default function FindMyBooking() { const router = useRouter() const intl = useIntl() const lang = useLang() const form = useForm({ defaultValues: { confirmationNumber: "", firstName: "", lastName: "", email: "", }, resolver: zodResolver(findMyBookingFormSchema), mode: "all", criteriaMode: "all", reValidateMode: "onChange", }) const update = trpc.booking.createRefId.useMutation({ onSuccess: (result) => { const values = form.getValues() const value: AdditionalInfoCookieValue = { ...values, } document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict` router.push(`${myStay[lang]}?RefId=${encodeURIComponent(result.refId)}`) }, onError: (error) => { logger.error("Failed to create ref id", error) toast.error( intl.formatMessage({ defaultMessage: "Failed to submit form, please try again later.", }) ) }, }) async function onSubmit(data: FindMyBookingFormSchema) { update.mutate({ confirmationNumber: data.confirmationNumber, lastName: data.lastName, }) } return (
{intl.formatMessage({ defaultMessage: "Find your stay", })} {intl.formatMessage({ defaultMessage: "View and manage your booking made via our website or app.", })}
{intl.formatMessage({ defaultMessage: "Can't find your stay?", })} {intl.formatMessage( { defaultMessage: "Please contact customer service.", }, { link: (str) => ( {str} ), } )}
) }