nestiq-component-library 1.1.44 → 1.1.46

package/src/components/MessagePopup/MessagePopUp.css

@@ -0,0 +1,196 @@
+.popup-overlay {
+  position: fixed; /* Fixed position to cover the whole screen */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex; /* Flexbox to center the popup */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  z-index: 9998; /* Ensure it's above other content */
+}
+
+.MessageShareSections {
+  height: 550px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #d7d9e3;
+  background-color: #fff;
+}
+.popUpHeader {
+  height: 48px;
+  font-size: 32px;
+  font-weight: 600;
+  color: #1b1b1b;
+}
+
+.closeIcon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.socialMediaIconsSection {
+  gap: 60px !important;
+}
+
+.socialMediaIcons {
+  width: 28px !important;
+  height: 28px !important;
+  cursor: pointer;
+}
+
+.socialMediaIconText {
+  height: 36px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 3;
+  color: #344041;
+  cursor: pointer;
+}
+
+.popup_search-input {
+  height: 60px;
+  padding-inline-end: 190px;
+  font-size: 20px;
+  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.popup_search-input::placeholder {
+  font-size: 20px;
+  color: rgba(140, 140, 140, 0.5);
+}
+
+.popup_search-input:focus {
+  outline: none;
+}
+
+.popupcustom-button {
+  height: 35px;
+  color: #000;
+  cursor: pointer;
+  border-color: var(--main-yellow);
+  right: 0;
+  z-index: 1;
+  background-color: var(--main-yellow);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.popup-tags {
+  font-size: large;
+  font-weight: bold;
+}
+.button_icon-left {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.button-text {
+  width: 85px;
+  height: 19px;
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+}
+.button_icon-right {
+  width: 184px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 16px;
+  border-color: #000;
+  background-color: transparent;
+}
+.circle {
+  height: 55px;
+  width: 55px;
+  background-color: transparent;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: #000;
+  border-width: 2px;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  justify-self: center;
+}
+@media (min-width: 375px) and (max-width: 667px) {
+  .popup-overlay {
+    /* Fixed position to cover the whole screen */
+
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    display: flex; /* Flexbox to center the popup */
+
+    z-index: 9998; /* Ensure it's above other content */
+  }
+
+  .MessageShareSections {
+    height: 650px;
+    border-radius: 16px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    border: solid 1px #d7d9e3;
+    background-color: #fff;
+  }
+  .button_icon-left {
+    width: 90px;
+    height: 43px;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 24px;
+    border-radius: 16px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  }
+  .button-text {
+    width: 85px;
+    height: 19px;
+    flex-grow: 0;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: center;
+  }
+  .button_icon-right {
+    width: 184px;
+  }
+  .circle {
+    height: 55px;
+    width: 55px;
+    background-color: transparent;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: #000;
+    border-width: 2px;
+  }
+  .button_icon-left {
+    width: 184px;
+  }
+}

package/src/components/MessagePopup/MessagePopUp.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+import x from "../../assets/Images/icon_close_2.png";
+import mail_icon from "../../assets/Images/mail-icon.png";
+// import SuccessPopUp from "./SuccessPopUp";
+// import ErrorPopUp from "./ErrorPopUp";
+import "./MessagePopUp.css";
+// import { showToast } from "nestiq-component-library";
+
+interface PopupProps {
+  onclose: any;
+  userdata: {
+    firstname: any;
+    lastname: String;
+  };
+  handleSendMessage:any;
+}
+
+export default function MessagePopUp(props:PopupProps) {
+
+  const [showMessagePopUp, setshowMessagePopUp]= useState();
+  const [showSuccessPopUp, setShowSuccessPopUp] = useState(false);
+  const [showErrorPopUp, setShowErrorPopUp] = useState(false);
+  const [themeId, setThemeId] = useState("");
+  const [subject, setSubject] = useState("");
+  const [messageText, setMessageText] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  interface Theme {
+    id: string;
+    name: string;
+  }
+
+  const [themesList, setThemesList] = useState<Theme[]>([]);
+
+  const handleClose = props.onclose;
+  return (
+    <div>
+      {showMessagePopUp && (
+        <div className="popup-overlay">
+          <div className="MessageShareSections d-flex flex-column  col-10 col-lg-7">
+            <img
+              src={x}
+              alt="close"
+              className="closeIcon d-flex flex-column align-self-end"
+              onClick={handleClose}
+            />
+            <div className="">
+              <div className="d-flex ms-md-5 mb-4">
+                <div className="circle align-self-center ms-md-2  me-4">
+                  <img
+                    src={mail_icon}
+                    alt="email"
+                    className="align-self-center"
+                    style={{
+                      alignSelf: "center",
+                      justifyContent: "center",
+                      margin: "14px",
+                      width: "25px",
+                      height: "20px",
+                    }}
+                  />
+                </div>
+                <div className="popUpHeader d-flex flex-column  text-wrap mb-md-1 ">
+                  Nachricht senden {props.userdata?.firstname}{" "}
+                  {props.userdata?.lastname}
+                </div>
+              </div>
+
+              <div className="d-flex flex-md-row  flex-column ms-md-5  mt-md-0   ">
+                <div className="d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start">
+                  <span className="popup-tags mb-2">Betreff:*</span>
+                  <div>
+                    <select
+                      name="theme"
+                      id="theme"
+                      className="mb-md-4 col-md-11 col-12"
+                      style={{ height: "42px" }}
+                      value={themeId}
+                      onChange={(e) => setThemeId(e.target.value)}
+                    >
+                      <option value="">Select a theme</option>
+                      {themesList.map((theme) => (
+                        <option key={theme.id} value={theme.id}>
+                          {theme.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+                <div className="d-flex flex-column mt-md-4 col me-4 w-100">
+                  <div></div>
+                  <textarea
+                    className="popup_textarea col-12 col-md-10  mb-md-0 mt-2 "
+                    placeholder="Betreff deiner Nachricht"
+                    style={{ height: "42px" }}
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="d-flex flex-column col ms-md-5 me-md-4">
+                <span className="popup-tags mb-2 ">Deine Nachricht:*</span>
+                <textarea
+                  className="popup_textarea mb-md-4 col-md-11 col-12 "
+                  placeholder="Deine Nachricht hier..."
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                />
+              </div>
+              {/* <div className="d-flex flex-column ms-5 me-5">
+                <span className="popup-tags mb-2">Thema auswählen:*</span>
+                
+              </div> */}
+              <div className="d-flex flex-md-row flex-column ms-md-5 ">
+                <div className="d-flex flex-column  col me-4 w-100">
+                  <span className="popup-tags mb-2">Vorname:</span>
+                  <input
+                    className="popup_textarea mb-md-4  col-12 col-md-11"
+                    placeholder="Dein Vorname"
+                    type="text"
+                    value={props?.userdata.firstname}
+                    onChange={(e) => setFirstName(e.target.value)}
+                    style={{ height: "42px" }}
+                  />
+                </div>
+                <div className="d-flex flex-column me-4 w-100 col ">
+                  <span className="popup-tags mb-2">Nachname:</span>
+                  <input
+                    className="popup_textarea col-12 mb-4 col-md-10"
+                    placeholder="Dein Nachname"
+                    type="text"
+                    value={lastName}
+                    onChange={(e) => setLastName(e.target.value)}
+                    style={{ height: "42px" }}
+                  />
+                </div>
+              </div>
+              <div className="d-flex gap-md-3 gap-3 flex-md-row flex-column align-self-center justify-content-center mb-4 mt-md-2">
+                <button
+                  className="main_button border-0 rounded-4 align-self-center "
+                  type="button"
+                  id="button"
+                  onClick={props.handleSendMessage}
+                >
+                  <strong>Nachricht senden</strong>
+                </button>
+                <button className="button_icon-right border-1 col-sm-3 align-self-center">
+                  <strong>Abbrechen</strong>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+{/* 
+      {showSuccessPopUp && (
+        <SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
+      )}
+      {showErrorPopUp && (
+        <ErrorPopUp onClick={() => setShowErrorPopUp(false)} />
+      )} */}
+    </div>
+  );
+}

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -31,6 +31,9 @@ interface PopupProps {
     evaluation?: {
       askingPrice: number;
     };
+    expose: {
+        title: string;
+        };
     pictures: { contentUrl: string }[];
   };
   onClick: any;
@@ -157,7 +160,7 @@ export default function PropertyCard(props: PopupProps) {
         </div>
         <div>
           <span className="propertyTitle align-items-start ">
-            {props.title}
+            {props.property.expose?.title}
           </span>
         </div>
         <div>

package/src/index.tsx

@@ -10,6 +10,7 @@ export { default as PropertyCard } from "./components/PropertyCard//PropertyCard
 export { default as SharePopup } from "./components/SharePopup/SharePopup";
 export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
 export { default as NewPropertyCard } from "./components/NewPropertyCard/NewPropertyCard";
+export { default as MessagePopUp } from "./components/MessagePopup/MessagePopUp";
 
 // TOASTER WRAPPER AND FUNCTION
 export {