Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 3c81ef95 by jay
Options

grooming of vendor signup form

1 parent 1ea46a5d
Inline Side-by-side
Showing 1 changed file with 246 additions and 281 deletions
components/signup/Signup.js
import React, { useState } from 'react';
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';
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 Signup = props => {
console.log(props.type);
const router = useRouter();
const [isFormTouched, setIsFormTouched] = useState(false);
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 [countryCode, setCountryCode] = useState("+91")
const [mobileNo, setMobileNo] = useState("")
const [isOtpSent, setOtpSent] = useState(false)
const [otpVerified, setOtpVerified] = useState(false)
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 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")
})
});
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"),
confirm_password: Yup.string()
.oneOf([Yup.ref("password"), null], "Passwords must match")
.required("Confirm Password is Required"),
country_code: Yup.string()
.required("Country Code is Required"),
mobile: Yup.string()
.required("Mobile Number is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
is_terms_checked: 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"
};
// Initial errors for required fields
const initialErrors = {
fullname: "Full Name is required",
email: "Email is required",
password: "Password is required",
confirm_password: "Confirm Password is required",
country_code: "Country Code is Required",
mobile: "Mobile Number is Required",
};
const handleSendOtp = values => {
setOtpSent(true);
};
const handleSendOtp = (values) => {
setOtpSent(true);
const handleVerifyOtp = values => {
setOtpVerified(true);
if (props.type == "user") {
}
};
const handleVerifyOtp = (values) => {
setOtpVerified(true);
if (props.type == "user") {
// router.push("/");
}
}
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: fullName ? fullName : "",
email: emailId ? emailId : "",
password: pwd ? pwd : "",
confirm_password: confirmPwd ? confirmPwd : "",
country_code: countryCode ? countryCode : "",
mobile: mobileNo ? mobileNo : "",
is_terms_checked: isTermsChecked,
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={(e) => {
handleBlur(e)
setFullname(e.target.value)
}}
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={(e) => {
handleBlur(e)
setEmailId(e.target.value)
}}
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="text"
name="password"
onChange={handleChange}
onBlur={(e) => {
handleBlur(e)
setPwd(e.target.value)
}}
value={values.password}
placeholder="#@$!%@#"
/>
{errors.password && touched.password && (<span className="form-error">{errors.password}</span>)}
</div>
<div className="input-group">
<label>Confirm Password</label>
<input
type="text"
name="confirm_password"
onChange={handleChange}
onBlur={(e) => {
handleBlur(e)
setConfirmPwd(e.target.value)
if (pwd !== e.target.value) {
alert("Passwords do not Match")
}
}}
value={values.confirm_password}
placeholder="#@$!%@#"
/>
{errors.confirm_password && touched.confirm_password && (<span className="form-error">{errors.confirm_password}</span>)}
</div>
<div className="input-group">
<label>Mobile No.</label>
<div className="contact-number">
<select
id="country_code"
name="country_code"
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={(e) => {
handleBlur(e)
setMobileNo(e.target.value)
}}
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">Didn’t 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="is_terms_checked">
<input
type="checkbox"
id="is_terms_checked"
name="is_terms_checked"
className="check-box me-2"
checked={values.is_terms_checked}
onChange={e => {
handleChange(e);
setTermsChecked(e.target.checked)
}}
onBlur={handleBlur}
/>
<span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
</label>
{errors.is_terms_checked && touched.is_terms_checked && (<span className="form-error">{errors.is_terms_checked}</span>)}
</div>
<div className="input-group mb-0">
<Button type="submit" className="btn btn-primary btn-submit" disabled={Object.keys(errors).length}>
Sign Up Now
</Button>
</div>
</Form>
)}
</Formik>
</div>
</div>
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>
)}
{props.type && props.type == "vendor" && otpVerified && (
<div className="row">
<div className="col-12 col-lg-4 login-div">
<div className="thankyou-div">
<span className="image-container">
<Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
</span>
<h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
<p className="mb-4">Your Profile is been created successfully</p>
<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 className="form-container">
<div className="input-group mb-2">
<Button type="button" className="btn btn-primary btn-submit"
// onClick={() => {
// router.push("/")
// }}
>
Proceed to Dashboard
</Button>
<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">Didn’t 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>
</div>
)}
</Form>
)}
</Formik>
</div>
</div>
</div>
</div>
)}
{props.type && props.type == "vendor" && otpVerified && (
<div className="row">
<div className="col-12 col-lg-4 login-div">
<div className="thankyou-div">
<span className="image-container">
<Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
</span>
<h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
<p className="mb-4">Your Profile is been created successfully</p>
</div>
<div className="form-container">
<div className="input-group mb-2">
<Button
type="button"
className="btn btn-primary btn-submit"
// onClick={() => {
// router.push("/")
// }}
>
Proceed to Dashboard
</Button>
</div>
</div>
</div>
</Fragment>
)
}
</div>
)}
</div>
</Fragment>
);
};
export default Signup;
\ No newline at end of file
export default Signup;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!