162 lines
5.1 KiB
TypeScript
162 lines
5.1 KiB
TypeScript
"use client"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { useCallback } from "react"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import { registerUserBookingFlow } from "@/actions/registerUserBookingFlow"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
|
|
import Signup from "./Signup"
|
|
|
|
import styles from "./details.module.css"
|
|
|
|
import type {
|
|
DetailsProps,
|
|
DetailsSchema,
|
|
} from "@/types/components/hotelReservation/enterDetails/details"
|
|
|
|
const formID = "enter-details"
|
|
export default function Details({ user }: DetailsProps) {
|
|
const intl = useIntl()
|
|
const initialData = useEnterDetailsStore((state) => ({
|
|
countryCode: state.userData.countryCode,
|
|
email: state.userData.email,
|
|
firstName: state.userData.firstName,
|
|
lastName: state.userData.lastName,
|
|
phoneNumber: state.userData.phoneNumber,
|
|
join: state.userData.join,
|
|
dateOfBirth: state.userData.dateOfBirth,
|
|
zipCode: state.userData.zipCode,
|
|
termsAccepted: state.userData.termsAccepted,
|
|
}))
|
|
|
|
const methods = useForm<DetailsSchema>({
|
|
defaultValues: {
|
|
countryCode: user?.address?.countryCode ?? initialData.countryCode,
|
|
email: user?.email ?? initialData.email,
|
|
firstName: user?.firstName ?? initialData.firstName,
|
|
lastName: user?.lastName ?? initialData.lastName,
|
|
phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
|
|
//@ts-expect-error: We use a literal for join to be true or false, which does not convert to a boolean
|
|
join: initialData.join,
|
|
dateOfBirth: initialData.dateOfBirth,
|
|
zipCode: initialData.zipCode,
|
|
termsAccepted: initialData.termsAccepted,
|
|
},
|
|
criteriaMode: "all",
|
|
mode: "all",
|
|
resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
|
|
reValidateMode: "onChange",
|
|
})
|
|
|
|
const completeStep = useEnterDetailsStore((state) => state.completeStep)
|
|
|
|
// const errorMessage = intl.formatMessage({
|
|
// id: "An error occurred. Please try again.",
|
|
// })
|
|
|
|
const onSubmit = useCallback(
|
|
async function (values: DetailsSchema) {
|
|
if (values.join) {
|
|
const signupVals = {
|
|
firstName: values.firstName,
|
|
lastName: values.lastName,
|
|
email: values.email,
|
|
phoneNumber: values.phoneNumber,
|
|
address: {
|
|
zipCode: values.zipCode,
|
|
countryCode: values.countryCode,
|
|
},
|
|
dateOfBirth: values.dateOfBirth,
|
|
}
|
|
|
|
const res = await registerUserBookingFlow(signupVals)
|
|
if (!res.success) {
|
|
// if (res.error) {
|
|
// toast.error(res.error)
|
|
// } else {
|
|
// toast.error(errorMessage)
|
|
// }
|
|
return
|
|
}
|
|
console.log("Signed up user: ", res)
|
|
}
|
|
completeStep(values)
|
|
},
|
|
|
|
[completeStep]
|
|
)
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<section className={styles.container}>
|
|
<header>
|
|
<Body color="uiTextHighContrast" textTransform="bold">
|
|
{intl.formatMessage({ id: "Guest information" })}
|
|
</Body>
|
|
</header>
|
|
<form
|
|
className={styles.form}
|
|
id={formID}
|
|
onSubmit={methods.handleSubmit(onSubmit)}
|
|
>
|
|
<Input
|
|
label={intl.formatMessage({ id: "First name" })}
|
|
name="firstName"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Input
|
|
label={intl.formatMessage({ id: "Last name" })}
|
|
name="lastName"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<CountrySelect
|
|
className={styles.country}
|
|
label={intl.formatMessage({ id: "Country" })}
|
|
name="countryCode"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Input
|
|
className={styles.email}
|
|
label={intl.formatMessage({ id: "Email address" })}
|
|
name="email"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Phone
|
|
className={styles.phone}
|
|
label={intl.formatMessage({ id: "Phone number" })}
|
|
name="phoneNumber"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
{user ? null : <Signup name="join" />}
|
|
</form>
|
|
<footer className={styles.footer}>
|
|
<Button
|
|
disabled={!methods.formState.isValid}
|
|
form={formID}
|
|
intent="secondary"
|
|
size="small"
|
|
theme="base"
|
|
type="submit"
|
|
>
|
|
{intl.formatMessage({ id: "Proceed to payment method" })}
|
|
</Button>
|
|
</footer>
|
|
</section>
|
|
</FormProvider>
|
|
)
|
|
}
|