nestiq-component-library 1.1.172 → 1.2.1

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -1,383 +0,0 @@
-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";
-import ImageListPopup from "../ImageListPopup/ImageListPopup";
-
-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; pictureType: { id: number } }[];
-  };
-  userData?: { firstname: string; lastname: string; company: string };
-  Impliment: any;
-  baseUrl: string;
-  themesList: any;
-  floorPlanUrl: string;
-  // onMessagePopupSubmitClick: (formValues: MessageModel) => void;
-  messageOnClick: () => void;
-  onclickSuccess: () => void;
-  onClick: () => void;
-  onFloorPlanClick: (images: { url: string; title: string }[]) => void;
-  translations?: {
-    kaufpreis?: string;
-    wohnflache?: string;
-    zimmer?: string;
-    grundriss?: string;
-  };
-}
-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 [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-
-  const pictureUrls =
-    props.property?.pictures?.length > 0
-      ? props.property.pictures
-          .filter((picture) => picture.pictureType.id === 2)
-          .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}`,
-      })) || [];
-
-  // setPictureUrls(pictureUrls);
-  const handleLike = () => {
-    setLiked(!liked);
-  };
-
-  const handleFloorPlanButton = () => {
-    setIsImagePopupOpen(true);
-    if (props.onFloorPlanClick) {
-      props.onFloorPlanClick(floorPlanImages);
-    }
-  };
-
-  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";
-
-  const t = {
-    kaufpreis: props.translations?.kaufpreis || "Kaufpreis",
-    wohnflache: props.translations?.wohnflache || "Wohnfläche",
-    zimmer: props.translations?.zimmer || "Zimmer",
-    grundriss: props.translations?.grundriss || "Grundriss",
-  };
-
-  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={() => handleFloorPlanButton()}
-              style={{ marginBottom: "16px" }}
-            >
-              <img src={iconLayers} className="" style={{ width: "18px" }} />{" "}
-              {t.grundriss}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className={`listing-compact_c justify-content-between d-flex flex-column col-6 ${
-          props.Impliment ? "cc-height" : "listing-height"
-        }`}
-      >
-        <div className="col-12 d-flex justify-content-end gap-2">
-          <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 className="col-11">
-          <span
-            className="propertyTitle align-items-start "
-            onClick={props.onClick}
-            role="button"
-          >
-            {props.property.expose?.title}
-            {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
-            {/*in top Lage*/}
-          </span>
-        </div>
-        <div className="col-12">
-          <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 className="d-flex flex-row justify-content-between">
-          <span className="priceValue justify-content-center align-items-center">
-            {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-            <div className="price_label" style={{ whiteSpace: "nowrap" }}>
-              {t.kaufpreis}
-            </div>
-          </span>
-          <span className="text-dark value d-flex justify-content-center align-items-center">
-            {props.property.constructedArea} m²
-            <div className="details" style={{ whiteSpace: "nowrap" }}>
-              {t.wohnflache}
-            </div>
-          </span>
-          <span className="text-dark value d-flex justify-content-center align-items-center">
-            {+props.property?.rooms}
-
-            <div
-              className="details text-center"
-              style={{ whiteSpace: "nowrap" }}
-            >
-              {t.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> */}
-        <div className="d-lex flex-column ">
-          <div className="wrapperCompanySec d-flex justify-content-around flex-row">
-            <div className="d-flex flex-column col-4 justify-content-between ">
-              <img src={immooly} alt="Logo" className="immooly" />
-            </div>
-            <div className="d-flex flex-column align-items-center justify-content-center">
-              <div className="d-flex flex-column text-center">
-                <span className="fw-bold">
-                  {props.userData
-                    ? `${props.userData.firstname} ${props.userData.lastname}`
-                    : "Firstname Lastname"}
-                </span>
-                <span className="fst-italic fw-normal">
-                  {props.userData?.company
-                    ? props.userData.company
-                    : "Your Company"}
-                </span>
-              </div>
-              {/* {props.userData && (
-                  <button
-                    className="kontactbutton_cc text-light "
-                    // onClick={handleMessagPopUp}
-                    role="button"
-                  >
-                    <span className="kontact-button-text">
-                      Kontakt aufnehmen{" "}
-                    </span>
-                  </button>
-                )} */}
-            </div>
-          </div>
-        </div>
-
-        {/* {!props.Impliment && (
-          <div
-            className="d-lex flex-column "
-            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)} />}
-      {isImagePopupOpen && (
-        <ImageListPopup
-          pictureUrls={floorPlanImages}
-          onClose={() => setIsImagePopupOpen(false)}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/Popup/Popup.css

@@ -1,12 +0,0 @@
-.popUpHeader {
-    height: 48px;
-    font-size: 32px;
-    font-weight: 600;
-    color: #1b1b1b;
-}
-
-.closeIcon {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-}

package/src/components/Popup/Popup.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import closeIcon from "../../assets/images/icon_close_2.png";
-import "./Popup.css";
-import "../../styles/common.css";
-
-interface PopupProps {
-  children: React.ReactNode;
-  onCloseClick: () => void;
-}
-
-const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
-  return (
-    <div className="popup-overlay">
-      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
-        <div className="end-0 top-0 position-absolute ">
-          <img
-            src={closeIcon}
-            alt="close"
-            className="closeIcon me-2"
-            onClick={onCloseClick}
-          />
-        </div>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default Popup;

package/src/components/PropertyCard/PropertyCard.css

@@ -1,271 +0,0 @@
-.padding-global {
-  height: 737px !important;
-  padding: 0 40px;
-}
-.header {
-  font-size: 48px;
-  font-weight: 600;
-  color: #1b1b1b;
-}
-
-.firstLabel {
-  width: 100px;
-  height: 25px;
-  gap: 6px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #031012 !important;
-  background-color: var(--main-yellow);
-}
-
-.secondLabel {
-  width: fit-content;
-  height: 25px;
-  padding: 0 17px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-}
-
-/* .thirdLabels {
-  padding: 4px;
-  width: 110px;
-  height: 25px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-} */
-
-.fourthLabels {
-  padding: 2px;
-
-  width: 100px;
-  height: 25px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-}
-
-.layersVector {
-  width: 15.1px;
-  height: 16px;
-}
-
-.layersText {
-  font-size: 14px;
-  color: #1b1b1b;
-}
-
-.style-img {
-  object-fit: cover;
-  border-radius: 30px !important;
-}
-
-.Vector {
-  width: 12px;
-  height: 16.1px;
-  flex-grow: 0;
-  margin: 0.4px 6px 0.4px 0;
-}
-
-.customButton {
-  width: 262px;
-  height: 43px;
-  color: #000;
-  cursor: pointer;
-  border-color: var(--main-yellow);
-  background-color: var(--main-yellow);
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.button_text {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1b1b1b;
-}
-
-.heartVector {
-  width: 23px;
-  height: 26.7px;
-  cursor: pointer;
-}
-
-.heartVector.liked {
-  fill: rgb(255, 255, 255) !important;
-}
-.locationText {
-  font-size: 14px;
-  color: white;
-  text-align: center;
-}
-
-.arrowVector {
-  width: 23px;
-  height: 23px;
-  flex-grow: 0;
-  object-fit: contain;
-}
-
-.Price {
-  font-size: 26px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #fff;
-}
-
-.detail {
-  font-size: 12px;
-  text-align: center;
-  color: #fff;
-}
-
-.class {
-  background-color: #1b1b1b;
-}
-
-.header {
-  height: 64px;
-  justify-content: center;
-}
-
-.cardStyle {
-  width: 405px;
-  max-width: 2405px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 350px;
-  border-radius: 30px !important;
-}
-
-.rightConer {
-  width: 200px;
-}
-@media all and (min-width: 2560px) {
-  .header {
-    font-size: 38px;
-
-    display: flex;
-  }
-  .cardStyle {
-    gap: 0px;
-    width: 350px;
-    height: 300px;
-    /* margin-left: 250px; */
-  }
-}
-@media (max-width: 1399px) {
-  .header {
-    font-size: 38px;
-    align-self: center;
-    margin-left: 150px;
-  }
-  .cardStyle {
-    gap: 0px;
-    width: 350px;
-    height: 300px;
-  }
-}
-
-@media (max-width: 1199px) {
-  .header {
-    font-size: 38px;
-  }
-  .cardStyle {
-    width: 300px;
-    height: 250px;
-  }
-}
-
-@media (max-width: 575px) {
-  .detail {
-    font-size: 11px;
-    padding: 2px;
-  }
-  .Price {
-    font-size: 19px;
-  }
-  .header {
-    font-size: 28px;
-  }
-  .locationText {
-    font-size: 12px;
-  }
-  .customButton {
-    width: 200px !important;
-  }
-  .button_text {
-    font-size: 13px;
-  }
-}
-
-@media (max-width: 375px) {
-  .labelTopClass {
-    width: 105px !important;
-  }
-  .layersText {
-    font-size: 9px;
-  }
-  .firstLabel {
-    gap: 2px;
-  }
-  .layersVector {
-    width: 9px;
-    height: 10px;
-    gap: 0px;
-  }
-  .cardStyle {
-    width: 320px !important;
-    height: 220px !important;
-  }
-  .header {
-    font-size: 24px;
-  }
-  .detail {
-    font-size: 10px;
-    padding: 2px;
-  }
-  .Price {
-    font-size: 18px;
-  }
-  .locationText {
-    font-size: 10px;
-  }
-  .Vector {
-    width: 8px;
-    height: 16px;
-    margin: 0px 2px 0.4px;
-  }
-}
-
-@media (max-width: 280px) {
-  .cardStyle {
-    width: 260px !important;
-    height: 160px !important;
-  }
-  .detail {
-    margin-bottom: 5px;
-    font-size: 0.6ch;
-  }
-  .Price {
-    font-size: 9px;
-  }
-  .locationText {
-    font-size: 6px;
-  }
-  .Vector {
-    width: 7px;
-    height: 10px;
-    margin: 0px 2px 4px;
-  }
-  .heartVector {
-    width: 15px;
-    height: 20px;
-  }
-}