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 { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
......@@ -109,11 +109,37 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
})}
</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>
) : (
<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="col-12">
......@@ -122,8 +148,8 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
activePage={page}
itemsCountPerPage={12}
totalItemsCount={totalCount}
onChange={async (e) => {
console.log("log >",e);
onChange={async e => {
console.log("log >", e);
await handlePagination(e);
}}
nextPageText={"›"}
......
components/user/MyWhishList.js
......@@ -7,82 +7,84 @@ import { useRouter } from "next/router";
import { useSelector } from "react-redux";
const MyWhishList = ({ data }) => {
const router = useRouter();
const { endUser } = useSelector(state => state.endUser)
console.log("checking end user", endUser);
return (
<Fragment>
<div className="container pb-5">
const router = useRouter();
const { endUser } = useSelector(state => state.endUser);
console.log("checking end user", endUser);
return (
<Fragment>
<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="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">
{data?.length > 0 ?
<>
{data.map((data, index) => (
<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="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
<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>
</>
}
{data?.length > 0 ? (
<>
{data.map((data, index) => (
<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="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
<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>
</div>
))}
</>
) : (
<>
<p>No Item Found</p>
</>
)}
</div>
</div>
</Fragment>
)
}
</div>
)}
</div>
</div>
</div>
</Fragment>
);
};
export default MyWhishList;
\ No newline at end of file
export default MyWhishList;
components/vendor/BusinessDetails.js
......@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
import UploadImageCustom from "./UploadImageCustom";
const BusinessDetails = () => {
const [session, setSession] = useState(null);
......@@ -22,6 +23,7 @@ const BusinessDetails = () => {
// const ref = useRef(null);
console.log("vendorDetails", vendorDetails);
const [disableFields, setdisableFields] = useState();
const [brandLogo, setbrandLogo] = useState();
useEffect(() => {
console.log("user", loadedUser);
if (loadedUser) {
......@@ -48,7 +50,7 @@ const BusinessDetails = () => {
// gstCertificateFile: Yup.mixed(),
businessName: Yup.string().required("Business Name is Required"),
einNumber: Yup.string().required("EIN Number is Required"),
brandLogoFile: Yup.mixed(),
// brandLogoFile: Yup.mixed(),
pincode: Yup.string().required("Pincode is Required"),
country: Yup.string().required("Country is Required"),
state: Yup.string().required("State is Required"),
......@@ -73,16 +75,21 @@ const BusinessDetails = () => {
// gstCertificateFile: vendorDetails.attributes.gstImage,
businessName: vendorDetails.attributes.businessName,
einNumber: vendorDetails.attributes.einNumber,
brandLogoFile: vendorDetails.attributes.logo,
// 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
addressLine2: vendorDetails.attributes.addressLine2,
};
}
console.log("vendorDetails", vendorDetails);
useEffect(() => {
setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
}, [])
const ApprovalStatus = () => {
if (loadedUser) {
switch (loadedUser.approved) {
......@@ -163,7 +170,8 @@ const BusinessDetails = () => {
pincode: values.pincode,
country: values.country,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2
addressLine2: values.addressLine2,
brandLogo: brandLogo
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
......@@ -206,7 +214,7 @@ const BusinessDetails = () => {
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
{/* <div className="custom-file">
<input
disabled={disableFields}
type="file"
......@@ -220,7 +228,8 @@ const BusinessDetails = () => {
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</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>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div>
......
components/vendor/UploadImageCustom.js
import { PlusOutlined } from "@ant-design/icons";
import { message, Upload } from "antd";
import { Image, message, Upload } from "antd";
import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
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 [session, setSession] = useState();
const [previewOpen, setPreviewOpen] = useState(false);
......@@ -32,12 +32,12 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
// dispatch(getLoggedInVendor());
}, []);
useEffect(() => {
// console.log("populatedImages.id", populatedImages.id);
console.log("populatedImages.id", populatedImages);
if (!populatedImages) {
return;
}
const initialImages = transformImageData([{ url: cleanImage(populatedImages.data?.attributes), deleteId: populatedImages.data?.id, id: populatedImages.id }]);
if (populatedImages) {
if (populatedImages.data) {
setFileList(initialImages);
}
}, [populatedImages]);
......@@ -55,7 +55,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
}
};
const handlePreview = async file => {
// console.log(file);
console.log(file);
if (isPdf) {
getUrls(file.url);
return;
......@@ -149,6 +149,7 @@ const UploadImageCustom = ({ isUpdate, setImage, populatedImages, imagesArrayCom
return (
<div>
<Upload
disabled={disabled}
// customRequest={handleCustomRequest}
// enterButton={true}
// showUploadList={{ showRemoveIcon: false }}
......
redux/actions/activityAction.js
......@@ -329,6 +329,11 @@ export const getActivitiesForEndUser = () => async dispatch => {
filters: {
approved: { $eq: "approved" }
},
sort: [{ createdAt: 'desc' }],
pagination: {
pageSize: 5
},
populate: [
"masterMonths",
"subCategory",
......@@ -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);
// console.log("router query 2", response.data);
console.log("router query 2", response.data);
dispatch({
type: GET_ACTIVITIES_SUCCESS,
payload: response.data
......
redux/actions/testimonialAction.js
......@@ -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);
console.log("response > ", response);
// console.log("response > ", response);
dispatch({
type: GET_TESTIMONIAL_SUCCESS,
payload: response.data
......
redux/actions/vendorActions.js
......@@ -112,7 +112,8 @@ export const getLoggedInVendor = () => async dispatch => {
user: {
id: { $eq: session.id }
}
}
},
populate: ["brandLogo"]
};
const queryString = qs.stringify(query, {
......@@ -162,7 +163,7 @@ export const getVendorDetails = () => async dispatch => {
}
}
},
populate: ["user"]
populate: ["user", "brandLogo"]
};
console.log("here 3", query);
......@@ -212,7 +213,7 @@ export const getAllVendors = () => async dispatch => {
// }
// }
// },
populate: ["user", "experiences"],
populate: ["user", "experiences", "brandLogo"],
sort: ["createdAt:desc"]
};
// 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!