nestiq-component-library 1.1.161 → 1.1.163

package/src/components/ImageListPopup/ImageListPopup.css

@@ -8,6 +8,16 @@
   top: 0;
 }
 
+.closeIconNestiq {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  z-index: 1;
+}
+
 .popup-title {
   color: white;
   font-size: 24px;
@@ -81,3 +91,23 @@
   border: 2px solid white;
   opacity: 1;
 }
+
+.activeStyle {
+  border: 3px solid transparent;
+  border-radius: 4px;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+}
+
+.activeStyle:hover {
+  transform: scale(1.05);
+}
+
+.activeStyle:focus {
+  outline: none;
+  transform: scale(1.05);
+}
+
+.activeStyle.active {
+  transform: scale(1.05);
+}

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -7,6 +7,7 @@ import "../../styles/common.css";
 
 interface PopupProps {
   pictureUrls: { title: string; url: string }[];
+  onClose?: () => void;
 }
 
 export default function ImageListPopup(props: PopupProps) {
@@ -35,7 +36,9 @@ export default function ImageListPopup(props: PopupProps) {
   };
 
   const handleClose = () => {
-    setShowPopUp(false);
+    if (props.onClose) {
+      props.onClose();
+    }
   };
 
   return (
@@ -47,7 +50,7 @@ export default function ImageListPopup(props: PopupProps) {
               <img
                 src={iconClose}
                 alt="close"
-                className="closeIcon"
+                className="closeIconNestiq"
                 onClick={handleClose}
               />
             </div>
@@ -57,7 +60,7 @@ export default function ImageListPopup(props: PopupProps) {
             <div className="d-flex justify-content-center">
               <div className="p-2 bd-highlight align-self-center align-items-center me-5">
                 <div
-                  className="rounded-circle border onImageArrow start-0 d-flex  "
+                  className="rounded-circle border onImageArrow d-flex  justify-content-center"
                   role="button"
                   onClick={() => handleArrowClickInMainImage("left")}
                 >
@@ -70,7 +73,7 @@ export default function ImageListPopup(props: PopupProps) {
               </div>
               <div className="p-2 bd-highlight">
                 <div
-                  className=" rounded-5 mainImage "
+                  className=" rounded-5"
                   style={{
                     backgroundImage: `url(${props.pictureUrls[currentImageIndex].url})`,
                     height: "465px",
@@ -84,7 +87,7 @@ export default function ImageListPopup(props: PopupProps) {
                 {" "}
                 <div
                   role="button"
-                  className="rounded-circle border onImageArrow d-flex     justify-content-center"
+                  className="rounded-circle border onImageArrow d-flex justify-content-center"
                   onClick={() => handleArrowClickInMainImage("right")}
                 >
                   <img
@@ -98,44 +101,49 @@ export default function ImageListPopup(props: PopupProps) {
             <div className="d-flex flex-row">
               {/* Arrows on the main image */}
             </div>
-            <div className="d-flex flex-row gap-4  w-100 secondList ">
-              <div className="col-lg-12 d-flex flex-row p-1  align-self-center mt-5">
-                <div className="col-12 position-relative d-flex justify-content-center">
-                  <div
-                    className="col-lg-10 rounded-3 h-100 w-100 d-flex flex-row gap-2 overflow-auto "
-                    ref={imageListRef}
-                  >
-                    {props.pictureUrls.length > 0 && (
-                      <div className="col-lg-5  d-flex gap-4 flex-row rounded-3">
-                        {props.pictureUrls.map((picture, index) => (
-                          <div
-                            key={index}
-                            className="col-lg-12  d-flex"
-                            onClick={() => {
-                              setCurrentImageIndex(index);
-                              imageListRef.current!.scrollTo({
-                                left: index * 150,
-                                behavior: "smooth",
-                              });
-                            }}
-                            role="button"
-                            style={{
-                              cursor: "pointer",
-                              width: "150px",
-                              height: "150px",
-                            }}
-                          >
-                            <img
-                              src={picture.url}
-                              alt={`Image ${index + 1}`}
-                              className="col-12 h-100 rounded-3 object-fit-cover"
-                            />
-                          </div>
-                        ))}
+            <div className="d-flex flex-row justify-content-center w-100 mt-5">
+              <div
+                className="d-flex flex-row gap-4 overflow-auto px-3"
+                ref={imageListRef}
+                style={{
+                  maxWidth: "100%",
+                  scrollbarWidth: "thin",
+                }}
+              >
+                {props.pictureUrls.length > 0 && (
+                  <>
+                    {props.pictureUrls.map((picture, index) => (
+                      <div
+                        key={index}
+                        className={`flex-shrink-0 activeStyle ${
+                          index === currentImageIndex ? "active" : ""
+                        }`}
+                        onClick={() => {
+                          setCurrentImageIndex(index);
+                          imageListRef.current!.scrollTo({
+                            left: index * 170, // 150px width + gap
+                            behavior: "smooth",
+                          });
+                        }}
+                        role="button"
+                        style={{
+                          cursor: "pointer",
+                          width: "150px",
+                          height: "150px",
+                        }}
+                      >
+                        <img
+                          src={picture.url}
+                          alt={`Image ${index + 1}`}
+                          className="w-100 h-100 rounded-3 object-fit-cover"
+                          style={{
+                            display: "block",
+                          }}
+                        />
                       </div>
-                    )}
-                  </div>
-                </div>
+                    ))}
+                  </>
+                )}
               </div>
             </div>
           </div>

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -14,6 +14,7 @@ import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
 import SharePopup from "../SharePopup/SharePopup";
 import { MessageModel } from "../../models/message.model";
 import immooly from "../../assets/images/imooly.svg";
+import ImageListPopup from "../ImageListPopup/ImageListPopup";
 
 interface PopupProps {
   property: {
@@ -36,6 +37,7 @@ interface PopupProps {
     expose: {
       title: string;
     };
+    selectedFloorPlan?: string;
     pictures: { contentUrl: string; pictureType: { id: number } }[];
   };
   Impliment: any;
@@ -46,7 +48,7 @@ interface PopupProps {
   messageOnClick: () => void;
   onclickSuccess: () => void;
   onClick: () => void;
-  onFloorPlanClick: () => void;
+  onFloorPlanClick: (images: { url: string; title: string }[]) => void;
 }
 export default function PropertyCard(props: PopupProps) {
   const [liked, setLiked] = useState(false);
@@ -57,6 +59,8 @@ export default function PropertyCard(props: PopupProps) {
   const [messagePopUp, setMessagPopUp] = useState(false);
   const [sharePopUp, setSharePopUp] = useState(false);
 
+  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
+
   const pictureUrls =
     props.property?.pictures?.length > 0
       ? props.property.pictures
@@ -64,13 +68,33 @@ export default function PropertyCard(props: PopupProps) {
           .map((picture) => `${props.baseUrl}${picture.contentUrl}`)
       : [noImageIcon];
 
+  const floorPlanImages =
+    props.property.pictures
+      ?.filter((p) => p.pictureType?.id === 1)
+      .map((p, index) => ({
+        url: props.baseUrl + p.contentUrl,
+        title: `Floor Plan ${index + 1}`,
+      })) || [];
+
+  if (props.property.selectedFloorPlan) {
+    floorPlanImages.push({
+      url: props.property.selectedFloorPlan,
+      title: "Selected Floor Plan",
+    });
+  }
+
   // setPictureUrls(pictureUrls);
   const handleLike = () => {
     setLiked(!liked);
   };
-  const floorPlanOnClick = () => {
-    props.onFloorPlanClick();
+
+  const handleFloorPlanButton = () => {
+    setIsImagePopupOpen(true);
+    if (props.onFloorPlanClick) {
+      props.onFloorPlanClick(floorPlanImages);
+    }
   };
+
   const handleMessagPopUp = () => {
     // setMessagPopUp(true);
     props.messageOnClick();
@@ -146,7 +170,7 @@ export default function PropertyCard(props: PopupProps) {
             <div
               className="Grundriss kontact-button-text ms-2 "
               role="button"
-              onClick={floorPlanOnClick}
+              onClick={() => handleFloorPlanButton()}
               style={{ marginBottom: "16px" }}
             >
               <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
@@ -355,6 +379,12 @@ export default function PropertyCard(props: PopupProps) {
         />
       )} */}
       {sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
+      {isImagePopupOpen && (
+        <ImageListPopup
+          pictureUrls={floorPlanImages}
+          onClose={() => setIsImagePopupOpen(false)}
+        />
+      )}
     </div>
   );
 }

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -121,8 +121,8 @@ export default function PropertyImageList(prop: PopupProps) {
                           index === 0
                             ? "ms-1"
                             : index === prop.pictureUrls.length - 1
-                              ? "me-1"
-                              : ""
+                            ? "me-1"
+                            : ""
                         }`}
                         onClick={() => {
                           setCurrentImageIndex(index);
@@ -199,7 +199,12 @@ export default function PropertyImageList(prop: PopupProps) {
         </div>
       </div>
       {/* Popup for all photos */}
-      {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
+      {isImagePopupOpen && (
+        <ImageListPopup
+          pictureUrls={prop.pictureUrls}
+          onClose={() => setIsImagePopupOpen(false)}
+        />
+      )}
 
       {/* Popup for floor plan */}
       {isFloorPlanPopupOpen && (