fastpocket/Frontend/sections/ModalSignUp/ModalSignUp.tsx

"use client";
// TODO: Needs a complete rework to use the DaisyUI component

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 {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(signUpValidationSchema),
  });
  return (
    <>
      <input
        type="checkbox"
        id="sign-up-modal"
        className="modal-toggle"
        name=""
      />
      <label
        htmlFor="sign-up-modal"
        className="modal cursor-pointer"
        onClick={() => {
          reset();
        }}
      >
        <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
              htmlFor="sign-up-modal"
              className="cursor-pointer"
              onClick={() => {
                reset();
              }}
            >
              <Icon name="Dismiss20Filled" size="medium" />
            </label>
          </div>
          <div
            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-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-sm md:text-base">
              Excited to see what we&apos;ve got! Signup and get started!
            </p>
          </div>
          <form
            onSubmit={handleSubmit((data) => {
              console.log(data);
              reset();
            })}
            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("firstName")}
                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.firstName?.message}&nbsp;
              </div>
            </div>
            <div className="relative mt-1">
              <input
                {...register("lastName")}
                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.lastName?.message}&nbsp;
              </div>
            </div>

            <div className="relative mt-1">
              <input
                {...register("phoneNumber")}
                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.phoneNumber?.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.organisation?.message}&nbsp;
              </div>
            </div>
            <div className="relative mt-1">
              <select
                {...register("organisationSize")}
                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.organisationSize?.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.password?.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.passwordConfirmation?.message}&nbsp;
              </div>
            </div>

            <button type="submit" className="btn btn-primary">
              Sign Up
            </button>
          </form>
        </label>
      </label>
    </>
  );
}

export default ModalSignUp;