"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 Button from "@/components/TempDesignSystem/Button" import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox" 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 { detailsSchema, signedInDetailsSchema } from "./schema" import styles from "./details.module.css" import type { DetailsProps, DetailsSchema, } from "@/types/components/enterDetails/details" const formID = "enter-details" export default function Details({ user }: DetailsProps) { const intl = useIntl() const list = [ { title: intl.formatMessage({ id: "Earn bonus nights & points" }) }, { title: intl.formatMessage({ id: "Get member benefits & offers" }) }, { title: intl.formatMessage({ id: "Join at no cost" }) }, ] const initialData = useEnterDetailsStore((state) => ({ countryCode: state.data.countryCode, email: state.data.email, firstname: state.data.firstname, lastname: state.data.lastname, phoneNumber: state.data.phoneNumber, })) 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, }, criteriaMode: "all", mode: "all", resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema), reValidateMode: "onChange", }) const completeStep = useEnterDetailsStore((state) => state.completeStep) const onSubmit = useCallback( (values: DetailsSchema) => { completeStep(values) }, [completeStep] ) return (
{intl.formatMessage({ id: "Guest information" })}
) }