Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 5685c638 by jaymehta
Options

.

1 parent e1745b51
Inline Side-by-side
Showing 7 changed files with 139 additions and 95 deletions
components/listing/ListingItems.js
import { Empty } from "antd"; import { Empty, Skeleton } from "antd";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
...@@ -109,11 +109,37 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -109,11 +109,37 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
})} })}
</div> </div>
) : ( ) : (
<Loader /> <div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3, 5, 5, 5, 5, 5, 5].map(() => (
<div className="col-lg-3 col-md-3 col-sm-12 my-3">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 270 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
</div>
</div>
)} )}
</div> </div>
) : ( ) : (
<Empty /> <div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3, 5, 5, 5, 5, 5, 5].map(() => (
<div className="col-lg-3 col-md-3 col-sm-12 my-3">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 270 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
</div>
</div>
)} )}
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
...@@ -122,8 +148,8 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -122,8 +148,8 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
activePage={page} activePage={page}
itemsCountPerPage={12} itemsCountPerPage={12}
totalItemsCount={totalCount} totalItemsCount={totalCount}
onChange={async (e) => { onChange={async e => {
console.log("log >",e); console.log("log >", e);
await handlePagination(e); await handlePagination(e);
}} }}
nextPageText={"›"} nextPageText={"›"}
......
components/user/MyWhishList.js
...@@ -7,82 +7,84 @@ import { useRouter } from "next/router"; ...@@ -7,82 +7,84 @@ import { useRouter } from "next/router";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const MyWhishList = ({ data }) => { const MyWhishList = ({ data }) => {
const router = useRouter(); const router = useRouter();
const { endUser } = useSelector(state => state.endUser) const { endUser } = useSelector(state => state.endUser);
console.log("checking end user", endUser); console.log("checking end user", endUser);
return ( return (
<Fragment> <Fragment>
<div className="container pb-5"> <div className="container pb-5">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Bookings</h2>
{endUser === null || endUser === undefined || endUser === "" ? (
<h1>You need to login first!</h1>
) : (
<div className="listing-items">
<div className="row"> <div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper"> {data?.length > 0 ? (
<h2 className="px-2 px-lg-0">My Bookings</h2> <>
{endUser === null || endUser === undefined || endUser === "" ? {data.map((data, index) => (
<h1>You need to login first!</h1> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
: <div className="item">
<div className="listing-items"> <div className="browse-experiences-item">
<div className="row"> <div className="img-wrapper">
{data?.length > 0 ? <span className="image-container">
<> <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
{data.map((data, index) => ( </span>
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}> <div className="top-rated">Top Rated</div>
<div className="item"> </div>
<div className="browse-experiences-item"> <div className="info">
<div className="img-wrapper"> <div className="top-name">
<span className="image-container"> <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" /> <div className="rating-wishlist">
</span> <div className="rating">
<div className="top-rated">Top Rated</div> <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
</div> <span className="image-container">
<div className="info"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
<div className="top-name"> </span>
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div> </div>
<div className="rating-wishlist"> <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
<div className="rating"> </div>
<span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div>
</div>
<div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
<div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{ }% OFF</span>
</div>
<div className="detail">
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
</div>
</div>
</div>
</div>
</div>
))}
</>
:
<>
<p>No Item Found</p>
</>
}
</div> </div>
<div className="discription">
<p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p>
</div>
<div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
</div>
<div className="detail">
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
</div>
</div>
</div> </div>
} </div>
</div> </div>
))}
</>
) : (
<>
<p>No Item Found</p>
</>
)}
</div> </div>
</div> </div>
</Fragment> )}
) </div>
} </div>
</div>
</Fragment>
);
};
export default MyWhishList;
\ No newline at end of file \ No newline at end of file
export default MyWhishList;
components/vendor/BusinessDetails.js
...@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux"; ...@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions"; import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions"; import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import UploadImageCustom from "./UploadImageCustom";
const BusinessDetails = () => { const BusinessDetails = () => {
const [session, setSession] = useState(null); const [session, setSession] = useState(null);
...@@ -22,6 +23,7 @@ const BusinessDetails = () => { ...@@ -22,6 +23,7 @@ const BusinessDetails = () => {
// const ref = useRef(null); // const ref = useRef(null);
console.log("vendorDetails", vendorDetails); console.log("vendorDetails", vendorDetails);
const [disableFields, setdisableFields] = useState(); const [disableFields, setdisableFields] = useState();
const [brandLogo, setbrandLogo] = useState();
useEffect(() => { useEffect(() => {
console.log("user", loadedUser); console.log("user", loadedUser);
if (loadedUser) { if (loadedUser) {
...@@ -48,7 +50,7 @@ const BusinessDetails = () => { ...@@ -48,7 +50,7 @@ const BusinessDetails = () => {
// gstCertificateFile: Yup.mixed(), // gstCertificateFile: Yup.mixed(),
businessName: Yup.string().required("Business Name is Required"), businessName: Yup.string().required("Business Name is Required"),
einNumber: Yup.string().required("EIN Number is Required"), einNumber: Yup.string().required("EIN Number is Required"),
brandLogoFile: Yup.mixed(), // 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"),
...@@ -73,16 +75,21 @@ const BusinessDetails = () => { ...@@ -73,16 +75,21 @@ const BusinessDetails = () => {
// gstCertificateFile: vendorDetails.attributes.gstImage, // gstCertificateFile: vendorDetails.attributes.gstImage,
businessName: vendorDetails.attributes.businessName, businessName: vendorDetails.attributes.businessName,
einNumber: vendorDetails.attributes.einNumber, einNumber: vendorDetails.attributes.einNumber,
brandLogoFile: vendorDetails.attributes.logo, // brandLogoFile: vendorDetails.attributes.logo,
pincode: vendorDetails.attributes.pincode, pincode: vendorDetails.attributes.pincode,
country: vendorDetails.attributes.country, country: vendorDetails.attributes.country,
state: vendorDetails.attributes.state, state: vendorDetails.attributes.state,
city: vendorDetails.attributes.city, city: vendorDetails.attributes.city,
addressLine1: vendorDetails.attributes.addressLine1, addressLine1: vendorDetails.attributes.addressLine1,
addressLine2: vendorDetails.attributes.addressLine2 addressLine2: vendorDetails.attributes.addressLine2,
}; };
} }
console.log("vendorDetails", vendorDetails);
useEffect(() => {
setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
}, [])
const ApprovalStatus = () => { const ApprovalStatus = () => {
if (loadedUser) { if (loadedUser) {
switch (loadedUser.approved) { switch (loadedUser.approved) {
...@@ -163,7 +170,8 @@ const BusinessDetails = () => { ...@@ -163,7 +170,8 @@ const BusinessDetails = () => {
pincode: values.pincode, pincode: values.pincode,
country: values.country, country: values.country,
addressLine1: values.addressLine1, addressLine1: values.addressLine1,
addressLine2: values.addressLine2 addressLine2: values.addressLine2,
brandLogo: brandLogo
}; };
// await dispatch(updateVendorBusinessDetails({businessDetails, })) // await dispatch(updateVendorBusinessDetails({businessDetails, }))
...@@ -206,7 +214,7 @@ const BusinessDetails = () => { ...@@ -206,7 +214,7 @@ const BusinessDetails = () => {
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Brand Logo</label> <label>Brand Logo</label>
<div className="custom-file"> {/* <div className="custom-file">
<input <input
disabled={disableFields} disabled={disableFields}
type="file" type="file"
...@@ -220,7 +228,8 @@ const BusinessDetails = () => { ...@@ -220,7 +228,8 @@ const BusinessDetails = () => {
<label className="custom-file-label" htmlFor="brandLogoFile"> <label className="custom-file-label" htmlFor="brandLogoFile">
Upload Upload
</label> </label>
</div> </div> */}
<UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
<p className="textS">Upload in .PNG or .JPG/JPEG format</p> <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>} {errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div> </div>
......
components/vendor/UploadImageCustom.js
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons";
import { message, Upload } from "antd"; import { Image, message, Upload } from "antd";
import axios from "axios"; import axios from "axios";
import { getSession } from "next-auth/react"; import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { cleanImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayComponent, isPdf }) => { const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayComponent, isPdf, disabled }) => {
// const { loadedUser } = useSelector(state => state.loadedUser); // const { loadedUser } = useSelector(state => state.loadedUser);
const [session, setSession] = useState(); const [session, setSession] = useState();
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
...@@ -32,12 +32,12 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom ...@@ -32,12 +32,12 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
// dispatch(getLoggedInVendor()); // dispatch(getLoggedInVendor());
}, []); }, []);
useEffect(() => { useEffect(() => {
// console.log("populatedImages.id", populatedImages.id); console.log("populatedImages.id", populatedImages);
if (!populatedImages) { if (!populatedImages) {
return; return;
} }
const initialImages = transformImageData([{ url: cleanImage(populatedImages.data?.attributes), deleteId: populatedImages.data?.id, id: populatedImages.id }]); const initialImages = transformImageData([{ url: cleanImage(populatedImages.data?.attributes), deleteId: populatedImages.data?.id, id: populatedImages.id }]);
if (populatedImages) { if (populatedImages.data) {
setFileList(initialImages); setFileList(initialImages);
} }
}, [populatedImages]); }, [populatedImages]);
...@@ -55,7 +55,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom ...@@ -55,7 +55,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
} }
}; };
const handlePreview = async file => { const handlePreview = async file => {
// console.log(file); console.log(file);
if (isPdf) { if (isPdf) {
getUrls(file.url); getUrls(file.url);
return; return;
...@@ -149,6 +149,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom ...@@ -149,6 +149,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
return ( return (
<div> <div>
<Upload <Upload
disabled={disabled}
// customRequest={handleCustomRequest} // customRequest={handleCustomRequest}
// enterButton={true} // enterButton={true}
// showUploadList={{ showRemoveIcon: false }} // showUploadList={{ showRemoveIcon: false }}
......
redux/actions/activityAction.js
...@@ -329,6 +329,11 @@ export const getActivitiesForEndUser = () => async dispatch => { ...@@ -329,6 +329,11 @@ export const getActivitiesForEndUser = () => async dispatch => {
filters: { filters: {
approved: { $eq: "approved" } approved: { $eq: "approved" }
}, },
sort: [{ createdAt: 'desc' }],
pagination: {
pageSize: 5
},
populate: [ populate: [
"masterMonths", "masterMonths",
"subCategory", "subCategory",
...@@ -356,7 +361,7 @@ export const getActivitiesForEndUser = () => async dispatch => { ...@@ -356,7 +361,7 @@ export const getActivitiesForEndUser = () => async dispatch => {
// }; // };
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config); const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
// console.log("router query 2", response.data); console.log("router query 2", response.data);
dispatch({ dispatch({
type: GET_ACTIVITIES_SUCCESS, type: GET_ACTIVITIES_SUCCESS,
payload: response.data payload: response.data
......
redux/actions/testimonialAction.js
...@@ -23,7 +23,7 @@ export const getTestimonial = () => async dispatch => { ...@@ -23,7 +23,7 @@ export const getTestimonial = () => async dispatch => {
}); });
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/testimonials?${queryString}`, config); const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/testimonials?${queryString}`, config);
console.log("response > ", response); // console.log("response > ", response);
dispatch({ dispatch({
type: GET_TESTIMONIAL_SUCCESS, type: GET_TESTIMONIAL_SUCCESS,
payload: response.data payload: response.data
......
redux/actions/vendorActions.js
...@@ -112,7 +112,8 @@ export const getLoggedInVendor = () => async dispatch => { ...@@ -112,7 +112,8 @@ export const getLoggedInVendor = () => async dispatch => {
user: { user: {
id: { $eq: session.id } id: { $eq: session.id }
} }
} },
populate: ["brandLogo"]
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
...@@ -162,7 +163,7 @@ export const getVendorDetails = () => async dispatch => { ...@@ -162,7 +163,7 @@ export const getVendorDetails = () => async dispatch => {
} }
} }
}, },
populate: ["user"] populate: ["user", "brandLogo"]
}; };
console.log("here 3", query); console.log("here 3", query);
...@@ -212,7 +213,7 @@ export const getAllVendors = () => async dispatch => { ...@@ -212,7 +213,7 @@ export const getAllVendors = () => async dispatch => {
// } // }
// } // }
// }, // },
populate: ["user", "experiences"], populate: ["user", "experiences", "brandLogo"],
sort: ["createdAt:desc"] sort: ["createdAt:desc"]
}; };
// console.log("here 3", query); // console.log("here 3", query);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!