135 lines
4.2 KiB
TypeScript
135 lines
4.2 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 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 Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
|
|
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, memberPrice }: DetailsProps) {
|
|
const intl = useIntl()
|
|
const initialData = useEnterDetailsStore((state) => state.formValues.guest)
|
|
const join = useEnterDetailsStore((state) => state.guest.join)
|
|
const updateDetails = useEnterDetailsStore(
|
|
(state) => state.actions.updateDetails
|
|
)
|
|
|
|
const methods = useForm<DetailsSchema>({
|
|
criteriaMode: "all",
|
|
mode: "all",
|
|
resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
|
|
reValidateMode: "onChange",
|
|
values: {
|
|
countryCode: user?.address?.countryCode ?? initialData.countryCode,
|
|
dateOfBirth: initialData.dateOfBirth,
|
|
email: user?.email ?? initialData.email,
|
|
firstName: user?.firstName ?? initialData.firstName,
|
|
join,
|
|
lastName: user?.lastName ?? initialData.lastName,
|
|
membershipNo: initialData.membershipNo,
|
|
phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
|
|
zipCode: initialData.zipCode,
|
|
},
|
|
})
|
|
|
|
const onSubmit = useCallback(
|
|
(values: DetailsSchema) => {
|
|
updateDetails(values)
|
|
},
|
|
[updateDetails]
|
|
)
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form
|
|
className={styles.form}
|
|
id={formID}
|
|
onSubmit={methods.handleSubmit(onSubmit)}
|
|
>
|
|
{user ? null : (
|
|
<JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
|
|
)}
|
|
<div className={styles.container}>
|
|
<Footnote
|
|
color="uiTextHighContrast"
|
|
textTransform="uppercase"
|
|
type="label"
|
|
className={styles.header}
|
|
>
|
|
{intl.formatMessage({ id: "Guest information" })}
|
|
</Footnote>
|
|
<Input
|
|
label={intl.formatMessage({ id: "First name" })}
|
|
maxLength={30}
|
|
name="firstName"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Input
|
|
label={intl.formatMessage({ id: "Last name" })}
|
|
maxLength={30}
|
|
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 : (
|
|
<div className={styles.signup}>
|
|
<Signup name="join" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<footer className={styles.footer}>
|
|
<Button
|
|
disabled={!methods.formState.isValid}
|
|
intent="secondary"
|
|
size="small"
|
|
theme="base"
|
|
type="submit"
|
|
>
|
|
{intl.formatMessage({ id: "Proceed to payment method" })}
|
|
</Button>
|
|
</footer>
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|