Signup.js 10.6 KB
import React, { useState } from "react";
import { Formik } from "formik";
import Link from "next/link";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import OTPInput from "react-otp-input";
import { renderImage } from "../../services/imageHandling";
import Image from "next/image";
import { useRouter } from "next/router";

const Signup = props => {
  console.log(props.type);
  const router = useRouter();

  const [Otp, setOtp] = useState("");
//   const [isTermsChecked, setTermsChecked] = useState(false);
//   const [fullName, setFullname] = useState("");
//   const [emailId, setEmailId] = useState("");
  // const [pwd, setPwd] = useState("")
  // const [confirmPwd, setConfirmPwd] = useState("")
  const [isOtpSent, setOtpSent] = useState(false);
  const [otpVerified, setOtpVerified] = useState(false);
  // const [passwordMatch, setPasswordMatch] = useState()
  const handleOTPChange = e => {
    setOtp(e);
  };

  const signupValidationSchema = Yup.object().shape({
    fullname: Yup.string().required("Fullname is Required"),
    email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
    password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters"),
    confirmPassword: Yup.string()
      .required("Confirm Password is Required")
      .oneOf([Yup.ref("password"), null], "Passwords must match"),
    countryCode: Yup.string().required("Country Code is Required"),
    mobile: Yup.string()
      .required("Mobile Number is Required")
      .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
    termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
    otp: Yup.string().when("isOtpSent", {
      is: true,
      then: Yup.string()
        .required("Otp is Required")
        .matches(/^[0-9\s]+$/, "Please Enter Correct OTP")
    })
  });

  // Initial errors for required fields
  const initialErrors = {
    fullname: "Full Name is required",
    email: "Email is required",
    password: "Password is required",
    confirmPassword: "Confirm Password is required",
    countryCode: "Country Code is Required",
    mobile: "Mobile Number is Required"
  };

  const handleSendOtp = values => {
    setOtpSent(true);
  };

  const handleVerifyOtp = values => {
    setOtpVerified(true);
    if (props.type == "user") {
    }
  };

  return (
    <Fragment>
      <div className="contaier-fluid login-banner-image">
        {(props?.type == "user" || (props?.type == "vendor" && !otpVerified)) && (
          <div className="row">
            <div className="col-11 col-lg-4 login-div signupdiv">
              <div className="">
                <h2>{props.type == "vendor" ? "Vendor Signup" : "Signup to get more out of the platform"}</h2>
                <div className="form-container">
                  <Formik
                    initialValues={{
                      fullname: "",
                      email: "",
                      password: "",
                      confirmPassword: "",
                      countryCode: "",
                      mobile: "",
                      termsConditions: false,
                      otp: Otp ? Otp : ""
                    }}
                    // initialErrors={initialErrors}
                    validationSchema={signupValidationSchema}
                    enableReinitialize={true}
                    onSubmit={values => {
                      console.log("signup values", values);
                      if (!isOtpSent) {
                        handleSendOtp(values);
                      }
                      if (isOtpSent) {
                        handleVerifyOtp(values);
                      }
                    }}
                  >
                    {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => (
                      <Form
                        onSubmit={e => {
                          e.preventDefault();
                          handleSubmit();
                        }}
                      >
                        <div className="input-group">
                          <label>Fullname</label>
                          <input
                            type="text"
                            name="fullname"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.fullname}
                            placeholder="Your name"
                          />
                          {errors.fullname && touched.fullname && <span className="form-error">{errors.fullname}</span>}
                        </div>
                        <div className="input-group">
                          <label>Email Id</label>
                          <input
                            type="text"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                            placeholder="yourname@example.com"
                          />
                          {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
                        </div>
                        <div className="input-group">
                          <label>Password</label>
                          <input type="password" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} placeholder="Enter password" />
                          {errors.password && touched.password && <span className="form-error">{errors.password}</span>}
                        </div>
                        <div className="input-group">
                          <label>Confirm Password</label>
                          <input
                            type="password"
                            name="confirmPassword"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.confirmPassword}
                            placeholder="Enter password"
                          />
                          {errors.confirmPassword && touched.confirmPassword && <span className="form-error">{errors.confirmPassword}</span>}
                        </div>
                        <div className="input-group">
                          <label>Mobile No.</label>
                          <div className="contact-number">
                            <select
                              id="countryCode"
                              name="countryCode"
                              onChange={handleChange}
                              onBlur={e => {
                                handleBlur(e);
                                setCountryCode(e.target.value);
                              }}
                              style={{ width: "80px" }}
                            >
                              <option value="+91">+91</option>
                              <option value="+44">+44</option>
                            </select>
                            <input
                              type="text"
                              name="mobile"
                              onChange={handleChange}
                              onBlur={handleBlur}
                              value={values.mobile}
                              placeholder="#@$!%@#"
                              style={{ flex: "0 100%" }}
                            />
                          </div>
                          {errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
                        </div>
                        {isOtpSent && (
                          <>
                            <div className="input-group">
                              <label>
                                OTP <span style={{ marginLeft: "190px" }}>00:30</span>
                              </label>
                              <div className="otp-input">
                                <OTPInput value={Otp} onChange={handleOTPChange} numInputs={4} separator={<span> </span>} renderInput={props => <input {...props} />} />
                              </div>
                              {errors.otp && touched.otp && <span className="form-error">{errors.otp}</span>}
                            </div>
                            <div>
                              <p>4 digit OTP is been sent on your email address.</p>
                              <div className="d-flex align-items-center mb-4">
                                <p className="mb-0 me-5">Didnt Receive Yet?</p>
                                <div className="d-flex resend-otp">
                                  <span className="image-container me-2">
                                    <Image src={renderImage("/images/login/icon-resend.png")} layout="fill" className="image" />
                                  </span>
                                  <p className="mb-0">Resend</p>
                                </div>
                              </div>
                            </div>
                          </>
                        )}
                        <div className="input-group mb-3">
                          <label className="check-container mb-0 pt-1" htmlFor="termsConditions">
                            <input
                              type="checkbox"
                              id="termsConditions"
                              name="termsConditions"
                              className="check-box me-2"
                              checked={values.termsConditions}
                              onChange={handleChange}
                              onBlur={handleBlur}
                            />
                            <span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
                          </label>
                          <br/>
                          {errors.termsConditions && touched.termsConditions && <span className="form-error">{errors.termsConditions}</span>}
                        </div>
                        <div className="input-group mb-0">
                          <Button type="submit" className="btn btn-primary btn-submit" disabled={!values.termsConditions && !isValid}>
                            Sign Up Now
                          </Button>
                        </div>
                      </Form>
                    )}
                  </Formik>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </Fragment>
  );
};

export default Signup;