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 { Formik } from "formik";
import Link from "next/link"; import Link from "next/link";
import { Fragment } from "react"; import { Fragment } from "react";
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import OTPInput from 'react-otp-input'; import OTPInput from "react-otp-input";
import { renderImage } from '../../services/imageHandling'; import { renderImage } from "../../services/imageHandling";
import Image from 'next/image'; import Image from "next/image";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
const Signup = (props) => { const Signup = props => {
console.log(props.type) console.log(props.type);
const router = useRouter(); const router = useRouter();
const [isFormTouched, setIsFormTouched] = useState(false); const [Otp, setOtp] = useState("");
const [Otp, setOtp] = useState(""); // const [isTermsChecked, setTermsChecked] = useState(false);
const [isTermsChecked, setTermsChecked] = useState(false) // const [fullName, setFullname] = useState("");
const [fullName, setFullname] = useState("") // const [emailId, setEmailId] = useState("");
const [emailId, setEmailId] = useState("") // const [pwd, setPwd] = useState("")
const [pwd, setPwd] = useState("") // const [confirmPwd, setConfirmPwd] = useState("")
const [confirmPwd, setConfirmPwd] = useState("") const [isOtpSent, setOtpSent] = useState(false);
const [countryCode, setCountryCode] = useState("+91") const [otpVerified, setOtpVerified] = useState(false);
const [mobileNo, setMobileNo] = useState("") // const [passwordMatch, setPasswordMatch] = useState()
const [isOtpSent, setOtpSent] = useState(false) const handleOTPChange = e => {
const [otpVerified, setOtpVerified] = useState(false) setOtp(e);
};
const handleOTPChange = (e) => { const signupValidationSchema = Yup.object().shape({
setOtp(e); 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({ // Initial errors for required fields
fullname: Yup.string() const initialErrors = {
.required("Fullname is Required"), fullname: "Full Name is required",
email: Yup.string() email: "Email is required",
.required("Email Id is Required") password: "Password is required",
.email("Please Enter An Valid Email Id"), confirmPassword: "Confirm Password is required",
password: Yup.string() countryCode: "Country Code is Required",
.required("Password is Required"), mobile: "Mobile Number 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 handleSendOtp = values => {
const initialErrors = { setOtpSent(true);
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) => { const handleVerifyOtp = values => {
setOtpSent(true); setOtpVerified(true);
if (props.type == "user") {
} }
};
const handleVerifyOtp = (values) => { return (
setOtpVerified(true); <Fragment>
if (props.type == "user") { <div className="contaier-fluid login-banner-image">
// router.push("/"); {(props?.type == "user" || (props?.type == "vendor" && !otpVerified)) && (
} <div className="row">
} <div className="col-11 col-lg-4 login-div signupdiv">
<div className="">
return ( <h2>{props.type == "vendor" ? "Vendor Signup" : "Signup to get more out of the platform"}</h2>
<Fragment> <div className="form-container">
<div className="contaier-fluid login-banner-image"> <Formik
{(props?.type == "user" || (props?.type == "vendor" && !otpVerified)) && ( initialValues={{
<div className="row"> fullname: "",
<div className="col-11 col-lg-4 login-div signupdiv"> email: "",
<div className=""> password: "",
<h2>{props.type == "vendor" ? "Vendor Signup" : "Signup to get more out of the platform"}</h2> confirmPassword: "",
<div className="form-container"> countryCode: "",
<Formik mobile: "",
initialValues={{ termsConditions: false,
fullname: fullName ? fullName : "", otp: Otp ? Otp : ""
email: emailId ? emailId : "", }}
password: pwd ? pwd : "", // initialErrors={initialErrors}
confirm_password: confirmPwd ? confirmPwd : "", validationSchema={signupValidationSchema}
country_code: countryCode ? countryCode : "", enableReinitialize={true}
mobile: mobileNo ? mobileNo : "", onSubmit={values => {
is_terms_checked: isTermsChecked, console.log("signup values", values);
otp: Otp ? Otp : "", if (!isOtpSent) {
}} handleSendOtp(values);
// initialErrors={initialErrors} }
validationSchema={signupValidationSchema} if (isOtpSent) {
enableReinitialize={true} handleVerifyOtp(values);
onSubmit={values => { }
console.log("signup values", values) }}
if (!isOtpSent) { >
handleSendOtp(values) {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => (
} <Form
if (isOtpSent) { onSubmit={e => {
handleVerifyOtp(values) e.preventDefault();
} handleSubmit();
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => ( <div className="input-group">
<Form <label>Fullname</label>
onSubmit={e => { <input
e.preventDefault(); type="text"
handleSubmit(); name="fullname"
}} onChange={handleChange}
> onBlur={handleBlur}
<div className="input-group"> value={values.fullname}
<label>Fullname</label> placeholder="Your name"
<input />
type="text" {errors.fullname && touched.fullname && <span className="form-error">{errors.fullname}</span>}
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>
</div> </div>
</div> <div className="input-group">
)} <label>Email Id</label>
<input
{props.type && props.type == "vendor" && otpVerified && ( type="text"
<div className="row"> name="email"
<div className="col-12 col-lg-4 login-div"> onChange={handleChange}
<div className="thankyou-div"> onBlur={handleBlur}
<span className="image-container"> value={values.email}
<Image src={renderImage("/images/login/success.png")} layout="fill" className="image" /> placeholder="yourname@example.com"
</span> />
<h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2> {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
<p className="mb-4">Your Profile is been created successfully</p> </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>
<div>
<div className="form-container"> <p>4 digit OTP is been sent on your email address.</p>
<div className="input-group mb-2"> <div className="d-flex align-items-center mb-4">
<Button type="button" className="btn btn-primary btn-submit" <p className="mb-0 me-5">Didn’t Receive Yet?</p>
// onClick={() => { <div className="d-flex resend-otp">
// router.push("/") <span className="image-container me-2">
// }} <Image src={renderImage("/images/login/icon-resend.png")} layout="fill" className="image" />
> </span>
Proceed to Dashboard <p className="mb-0">Resend</p>
</Button>
</div> </div>
</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>
</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> </div>
</Fragment> </div>
) )}
} </div>
</Fragment>
);
};
export default Signup;
\ No newline at end of file \ 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!