chore(SW-360): use signup naming
This commit is contained in:
Chuma McPhoy
53
components/Forms/Signup/form.module.css
Normal file
53
components/Forms/Signup/form.module.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x5);
|
||||
grid-area: form;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.formWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.userInfo,
|
||||
.password,
|
||||
.terms {
|
||||
align-self: flex-start;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.nameInputs {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.dateField {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.formWrapper {
|
||||
gap: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.nameInputs {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.signUpButton {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
188
components/Forms/Signup/index.tsx
Normal file
188
components/Forms/Signup/index.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
"use client"
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useEffect,useState } from "react"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { privacyPolicy } from "@/constants/currentWebHrefs"
|
||||
|
||||
import { registerUser } from "@/actions/registerUser"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
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 Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
import { toast } from "@/components/TempDesignSystem/Toasts"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { SignUpSchema, signUpSchema } from "./schema"
|
||||
|
||||
import styles from "./form.module.css"
|
||||
|
||||
import type { SignUpFormProps } from "@/types/components/form/signupForm"
|
||||
|
||||
export default function Form({ link, subtitle, title }: SignUpFormProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const methods = useForm<SignUpSchema>({
|
||||
defaultValues: {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
dateOfBirth: "",
|
||||
address: {
|
||||
countryCode: "",
|
||||
zipCode: "",
|
||||
},
|
||||
password: "",
|
||||
termsAccepted: false,
|
||||
},
|
||||
mode: "all",
|
||||
criteriaMode: "all",
|
||||
resolver: zodResolver(signUpSchema),
|
||||
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: SignUpSchema) {
|
||||
try {
|
||||
const result = await registerUser(data)
|
||||
if (result && !result.success) {
|
||||
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
|
||||
}
|
||||
} catch (error) {
|
||||
// The server-side redirect will throw an error, which we can ignore
|
||||
// as it's handled by Next.js.
|
||||
if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
|
||||
return
|
||||
}
|
||||
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={styles.formWrapper}>
|
||||
<Title as="h3">{title}</Title>
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
className={styles.form}
|
||||
id="register"
|
||||
/**
|
||||
* Ignoring since ts doesn't recognize that tRPC
|
||||
* parses FormData before reaching the route
|
||||
* @ts-ignore */
|
||||
action={registerUser}
|
||||
onSubmit={methods.handleSubmit(handleSubmit)}
|
||||
>
|
||||
<section className={styles.userInfo}>
|
||||
<div className={styles.container}>
|
||||
<header>
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage({ id: "Contact information" })}
|
||||
</Subtitle>
|
||||
</header>
|
||||
<div className={styles.nameInputs}>
|
||||
<Input
|
||||
label={intl.formatMessage({ id: "First name" })}
|
||||
name="firstName"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Input
|
||||
label={intl.formatMessage({ id: "Last name" })}
|
||||
name="lastName"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.dateField}>
|
||||
<header>
|
||||
<Caption type="bold">
|
||||
{intl.formatMessage({ id: "Birth date" })}
|
||||
</Caption>
|
||||
</header>
|
||||
<DateSelect
|
||||
name="dateOfBirth"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<section className={styles.password}>
|
||||
<header>
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage({ id: "Password" })}
|
||||
</Subtitle>
|
||||
</header>
|
||||
<NewPassword
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
label={intl.formatMessage({ id: "Password" })}
|
||||
/>
|
||||
</section>
|
||||
<section className={styles.terms}>
|
||||
<header>
|
||||
<Subtitle type="two">
|
||||
{intl.formatMessage({ id: "Terms and conditions" })}
|
||||
</Subtitle>
|
||||
</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"
|
||||
target="_blank"
|
||||
href={privacyPolicy[lang]}
|
||||
>
|
||||
{intl.formatMessage({ id: "Scandic's Privacy Policy." })}
|
||||
</Link>
|
||||
</Body>
|
||||
</Checkbox>
|
||||
</section>
|
||||
<Button
|
||||
className={styles.signUpButton}
|
||||
type="submit"
|
||||
theme="base"
|
||||
intent="primary"
|
||||
disabled={methods.formState.isSubmitting}
|
||||
data-testid="submit"
|
||||
>
|
||||
{intl.formatMessage({ id: "Sign up to Scandic Friends" })}
|
||||
</Button>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
35
components/Forms/Signup/schema.ts
Normal file
35
components/Forms/Signup/schema.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { z } from "zod"
|
||||
|
||||
import { passwordValidator } from "@/utils/passwordValidator"
|
||||
import { phoneValidator } from "@/utils/phoneValidator"
|
||||
|
||||
const countryRequiredMsg = "Country is required"
|
||||
export const signUpSchema = z.object({
|
||||
firstName: z.string().max(250).trim().min(1, {
|
||||
message: "First name is required",
|
||||
}),
|
||||
lastName: z.string().max(250).trim().min(1, {
|
||||
message: "Last name is required",
|
||||
}),
|
||||
email: z.string().max(250).email(),
|
||||
phoneNumber: phoneValidator(
|
||||
"Phone is required",
|
||||
"Please enter a valid phone number"
|
||||
),
|
||||
dateOfBirth: z.string().min(1),
|
||||
address: z.object({
|
||||
countryCode: z
|
||||
.string({
|
||||
required_error: countryRequiredMsg,
|
||||
invalid_type_error: countryRequiredMsg,
|
||||
})
|
||||
.min(1, countryRequiredMsg),
|
||||
zipCode: z.string().min(1),
|
||||
}),
|
||||
password: passwordValidator("Password is required"),
|
||||
termsAccepted: z.boolean().refine((value) => value === true, {
|
||||
message: "You must accept the terms and conditions",
|
||||
}),
|
||||
})
|
||||
|
||||
export type SignUpSchema = z.infer<typeof signUpSchema>
|
||||
Reference in New Issue
Block a user