nestiq-component-library 1.1.56 → 1.1.58

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -1,315 +1,283 @@
-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";
-
-interface PopupProps {
-  property: {
-    city: 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 }[];
-  };
-  onClick: any;
-  baseUrl: string;
-  title: string;
-  userData: {
-    firstname: string;
-    lastname: string;
-  };
-  handleSendMessage: any;
-  firstname: any;
-  lastname: any;
-  themesList: any;
-  sendData: any;
-}
-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 [themeId, setThemeId] = useState("");
-  const [subject, setSubject] = useState("");
-  const [messageText, setMessageText] = useState("");
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-
-  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 = () => {
-    setFloorPlan(true);
-  };
-  const handleMessagPopUp = () => {
-    setMessagPopUp(true);
-    console.log("messagePopUp", messagePopUp);
-  };
-  const handleSharePopUp = () => {
-    setSharePopUp(true);
-    console.log("sharePopUp", sharePopUp);
-  };
-  const handleClosePopup = () => {
-    setFloorPlan(false);
-    setMessagPopUp(false);
-  };
-  const messagePopupClose = () => {
-    setMessagPopUp(false);
-  };
-  function handleDataFromChild(
-    firstName: string,
-    lastName: string,
-    themeId: string,
-    subject: string,
-    messageText: string
-  ) {
-    setFirstName(firstName);
-    setLastName(lastName);
-    setThemeId(themeId);
-    setSubject(subject);
-    setMessageText(messageText);
-  }
-  function handleSendMessage() {
-    props.sendData(themeId, subject, messageText, firstName, lastName);
-  }
-
-  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");
-    }
-  };
-
-  return (
-    <div className="d-flex flex-row ">
-      <div className="d-flex flex-column col-12">
-        <div
-          key={props.property.id}
-          className="card-bod mb-4 position-relative cardStyles  w-100"
-          style={{
-            backgroundImage: `url(${mainImage || pictureUrls[0]})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-          }}
-        >
-          <div className="d-flex flex-row justify-content-between gap-5">
-            <div
-              className="d-flex"
-              style={{ position: "absolute", left: "0" }}
-              onClick={() => handleArrowClickInMainImage("left")}
-              role="button"
-            >
-              <img src={arrowLeft} />
-            </div>
-            <div></div>
-            <div
-              onClick={() => handleArrowClickInMainImage("right")}
-              role="button"
-            >
-              <img
-                src={arrowRight}
-                style={{ position: "absolute", right: "0" }}
-              />
-            </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">{`${currentImageIndex + 1}/${
-              pictureUrls.length
-            }`}</div>
-            <div
-              className="Grundriss kontact-button-text "
-              role="button"
-              onClick={floorPlanOnClick}
-            >
-              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
-              Grundriss
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="d-flex flex-column listing-compacts col-12">
-        <div className="d-flex align-self-end justify-content-end gap-2">
-          <img
-            src={shareIcon}
-            alt="Location Icon"
-            className="w-50 "
-            onClick={handleSharePopUp}
-          />
-          <img src={moreIcon} alt="Location Icon" className="" />
-        </div>
-        <div>
-          <span className="propertyTitle align-items-start ">
-            {props.property.expose?.title}
-          </span>
-        </div>
-        <div>
-          {" "}
-          <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 ">
-          <div className="d-flex col-5">
-            <span className="value   ">
-              {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-              <br />
-              <span className="details">Kaufpreis</span>
-            </span>
-          </div>
-          <span className="text-dark value col-lg-4 col-md-4 col-sm-6 text-truncate  ">
-            {+props.property.rooms}
-            <br />
-            <span className="details">
-              {" "}
-              <span>Zimmer</span>
-            </span>
-          </span>
-          <span className="text-dark value col-lg-3 col-md-3 col-sm-4 text-truncate ">
-            {+props.property.bathrooms}
-            <br />
-            <span className="details">
-              <span>Bad</span>
-            </span>
-          </span>
-          <span className="text-dark value col-lg-6 col-md-5 col-sm-7  me-3">
-            {props.property.usableArea} m²
-            <br />
-            <span className="details">
-              <span>Wohnfläche</span>
-            </span>
-          </span>
-        </div>
-        <div className="labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ">
-          <div className=" align-items-center d-flex flex-row  gap-2">
-            {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>
-            )}
-          </div>
-        </div>
-        <div className="d-flex flex-row align-items-center  gap-2">
-          {props.property.terrace && (
-            <label className="thirdLabels justify-content-center align-items-center ">
-              <span className="layersText">{"Terrace"}</span>
-            </label>
-          )}
-          <div className="d-flex ">
-            {props.property.guestBathroom && (
-              <label className="col-1 thirdLabels justify-content-center align-items-center ">
-                <span className="layersText  ">{"Gäste-WC"}</span>
-              </label>
-            )}
-          </div>
-        </div>
-        <div className="Frame-136 d-flex flex-row">
-          <div className="d-flex flex-column col-5 justify-content-between">
-            <span className="h4">
-              <strong>McGrath</strong>{" "}
-            </span>
-          </div>
-          <div className="d-flex flex-column justify-content-between">
-            <span>
-              <strong>Herr John McGrath</strong>{" "}
-            </span>
-            <span>McGrath</span>
-            <button
-              className="kontactbutton text-light "
-              onClick={handleMessagPopUp}
-              role="button"
-            >
-              <span className="kontact-button-text">Kontakt aufnehmen </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      {floorPlan && (
-        <FloorPlanPopup
-          contentUrl={props.property.pictures[0]?.contentUrl || noImageIcon}
-          onCloseClick={() => setFloorPlan(false)}
-        />
-      )}
-      {messagePopUp && (
-        <MessagePopUp
-          onClick={() => setMessagPopUp(false)}
-          handleSendMessage={props.handleSendMessage}
-          firstname={props.firstname}
-          lastname={props.lastname}
-          themesList={props.themesList}
-          sendDataToParent={handleDataFromChild}
-        />
-      )}
-      {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";
+
+interface PopupProps {
+  property: {
+    city: 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 }[];
+  };
+  baseUrl: string;
+  userData: {
+    firstname: string;
+    lastname: string;
+  };
+  themesList: any;
+  floorPlanUrl: string;
+  onMessagePopupSubmitClick: (formValues: MessageModel) => 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);
+  };
+  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");
+    }
+  };
+
+  return (
+    <div className="d-flex flex-row ">
+      <div className="d-flex flex-column col-12">
+        <div
+          key={props.property.id}
+          className="card-bod mb-4 position-relative cardStyles  w-100"
+          style={{
+            backgroundImage: `url(${mainImage || pictureUrls[0]})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          <div className="d-flex flex-row justify-content-between gap-5">
+            <div
+              className="d-flex"
+              style={{ position: "absolute", left: "0" }}
+              onClick={() => handleArrowClickInMainImage("left")}
+              role="button"
+            >
+              <img src={arrowLeft} />
+            </div>
+            <div></div>
+            <div
+              onClick={() => handleArrowClickInMainImage("right")}
+              role="button"
+            >
+              <img
+                src={arrowRight}
+                style={{ position: "absolute", right: "0" }}
+              />
+            </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">{`${currentImageIndex + 1}/${
+              pictureUrls.length
+            }`}</div>
+            <div
+              className="Grundriss kontact-button-text "
+              role="button"
+              onClick={floorPlanOnClick}
+            >
+              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
+              Grundriss
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex flex-column listing-compacts col-12">
+        <div className="d-flex align-self-end justify-content-end gap-2">
+          <img
+            src={shareIcon}
+            alt="Location Icon"
+            className="w-50 "
+            onClick={handleSharePopUp}
+          />
+          <img src={moreIcon} alt="Location Icon" className="" />
+        </div>
+        <div>
+          <span className="propertyTitle align-items-start ">
+            {props.property.expose?.title}
+          </span>
+        </div>
+        <div>
+          {" "}
+          <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 ">
+          <div className="d-flex col-5">
+            <span className="value   ">
+              {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
+              <br />
+              <span className="details">Kaufpreis</span>
+            </span>
+          </div>
+          <span className="text-dark value col-lg-4 col-md-4 col-sm-6 text-truncate  ">
+            {+props.property.rooms}
+            <br />
+            <span className="details">
+              {" "}
+              <span>Zimmer</span>
+            </span>
+          </span>
+          <span className="text-dark value col-lg-3 col-md-3 col-sm-4 text-truncate ">
+            {+props.property.bathrooms}
+            <br />
+            <span className="details">
+              <span>Bad</span>
+            </span>
+          </span>
+          <span className="text-dark value col-lg-6 col-md-5 col-sm-7  me-3">
+            {props.property.usableArea} m²
+            <br />
+            <span className="details">
+              <span>Wohnfläche</span>
+            </span>
+          </span>
+        </div>
+        <div className="labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ">
+          <div className=" align-items-center d-flex flex-row  gap-2">
+            {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>
+            )}
+          </div>
+        </div>
+        <div className="d-flex flex-row align-items-center  gap-2">
+          {props.property.terrace && (
+            <label className="thirdLabels justify-content-center align-items-center ">
+              <span className="layersText">{"Terrace"}</span>
+            </label>
+          )}
+          <div className="d-flex ">
+            {props.property.guestBathroom && (
+              <label className="col-1 thirdLabels justify-content-center align-items-center ">
+                <span className="layersText  ">{"Gäste-WC"}</span>
+              </label>
+            )}
+          </div>
+        </div>
+        <div className="Frame-136 d-flex flex-row">
+          <div className="d-flex flex-column col-5 justify-content-between">
+            <span className="h4">
+              <strong>McGrath</strong>{" "}
+            </span>
+          </div>
+          <div className="d-flex flex-column justify-content-between">
+            <span>
+              <strong>Herr John McGrath</strong>{" "}
+            </span>
+            <span>McGrath</span>
+            <button
+              className="kontactbutton text-light "
+              onClick={handleMessagPopUp}
+              role="button"
+            >
+              <span className="kontact-button-text">Kontakt aufnehmen </span>
+            </button>
+          </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>
+  );
+}