Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ca21c454 by Jyotsna
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents 0a9aece7 7cbeb538
Inline Side-by-side
Showing 19 changed files with 898 additions and 503 deletions
components/layout/Header.js
......@@ -2,11 +2,15 @@ import { getSession, signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { loadUser } from "../../redux/actions/userActions";
const Header = () => {
const { user, error } = useSelector(state => state.loadedUser);
const dispatch = useDispatch();
// console.log("user", user);
const [isSticky, setIsSticky] = useState(false);
useEffect(() => {
......@@ -17,52 +21,73 @@ const Header = () => {
};
// Attach the scroll event listener when the component mounts
window.addEventListener('scroll', handleScroll);
window.addEventListener("scroll", handleScroll);
// Clean up the event listener when the component unmounts
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener("scroll", handleScroll);
};
}, []);
}, []);
return (
<header className={`header_wrap ${isSticky ? 'stick' : ''}`}>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav>
<Form className="d-flex me-3">
<div className="header-search">
<Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
<Button className="search-icon" variant="outline-success">
<header className={`header_wrap ${isSticky ? "stick" : ""}`}>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Button>
</div>
</Form>
<Button className="me-3" variant="primary">
Sign Up
</Button>
<Button className="" variant="primary">
Log In
</Button>
</Navbar.Collapse>
</Container>
</Navbar>
</Nav.Link>
</Nav>
<Form className="d-flex me-3">
<div className="header-search">
<Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
<Button className="search-icon" variant="outline-success">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
</span>
</Button>
</div>
</Form>
{/* {console.log(user.id)} */}
{user && user.id ? (
<div>
<div>
<p>Brand Logo</p>
</div>
<p>{user.phone}</p>
<Button
onClick={() => {
signOut({ redirect: false });
}}
className="me-3"
variant="primary"
>
Log out
</Button>
</div>
) : (
<div>
<Button className="me-3" variant="primary">
Sign Up
</Button>
<Button className="" variant="primary">
Log In
</Button>
</div>
)}
</Navbar.Collapse>
</Container>
</Navbar>
</header>
);
};
......
components/layout/Layout.js
import React from "react";
import React, { useEffect } from "react";
import Head from "next/head";
import Header from "./Header";
import Footer from "./Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
}, []);
return (
<div>
<Head>
......
components/listing/ListingInner.js
......@@ -39,7 +39,7 @@ const ListingInner = () => {
return (
<>
<section className="listing-inner-session">
<div className="container">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="filter-dd">
......
components/login/Login.js
import React, { useState } from 'react';
import React, { useState } from "react";
import { Formik } from "formik";
import Image from "next/image";
import Link from "next/link";
......@@ -6,109 +6,122 @@ import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling";
import { useRouter } from "next/router";
import { signIn } from "next-auth/react";
import { toast } from "react-toastify";
import { Loader } from "react-bootstrap-typeahead";
const Login = (props) => {
const loginValidationSchema = Yup.object().shape({
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"),
});
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
<div className="row">
<div className="col-11 col-lg-4 login-div">
<div className="">
<h2>{props.type=="vendor" ? "Vendor Login" : "Login to Experience"}</h2>
<div className="form-container">
<Formik
initialValues={{
email: "",
password: ""
}}
validationSchema={loginValidationSchema}
// enableReinitialize={true}
onSubmit={values => {
console.log("login values",values)
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<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="text"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
placeholder="#@$!%@#"
/>
{errors.password && touched.password && (<span className="form-error">{errors.password}</span>)}
</div>
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Login
</Button>
</div>
</Form>
)}
</Formik>
<div className="input-group justify-content-center">
<p className="text-center mb-0">or <Link href={`../signup/${props.type}`}><span style={{textDecoration:"underline",cursor:"pointer"}}>Create a new account</span></Link></p>
</div>
{props && props.type == "user" && (
<>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-google.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Google</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-fb1.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Facebook</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue mb-0">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-apple.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Apple</span>
</div>
</div>
</>
)}
</div>
</div>
</div>
const Login = props => {
const [loading, setLoading] = useState(false);
const loginValidationSchema = Yup.object().shape({
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")
});
const router = useRouter();
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
<div className="row">
<div className="col-11 col-lg-4 login-div">
<div className="">
<h2>{props.type == "vendor" ? "Vendor Login" : "Login to Experience"}</h2>
<div className="form-container">
<Formik
initialValues={{
email: "",
password: ""
}}
validationSchema={loginValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
setLoading(true);
console.log("login values", values);
const signInResponse = await signIn("credentials", {
email: values.email,
password: values.password,
redirect: false
});
console.log("signInResponse", signInResponse);
if (!signInResponse.ok) {
toast.error(signInResponse.error);
setLoading(false);
return;
}
if (signInResponse.ok) {
setLoading(false);
router.push("/vendor/business-details");
}
// router.push("")
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<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="#@$!%@#" />
{errors.password && touched.password && <span className="form-error">{errors.password}</span>}
</div>
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit" disabled={loading}>
{loading ? <Loader /> : "Login"}
</Button>
</div>
</Form>
)}
</Formik>
<div className="input-group justify-content-center">
<p className="text-center mb-0">
or{" "}
<Link href={`../signup/${props.type}`}>
<span style={{ textDecoration: "underline", cursor: "pointer" }}>Create a new account</span>
</Link>
</p>
</div>
{props && props.type == "user" && (
<>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-google.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Google</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-fb1.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Facebook</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue mb-0">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-apple.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Apple</span>
</div>
</div>
</>
)}
</div>
</div>
</Fragment>
)
}
</div>
</div>
</div>
</Fragment>
);
};
export default Login;
\ No newline at end of file
export default Login;
components/signup/Signup.js
......@@ -13,6 +13,8 @@ import { registerUser } from "../../redux/actions/userActions";
import { toast } from "react-toastify";
import OTPInput from "../common-components/OTPInput";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { signIn } from "next-auth/react";
import { Loader } from "react-bootstrap-typeahead";
const Signup = props => {
console.log(props.type);
......@@ -35,7 +37,7 @@ const Signup = props => {
};
const signupValidationSchema = Yup.object().shape({
fullname: Yup.string().required("Fullname is Required"),
fullname: Yup.string().required("Full name 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()
......@@ -74,6 +76,8 @@ const Signup = props => {
}
};
// console.log("otp", otp);
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
......@@ -124,20 +128,33 @@ const Signup = props => {
return;
}
setOtpSent(true);
setLoading(false);
} else {
e.preventDefault();
const oneTimePassword = otp.join("");
setLoading(false);
const otpRes = await finishVendorOtpVerification({ email: values.email, oneTimePassword });
console.log("otpRes", otpRes);
if (otpRes.data.ok) {
// router.push("/thank-you")
toast.success("User registered successflly");
const result = await signIn("credentials", {
email: values.email,
password: values.password,
redirect: false
});
setLoading(false);
console.log("result", result);
router.push("/vendor/business-details");
// toast.success("User registered successflly");
} else if (!otpRes.data.ok) {
setLoading(false);
setOtp(new Array(4).fill(""));
toast.error("Invalid OTP, please try again.");
}
}
}}
>
<div className="input-group">
<label>Fullname</label>
<label>Full Name</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>
......@@ -234,8 +251,8 @@ const Signup = props => {
</>
)}
<div className="input-group mb-0">
<Button type="submit" className="btn btn-primary btn-submit" disabled={!values.termsConditions && !isValid}>
{isOtpSent ? "Verify OTP" : "Sign Up Now"}
<Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}>
{loading ? <Loader/> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
</Button>
</div>
</Form>
......
components/vendor/BusinessDetails.js
import { Formik } from "formik";
import { Fragment } from "react";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaArrowRight, FaTimes } from "react-icons/fa";
import Image from "next/image";
import { getSession } from "next-auth/react";
import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
const BusinessDetails = () => {
const businessDetailsValidationSchema = Yup.object().shape({
panNumber: Yup.string()
.required("Pan Number is Required"),
panFile: Yup.mixed()
.required("Pan Image is Required"),
gstNumber: Yup.string()
.required("GST Number is Required"),
gstCertificateFile: Yup.mixed()
.required("GST Certificate is Required"),
businessName: Yup.string()
.required("Business Name is Required"),
brandLogoFile: Yup.mixed()
.required("Brand Logo is Required"),
pincode: Yup.string()
.required("Pincode is Required"),
country: Yup.string()
.required("Country is Required"),
state: Yup.string()
.required("State is Required"),
city: Yup.string()
.required("City is Required"),
addressLine1: Yup.string()
.required("Address Line 1 is Required"),
addressLine2: Yup.string()
.required("Address Line 2 is Required"),
});
const [session, setSession] = useState(null);
const dispatch = useDispatch();
return (
<Fragment>
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p><FaArrowRight /> Your bank account details for receiving payments from ZanGO</p>
<p className="mb-4"><FaArrowRight /> Tax (GST/PAN) details of your business.</p>
<hr />
<div className="form-container mt-4">
<Formik
initialValues={{
panNumber: "",
panFile: "",
gstNumber: "",
gstCertificateFile: "",
businessName: "",
brandLogoFile: "",
pincode: "",
country: "",
state: "",
city: "",
addressLine1: "",
addressLine2: ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={values => {
console.log("business details values", values)
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { vendorDetails } = useSelector(state => state.vendorDetails);
// const [pincodeData, setPinCodeData] = useState()
// const ref = useRef(null);
console.log("vendorDetails", vendorDetails);
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
console.log("session", loggedInVendor);
const businessDetailsValidationSchema = Yup.object().shape({
panNumber: Yup.string().required("Pan Number is Required"),
panFile: Yup.mixed(),
gstNumber: Yup.string().required("GST Number is Required"),
gstCertificateFile: Yup.mixed(),
businessName: Yup.string().required("Business Name is Required"),
brandLogoFile: Yup.mixed(),
pincode: Yup.string().required("Pincode is Required"),
country: Yup.string().required("Country is Required"),
state: Yup.string().required("State is Required"),
city: Yup.string().required("City is Required"),
addressLine1: Yup.string().required("Address Line 1 is Required"),
addressLine2: Yup.string().required("Address Line 2 is Required")
});
// const handleSearch = async pin => {
// let pincodeDataSet = await pincodeSearchByFilter(pin);
// console.log("pincodeData", pincodeDataSet.data.data);
// setPinCodeData(pincodeDataSet.data.data)
// };
let vendorData;
if (vendorDetails) {
vendorData = {
panNumber: vendorDetails.attributes.pan,
panFile: vendorDetails.attributes.panImage,
gstNumber: vendorDetails.attributes.gst,
gstCertificateFile: vendorDetails.attributes.gstImage,
businessName: vendorDetails.attributes.businessName,
brandLogoFile: vendorDetails.attributes.logo,
pincode: vendorDetails.attributes.pincode,
country: vendorDetails.attributes.country,
state: vendorDetails.attributes.state,
city: vendorDetails.attributes.city,
addressLine1: vendorDetails.attributes.addressLine1,
addressLine2: vendorDetails.attributes.addressLine2
};
}
// vendorDetails && console.log("vendorData", vendorData, vendorDetails.length > 0);
return (
<Fragment>
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO
</p>
<p className="mb-4">
<FaArrowRight /> Tax (GST/PAN) details of your business.
</p>
<hr />
<div className="form-container mt-4">
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
state: vendorData?.state ? vendorData?.state : "",
city: vendorData?.city ? vendorData?.city : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
businessName: values.businessName,
state: values.state,
city: values.city,
pincode: values.pincode,
country: values.country
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
const response = await dispatch(getLoggedInVendor());
console.log("loggedInVendorReducer", response);
const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
console.log("updateBusinessDetails", updateBusinessDetails);
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} />
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="panFile"
name="panFile"
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue("panFile", file);
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue("panFile", "");
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input
type="text"
name="panNumber"
onChange={handleChange}
onBlur={handleBlur}
value={values.panNumber}
/>
{errors.panNumber && touched.panNumber && (<span className="form-error">{errors.panNumber}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="panFile"
name="panFile"
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue("panFile", file)
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && (<span className="form-error">{errors.panFile}</span>)}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue("panFile", "")
}} />
</div>
)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<input
type="text"
name="gstNumber"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstNumber}
/>
{errors.gstNumber && touched.gstNumber && (<span className="form-error">{errors.gstNumber}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && (<span className="form-error">{errors.gstCertificateFile}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input
type="text"
name="businessName"
onChange={handleChange}
onBlur={handleBlur}
value={values.businessName}
/>
{errors.businessName && touched.businessName && (<span className="form-error">{errors.businessName}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && (<span className="form-error">{errors.brandLogoFile}</span>)}
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
<input
type="text"
name="pincode"
onChange={handleChange}
onBlur={handleBlur}
value={values.pincode}
/>
{errors.pincode && touched.pincode && (<span className="form-error">{errors.pincode}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<select
id="country"
name="country"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.country && touched.country && (<span className="form-error">{errors.country}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<select
id="state"
name="state"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.state && touched.state && (<span className="form-error">{errors.state}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<select
id="city"
name="city"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.city && touched.city && (<span className="form-error">{errors.city}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input
type="text"
name="addressLine1"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine1}
/>
{errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input
type="text"
name="addressLine2"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine2}
/>
{errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div>
</div>
</div>
</div>
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit" disabled>
Send for Approval
</Button>
</div>
</div>
</div>
</Form>
)}
</Formik>
/>
</div>
)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<input type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
{errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
{/* <AsyncTypeahead
onSearch={handleSearch}
minLength={3}
value={values.pincode}
id="basic-behaviors-example"
labelKey="name"
options={pincodeData && pincodeData.length>0 && pincodeData.map(item=>{
return {name: item.attributes.name, id: item.id}
})}
placeholder="Choose a state..."
ref={ref}
onBlur={() => {
console.log(ref.current);
if (!ref.current.state.selected.length > 0) {
ref.current?.clear();
}
}}
onChange={(e) => {
console.log("input change", e);
}}
/> */}
<input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<input type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
{errors.country && touched.country && <span className="form-error">{errors.country}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<input type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
{errors.state && touched.state && <span className="form-error">{errors.state}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<input type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
</div>
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
</div>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
</div>
</Fragment >
)
}
</div>
</div>
</div>
</Fragment>
);
};
export default BusinessDetails;
\ No newline at end of file
export default BusinessDetails;
next.config.js
......@@ -16,7 +16,7 @@ const nextConfig = {
stripePublishableKey: "pk_test_51LeAqWSD8iV80gmAKccLEZAm1mYnjlzkL1cJxWJKFaHEMPzArGRRECPOG64e8GX2Hd112zBq3vQ3xSVb5IZQCRmh00N3DRtRse"
},
images: {
domains: ["localhost"]
domains: ["localhost", "apizango.logicloop.io"]
}
};
......
package.json
......@@ -20,7 +20,7 @@
"qs": "^6.11.0",
"react": "18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-typeahead": "^6.0.0",
"react-bootstrap-typeahead": "^6.3.2",
"react-datepicker": "^4.8.0",
"react-dom": "18.2.0",
"react-icons": "^5.0.1",
......
pages/api/auth/[...nextauth].js
......@@ -37,15 +37,13 @@ export default NextAuth({
* We can expect it contains two properties: `email` and `password`
*/
try {
const {
data: { user, jwt }
} = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local`, {
const userResponse = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local`, {
identifier: email,
password: password
});
// console.log("Axios login returned with data:");
// console.log(user);
// console.log("userResponse", userResponse.data);
// console.log(jwt);
// Response from the above call can be
......@@ -75,7 +73,7 @@ export default NextAuth({
// }
// }
return { ...user, name: user.username, jwt };
return { ...userResponse.data.user, name: userResponse.data.user.email, jwt: userResponse.data.jwt, email: userResponse.data.user.email, user: userResponse.data.user };
} catch (error) {
console.log("Error while fetching credentials:");
console.log(error.response.data);
......@@ -87,8 +85,11 @@ export default NextAuth({
}
})
],
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
session: async ({ session, token }) => {
// console.log("session 1", session);
// console.log("session 2", token);
session.id = token.id;
session.jwt = token.jwt;
......@@ -98,6 +99,9 @@ export default NextAuth({
return Promise.resolve(session);
},
jwt: async ({ token, user }) => {
// console.log("user 1", user);
// console.log("token 1", token);
const isSignIn = user ? true : false;
if (isSignIn) {
token.id = user.id;
......
pages/index.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function IndexPage() {
......@@ -24,7 +25,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
// Get the menu data.
// get the locations data.
// await store.dispatch(loadUser())
return {
props: {},
......
pages/vendor/business-details/index.js
import React from "react";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import Layout from "../../../components/layout/Layout";
import BusinessDetails from "../../../components/vendor/BusinessDetails";
import { loadUser } from "../../../redux/actions/userActions";
import { getVendorDetails } from "../../../redux/actions/vendorActions";
import { wrapper } from "../../../redux/store";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function BusinessDetailsPage () {
const dispatch = useDispatch()
useEffect(() => {
dispatch(getVendorDetails())
}, [])
return (
<Layout>
<BusinessDetails />
</Layout>
);
};
\ No newline at end of file
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
\ No newline at end of file
redux/actions/userActions.js
......@@ -35,11 +35,12 @@ export const registerUser = userData => async dispatch => {
};
const userFormData = new FormData();
userFormData.append("username", userData.mobile);
userFormData.append("username", `${userData.mobile}-${userData.email}`);
userFormData.append("email", userData.email);
userFormData.append("password", userData.password);
userFormData.append("role", userData.role);
userFormData.append("phone", userData.mobile);
console.log("userFormData", userFormData);
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local/register`, userFormData, config);
console.log(`Register user done:`);
......
redux/actions/vendorActions.js
import axios from "axios";
import { getSession } from "next-auth/react";
import qs from "qs";
import {
GET_LOGGED_IN_VENDOR_FAIL,
GET_LOGGED_IN_VENDOR_REQUEST,
GET_LOGGED_IN_VENDOR_SUCCESS,
GET_VENDOR_DETAILS_FAIL,
GET_VENDOR_DETAILS_REQUEST,
GET_VENDOR_DETAILS_SUCCESS,
UPDATE_VENDOR_DETAILS_FAIL,
UPDATE_VENDOR_DETAILS_REQUEST,
UPDATE_VENDOR_DETAILS_SUCCESS
} from "../constants/vendorConstants";
export const finishVendorOtpVerification = async verificationData => {
const config = {
......@@ -9,3 +22,159 @@ export const finishVendorOtpVerification = async verificationData => {
return await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendor/finish-otp-verification`, verificationData, config);
};
export const pincodeSearchByFilter = async code => {
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
filters: {
name: {
$contains: code
}
},
populate: ["masterCity"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
return await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/master-pincodes?${queryString}`, config);
};
export const updateVendorBusinessDetails =
({ businessDetails, vendorId }) =>
async dispatch => {
const session = await getSession();
if (!session) {
throw new Error("You are not authenticated. Please log in.");
}
try {
dispatch({
type: UPDATE_VENDOR_DETAILS_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const response = await axios.put(
`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/${vendorId}`,
{
data: businessDetails
},
config
);
dispatch({
type: UPDATE_VENDOR_DETAILS_SUCCESS
});
return response.data;
} catch (error) {
dispatch({
type: UPDATE_VENDOR_DETAILS_FAIL
});
}
};
export const getLoggedInVendor = () => async dispatch => {
const session = await getSession();
console.log("session", session);
if (!session) {
throw new Error("You are not authenticated. Please log in.");
}
try {
dispatch({
type: GET_LOGGED_IN_VENDOR_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const query = {
filters: {
user: {
id: { $eq: session.id }
}
}
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${queryString}`, config);
console.log("response", response.data.data[0]);
dispatch({
type: GET_LOGGED_IN_VENDOR_SUCCESS
});
return response.data.data[0];
} catch (error) {
dispatch({
type: GET_LOGGED_IN_VENDOR_FAIL
});
}
};
export const getVendorDetails = () => async dispatch => {
const session = await getSession();
try {
dispatch({
type: GET_VENDOR_DETAILS_REQUEST
});
console.log("here 1", session);
const config = {
headers: {
"Content-Type": "Application/json",
Authorization: `Bearer ${session.jwt}`
}
};
console.log("here 2");
if (!session) {
return;
}
const query = {
filters: {
user: {
id: {
$eq: session.id
}
}
},
populate: ["user"]
};
console.log("here 3", query);
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
console.log("session", session, session.id);
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${queryString}`, config);
console.log("response", response);
dispatch({
type: GET_VENDOR_DETAILS_SUCCESS,
payload: response.data.data[0]
});
return response.data.data[0];
} catch (error) {
dispatch({
type: GET_VENDOR_DETAILS_FAIL,
payload: error.response.data
});
}
};
redux/constants/vendorConstants.js
// export const FETCH_OTP_VERIFY_REQUEST = "FETCH_OTP_VERIFY_REQUEST"
// export const FETCH_OTP_VERIFY_SUCCESS = "FETCH_OTP_VERIFY_SUCCESS"
// export const FETCH_OTP_VERIFY_FAIL = "FETCH_OTP_VERIFY_FAIL"
export const GET_LOGGED_IN_VENDOR_REQUEST = "GET_LOGGED_IN_VENDOR_REQUEST"
export const GET_LOGGED_IN_VENDOR_SUCCESS = "GET_LOGGED_IN_VENDOR_SUCCESS"
export const GET_LOGGED_IN_VENDOR_FAIL = "GET_LOGGED_IN_VENDOR_FAIL"
// export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
export const UPDATE_VENDOR_DETAILS_REQUEST = "UPDATE_VENDOR_DETAILS_REQUEST"
export const UPDATE_VENDOR_DETAILS_SUCCESS = "UPDATE_VENDOR_DETAILS_SUCCESS"
export const UPDATE_VENDOR_DETAILS_FAIL = "UPDATE_VENDOR_DETAILS_FAIL"
export const GET_VENDOR_DETAILS_REQUEST = "GET_VENDOR_DETAILS_REQUEST"
export const GET_VENDOR_DETAILS_SUCCESS = "GET_VENDOR_DETAILS_SUCCESS"
export const GET_VENDOR_DETAILS_FAIL = "GET_VENDOR_DETAILS_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/reducers.js
......@@ -4,6 +4,7 @@ import { townshipReducer, townshipsReducer } from "./townshipsReducer";
import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers";
import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -17,7 +18,10 @@ const reducers = combineReducers({
resetPassword: resetPasswordReducer,
similarProjects: similarProjectsReducer,
enquiry: enquiryReducer,
displayEnquireNow:displayEnquireNowReducer
displayEnquireNow:displayEnquireNowReducer,
loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
});
export default reducers;
redux/reducers/vendorReducers.js
import { UPDATE_VENDOR_DETAILS_FAIL, UPDATE_VENDOR_DETAILS_REQUEST, UPDATE_VENDOR_DETAILS_SUCCESS, CLEAR_ERRORS, GET_LOGGED_IN_VENDOR_REQUEST, GET_LOGGED_IN_VENDOR_SUCCESS, GET_LOGGED_IN_VENDOR_FAIL, GET_VENDOR_DETAILS_FAIL, GET_VENDOR_DETAILS_SUCCESS, GET_VENDOR_DETAILS_REQUEST } from "../constants/vendorConstants";
// Load user reducer
export const loggedInVendorReducer = (state = { loading: true, success: false, loggedInVendor: null }, action) => {
switch (action.type) {
case GET_LOGGED_IN_VENDOR_REQUEST:
return {
loading: true,
isAuthenticated: false
};
case GET_LOGGED_IN_VENDOR_SUCCESS:
return {
loading: false,
isAuthenticated: true,
loggedInVendor: action.payload
};
case GET_LOGGED_IN_VENDOR_FAIL:
return {
loading: false,
isAuthenticated: true,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const updateVendorReducer = (state = {}, action) => {
switch (action.type) {
case UPDATE_VENDOR_DETAILS_REQUEST:
return { loading: true };
case UPDATE_VENDOR_DETAILS_SUCCESS:
return {
loading: false,
updatedVendorData: action.payload
};
case UPDATE_VENDOR_DETAILS_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const getVendorDetailsReducer = (state = { loading: true, success: false, vendorDetails: null }, action) => {
switch (action.type) {
case GET_VENDOR_DETAILS_REQUEST:
return {
loading: true,
isAuthenticated: false
};
case GET_VENDOR_DETAILS_SUCCESS:
return {
loading: false,
isAuthenticated: true,
vendorDetails: action.payload
};
case GET_VENDOR_DETAILS_FAIL:
return {
loading: false,
isAuthenticated: true,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file
styles/globals.css
......@@ -1788,6 +1788,7 @@ footer .subscribe input {
padding: 0.6rem;
color: #fff;
margin-right: 0.5rem;
width: 62%;
}
footer hr {
......@@ -2360,7 +2361,12 @@ footer hr {
.faqs-session {
padding: 5rem 0;
}
.subscribe label .btn {
font-size: 16px;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 992px) {
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!