nestiq-component-library 1.1.141 → 1.1.142

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -1,359 +1,358 @@
-import React, { useRef, useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import locationIcon from "../../assets/images/locationIcon.svg";
-import "../NewPropertyCard/NewPropertyCard.css";
-import noImageIcon from "../../assets/Images/default-property.jpg";
-import { formatPrice } from "../../functions/util";
-import shareIcon from "../../assets/Images/icon_share_1.svg";
-import moreIcon from "../../assets/Images/more.svg";
-import arrowLeft from "../../assets/Images/card-arrow-left.svg";
-import arrowRight from "../../assets/Images/card-arrow-right.svg";
-import iconLayers from "../../assets/Images/layer_icon.svg";
-import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
-// import MessagePopUp from "../MessagePopup/MessagePopUp";
-import SharePopup from "../SharePopup/SharePopup";
-import { MessageModel } from "../../models/message.model";
-import immooly from "../../assets/images/imooly.svg";
-
-interface PopupProps {
-  property: {
-    city: string;
-    propertyArea: string;
-    historicalProtection: boolean;
-    basement: boolean;
-    balcony: boolean;
-    terrace: boolean;
-    guestBathroom: boolean;
-    bathrooms: string;
-    usableArea: string;
-    id: string;
-    rooms: string;
-    constructedArea: string;
-    title: string;
-    evaluation?: {
-      askingPrice: number;
-    };
-    expose: {
-      title: string;
-    };
-    pictures: { contentUrl: string }[];
-  };
-  Impliment: any;
-  baseUrl: string;
-  themesList: any;
-  floorPlanUrl: string;
-  // onMessagePopupSubmitClick: (formValues: MessageModel) => void;
-  messageOnClick: () => void;
-  onclickSuccess: () => void;
-  onClick: () => void;
-}
-export default function PropertyCard(props: PopupProps) {
-  const [liked, setLiked] = useState(false);
-  const [mainImage, setMainImage] = useState<string | null>(null);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const imageListRef = useRef<HTMLDivElement>(null);
-  const [floorPlan, setFloorPlan] = useState(false);
-  const [messagePopUp, setMessagPopUp] = useState(false);
-  const [sharePopUp, setSharePopUp] = useState(false);
-
-  const pictureUrls =
-    props.property?.pictures?.length > 0
-      ? props.property.pictures.map(
-          (picture) => `${props.baseUrl}${picture.contentUrl}`
-        )
-      : [noImageIcon];
-
-  // setPictureUrls(pictureUrls);
-  const handleLike = () => {
-    setLiked(!liked);
-  };
-  const floorPlanOnClick = () => {
-    if (props.floorPlanUrl) {
-      setFloorPlan(true);
-    }
-  };
-  const handleMessagPopUp = () => {
-    // setMessagPopUp(true);
-    props.messageOnClick();
-  };
-  const handleSharePopUp = () => {
-    setSharePopUp(true);
-  };
-
-  const handleArrowClickInMainImage = (direction: string) => {
-    if (!props.property || pictureUrls.length === 0) return;
-
-    let newIndex = currentImageIndex;
-    if (direction === "left") {
-      newIndex =
-        (currentImageIndex - 1 + pictureUrls.length) % pictureUrls.length;
-    } else if (direction === "right") {
-      newIndex = (currentImageIndex + 1) % pictureUrls.length;
-    }
-
-    setCurrentImageIndex(newIndex);
-    setMainImage(pictureUrls[newIndex]);
-
-    // Ensure the ref exists before calling scrollTo
-    if (imageListRef.current) {
-      imageListRef.current.scrollTo({
-        left: newIndex * 150,
-        behavior: "smooth",
-      });
-    } else {
-      console.warn("imageListRef is not set");
-    }
-  };
-  // const boosted = "true";
-
-  return (
-    <div className="d-flex flex-row property-card">
-      <div className="d-flex flex-column col-md-6 col-lg-6">
-        <div
-          key={props.property.id}
-          className="card-bod position-relative cardStyles h-100 w-100"
-          style={{
-            backgroundImage: `url(${mainImage || pictureUrls[0]})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            maxWidth: "640",
-          }}
-        >
-          <div className="d-flex flex-row col-12 justify-content-between ">
-            <div
-              className="d-felx  align-self-start justify-items-start ms-4 "
-              style={{ left: "16px" }}
-              onClick={() => handleArrowClickInMainImage("left")}
-              role="button"
-            >
-              <img src={arrowLeft} />
-            </div>
-            <div></div>
-            <div
-              className="d-flex  align-self-end justify-items-end me-4"
-              onClick={() => handleArrowClickInMainImage("right")}
-              role="button"
-            >
-              <img src={arrowRight} style={{ right: "16px" }} />
-            </div>
-          </div>
-          <div
-            className="d-flex flex-row  align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4"
-            style={{ position: "absolute", left: "0" }}
-          >
-            <div className="cardTag" style={{ marginBottom: "16px" }}>{`${
-              currentImageIndex + 1
-            }/${pictureUrls.length}`}</div>
-            <div
-              className="Grundriss kontact-button-text ms-2 "
-              role="button"
-              onClick={floorPlanOnClick}
-              style={{ marginBottom: "16px" }}
-            >
-              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
-              Grundriss
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className={"listing-compact d-flex flex-column col-6"}>
-        <div className="d-flex flex-row justify-content-between gap-2">
-          <span
-            className="propertyTitle align-items-start "
-            style={{
-              paddingLeft: "32px",
-              paddingTop: "32px",
-            }}
-            onClick={props.onClick}
-            role="button"
-          >
-            {props.property.expose?.title}
-          </span>
-          <div
-            className="d-flex  gap-2"
-            style={{
-              paddingRight: "32px",
-              paddingTop: "21px",
-              paddingLeft: "76px",
-            }}
-          >
-            <img
-              src={shareIcon}
-              alt="Location Icon"
-              className=" "
-              onClick={handleSharePopUp}
-              style={{ maxHeight: "24px", maxWidth: "24px" }}
-              role="button"
-            />
-            <img
-              src={moreIcon}
-              alt="Location Icon"
-              className=""
-              style={{ maxHeight: "24px", maxWidth: "24px" }}
-              role="button"
-            />
-          </div>
-        </div>
-        <div
-          style={{
-            paddingLeft: "32px",
-            paddingRight: "32px",
-            paddingTop: "28px",
-          }}
-        >
-          {" "}
-          <div className="d-flex ">
-            <img src={locationIcon} alt="Location Icon" className="Vector" />
-            <span className="locationTexts ">
-              {props.property.city || "N/A"}
-            </span>
-          </div>
-        </div>
-        <div
-          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between  "
-          style={{
-            paddingLeft: "32px",
-            paddingRight: "32px",
-            paddingTop: "28px",
-          }}
-        >
-          <span className="priceValue col-lg-4 col-md-4 col-sm-6  ">
-            {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-            <br />
-            <span className="details">Kaufpreis</span>
-          </span>
-          <span className="text-dark value col-lg-5 col-md-5 col-sm-7  ">
-            {props.property.constructedArea} m²
-            <br />
-            <span className="details">
-              <span>Wohnfläche</span>
-            </span>
-          </span>
-          <span className="text-dark value col-lg-4 col-md-3 col-sm-6 text-truncate  ">
-            {+props.property?.rooms}
-            <br />
-            <span className="details">
-              {" "}
-              <span>Zimmer</span>
-            </span>
-          </span>
-          <span className="text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate ">
-            {+props.property.propertyArea} m²
-            <br />
-            <span className="details">
-              <span>Grundstück</span>
-            </span>
-          </span>
-        </div>
-        <div
-          className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
-          style={{ padding: "28px" }}
-        >
-          <div className=" align-items-center d-flex flex-row  gap-3">
-            {props.property.historicalProtection && (
-              <label className="thirdLabels justify-content-center align-items-center">
-                <span className="layersText ">{"Denkmalschutz"}</span>
-              </label>
-            )}
-
-            {props.property.basement && (
-              <label className="secondLabel  justify-content-center align-items-center">
-                <span className="layersText ">{"Keller"}</span>
-              </label>
-            )}
-            {props.property.balcony && (
-              <label className="secondLabel  justify-content-center align-items-center">
-                <span className="layersText ">{"Balkon"}</span>
-              </label>
-            )}
-            {props.property.terrace && (
-              <label className="thirdLabels justify-content-center align-items-center ">
-                <span className="layersText">{"Terrace"}</span>
-              </label>
-            )}
-            {props.property.guestBathroom && (
-              <label className="col-1 thirdLabels justify-content-center align-items-center ">
-                <span className="layersText  ">{"Gäste-WC"}</span>
-              </label>
-            )}
-          </div>
-        </div>
-        {props.Impliment && (
-          <div
-            className=""
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "32px",
-            }}
-          >
-            <div className="Frame-136 d-flex flex-row">
-              <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
-                <img src={immooly} alt="Logo" className="immooly" />
-              </div>
-              <div className="ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center">
-                <span className="fw-bold">Herr Florian Gauss</span>
-                <span>Immogart UGh</span>
-                <button
-                  className="kontactbutton text-light align-self-center"
-                  onClick={handleMessagPopUp}
-                  role="button"
-                >
-                  <span className="kontact-button-text">
-                    Kontakt aufnehmen{" "}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-        {!props.Impliment && (
-          <div
-            className=""
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "32px",
-              paddingBottom: "32px",
-            }}
-          >
-            <div className="Frame-136 d-flex flex-row">
-              <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
-                <img src={immooly} alt="Logo" className="immooly" />
-              </div>
-              <div className="d-flex flex-column flex-lg-row  justify-content-between">
-                <div className="d-flex flex-column col-7">
-                  <span className="">Herr Florian Gauss</span>
-                  <span>Immogart UGh</span>
-                </div>
-                <button
-                  className="kontactbutton text-light "
-                  onClick={handleMessagPopUp}
-                  role="button"
-                >
-                  <span className="kontact-button-text">
-                    Kontakt aufnehmen{" "}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-      {floorPlan && (
-        <FloorPlanPopup
-          contentUrl={props.floorPlanUrl}
-          onCloseClick={() => setFloorPlan(false)}
-        />
-      )}
-      {/* {messagePopUp && (
-        <MessagePopUp
-          onCloseClick={() => setMessagPopUp(false)}
-          sellerFirstName={props.userData?.firstname}
-          sellerLastName={props.userData?.lastname}
-          themesList={props.themesList}
-          onSubmit={props.onMessagePopupSubmitClick}
-        />
-      )} */}
-      {sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
-    </div>
-  );
-}
+import React, { useRef, useState } from "react";
+// import { FormattedMessage } from "react-intl";
+import locationIcon from "../../assets/images/locationIcon.svg";
+import "../NewPropertyCard/NewPropertyCard.css";
+import noImageIcon from "../../assets/Images/default-property.jpg";
+import { formatPrice } from "../../functions/util";
+import shareIcon from "../../assets/Images/icon_share_1.svg";
+import moreIcon from "../../assets/Images/more.svg";
+import arrowLeft from "../../assets/Images/card-arrow-left.svg";
+import arrowRight from "../../assets/Images/card-arrow-right.svg";
+import iconLayers from "../../assets/Images/layer_icon.svg";
+import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
+// import MessagePopUp from "../MessagePopup/MessagePopUp";
+import SharePopup from "../SharePopup/SharePopup";
+import { MessageModel } from "../../models/message.model";
+import immooly from "../../assets/images/imooly.svg";
+
+interface PopupProps {
+  property: {
+    city: string;
+    propertyArea: string;
+    historicalProtection: boolean;
+    basement: boolean;
+    balcony: boolean;
+    terrace: boolean;
+    guestBathroom: boolean;
+    bathrooms: string;
+    usableArea: string;
+    id: string;
+    rooms: string;
+    constructedArea: string;
+    title: string;
+    evaluation?: {
+      askingPrice: number;
+    };
+    expose: {
+      title: string;
+    };
+    pictures: { contentUrl: string }[];
+  };
+  Impliment: any;
+  baseUrl: string;
+  themesList: any;
+  floorPlanUrl: string;
+  // onMessagePopupSubmitClick: (formValues: MessageModel) => void;
+  messageOnClick: () => void;
+  onclickSuccess: () => void;
+  onClick: () => void;
+}
+export default function PropertyCard(props: PopupProps) {
+  const [liked, setLiked] = useState(false);
+  const [mainImage, setMainImage] = useState<string | null>(null);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const imageListRef = useRef<HTMLDivElement>(null);
+  const [floorPlan, setFloorPlan] = useState(false);
+  const [messagePopUp, setMessagPopUp] = useState(false);
+  const [sharePopUp, setSharePopUp] = useState(false);
+
+  const pictureUrls =
+    props.property?.pictures?.length > 0
+      ? props.property.pictures.map(
+          (picture) => `${props.baseUrl}${picture.contentUrl}`,
+        )
+      : [noImageIcon];
+
+  // setPictureUrls(pictureUrls);
+  const handleLike = () => {
+    setLiked(!liked);
+  };
+  const floorPlanOnClick = () => {
+    if (props.floorPlanUrl) {
+      setFloorPlan(true);
+    }
+  };
+  const handleMessagPopUp = () => {
+    // setMessagPopUp(true);
+    props.messageOnClick();
+  };
+  const handleSharePopUp = () => {
+    setSharePopUp(true);
+  };
+
+  const handleArrowClickInMainImage = (direction: string) => {
+    if (!props.property || pictureUrls.length === 0) return;
+
+    let newIndex = currentImageIndex;
+    if (direction === "left") {
+      newIndex =
+        (currentImageIndex - 1 + pictureUrls.length) % pictureUrls.length;
+    } else if (direction === "right") {
+      newIndex = (currentImageIndex + 1) % pictureUrls.length;
+    }
+
+    setCurrentImageIndex(newIndex);
+    setMainImage(pictureUrls[newIndex]);
+
+    // Ensure the ref exists before calling scrollTo
+    if (imageListRef.current) {
+      imageListRef.current.scrollTo({
+        left: newIndex * 150,
+        behavior: "smooth",
+      });
+    } else {
+      console.warn("imageListRef is not set");
+    }
+  };
+  // const boosted = "true";
+
+  return (
+    <div className="d-flex flex-row property-card">
+      <div className="d-flex flex-column col-md-6 col-lg-6">
+        <div
+          key={props.property.id}
+          className="card-bod position-relative cardStyles h-100 w-100"
+          style={{
+            backgroundImage: `url(${mainImage || pictureUrls[0]})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            maxWidth: "640",
+          }}
+        >
+          <div className="d-flex flex-row col-12 justify-content-between ">
+            <div
+              className="d-felx  align-self-start justify-items-start ms-4 "
+              style={{ left: "16px" }}
+              onClick={() => handleArrowClickInMainImage("left")}
+              role="button"
+            >
+              <img src={arrowLeft} />
+            </div>
+            <div></div>
+            <div
+              className="d-flex  align-self-end justify-items-end me-4"
+              onClick={() => handleArrowClickInMainImage("right")}
+              role="button"
+            >
+              <img src={arrowRight} style={{ right: "16px" }} />
+            </div>
+          </div>
+          <div
+            className="d-flex flex-row  align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4"
+            style={{ position: "absolute", left: "0" }}
+          >
+            <div className="cardTag" style={{ marginBottom: "16px" }}>{`${
+              currentImageIndex + 1
+            }/${pictureUrls.length}`}</div>
+            <div
+              className="Grundriss kontact-button-text ms-2 "
+              role="button"
+              onClick={floorPlanOnClick}
+              style={{ marginBottom: "16px" }}
+            >
+              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
+              Grundriss
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={`listing-compact d-flex flex-column col-6 ${
+          props.Impliment ? "cc-height" : "listing-height"
+        }`}
+      >
+        <div className="d-flex flex-column gap-3">
+          <div className="d-flex flex-row justify-content-between gap-2">
+            <span
+              className="propertyTitle align-items-start "
+              style={{
+                paddingLeft: "32px",
+                paddingTop: "32px",
+              }}
+              onClick={props.onClick}
+              role="button"
+            >
+              {props.property.expose?.title}
+              {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
+              {/*in top Lage*/}
+            </span>
+            <div
+              className="d-flex  gap-2"
+              style={{
+                paddingRight: "32px",
+                paddingTop: "21px",
+                paddingLeft: "10px",
+              }}
+            >
+              <img
+                src={shareIcon}
+                alt="Share Icon"
+                className=" "
+                onClick={handleSharePopUp}
+                style={{ maxHeight: "24px", maxWidth: "24px" }}
+                role="button"
+              />
+              <img
+                src={moreIcon}
+                alt="More Icon"
+                className=""
+                style={{ maxHeight: "24px", maxWidth: "24px" }}
+                role="button"
+              />
+            </div>
+          </div>
+
+          <div
+            style={{
+              paddingLeft: "32px",
+              paddingRight: "32px",
+            }}
+          >
+            {" "}
+            <div className="location-wrapper">
+              <img
+                src={locationIcon}
+                alt="Location Icon"
+                className="location-icon"
+              />
+              <span className="locationTexts ">
+                {props.property.city || "N/A"}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="d-flex  flex-row gap-3 col-6 col-lg-8 justify-content-between  "
+          style={{
+            paddingLeft: "32px",
+            paddingRight: "32px",
+          }}
+        >
+          <span className="priceValue col-lg-4 col-md-4 col-sm-6  ">
+            {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
+            <div className="price_label">Kaufpreis</div>
+          </span>
+          <span className="text-dark value col-lg-5 col-md-5 col-sm-7">
+            {props.property.constructedArea} m²
+            <div className="details">Wohnfläche</div>
+          </span>
+          <span className="text-dark value col-lg-4 col-md-3 col-sm-6 text-truncate  ">
+            {+props.property?.rooms}
+            <div className="details">Zimmer</div>
+          </span>
+          <span className="text-dark value col-lg-4 col-md-3 col-sm-4 text-truncate ">
+            {+props.property.propertyArea} m²
+            <div className="details">Grundstück</div>
+          </span>
+        </div>
+        <div
+          className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
+          style={{ padding: "0 28px" }}
+        >
+          <div className=" align-items-center d-flex flex-row  gap-3">
+            {props.property.historicalProtection && (
+              <label className="chipLabel justify-content-center align-items-center">
+                <span className="layersText">{"Denkmalschutz"}</span>
+              </label>
+            )}
+
+            {props.property.basement && (
+              <label className="chipLabel justify-content-center align-items-center">
+                <span className="layersText">{"Keller"}</span>
+              </label>
+            )}
+            {props.property.balcony && (
+              <label className="chipLabel justify-content-center align-items-center">
+                <span className="layersText">{"Balkon"}</span>
+              </label>
+            )}
+            {props.property.terrace && (
+              <label className="chipLabel justify-content-center align-items-center ">
+                <span className="layersText">{"Terrace"}</span>
+              </label>
+            )}
+            {props.property.guestBathroom && (
+              <label className="chipLabel">
+                <span className="layersText">{"Gäste-WC"}</span>
+              </label>
+            )}
+          </div>
+        </div>
+        {props.Impliment && (
+          <div
+            className=""
+            style={{
+              paddingLeft: "32px",
+              paddingRight: "32px",
+            }}
+          >
+            <div className="Frame-136 d-flex flex-row">
+              <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
+                <img src={immooly} alt="Logo" className="immooly" />
+              </div>
+              <div className="ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center">
+                <span className="fw-bold">Herr Florian Gauss</span>
+                <span>Immogart UGh</span>
+                <button
+                  className="kontactbutton text-light align-self-center"
+                  onClick={handleMessagPopUp}
+                  role="button"
+                >
+                  <span className="kontact-button-text">
+                    Kontakt aufnehmen{" "}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+        {!props.Impliment && (
+          <div
+            className=""
+            style={{
+              paddingLeft: "32px",
+              paddingRight: "32px",
+            }}
+          >
+            <div className="Frame-136 d-flex flex-row">
+              <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
+                <img src={immooly} alt="Logo" className="immooly" />
+              </div>
+              <div className="d-flex flex-column flex-lg-row  justify-content-between">
+                <div className="d-flex flex-column col-6">
+                  <span className="">Herr Florian Gauss</span>
+                  <span>Immogart UGh</span>
+                </div>
+                <button
+                  className="kontactbutton text-light "
+                  onClick={handleMessagPopUp}
+                  role="button"
+                >
+                  <span className="kontact-button-text">
+                    Kontakt aufnehmen{" "}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {floorPlan && (
+        <FloorPlanPopup
+          contentUrl={props.floorPlanUrl}
+          onCloseClick={() => setFloorPlan(false)}
+        />
+      )}
+      {/* {messagePopUp && (
+        <MessagePopUp
+          onCloseClick={() => setMessagPopUp(false)}
+          sellerFirstName={props.userData?.firstname}
+          sellerLastName={props.userData?.lastname}
+          themesList={props.themesList}
+          onSubmit={props.onMessagePopupSubmitClick}
+        />
+      )} */}
+      {sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
+    </div>
+  );
+}