"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({ 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 (
{intl.formatMessage({ id: "Guest information" })}
{user ? null : }
) }