updated

components/admin/ActivityDetailGallaryModal.js

+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

components/admin/ActivityDetailsModal.js

@@ -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>
   );
 };

styles/globals.css

@@ -259,6 +259,11 @@ h6 {
   font-weight: 600;
 }
 
+/* cursor pointer */
+.cursor-pointer{
+  cursor: pointer;
+}
+
 /*ST Images*/
 .image-container {
   width: auto;