From 7d6cf57432c0e8d763f2b58856cb6fe26fe392a5 Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Wed, 21 Feb 2024 17:23:53 +0800
Subject: [PATCH] bugfix - fixed UI for the signup modal

---
 Frontend/constants/index.ts                   |   7 +
 Frontend/sections/ModalSignIn/ModalSignIn.tsx |   5 -
 Frontend/sections/ModalSignUp/ModalSignUp.tsx | 167 +++++++++++++++---
 3 files changed, 150 insertions(+), 29 deletions(-)
 create mode 100644 Frontend/constants/index.ts

diff --git a/Frontend/constants/index.ts b/Frontend/constants/index.ts
new file mode 100644
index 0000000..009fddf
--- /dev/null
+++ b/Frontend/constants/index.ts
@@ -0,0 +1,7 @@
+export const companySizeList = [
+    "1-10 employees",
+    "10-30 employees",
+    "30-70 employees",
+    "70-100 employees",
+    "100+ employees"
+]
\ No newline at end of file
diff --git a/Frontend/sections/ModalSignIn/ModalSignIn.tsx b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
index 11e5d47..1c05629 100644
--- a/Frontend/sections/ModalSignIn/ModalSignIn.tsx
+++ b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
@@ -36,11 +36,6 @@ function ModalSignIn() {
               </h3>
               <p className="text-sm md:text-base">Lets kick some more ass?</p>
             </div>
-            {/* <ModalSignInForm
-              textOnUse={"textOnUse"}
-              setStatus={setStatus}
-              ref={formRef}
-            /> */}
             <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
               <div className="relative mt-6">
                 <input
diff --git a/Frontend/sections/ModalSignUp/ModalSignUp.tsx b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
index 2591a81..34ff612 100644
--- a/Frontend/sections/ModalSignUp/ModalSignUp.tsx
+++ b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
@@ -5,15 +5,19 @@ import React, { useRef, useState } from "react";
 import { ModalStatus } from "@/types";
 import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
 import Icon from "@/components/icon";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { signUpValidationSchema } from "@/utils/form";
+import { companySizeList } from "@/constants";
 
 function ModalSignUp() {
-  const formRef = useRef<FormRefMethods>(null);
-  const handleCloseModal = () => {
-    if (formRef.current) {
-      formRef.current.resetForm();
-    }
-  };
-
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(signUpValidationSchema),
+  });
   return (
     <>
       <input
@@ -26,32 +30,147 @@ function ModalSignUp() {
       <label htmlFor="sign-up-modal" className="modal cursor-pointer">
         <label className="modal-box relative  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
-            <label
-              onClick={handleCloseModal}
-              htmlFor="sign-up-modal"
-              className="cursor-pointer"
-            >
+            <label htmlFor="sign-up-modal" className="cursor-pointer">
               <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
           <div
-            className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
+            className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
             data-aos="fade-up"
           >
-            <h3 className="pb-2 text-lg md:text-3xl pt-6">
-              {/* {textOnUse.title} */}
+            <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
+              We Are Growing Fast, and We Want You To Join The Party!
             </h3>
-            <p className="text-xs md:text-base">{/* {textOnUse.subTitle} */}</p>
+            <p className="text-sm md:text-base">
+              Excited to see what we&apos;ve got! Signup and get started!
+            </p>
           </div>
+          <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
+            <div className="relative mt-6">
+              <input
+                {...register("email")}
+                type="text"
+                id="SignUpEmail"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Email…"
+                aria-label="Email…"
+                autoComplete="on"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1">
+              <input
+                {...register("first_name")}
+                id="SignUpFirstName"
+                type="text"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="First Name…"
+                aria-label="First Name…"
+                autoComplete="on"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1">
+              <input
+                {...register("last_name")}
+                id="SignUpLastName"
+                type="text"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Last Name…"
+                aria-label="Last Name…"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
 
-          {/* <ModalSignUpForm
-              generateCheckoutSession={false}
-              companySizeList={companySizeList}
-              textOnUse={textOnUse}
-              setStatus={setStatus}
-              getPriceId={getPriceId}
-              ref={formRef}
-            /> */}
+            <div className="relative mt-1">
+              <input
+                {...register("phone_number")}
+                id="SignUpPhoneNumber"
+                type="text"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Phone Number…"
+                aria-label="Phone Number…"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1">
+              <input
+                {...register("organisation")}
+                id="SignUpOrganisation"
+                type="text"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Organisation…"
+                aria-label="Organisation…"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1">
+              <select
+                {...register("company_size")}
+                id="SignUpCompanySize"
+                defaultValue={""}
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+              >
+                <option className="bg-gray-850" value={""} disabled>
+                  Company Size…
+                </option>
+                {companySizeList.map((companySizeOption, i) => {
+                  return (
+                    <option
+                      className="bg-gray-850"
+                      value={companySizeOption}
+                      key={i}
+                    >
+                      {companySizeOption}
+                    </option>
+                  );
+                })}
+              </select>
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1">
+              <input
+                {...register("password")}
+                id="SignUpPwd"
+                type="password"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Password..."
+                aria-label="Password"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+            <div className="relative mt-1 mb-2">
+              <input
+                {...register("passwordConfirmation")}
+                id="SignUpPwdConfirm"
+                type="password"
+                className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+                placeholder="Confirmed Password..."
+                aria-label="Confirmed Password"
+              />
+              <div className="text-start text-sm italic text-error-content">
+                {errors.email?.message}&nbsp;
+              </div>
+            </div>
+
+            <button type="submit" className="btn btn-primary">
+              Sign Up
+            </button>
+          </form>
         </label>
       </label>
     </>