147 lines
4.5 KiB
TypeScript
147 lines
4.5 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 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<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,
|
|
},
|
|
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 (
|
|
<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: "Firstname" })}
|
|
name="firstname"
|
|
readOnly={!!user}
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Input
|
|
label={intl.formatMessage({ id: "Lastname" })}
|
|
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 }}
|
|
/>
|
|
</form>
|
|
<footer className={styles.footer}>
|
|
{user ? null : (
|
|
<CheckboxCard
|
|
highlightSubtitle
|
|
list={list}
|
|
name="join"
|
|
subtitle={intl.formatMessage(
|
|
{
|
|
id: "{difference}{amount} {currency}",
|
|
},
|
|
{
|
|
amount: "491",
|
|
currency: "SEK",
|
|
difference: "-",
|
|
}
|
|
)}
|
|
title={intl.formatMessage({ id: "Join Scandic Friends" })}
|
|
/>
|
|
)}
|
|
<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>
|
|
)
|
|
}
|