feat(SW-360): Added register form with server action

2024-09-11 17:10:57 +02:00
parent 87e208b548
commit aa9475ce12
11 changed files with 382 additions and 0 deletions
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -0,0 +1,156 @@
+"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) {
+    console.log("submit", data)
+    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
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={registerUser}
+          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}
+          >
+            {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+          </Button>
+        </form>
+      </FormProvider>
+    </section>
+  )
+}