Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b1f99aa4 by Ravindra Kanojiya
Options

updated

1 parent acd5d738
Inline Side-by-side
Showing 4 changed files with 224 additions and 157 deletions
components/admin/ActivityDetailGallaryModal.js 0 → 100644
import { Modal } from "antd"
import Image from "next/image"
import {cleanImage} from '../../services/imageHandling.js'
const ActivityDetailGallaryModal = ({ activityDetailInfo }) => {
return (
<div className="p-4">
<div className="row">
{activityDetailInfo[0].attributes.imagesComponent.map((data, index)=>(
<div className="col-4" key={index}>
<Image className="img-fluid" height={400} width={400} alt="" src={cleanImage(data.image.data.attributes)}/>
</div>
))}
</div>
</div>
)
}
export default ActivityDetailGallaryModal
\ No newline at end of file \ No newline at end of file
components/admin/ActivityDetailsModal.js
...@@ -4,13 +4,24 @@ import { Button, Modal } from "react-bootstrap"; ...@@ -4,13 +4,24 @@ import { Button, Modal } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead"; import { Loader } from "react-bootstrap-typeahead";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { updateActivityStatusAdmin } from "../../redux/actions/userActions"; import { updateActivityStatusAdmin } from "../../redux/actions/userActions";
import ActivityDetailGallaryModal from "./ActivityDetailGallaryModal";
import { CloseCircleOutlined } from "@ant-design/icons";
const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => { const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
const [viewDesc, setViewDesc] = useState(); const [viewDesc, setViewDesc] = useState();
const [rejectPopUp, setrejectPopUp] = useState(false); const [rejectPopUp, setrejectPopUp] = useState(false);
const [rejectionReasonText, setrejectionReasonText] = useState(""); const [rejectionReasonText, setrejectionReasonText] = useState("");
const [showActivityImages, setShowActivityImages] = useState(false);
console.log("activityDetailInfo", activityDetailInfo); console.log("activityDetailInfo", activityDetailInfo);
const getUrls = (url) => {
let a = activityDetailInfo[0]?.attributes?.cancellationPolicy?.data
console.log("checking data", url)
if (a !== null) {
window.open(url, '_blank')
} else {
toast.warning("No Data Found")
}
}
return ( return (
<Fragment> <Fragment>
<Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter" centered> <Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter" centered>
...@@ -127,7 +138,7 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => { ...@@ -127,7 +138,7 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div> </div>
<div className="row"> <div className="row">
<p className="col-12 col-lg-6">Images of Activities</p> <p className="col-12 col-lg-6">Images of Activities</p>
<p className="col-12 col-lg-6 pview">View Images</p> <p className="col-12 col-lg-6 pview cursor-pointer" onClick={() => { setShowActivityImages(true); console.log("checking") }}>View Images</p>
</div> </div>
<div className="row"> <div className="row">
<p className="col-12 col-lg-6">Brand Logo</p> <p className="col-12 col-lg-6">Brand Logo</p>
...@@ -137,12 +148,31 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => { ...@@ -137,12 +148,31 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
<div> <div>
<p className="phead">Policy & Terms</p> <p className="phead">Policy & Terms</p>
<div className="row"> <div className="row">
<p className="col-12 col-lg-6">Cancellation Policy</p> <div className="col-12 col-lg-6 ">
<p className="col-12 col-lg-6 pview">View</p> <p>Cancellation Policy</p>
</div>
<div className="col-12 col-lg-6 ">
<p
className="pview cursor-pointer"
onClick={() => getUrls(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${activityDetailInfo[0]?.attributes?.cancellationPolicy?.data?.attributes?.url}`)}
>
View
</p>
</div>
</div> </div>
<div className="row"> <div className="row">
<p className="col-12 col-lg-6">Terms & Conditions</p> <div className="col-12 col-lg-6 ">
<p className="col-12 col-lg-6 pview">View</p> <p>
Terms & Conditions
</p>
</div>
<div className="col-12 col-lg-6">
<p className="pview cursor-pointer"
onClick={() => getUrls(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${activityDetailInfo[0]?.attributes?.termsConditions?.data?.attributes?.url}`)}
>
View
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -229,6 +259,15 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => { ...@@ -229,6 +259,15 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div> </div>
</Modal.Body> </Modal.Body>
</Modal> </Modal>
<Modal size="xl" show={showActivityImages} onHide={() => setShowActivityImages(false)} centered contentClassName="p-3">
<div className="text-end">
<span className="image-container" style={{ cursor: "pointer" }} onClick={() => setShowActivityImages(false)}>
<Image width={13} height={13} alt="" src="/images/admin/icon-close.svg" className="image" />
</span>
</div>
<ActivityDetailGallaryModal activityDetailInfo={activityDetailInfo} showActivityImages={showActivityImages} setShowActivityImages={setShowActivityImages} />
</Modal>
</Fragment> </Fragment>
); );
}; };
......
components/admin/VendorDetails.js
...@@ -13,136 +13,136 @@ import { getAllVendors } from "../../redux/actions/vendorActions"; ...@@ -13,136 +13,136 @@ import { getAllVendors } from "../../redux/actions/vendorActions";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) => { const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) => {
const { allVendors } = useSelector(state => state.allVendors); const { allVendors } = useSelector(state => state.allVendors);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id })); dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
}, []); console.log("cancel policy", detail[0])
}, []);
useEffect(() => { useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id })); dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
}, [allVendors]); }, [allVendors]);
console.log("detail", detail); console.log("detail", detail);
const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false); const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false); const [showRejectModal, setShowRejectModal] = useState(false);
const [activityDetailInfo, setactivityDetailInfo] = useState(); const [activityDetailInfo, setactivityDetailInfo] = useState();
const handleShowActivityDetails = () => { const handleShowActivityDetails = () => {
setShowActivityDetailsModal(true); setShowActivityDetailsModal(true);
}; };
const handleCloseActivityDetails = () => { const handleCloseActivityDetails = () => {
setShowActivityDetailsModal(false); setShowActivityDetailsModal(false);
}; };
const handleShowRejectModal = () => { const handleShowRejectModal = () => {
setShowRejectModal(true); setShowRejectModal(true);
}; };
const handleCloseRejectModal = () => { const handleCloseRejectModal = () => {
setShowRejectModal(false); setShowRejectModal(false);
}; };
// const UserStatus = () => { 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;
// if (!detail || !detail.length > 0) return; case "rejected":
// const currentStatus = detail[0].attributes.user.data.attributes.approved; message = "Rejected";
// let message; color = "error";
// let color; break;
// switch (currentStatus) { case "pending":
// case "approved": message = "Pending";
// message = "Approved"; color = "warning";
// color = "success"; break;
// break; default:
break;
// case "rejected": }
// message = "Rejected"; return <Tag color={color}>{message.toUpperCase()}</Tag>;
// color = "error"; };
// break; return (
// case "pending": <Fragment>
// message = "Pending"; <div className="vendorDetails">
// color = "warning";
// break;
// default:
// break;
// }
// return <Tag color={color}>{message}</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-4">
<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"> <div className="row">
<p className="col-12 col-lg-6">GST Number</p> <div className="col-12 col-lg-12">
<p className="col-12 col-lg-6">{detail[0].attributes.gst}</p> <div className="d-flex align-items-center justify-content-between">
</div> <div className="backDiv">
<div className="row"> <span className="backArrow">
<p className="col-12 col-lg-6">GST Certificate</p> <FaAngleLeft
<p className="col-12 col-lg-6 pview">View</p> onClick={() => {
</div> setShowDetail(false);
<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> </span>
</div> <span>Vendors List</span>
</div> </div>
<div className="col-12 col-lg-5 borderLeft"> </div>
<p className="phead">Business Address</p> </div>
<div className="row"> <div className="col-8 col-lg-8 mt-4">
<p className="col-12 col-lg-4">Pincode</p> <h4>Business Information</h4>
<p className="col-12 col-lg-8">{detail[0].attributes.pincode}</p> <div className="row">
</div> <div className="col-12 col-lg-4">
<div className="row"> <p className="phead">Business Documents</p>
<p className="col-12 col-lg-4">Country</p> <div className="row">
<p className="col-12 col-lg-8">United States</p> <p className="col-12 col-lg-6">Business PAN No.</p>
</div> <p className="col-12 col-lg-6">{detail[0].attributes.pan}</p>
<div className="row"> </div>
<p className="col-12 col-lg-4">State</p> <div className="row">
<p className="col-12 col-lg-8">{detail[0].attributes.state}</p> <p className="col-12 col-lg-6">PAN</p>
</div> <p className="col-12 col-lg-6 pview">View</p>
<div className="row"> </div>
<p className="col-12 col-lg-4">City</p> <div className="row">
<p className="col-12 col-lg-8">{detail[0].attributes.city}</p> <p className="col-12 col-lg-6">GST Number</p>
</div> <p className="col-12 col-lg-6">{detail[0].attributes.gst}</p>
<div className="row"> </div>
<p className="col-12 col-lg-4">Address Line 1</p> <div className="row">
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine1}</p> <p className="col-12 col-lg-6">GST Certificate</p>
</div> <p className="col-12 col-lg-6 pview">View</p>
<div className="row"> </div>
<p className="col-12 col-lg-4">Address Line 2</p> <div className="row">
<p className="col-12 col-lg-8">{detail[0].attributes.addressLine2 ? detail[0].attributes.addressLine2 : "N/A"}</p> <p className="col-12 col-lg-6">Business Name</p>
</div> <p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
</div> </div>
</div> </div>
</div> <div className="col-12 col-lg-5 borderLeft">
<div className=" col-4"> <p className="phead">Business Address</p>
<div className="row"> <div className="row">
{/* <div className="col-12"> <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>
<div className=" col-4">
<div className="row">
{/* <div className="col-12">
<div className="row"> <div className="row">
<div className="col-6">Current status:</div> <div className="col-6">Current status:</div>
<div className="col-6"> <div className="col-6">
...@@ -150,35 +150,40 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) => ...@@ -150,35 +150,40 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
</div> </div>
</div> </div>
</div> */} </div> */}
<div className="col-md-12 d-flex"> <div className="col-md-12 d-flex">
<Button <Button
variant="" variant=""
className="btnAdd btnApprove col-6 me-2" className="btnAdd btnApprove col-6 me-2"
onClick={async () => { onClick={async () => {
await updateApprovalStatusAdmin({ status: "approved", userId: detail[0].attributes.user.data.id }); await updateApprovalStatusAdmin({ status: "approved", userId: detail[0].attributes.user.data.id });
toast.success("User approved"); toast.success("User approved");
await dispatch(getAllVendors()); await dispatch(getAllVendors());
}} }}
> >
Approve Approve
</Button> </Button>
<Button variant="" className="btnAdd btnReject col-6" onClick={handleShowRejectModal}> <Button variant="" className="btnAdd btnReject col-6" onClick={handleShowRejectModal}>
Reject Reject
</Button> </Button>
</div> </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> </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} />} {showRejectModal && <RejectModal show={showRejectModal} handleClose={handleCloseRejectModal} detail={detail} setShowDetail={setShowDetail} />}
</Fragment> </Fragment>
); );
}; };
export default VendorDetails; export default VendorDetails;
styles/globals.css
...@@ -259,6 +259,11 @@ h6 { ...@@ -259,6 +259,11 @@ h6 {
font-weight: 600; font-weight: 600;
} }
/* cursor pointer */
.cursor-pointer{
cursor: pointer;
}
/*ST Images*/ /*ST Images*/
.image-container { .image-container {
width: auto; width: auto;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!