152 lines
5.1 KiB
TypeScript
152 lines
5.1 KiB
TypeScript
"use client"
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { registerUser } from "@/actions/registerUser"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
|
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
|
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
|
import Input from "@/components/TempDesignSystem/Form/Input"
|
|
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
|
|
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { toast } from "@/components/TempDesignSystem/Toasts"
|
|
|
|
import { RegisterSchema, registerSchema } from "./schema"
|
|
|
|
import styles from "./form.module.css"
|
|
|
|
export default function Form() {
|
|
const intl = useIntl()
|
|
const methods = useForm<RegisterSchema>({
|
|
defaultValues: {
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phoneNumber: "",
|
|
dateOfBirth: "",
|
|
address: {
|
|
countryCode: "",
|
|
zipCode: "",
|
|
},
|
|
password: "",
|
|
termsAccepted: false,
|
|
},
|
|
mode: "all",
|
|
criteriaMode: "all",
|
|
resolver: zodResolver(registerSchema),
|
|
reValidateMode: "onChange",
|
|
})
|
|
const country = intl.formatMessage({ id: "Country" })
|
|
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
|
|
const phoneNumber = intl.formatMessage({ id: "Phone number" })
|
|
const zipCode = intl.formatMessage({ id: "Zip code" })
|
|
|
|
async function handleSubmit(data: RegisterSchema) {
|
|
const isSuccessResponse = await registerUser(data)
|
|
if (!isSuccessResponse) {
|
|
toast.error("Something went wrong!")
|
|
} else {
|
|
// TODO: Toast should be removed and we should show a different page
|
|
toast.success("Form submitted successfully")
|
|
// should we navigate to sub route like /signup/success ?
|
|
// router.push("/")
|
|
|
|
methods.reset()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<FormProvider {...methods}>
|
|
<form
|
|
className={styles.form}
|
|
id="register"
|
|
onSubmit={methods.handleSubmit(handleSubmit)}
|
|
>
|
|
<section className={styles.user}>
|
|
<div className={styles.container}>
|
|
<Input
|
|
label={"firstName"}
|
|
name="firstName"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<Input
|
|
label={"lastName"}
|
|
name="lastName"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
<DateSelect
|
|
name="dateOfBirth"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<div className={styles.container}>
|
|
<Input
|
|
label={zipCode}
|
|
name="address.zipCode"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
<CountrySelect
|
|
label={country}
|
|
name="address.countryCode"
|
|
registerOptions={{ required: true }}
|
|
/>
|
|
</div>
|
|
<Input
|
|
label={email}
|
|
name="email"
|
|
registerOptions={{ required: true }}
|
|
type="email"
|
|
/>
|
|
<Phone label={phoneNumber} name="phoneNumber" />
|
|
</section>
|
|
<Divider className={styles.divider} color="subtle" />
|
|
<section className={styles.password}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Password" })}
|
|
</Body>
|
|
</header>
|
|
<NewPassword
|
|
name="password"
|
|
placeholder="Password"
|
|
label={intl.formatMessage({ id: "Password" })}
|
|
/>
|
|
</section>
|
|
<section className={styles.terms}>
|
|
<header>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Terms and conditions" })}
|
|
</Body>
|
|
</header>
|
|
<Checkbox name="termsAccepted" registerOptions={{ required: true }}>
|
|
<Body>
|
|
{intl.formatMessage({
|
|
id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
|
|
})}{" "}
|
|
<Link variant="underscored" color="peach80" href="/privacy">
|
|
{intl.formatMessage({ id: "Scandic's Privacy Policy." })}
|
|
</Link>
|
|
</Body>
|
|
</Checkbox>
|
|
</section>
|
|
<Button
|
|
type="submit"
|
|
intent="primary"
|
|
disabled={methods.formState.isSubmitting}
|
|
data-testid="submit"
|
|
>
|
|
{intl.formatMessage({ id: "Sign up to Scandic Friends" })}
|
|
</Button>
|
|
</form>
|
|
</FormProvider>
|
|
</section>
|
|
)
|
|
}
|