nestiq-component-library 1.1.171 → 1.2.0

package/src/components/PropertyCard/PropertyCard.tsx

@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import layerIcon from "../../assets/images/LayersIcon.svg";
-import heart from "../../assets/images/heart.svg";
-import locationIcon from "../../assets/images/locationIcon.svg";
-import "./PropertyCard.css";
-import noImageIcon from "../../assets/images/default-property.jpg";
-import { formatPrice, formatPropertyArea } from "../../functions/util";
-
-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;
-    evaluation?: {
-      askingPrice: number;
-    };
-    pictures: { contentUrl: string }[];
-  };
-  onClick: any;
-  baseUrl: string;
-}
-
-export default function PropertyCard(props: PopupProps) {
-  const [liked, setLiked] = useState(false);
-
-  const handleLike = () => {
-    setLiked(!liked);
-  };
-  const pictureUrl =
-    props.property.pictures && props.property.pictures.length > 0
-      ? `${props.baseUrl}${props.property.pictures[0].contentUrl}`
-      : noImageIcon;
-  return (
-    <div
-      key={props.property.id}
-      className="card-body me-4 mb-4 position-relative cardStyle"
-      style={{
-        backgroundImage: `url(${pictureUrl})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-      onClick={props.onClick}
-      role="button"
-    >
-      <div className="labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8">
-        <div className="d-flex align-items-center ms-2 mb-1 mt-2 gap-2">
-          <label className="p-1 firstLabel d-flex flex-row justify-content-center align-items-center">
-            <img src={layerIcon} alt="Location Icon" className="layersVector" />
-            <span className="layersText">{"Grundriss"}</span>
-          </label>
-          {props.property.historicalProtection && (
-            <label className="thirdLabels d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Denkmalschutz"}</span>
-            </label>
-          )}
-
-          {props.property.basement && (
-            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Keller"}</span>
-            </label>
-          )}
-        </div>
-        <div className="d-flex align-items-center  ms-2 start-0 gap-2">
-          {props.property.terrace && (
-            <label className="p-1 thirdLabels d-flex flex-row justify-content-center align-items-center ">
-              <span className="layersText">{"Terrace"}</span>
-            </label>
-          )}
-          {props.property.balcony && (
-            <label className="secondLabel  d-flex flex-row justify-content-center align-items-center">
-              <span className="layersText p-1">{"Balkon"}</span>
-            </label>
-          )}
-
-          {props.property.guestBathroom && (
-            <label className="col-1 fourthLabels d-flex flex-row justify-content-center align-items-center ">
-              <span className="layersText p-1">{"Gäste-WC"}</span>
-            </label>
-          )}
-        </div>
-      </div>
-      <div className="d-flex align-items-center  position-absolute top-0 end-0 p-3">
-        {/*<img*/}
-        {/*  src={heart}*/}
-        {/*  alt=" Heart Icon"*/}
-        {/*  className={`heartVector ${liked ? "liked" : ""}`}*/}
-        {/*  onClick={handleLike}*/}
-        {/*/>*/}
-      </div>
-      <div className="d-flex align-items-center mb-3 position-absolute bottom-0 start-0  p-2">
-        <span className="Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1">
-          {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
-        </span>
-      </div>
-      <div className="d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2">
-        <img src={locationIcon} alt="Location Icon" className="Vector" />
-        <span className="locationText text-truncate">
-          {props.property.city || "N/A"}
-        </span>
-      </div>
-      <div className="d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0">
-        <span className="detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end ">
-          {+props.property.rooms}
-          <br />
-          {/* <FormattedMessage id="ROOMS" /> */}
-          <span>Zimmer</span>
-        </span>
-        <span className="detail col-lg-3 col-md-3 col-sm-4 text-truncate ">
-          {+props.property.bathrooms}
-          <br />
-          {/* <FormattedMessage
-            id="BATHROOM"
-            values={{ itemCount: +props.property.bathrooms }}
-          /> */}
-          {/* {+props.property.bathrooms} */}
-
-          <span>Bad</span>
-        </span>
-        <span className="detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3">
-          {formatPropertyArea(props.property?.constructedArea)} m²
-          <br />
-          {/* <FormattedMessage id="LIVING_SPACE" /> */}
-          <span>Wohnfläche</span>
-        </span>
-      </div>
-    </div>
-  );
-}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css

@@ -1,94 +0,0 @@
-.compact_cc {
-  padding: 32px;
-  height: 194px;
-  border-radius: 32px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #f2f2f2;
-}
-
-.header_Text {
-  margin-top: 140px;
-  font-size: 32px;
-  line-height: normal;
-  color: #1b1b1b;
-}
-.location {
-  left: 0;
-}
-.vector svg {
-  width: 6px;
-  height: 21.5px;
-  flex-grow: 0;
-  margin: 4.2px 10px 4.2px 0;
-  fill: #344041;
-  cursor: pointer;
-}
-
-.textWrapper {
-  height: 20px;
-}
-
-.propText {
-  font-size: 16px;
-  letter-spacing: normal;
-  text-align: center;
-  color: #344041;
-}
-
-.v_share {
-  cursor: pointer;
-}
-
-.fetch_section {
-  margin-top: 90px;
-  height: 60px;
-}
-@media (min-width: 800px) {
-  .Pheader {
-    max-width: 1750px;
-    margin: 0 auto;
-  }
-}
-@media (min-width: 300px) and (max-width: 670px) {
-  .Pheader {
-    height: 700px;
-  }
-  .compact {
-    border-radius: 32px;
-    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-    background-color: #f2f2f2;
-  }
-  .compact2 {
-    position: relative !important;
-    display: flex !important;
-    align-self: flex-start !important;
-    margin-left: 25px;
-    justify-content: start !important;
-    align-items: flex-start !important;
-  }
-  .compact3 {
-    position: relative !important;
-    display: flex !important;
-    margin-left: 30px;
-    margin-top: 10px !important;
-  }
-  .header_Text {
-    margin-top: 0px;
-  }
-  .fetch_section {
-    margin-top: 0px;
-    height: 60px;
-  }
-  .propText {
-    justify-content: start !important;
-    align-self: flex-start !important;
-    text-align: start !important;
-  }
-  .propText2 {
-    justify-content: start !important;
-    align-self: flex-start !important;
-    text-align: start !important;
-    font-weight: 1000;
-    font-size: 24px;
-  }
-}

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from "react";
-// import { FormattedMessage } from "react-intl";
-import ShareIcon from "../../assets/images/icon_share_1.svg";
-import locationIcon from "../../assets/images/locationIconBlack.svg";
-import "./PropertyDetailsHeader.css";
-import SharePopup from "../SharePopup/SharePopup";
-import { formatPrice, formatPropertyArea } from "../../functions/util";
-
-export interface PopupProps {
-  property: {
-    fullAddress: string;
-    city: string;
-    constructedArea: string;
-    rooms: string;
-    propertyArea: number;
-    askingPrice: number;
-  };
-  title: string;
-  translations?: {
-    kaufpreis?: string;
-    wohnflache?: string;
-    zimmer?: string;
-    grundriss?: string;
-  };
-}
-
-export default function PropertyDetailsHeader(props: PopupProps) {
-  const [showPopUp, setShowPopUp] = useState(false);
-  const area = props.property?.propertyArea;
-
-  const handleOpenPopup = () => setShowPopUp(true);
-
-  const handleClosePopup = () => setShowPopUp(false);
-
-  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="compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between">
-      <div className="col-12 d-flex flex-row">
-        <div className="header_Text d-flex col-lg-11 col-md-11 mt-0">
-          <strong>{props.title ?? "-"}</strong>
-        </div>
-        <div className="d-flex col-lg-1 col-md-1 justify-content-end position-relative">
-          {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
-          <img
-            src={ShareIcon}
-            alt="share icon"
-            className="v_share me-3 position-absolute"
-            onClick={handleOpenPopup}
-          />
-        </div>
-      </div>
-
-      <div className="d-flex flex-row justify-content-between">
-        <div className="col-6 d-flex flex-row align-items-end jsutify-content-start gap-1">
-          <div className="d-flex gap-1 justify-content-center">
-            <div className="d-flex gap-2 align-items-center">
-              <img src={locationIcon} className="" alt="location Icon" />
-            </div>
-            <div className="textWrapper">{props.property?.fullAddress}</div>
-          </div>
-        </div>
-        <div className="d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5">
-          {props && (
-            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
-              <span className="">
-                {formatPrice(props.property?.askingPrice ?? 0)}€ <br />
-              </span>
-              <span className="textWrapper">{t.kaufpreis}</span>
-            </div>
-          )}
-
-          {props && (
-            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
-              <span className="">
-                {formatPropertyArea(props.property.constructedArea) ?? 0}
-              </span>
-              <span className="textWrapper">{t.wohnflache}</span>
-            </div>
-          )}
-          {props && (
-            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
-              <span className="">{props.property.rooms}</span>
-              <span className="textWrapper">{t.zimmer}</span>
-            </div>
-          )}
-          {/* {props && (
-          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
-            <span className="">
-              {formatPropertyArea(area ?? 0)} m²
-            </span>
-            Grundstück
-            <FormattedMessage id="Grundstück" />
-          </div>
-        )} */}
-        </div>
-      </div>
-      {showPopUp && <SharePopup onClick={() => handleClosePopup()} />}
-    </div>
-  );
-}

package/src/components/PropertyImageList/PropertyImageList.css

@@ -1,101 +0,0 @@
-.mainImage {
-  height: 80%;
-}
-
-.secondList {
-  height: 20%;
-  max-height: 121.6px;
-}
-
-.listImageButton {
-  background-image: linear-gradient(to top, #000, #666);
-  align-items: center !important;
-  justify-content: center !important;
-  min-height: 121px;
-}
-
-.listImgText {
-  height: 30px;
-  font-size: 14px;
-  line-height: 2.14;
-  color: #fff;
-}
-
-.arroIconColour {
-  height: 30px;
-  fill: #fff !important;
-}
-
-.onImageArrow {
-  width: 50px;
-  height: 50px;
-  padding: 23px 8px;
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.blackArrow {
-  width: 20px;
-  height: 20px;
-}
-
-
-.imagesArray {
-  background-size: cover !important;
-}
-@media (max-width: 450px) {
-  .Pimagelist {
-  }
-  .mainImage {
-    height: 500px;
-    width: 88vw;
-  }
-}
-
-/* @media (min-width: 390px) and (max-width: 850px) {
-  .Pimagelist {
-  }
-  .mainImage {
-    height: 500px;
-    width: 58vw;
-  }
-} */
-@media (min-width: 768px) and (max-width: 819px) {
-  .Pimagelist {
-  }
-  .mainImage {
-    height: 80%;
-    width: 58vw;
-  }
-}
-@media (min-width: 820px) and (max-width: 850px) {
-  .Pimagelist {
-  }
-  .mainImage {
-    height: 80%;
-    width: 58vw;
-  }
-}
-
-.image-thumbnail {
-  position: relative;
-  transition: opacity 0.3s ease-in-out;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-thumbnail img {
-  height: 100%;
-  object-fit: cover;
-  border-radius: 8px;
-}
-
-.image-thumbnail.greyed-out img {
-  filter: grayscale(100%) brightness(50%);
-}
-
-.image-thumbnail.selected img {
-  filter: none;
-  border: 2px solid #007bff; /* Highlight border for selected image */
-}

package/src/components/PropertyImageList/PropertyImageList.tsx

@@ -1,246 +0,0 @@
-import React, { useRef, useState } from "react";
-import iconArrowRight from "../../assets/images/Icon_rightArrow.svg";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
-import iconArrowLeft from "../../assets/images/chevron-left.svg";
-import iconGallery from "../../assets/images/icon_gallery.svg";
-import iconMap from "../../assets/images/icon_map.svg";
-import iconLayers from "../../assets/images/layer_icon.svg";
-import noImageIcon from "../../assets/Images/default-property.jpg";
-import "./PropertyImageList.css";
-import ImageListPopup from "../ImageListPopup/ImageListPopup";
-import PopupProps from "../ImageListPopup/ImageListPopup";
-import FloorPlanPopup from "../FloorPlanPopup/FloorPlanPopup";
-
-interface PopupProps {
-  pictureUrls: { title: string; url: string }[];
-  allPictureUrls: { title: string; url: string }[];
-  property: {
-    pictures: {
-      contentUrl: string;
-      pictureType: { id: number };
-    }[];
-  };
-  translations?: {
-    allPhotos?: string;
-    map?: string;
-    grundriss?: string;
-  };
-  baseUrl: string;
-}
-export default function PropertyImageList(prop: PopupProps) {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [isImagePopupOpen, setIsImagePopupOpen] = useState(false);
-  const [isFloorPlanPopupOpen, setIsFloorPlanPopupOpen] = useState(false);
-  const imageListRef = useRef<HTMLDivElement | null>(null);
-
-  const handleArrowClickInMainImage = (direction: "left" | "right") => {
-    if (!prop.pictureUrls.length) return;
-
-    setCurrentImageIndex((prevIndex) => {
-      let newIndex;
-
-      if (direction === "left") {
-        newIndex =
-          (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
-      } else {
-        newIndex = (prevIndex + 1) % prop.pictureUrls.length;
-      }
-
-      if (imageListRef.current) {
-        imageListRef.current.scrollTo({
-          left: newIndex * 150,
-          behavior: "smooth",
-        });
-      }
-      return newIndex || 0;
-    });
-  };
-
-  const floorPlanImages =
-    prop.property.pictures
-      ?.filter((p) => p.pictureType?.id === 1)
-      .map((p, index) => ({
-        url: prop.baseUrl + p.contentUrl,
-        title: `Floor Plan ${index + 1}`,
-      })) || [];
-
-  const toggleAllPhotos = () => {
-    setIsImagePopupOpen(!isImagePopupOpen);
-  };
-
-  const floorPlanClickHandler = () => {
-    setIsFloorPlanPopupOpen(true);
-  };
-
-  const floorPlanPopupCloseHandler = () => {
-    setIsFloorPlanPopupOpen(false);
-  };
-
-  const t = {
-    allPhotos: prop.translations?.allPhotos || "Alle Fotos",
-    map: prop.translations?.map || "Karte",
-    grundriss: prop.translations?.grundriss || "Grundriss",
-  };
-
-  return (
-    <div className="col-8 Pimagelist ">
-      <div
-        className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
-        style={{
-          backgroundImage: `url(${prop.pictureUrls[currentImageIndex]?.url})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        {/* Arrows on the main image */}
-        <div
-          className="rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center"
-          role="button"
-          onClick={() => handleArrowClickInMainImage("left")}
-        >
-          <img src={blcIconArrowLeft} className="blackArrow" alt="Left Arrow" />
-        </div>
-        <div
-          role="button"
-          className="rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center"
-          onClick={() => handleArrowClickInMainImage("right")}
-        >
-          <img
-            src={blcIconArrowRight}
-            className="blackArrow"
-            alt="Right Arrow"
-          />
-        </div>
-      </div>
-
-      {/* Image Thumbnails */}
-      <div className="d-none d-md-block">
-        <div className="mt-1 d-flex flex-row gap-1 col-12 secondList">
-          <div className="	col-lg-6  col-6 d-flex flex-row py-0 px-1">
-            <div className="	 col-12 position-relative d-flex justify-content-center">
-              <div
-                className="col-1 h-100 d-flex position-absolute start-0"
-                onClick={() => handleArrowClickInMainImage("left")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                  <img
-                    src={iconArrowLeft}
-                    className="arroIconColour"
-                    alt="Left Arrow"
-                  />
-                </div>
-              </div>
-              <div
-                className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden"
-                ref={imageListRef}
-              >
-                {prop.pictureUrls.length > 0 && (
-                  <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
-                    {prop.pictureUrls.map((picture, index) => (
-                      <div
-                        key={index}
-                        className={`col-lg-12 h-100 d-flex image-thumbnail ${
-                          index === currentImageIndex
-                            ? "selected"
-                            : "greyed-out"
-                        } ${
-                          index === 0
-                            ? "ms-1"
-                            : index === prop.pictureUrls.length - 1
-                            ? "me-1"
-                            : ""
-                        }`}
-                        onClick={() => {
-                          setCurrentImageIndex(index);
-                          imageListRef.current!.scrollTo({
-                            left: index * 150,
-                            behavior: "smooth",
-                          });
-                        }}
-                        role="button"
-                      >
-                        <img
-                          src={picture.url}
-                          alt={`Image ${index + 1}`}
-                          className="col-12 h-100 rounded-3 object-fit-cover"
-                        />
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <div
-                className="col-1 h-100 d-flex position-absolute end-0 top-0"
-                onClick={() => handleArrowClickInMainImage("right")}
-                role="button"
-              >
-                <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                  <img
-                    src={iconArrowRight}
-                    className="arroIconColour "
-                    alt="Right Arrow"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
-          <div className="col-7 col-lg-6 d-flex flex-row">
-            <div
-              className="col-lg-4 col-4 py-0 px-1"
-              role="button"
-              onClick={toggleAllPhotos}
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconGallery} alt="Gallery Icon" />
-                <span className="listImgText"> {t.allPhotos}</span>
-              </div>
-            </div>
-            <div
-              className="col-lg-4 col-3 py-0 px-1"
-              role="button"
-              onClick={floorPlanClickHandler}
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconLayers} alt="Layers Icon" />
-                <span className="listImgText">{t.grundriss}</span>
-              </div>
-            </div>
-            <div
-              className="col-lg-4 col-3 py-0 px-1"
-              role="button"
-              onClick={() =>
-                window.scrollTo({
-                  top: document.documentElement.scrollHeight,
-                })
-              }
-            >
-              <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
-                <img src={iconMap} alt="Map Icon" />
-                <span className="listImgText">{t.map}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {/* Popup for all photos */}
-      {isImagePopupOpen && (
-        <ImageListPopup
-          pictureUrls={prop.allPictureUrls}
-          onClose={() => setIsImagePopupOpen(false)}
-        />
-      )}
-
-      {/* Popup for floor plan */}
-      {isFloorPlanPopupOpen && (
-        <ImageListPopup
-          pictureUrls={floorPlanImages}
-          onClose={() => setIsFloorPlanPopupOpen(false)}
-        />
-      )}
-    </div>
-  );
-}