Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 0345c913 by jaymehta
Options

vendor journey

1 parent c2ebaf43
Expand all
Inline Side-by-side
Showing 11 changed files with 244 additions and 47 deletions
components/layout/Header.js
...@@ -10,14 +10,10 @@ import { loadUser } from "../../redux/actions/userActions"; ...@@ -10,14 +10,10 @@ import { loadUser } from "../../redux/actions/userActions";
const Header = () => { const Header = () => {
const { user, error } = useSelector(state => state.loadedUser); const { user, error } = useSelector(state => state.loadedUser);
const dispatch = useDispatch(); const dispatch = useDispatch();
console.log("user", user); // console.log("user", user);
const [isSticky, setIsSticky] = useState(false); const [isSticky, setIsSticky] = useState(false);
useEffect(() => { useEffect(() => {
dispatch(loadUser());
}, []);
useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold // Check if the scroll position is greater than a certain threshold
const scrollY = window.scrollY || window.pageYOffset; const scrollY = window.scrollY || window.pageYOffset;
...@@ -63,11 +59,21 @@ const Header = () => { ...@@ -63,11 +59,21 @@ const Header = () => {
</div> </div>
</Form> </Form>
{/* {console.log(user.id)} */} {/* {console.log(user.id)} */}
{(user && user.id) ? ( {user && user.id ? (
<div> <div>
{console.log("here")} <div>
<div><p>Brand Logo</p></div> <p>Brand Logo</p>
</div>
<p>{user.phone}</p> <p>{user.phone}</p>
<Button
onClick={() => {
signOut({ redirect: false });
}}
className="me-3"
variant="primary"
>
Log out
</Button>
</div> </div>
) : ( ) : (
<div> <div>
......
components/layout/Layout.js
import React from "react"; import React, { useEffect } from "react";
import Head from "next/head"; import Head from "next/head";
import Header from "./Header"; import Header from "./Header";
import Footer from "./Footer"; import Footer from "./Footer";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => { const Layout = ({ children, title = "Zango", description = "" }) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
}, []);
return ( return (
<div> <div>
<Head> <Head>
......
components/vendor/BusinessDetails.js
...@@ -6,29 +6,33 @@ import { FaArrowRight, FaTimes } from "react-icons/fa"; ...@@ -6,29 +6,33 @@ import { FaArrowRight, FaTimes } from "react-icons/fa";
import Image from "next/image"; import Image from "next/image";
import { getSession } from "next-auth/react"; import { getSession } from "next-auth/react";
import "react-bootstrap-typeahead/css/Typeahead.css"; import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor } from "../../redux/actions/vendorActions"; import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
const BusinessDetails = () => { const BusinessDetails = () => {
const [session, setSession] = useState(null); const [session, setSession] = useState(null);
const dispatch = useDispatch() const dispatch = useDispatch();
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { vendorDetails } = useSelector(state => state.vendorDetails);
// const [pincodeData, setPinCodeData] = useState() // const [pincodeData, setPinCodeData] = useState()
// const ref = useRef(null); // const ref = useRef(null);
console.log("vendorDetails", vendorDetails);
useEffect(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
setSession(await getSession()); setSession(await getSession());
}; };
fetchSession(); fetchSession();
// dispatch(getLoggedInVendor());
}, []); }, []);
console.log("session", session); console.log("session", loggedInVendor);
const businessDetailsValidationSchema = Yup.object().shape({ const businessDetailsValidationSchema = Yup.object().shape({
panNumber: Yup.string().required("Pan Number is Required"), panNumber: Yup.string().required("Pan Number is Required"),
panFile: Yup.mixed().required("Pan Image is Required"), panFile: Yup.mixed(),
gstNumber: Yup.string().required("GST Number is Required"), gstNumber: Yup.string().required("GST Number is Required"),
gstCertificateFile: Yup.mixed().required("GST Certificate is Required"), gstCertificateFile: Yup.mixed(),
businessName: Yup.string().required("Business Name is Required"), businessName: Yup.string().required("Business Name is Required"),
brandLogoFile: Yup.mixed().required("Brand Logo is Required"), brandLogoFile: Yup.mixed(),
pincode: Yup.string().required("Pincode is Required"), pincode: Yup.string().required("Pincode is Required"),
country: Yup.string().required("Country is Required"), country: Yup.string().required("Country is Required"),
state: Yup.string().required("State is Required"), state: Yup.string().required("State is Required"),
...@@ -42,6 +46,26 @@ const BusinessDetails = () => { ...@@ -42,6 +46,26 @@ const BusinessDetails = () => {
// console.log("pincodeData", pincodeDataSet.data.data); // console.log("pincodeData", pincodeDataSet.data.data);
// setPinCodeData(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 ( return (
<Fragment> <Fragment>
<div className="container p-5"> <div className="container p-5">
...@@ -59,19 +83,20 @@ const BusinessDetails = () => { ...@@ -59,19 +83,20 @@ const BusinessDetails = () => {
<hr /> <hr />
<div className="form-container mt-4"> <div className="form-container mt-4">
<Formik <Formik
enableReinitialize
initialValues={{ initialValues={{
panNumber: "", panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: "", panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: "", gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: "", gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: "", businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: "", brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: "", pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: "", country: vendorData?.country ? vendorData?.country : "",
state: "", state: vendorData?.state ? vendorData?.state : "",
city: "", city: vendorData?.city ? vendorData?.city : "",
addressLine1: "", addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: "" addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}} }}
validationSchema={businessDetailsValidationSchema} validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -88,7 +113,12 @@ const BusinessDetails = () => { ...@@ -88,7 +113,12 @@ const BusinessDetails = () => {
}; };
// await dispatch(updateVendorBusinessDetails({businessDetails, })) // await dispatch(updateVendorBusinessDetails({businessDetails, }))
dispatch(getLoggedInVendor()) 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 }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
......
pages/api/auth/[...nextauth].js
...@@ -43,7 +43,7 @@ export default NextAuth({ ...@@ -43,7 +43,7 @@ export default NextAuth({
}); });
// console.log("Axios login returned with data:"); // console.log("Axios login returned with data:");
console.log("userResponse", userResponse.data); // console.log("userResponse", userResponse.data);
// console.log(jwt); // console.log(jwt);
// Response from the above call can be // Response from the above call can be
...@@ -87,8 +87,8 @@ export default NextAuth({ ...@@ -87,8 +87,8 @@ export default NextAuth({
], ],
callbacks: { callbacks: {
session: async ({ session, token }) => { session: async ({ session, token }) => {
console.log("session 1", session); // console.log("session 1", session);
console.log("session 2", token); // console.log("session 2", token);
session.id = token.id; session.id = token.id;
session.jwt = token.jwt; session.jwt = token.jwt;
...@@ -98,8 +98,8 @@ export default NextAuth({ ...@@ -98,8 +98,8 @@ export default NextAuth({
return Promise.resolve(session); return Promise.resolve(session);
}, },
jwt: async ({ token, user }) => { jwt: async ({ token, user }) => {
console.log("user 1", user); // console.log("user 1", user);
console.log("token 1", token); // console.log("token 1", token);
const isSignIn = user ? true : false; const isSignIn = user ? true : false;
if (isSignIn) { if (isSignIn) {
......
pages/index.js
import Home from "../components/home/Home"; import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store"; import { wrapper } from "../redux/store";
export default function IndexPage() { export default function IndexPage() {
...@@ -24,7 +25,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r ...@@ -24,7 +25,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
// Get the menu data. // Get the menu data.
// get the locations data. // get the locations data.
// await store.dispatch(loadUser())
return { return {
props: {}, 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 Layout from "../../../components/layout/Layout";
import BusinessDetails from "../../../components/vendor/BusinessDetails"; 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 () { export default function BusinessDetailsPage () {
const dispatch = useDispatch()
useEffect(() => {
dispatch(getVendorDetails())
}, [])
return ( return (
<Layout> <Layout>
<BusinessDetails /> <BusinessDetails />
</Layout> </Layout>
); );
};
\ No newline at end of file \ 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 \ No newline at end of file
redux/actions/vendorActions.js
...@@ -5,6 +5,9 @@ import { ...@@ -5,6 +5,9 @@ import {
GET_LOGGED_IN_VENDOR_FAIL, GET_LOGGED_IN_VENDOR_FAIL,
GET_LOGGED_IN_VENDOR_REQUEST, GET_LOGGED_IN_VENDOR_REQUEST,
GET_LOGGED_IN_VENDOR_SUCCESS, GET_LOGGED_IN_VENDOR_SUCCESS,
GET_VENDOR_DETAILS_FAIL,
GET_VENDOR_DETAILS_REQUEST,
GET_VENDOR_DETAILS_SUCCESS,
UPDATE_VENDOR_DETAILS_FAIL, UPDATE_VENDOR_DETAILS_FAIL,
UPDATE_VENDOR_DETAILS_REQUEST, UPDATE_VENDOR_DETAILS_REQUEST,
UPDATE_VENDOR_DETAILS_SUCCESS UPDATE_VENDOR_DETAILS_SUCCESS
...@@ -66,13 +69,14 @@ export const updateVendorBusinessDetails = ...@@ -66,13 +69,14 @@ export const updateVendorBusinessDetails =
const response = await axios.put( const response = await axios.put(
`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/${vendorId}`, `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/${vendorId}`,
{ {
businessDetails data: businessDetails
}, },
config config
); );
dispatch({ dispatch({
type: UPDATE_VENDOR_DETAILS_SUCCESS type: UPDATE_VENDOR_DETAILS_SUCCESS
}); });
return response.data;
} catch (error) { } catch (error) {
dispatch({ dispatch({
type: UPDATE_VENDOR_DETAILS_FAIL type: UPDATE_VENDOR_DETAILS_FAIL
...@@ -103,7 +107,7 @@ export const getLoggedInVendor = () => async dispatch => { ...@@ -103,7 +107,7 @@ export const getLoggedInVendor = () => async dispatch => {
const query = { const query = {
filters: { filters: {
user: { user: {
$eq: session.id id: { $eq: session.id }
} }
} }
}; };
...@@ -112,16 +116,65 @@ export const getLoggedInVendor = () => async dispatch => { ...@@ -112,16 +116,65 @@ export const getLoggedInVendor = () => async dispatch => {
encodeValuesOnly: true encodeValuesOnly: true
}); });
const response = await axios.get( const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${queryString}`, config);
`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/${queryString}`, config console.log("response", response.data.data[0]);
);
console.log("response", response.data);
dispatch({ dispatch({
type: GET_LOGGED_IN_VENDOR_SUCCESS type: GET_LOGGED_IN_VENDOR_SUCCESS
}); });
return response.data.data[0];
} catch (error) { } catch (error) {
dispatch({ dispatch({
type: GET_LOGGED_IN_VENDOR_FAIL 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
...@@ -6,4 +6,8 @@ export const UPDATE_VENDOR_DETAILS_REQUEST = "UPDATE_VENDOR_DETAILS_REQUEST" ...@@ -6,4 +6,8 @@ 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_SUCCESS = "UPDATE_VENDOR_DETAILS_SUCCESS"
export const UPDATE_VENDOR_DETAILS_FAIL = "UPDATE_VENDOR_DETAILS_FAIL" 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"; export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/reducers.js
...@@ -4,6 +4,7 @@ import { townshipReducer, townshipsReducer } from "./townshipsReducer"; ...@@ -4,6 +4,7 @@ import { townshipReducer, townshipsReducer } from "./townshipsReducer";
import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers"; import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers";
import { enquiryReducer } from "./enquiryReducer"; import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer"; import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -17,7 +18,10 @@ const reducers = combineReducers({ ...@@ -17,7 +18,10 @@ const reducers = combineReducers({
resetPassword: resetPasswordReducer, resetPassword: resetPasswordReducer,
similarProjects: similarProjectsReducer, similarProjects: similarProjectsReducer,
enquiry: enquiryReducer, enquiry: enquiryReducer,
displayEnquireNow:displayEnquireNowReducer displayEnquireNow:displayEnquireNowReducer,
loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
}); });
export default reducers; export default reducers;
redux/reducers/vendorReducers.js
import { UPDATE_VENDOR_DETAILS_FAIL, UPDATE_VENDOR_DETAILS_REQUEST, UPDATE_VENDOR_DETAILS_SUCCESS, CLEAR_ERRORS } from "../constants/vendorConstants"; 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) => { export const updateVendorReducer = (state = {}, action) => {
switch (action.type) { switch (action.type) {
...@@ -27,3 +62,36 @@ export const updateVendorReducer = (state = {}, action) => { ...@@ -27,3 +62,36 @@ export const updateVendorReducer = (state = {}, action) => {
return state; 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 \ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!