Commit b1f99aa4 by Ravindra Kanojiya

updated

1 parent acd5d738
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
......@@ -4,13 +4,24 @@ import { Button, Modal } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { toast } from "react-toastify";
import { updateActivityStatusAdmin } from "../../redux/actions/userActions";
import ActivityDetailGallaryModal from "./ActivityDetailGallaryModal";
import { CloseCircleOutlined } from "@ant-design/icons";
const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
const [viewDesc, setViewDesc] = useState();
const [rejectPopUp, setrejectPopUp] = useState(false);
const [rejectionReasonText, setrejectionReasonText] = useState("");
const [showActivityImages, setShowActivityImages] = useState(false);
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 (
<Fragment>
<Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter" centered>
......@@ -127,7 +138,7 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div>
<div className="row">
<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 className="row">
<p className="col-12 col-lg-6">Brand Logo</p>
......@@ -137,12 +148,31 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
<div>
<p className="phead">Policy & Terms</p>
<div className="row">
<p className="col-12 col-lg-6">Cancellation Policy</p>
<p className="col-12 col-lg-6 pview">View</p>
<div className="col-12 col-lg-6 ">
<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 className="row">
<p className="col-12 col-lg-6">Terms & Conditions</p>
<p className="col-12 col-lg-6 pview">View</p>
<div className="col-12 col-lg-6 ">
<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>
......@@ -229,6 +259,15 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div>
</Modal.Body>
</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>
);
};
......
......@@ -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 }));
}, []);
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 = () => {
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;
// 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}</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>
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">
<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-5 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>
<div className=" col-4">
<div className="row">
{/* <div className="col-12">
<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">
<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-5 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>
<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,35 +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-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>
</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;
......@@ -259,6 +259,11 @@ h6 {
font-weight: 600;
}
/* cursor pointer */
.cursor-pointer{
cursor: pointer;
}
/*ST Images*/
.image-container {
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!