Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 6bd2fb1d by jaymehta
Options

.

1 parent 84a7c51d
Inline Side-by-side
Showing 4 changed files with 187 additions and 256 deletions
components/admin/VendorDetails.js
......@@ -13,136 +13,136 @@ import { getAllVendors } from "../../redux/actions/vendorActions";
import { toast } from "react-toastify";
const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) => {
const { allVendors } = useSelector(state => state.allVendors);
const { allVendors } = useSelector(state => state.allVendors);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
console.log("cancel policy", detail[0])
}, []);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
console.log("cancel policy", detail[0]);
}, []);
useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
}, [allVendors]);
useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
}, [allVendors]);
console.log("detail", detail);
const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false);
const [activityDetailInfo, setactivityDetailInfo] = useState();
const handleShowActivityDetails = () => {
setShowActivityDetailsModal(true);
};
const handleCloseActivityDetails = () => {
setShowActivityDetailsModal(false);
};
const handleShowRejectModal = () => {
setShowRejectModal(true);
};
const handleCloseRejectModal = () => {
setShowRejectModal(false);
};
console.log("detail", detail);
const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false);
const [activityDetailInfo, setactivityDetailInfo] = useState();
const handleShowActivityDetails = () => {
setShowActivityDetailsModal(true);
};
const handleCloseActivityDetails = () => {
setShowActivityDetailsModal(false);
};
const handleShowRejectModal = () => {
setShowRejectModal(true);
};
const handleCloseRejectModal = () => {
setShowRejectModal(false);
};
const UserStatus = () => {
if (!detail || !detail.length > 0) return;
const currentStatus = detail[0].attributes.user.data.attributes.approved;
let message;
let color;
switch (currentStatus) {
case "approved":
message = "Approved";
color = "success";
break;
const UserStatus = () => {
if (!detail || !detail.length > 0) return;
const currentStatus = detail[0].attributes.user.data.attributes.approved;
let message;
let color;
switch (currentStatus) {
case "approved":
message = "Approved";
color = "success";
break;
case "rejected":
message = "Rejected";
color = "error";
break;
case "pending":
message = "Pending";
color = "warning";
break;
default:
break;
}
return <Tag color={color}>{message.toUpperCase()}</Tag>;
};
return (
<Fragment>
<div className="vendorDetails">
case "rejected":
message = "Rejected";
color = "error";
break;
case "pending":
message = "Pending";
color = "warning";
break;
default:
break;
}
return <Tag color={color}>{message.toUpperCase()}</Tag>;
};
return (
<Fragment>
<div className="vendorDetails">
<div className="row">
<div className="col-12 col-lg-12">
<div className="d-flex align-items-center justify-content-between">
<div className="backDiv">
<span className="backArrow">
<FaAngleLeft
onClick={() => {
setShowDetail(false);
}}
/>
</span>
<span>Vendors List</span>
</div>
</div>
</div>
<div className="col-8 col-lg-8 mt-4">
<h4>Business Information</h4>
<div className="row">
<div className="col-12 col-lg-5">
<p className="phead">Business Documents</p>
{/* <div className="row">
<p className="col-12 col-lg-6">Business PAN No.</p>
<p className="col-12 col-lg-6">{detail[0].attributes.pan}</p>
</div> */}
{/* <div className="row">
<p className="col-12 col-lg-6">PAN</p>
<p className="col-12 col-lg-6 pview">View</p>
</div> */}
<div className="row">
<p className="col-12 col-lg-6">EIN Number</p>
<p className="col-12 col-lg-6">{detail[0].attributes.einNumber}</p>
</div>
{/* <div className="row">
<p className="col-12 col-lg-6">GST Certificate</p>
<p className="col-12 col-lg-6 pview">View</p>
</div> */}
<div className="row">
<p className="col-12 col-lg-6">Business Name</p>
<p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
</div>
</div>
<div className="col-12 col-lg-7 borderLeft">
<p className="phead">Business Address</p>
<div className="row">
<p className="col-12 col-lg-4">Pincode</p>
<p className="col-12 col-lg-8">{detail[0].attributes.pincode}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Country</p>
<p className="col-12 col-lg-8">United States</p>
</div>
<div className="row">
<div className="col-12 col-lg-12">
<div className="d-flex align-items-center justify-content-between">
<div className="backDiv">
<span className="backArrow">
<FaAngleLeft
onClick={() => {
setShowDetail(false);
}}
/>
</span>
<span>Vendors List</span>
</div>
</div>
</div>
<div className="col-8 col-lg-8 mt-4">
<h4>Business Information</h4>
<div className="row">
<div className="col-12 col-lg-5">
<p className="phead">Business Documents</p>
<div className="row">
<p className="col-12 col-lg-6">Business PAN No.</p>
<p className="col-12 col-lg-6">{detail[0].attributes.pan}</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">PAN</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">GST Number</p>
<p className="col-12 col-lg-6">{detail[0].attributes.gst}</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">GST Certificate</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Business Name</p>
<p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
</div>
</div>
<div className="col-12 col-lg-7 borderLeft">
<p className="phead">Business Address</p>
<div className="row">
<p className="col-12 col-lg-4">Pincode</p>
<p className="col-12 col-lg-8">{detail[0].attributes.pincode}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Country</p>
<p className="col-12 col-lg-8">United States</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">State</p>
<p className="col-12 col-lg-8">{detail[0].attributes.state}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">City</p>
<p className="col-12 col-lg-8">{detail[0].attributes.city}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 1</p>
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine1}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 2</p>
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine2 ? detail[0].attributes.addressLine2 : "N/A"}</p>
</div>
</div>
</div>
</div>
<p className="col-12 col-lg-4">State</p>
<p className="col-12 col-lg-8">{detail[0].attributes.state}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">City</p>
<p className="col-12 col-lg-8">{detail[0].attributes.city}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 1</p>
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine1}</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 2</p>
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine2 ? detail[0].attributes.addressLine2 : "N/A"}</p>
</div>
</div>
</div>
</div>
<div className=" col-4">
<div className="row">
{/* <div className="col-12">
<div className=" col-4">
<div className="row">
{/* <div className="col-12">
<div className="row">
<div className="col-6">Current status:</div>
<div className="col-6">
......@@ -150,40 +150,40 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
</div>
</div>
</div> */}
<div className="col-md-12 d-flex">
<Button
variant=""
className="btnAdd btnApprove col-6 me-2"
onClick={async () => {
await updateApprovalStatusAdmin({ status: "approved", userId: detail[0].attributes.user.data.id });
toast.success("User approved");
await dispatch(getAllVendors());
}}
>
Approve
</Button>
<Button variant="" className="btnAdd btnReject col-6" onClick={handleShowRejectModal}>
Reject
</Button>
</div>
<div className="col-12">
<div className="d-flex align-items-center gap-4">
<p className="phead m-0">Status :</p> <UserStatus />
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-12 mt-4">
<h4 className="mb-1">Activities</h4>
<ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
</div>
<div className="col-md-12 d-flex">
<Button
variant=""
className="btnAdd btnApprove col-6 me-2"
onClick={async () => {
await updateApprovalStatusAdmin({ status: "approved", userId: detail[0].attributes.user.data.id });
toast.success("User approved");
await dispatch(getAllVendors());
}}
>
Approve
</Button>
<Button variant="" className="btnAdd btnReject col-6" onClick={handleShowRejectModal}>
Reject
</Button>
</div>
<div className="col-12">
<div className="d-flex align-items-center gap-4">
<p className="phead m-0">Status :</p> <UserStatus />
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-12 mt-4">
<h4 className="mb-1">Activities</h4>
<ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
</div>
</div>
</div>
{showActivityDetailsModal && <ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />}
{showActivityDetailsModal && <ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />}
{showRejectModal && <RejectModal show={showRejectModal} handleClose={handleCloseRejectModal} detail={detail} setShowDetail={setShowDetail} />}
</Fragment>
);
{showRejectModal && <RejectModal show={showRejectModal} handleClose={handleCloseRejectModal} detail={detail} setShowDetail={setShowDetail} />}
</Fragment>
);
};
export default VendorDetails;
components/admin/VendorListing.js
......@@ -14,7 +14,6 @@ const VendorListing = () => {
// Hooks
const dispatch = useDispatch();
const router = useRouter();
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// useState
const [session, setSession] = useState();
const [loading, setLoading] = useState(true);
......
components/detail/GuestReviews.js
......@@ -27,6 +27,8 @@ const GuestReviews = ({ activityById }) => {
setRating(newRating);
};
console.log("newRating", rating);
return (
<>
<section className="guest-reviews-session">
......@@ -140,8 +142,8 @@ const GuestReviews = ({ activityById }) => {
<label className=" mb-3 ">Rating: </label>{" "}
<StarRatings
className="col-3 mx-2"
rating={rating}
starRatedColor="#ffe20" // Set the rated color to yellow
rating={3}
starRatedColor="#000" // Set the rated color to yellow
starHoverColor="#ffe20" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
......
components/vendor/BusinessDetails.js
......@@ -42,11 +42,12 @@ const BusinessDetails = () => {
}, []);
// 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(),
// 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"),
einNumber: Yup.string().required("EIN Number is Required"),
brandLogoFile: Yup.mixed(),
pincode: Yup.string().required("Pincode is Required"),
country: Yup.string().required("Country is Required"),
......@@ -66,11 +67,12 @@ const BusinessDetails = () => {
if (vendorDetails) {
vendorData = {
panNumber: vendorDetails.attributes.pan,
panFile: vendorDetails.attributes.panImage,
gstNumber: vendorDetails.attributes.gst,
gstCertificateFile: vendorDetails.attributes.gstImage,
// panNumber: vendorDetails.attributes.pan,
// panFile: vendorDetails.attributes.panImage,
// gstNumber: vendorDetails.attributes.gst,
// gstCertificateFile: vendorDetails.attributes.gstImage,
businessName: vendorDetails.attributes.businessName,
einNumber: vendorDetails.attributes.einNumber,
brandLogoFile: vendorDetails.attributes.logo,
pincode: vendorDetails.attributes.pincode,
country: vendorDetails.attributes.country,
......@@ -136,11 +138,10 @@ const BusinessDetails = () => {
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
// panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
einNumber: vendorData?.einNumber ? vendorData?.einNumber : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
......@@ -154,9 +155,9 @@ const BusinessDetails = () => {
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
// pan: values.panNumber,
businessName: values.businessName,
einNumber: values.einNumber,
state: values.state,
city: values.city,
pincode: values.pincode,
......@@ -190,94 +191,19 @@ const BusinessDetails = () => {
<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} disabled={disableFields} />
{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
disabled={disableFields}
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 disabled={disableFields} 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
disabled={disableFields}
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>}
<label>Business Name</label>
<input disabled={disableFields} 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>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input disabled={disableFields} type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
<label>EIN Number</label>
<input disabled={disableFields} type="text" name="einNumber" onChange={handleChange} onBlur={handleBlur} value={values.einNumber} />
{errors.einNumber && touched.einNumber && <span className="form-error">{errors.einNumber}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
......@@ -384,9 +310,13 @@ const BusinessDetails = () => {
</div>
<div className="col-12 col-lg-5">
<div className="input-group">
<Button disabled={false} onClick={() => {
router.push("/vendor/dashboard")
}} className="btn btn-primary btn-submit">
<Button
disabled={false}
onClick={() => {
router.push("/vendor/dashboard");
}}
className="btn btn-primary btn-submit"
>
Go to dashboard
</Button>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!