nestiq-component-library 1.1.57 → 1.1.59

package/dist/index.js

@@ -453,174 +453,30 @@ var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
 
 var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
 
-var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
-
-var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
-
-var css_248z$1 = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 2000; /* Ensure it's above other content */\r\n}\r\n\r\n.shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_success-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.main_button {\r\n width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width: 18rem;\r\n  align-self: center;\r\n  align-content: center;\r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button {\r\n  width: 260px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n  height: 713px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1000px;\r\n}\r\n.lightertxt {\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(\r\n    to top,\r\n    rgba(255, 0, 0, 0),\r\n    rgba(255, 0, 0, 1)\r\n  );\r\n}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n/* */\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .Account-popup {\r\n    height: 650px !important;\r\n    padding: 10px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n    width: 90vw;\r\n  }\r\n  .filter {\r\n  height: 260px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.middle-text {\r\n  margin: 5px 25px;\r\n}\r\n.loginFilter {\r\n  height: 180px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n}\r\n";
-styleInject(css_248z$1);
-
-var icon_checkmark = "/static/media/icon_checkmark.9b48c4a4bc651b08.svg";
-
-function SuccessPopUp$1(props) {
-    var _a = React.useState(true), showSuccessPopUp = _a[0], setShowSuccessPopUp = _a[1];
-    var handleClose = function () {
-        props.onClick();
-    };
-    var handleSendMessage = function () {
-        setShowSuccessPopUp(false);
-    };
-    return (React.createElement("div", null, showSuccessPopUp && (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "shareSection-Success  d-flex  flex-column  col-7 " },
-            React.createElement("img", { src: x$1, alt: "close", className: "closeIcon d-flex flex-column align-self-end ms-5 ", onClick: handleClose }),
-            React.createElement("div", { className: " d-flex flex-column align-self-center ms-5 " },
-                React.createElement("img", { src: icon_checkmark, alt: "facebook", className: " mb-4" })),
-            React.createElement("div", { className: "popUpHeader d-flex flex-column col- text-center text-wrap mb-5 align-self-center" },
-                React.createElement("span", null, "  Herzlichen Gl\u00FCckwunsch! "),
-                React.createElement("span", null, "   Deine Nachricht wurde erfolgreich gesendet. ")),
-            React.createElement("div", { className: "d-flex flex-column mt-4 mb-4" },
-                React.createElement("span", { className: "text-center ms-5 text-wrap" }, "Neben vielen weiteren Einstellungen und Aktionen kannst du die Antwort auf deine Nachricht in deinem Control Center einsehen, sobald der Verk\u00E4ufer darauf reagiert hat.")),
-            React.createElement("div", { className: " d-flex flex-row align-self-center " },
-                React.createElement("button", { className: "d-flex button_success-left col-sm-5  border-0  rounded-4", type: "button", id: "button", onClick: handleSendMessage },
-                    React.createElement("strong", null, "  Zum Control Center")),
-                React.createElement("button", { className: "button_success-right col-sm-3 border-1 ms-3 rounded-4", type: "button", id: "button" },
-                    React.createElement("strong", null, "Abbrechen"))))))));
-}
-
-var warning = "/static/media/warning.6f99cb4c6a048b47.svg";
-
-function SuccessPopUp(props) {
-    var handleClose = function () {
-        props.onClick();
-    };
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "shareSection-Error  d-flex  flex-column col-6 " },
-            React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end ms-5 ", onClick: handleClose }),
-            React.createElement("div", { className: " d-flex flex-column align-self-center ms-5 " },
-                React.createElement("img", { src: warning, alt: "facebook", className: " mb-4" })),
-            React.createElement("div", { className: "popUpHeader d-flex flex-column col- text-center text-wrap mb-1 align-self-center" },
-                React.createElement("span", null, "   Oops! Etwas ist schiefgelaufen.")),
-            React.createElement("div", { className: "d-flex flex-column mt-4 mb-4" },
-                React.createElement("span", { className: "text-center ms-5 text-wrap" }, "Beim Senden deiner Nachricht ist ein Fehler aufgetreten. Wenn das Problem weiterhin besteht, kontaktiere uns unter support@nestiq.de")),
-            React.createElement("div", { className: " d-flex flex-row align-self-center " },
-                React.createElement("button", { className: "d-flex button_success-left col-sm-5  border-0  rounded-4", type: "button", id: "button" },
-                    React.createElement("strong", null, "  Erneut versuchen")),
-                React.createElement("button", { className: "button_success-right w-50 border-1 ms-3 rounded-4", type: "button", id: "button" },
-                    React.createElement("strong", null, "  Support kontaktieren"))))));
-}
-
-var css_248z = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 9998; /* Ensure it's above other content */\r\n}\r\n\r\n.MessageShareSections {\r\n  height: 550px;\r\n  padding: 10px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n  align-content: center;\r\n  justify-content: center;\r\n  justify-items: center;\r\n  justify-self: center;\r\n}\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .popup-overlay {\r\n    /* Fixed position to cover the whole screen */\r\n\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n\r\n    z-index: 9998; /* Ensure it's above other content */\r\n  }\r\n\r\n  .MessageShareSections {\r\n    height: 650px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n  }\r\n  .button_icon-left {\r\n    width: 90px;\r\n    height: 43px;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  }\r\n  .button-text {\r\n    width: 85px;\r\n    height: 19px;\r\n    flex-grow: 0;\r\n    font-family: Inter;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    font-stretch: normal;\r\n    font-style: normal;\r\n    line-height: normal;\r\n    letter-spacing: normal;\r\n    text-align: center;\r\n  }\r\n  .button_icon-right {\r\n    width: 184px;\r\n  }\r\n  .circle {\r\n    height: 55px;\r\n    width: 55px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    border-color: #000;\r\n    border-width: 2px;\r\n  }\r\n  .button_icon-left {\r\n    width: 184px;\r\n  }\r\n}\r\n";
-styleInject(css_248z);
-
-function MessagePopUp(props) {
-    var _a = React.useState(); _a[0]; _a[1];
-    var _b = React.useState(false), showSuccessPopUp = _b[0], setShowSuccessPopUp = _b[1];
-    var _c = React.useState(false), showErrorPopUp = _c[0], setShowErrorPopUp = _c[1];
-    var _d = React.useState(""), themeId = _d[0], setThemeId = _d[1];
-    var _e = React.useState(""), subject = _e[0], setSubject = _e[1];
-    var _f = React.useState(""), messageText = _f[0], setMessageText = _f[1];
-    var _g = React.useState(""), firstName = _g[0], setFirstName = _g[1];
-    var _h = React.useState(""), lastName = _h[0], setLastName = _h[1];
-    var handleClose = function () {
-        props.onClick();
-    };
-    function handleSendMessage() {
-        props.sendDataToParent(themeId, subject, messageText, firstName, lastName);
-        console.log("message sent", themeId, subject, messageText, firstName, lastName);
-    }
-    React.useEffect(function () {
-        var user = JSON.parse(localStorage.getItem("user") || "{}");
-        if (user) {
-            setFirstName(user.firstname || "");
-            setLastName(user.lastname || "");
-        }
-        else if (!user) {
-            console.log("no user");
-        }
-    }, []);
-    return (React.createElement("div", null,
-        React.createElement("div", { className: "popup-overlay" },
-            React.createElement("div", { className: "MessageShareSections d-flex flex-column  col-10 col-lg-7" },
-                React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
-                React.createElement("div", { className: "" },
-                    React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
-                        React.createElement("div", { className: "circle align-self-center ms-md-2  me-4" },
-                            React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
-                                    alignSelf: "center",
-                                    justifyContent: "center",
-                                    margin: "14px",
-                                    width: "25px",
-                                    height: "20px",
-                                } })),
-                        React.createElement("div", { className: "popUpHeader d-flex flex-column  text-wrap mb-md-1 " },
-                            "Nachricht senden ",
-                            firstName,
-                            " ",
-                            lastName)),
-                    React.createElement("div", { className: "d-flex flex-md-row  flex-column ms-md-5  mt-md-0   " },
-                        React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start" },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
-                            React.createElement("div", null,
-                                React.createElement("select", { name: "theme", id: "theme", className: "mb-md-4 col-md-11 col-12", style: { height: "42px" }, value: themeId, onChange: function (e) { return setThemeId(e.target.value); } },
-                                    React.createElement("option", { value: "" }, "Select a theme"),
-                                    props.themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
-                        React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
-                            React.createElement("div", null),
-                            React.createElement("textarea", { className: "popup_textarea col-12 col-md-10  mb-md-0 mt-2 ", placeholder: "Betreff deiner Nachricht", style: { height: "42px" }, value: subject, onChange: function (e) { return setSubject(e.target.value); } }))),
-                    React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
-                        React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
-                        React.createElement("textarea", { className: "popup_textarea mb-md-4 col-md-11 col-12 ", placeholder: "Deine Nachricht hier...", value: messageText, onChange: function (e) { return setMessageText(e.target.value); } })),
-                    React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
-                        React.createElement("div", { className: "d-flex flex-column  col me-4 w-100" },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
-                            React.createElement("input", { className: "popup_textarea mb-md-4  col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: firstName, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
-                        React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
-                            React.createElement("input", { className: "popup_textarea col-12 mb-4 col-md-10", placeholder: "Dein Nachname", type: "text", value: lastName, onChange: function (e) { return setLastName(e.target.value); }, style: { height: "42px" } }))),
-                    React.createElement("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" },
-                        React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: handleSendMessage },
-                            React.createElement("strong", null, "Nachricht senden")),
-                        React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
-                            React.createElement("strong", null, "Abbrechen")))))),
-        showSuccessPopUp && (React.createElement(SuccessPopUp$1, { onClick: function () { return setShowSuccessPopUp(false); } })),
-        showErrorPopUp && (React.createElement(SuccessPopUp, { onClick: function () { return setShowErrorPopUp(false); } }))));
-}
-
 function PropertyCard(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = React.useState(false); _h[0]; _h[1];
-    var _j = React.useState(null), mainImage = _j[0], setMainImage = _j[1];
-    var _k = React.useState(0), currentImageIndex = _k[0], setCurrentImageIndex = _k[1];
+    var _a, _b, _c, _d, _e, _f;
+    var _g = React.useState(false); _g[0]; _g[1];
+    var _h = React.useState(null), mainImage = _h[0], setMainImage = _h[1];
+    var _j = React.useState(0), currentImageIndex = _j[0], setCurrentImageIndex = _j[1];
     var imageListRef = React.useRef(null);
-    var _l = React.useState(false), floorPlan = _l[0], setFloorPlan = _l[1];
-    var _m = React.useState(false), messagePopUp = _m[0], setMessagPopUp = _m[1];
-    var _o = React.useState(false), sharePopUp = _o[0], setSharePopUp = _o[1];
-    var _p = React.useState(""); _p[0]; var setThemeId = _p[1];
-    var _q = React.useState(""); _q[0]; var setSubject = _q[1];
-    var _r = React.useState(""); _r[0]; var setMessageText = _r[1];
-    var _s = React.useState(""); _s[0]; var setFirstName = _s[1];
-    var _t = React.useState(""); _t[0]; var setLastName = _t[1];
+    var _k = React.useState(false), floorPlan = _k[0], setFloorPlan = _k[1];
+    var _l = React.useState(false); _l[0]; _l[1];
+    var _m = React.useState(false); _m[0]; var setSharePopUp = _m[1];
     var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
         ? props.property.pictures.map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
         : [noImageIcon];
     var floorPlanOnClick = function () {
-        setFloorPlan(true);
+        if (props.floorPlanUrl) {
+            setFloorPlan(true);
+        }
     };
     var handleMessagPopUp = function () {
-        setMessagPopUp(true);
-        console.log("messagePopUp", messagePopUp);
+        // setMessagPopUp(true);
+        props.messageOnClick();
     };
     var handleSharePopUp = function () {
         setSharePopUp(true);
-        console.log("sharePopUp", sharePopUp);
     };
-    function handleDataFromChild(firstName, lastName, themeId, subject, messageText) {
-        setFirstName(firstName);
-        setLastName(lastName);
-        setThemeId(themeId);
-        setSubject(subject);
-        setMessageText(messageText);
-    }
     var handleArrowClickInMainImage = function (direction) {
         if (!props.property || pictureUrls.length === 0)
             return;
@@ -724,9 +580,109 @@ function PropertyCard(props) {
                     React.createElement("span", null, "McGrath"),
                     React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
                         React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen "))))),
-        floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: ((_g = props.property.pictures[0]) === null || _g === void 0 ? void 0 : _g.contentUrl) || noImageIcon, onCloseClick: function () { return setFloorPlan(false); } })),
-        messagePopUp && (React.createElement(MessagePopUp, { onClick: function () { return setMessagPopUp(false); }, handleSendMessage: props.handleSendMessage, firstname: props.firstname, lastname: props.lastname, themesList: props.themesList, sendDataToParent: handleDataFromChild })),
-        sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
+        floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: props.floorPlanUrl, onCloseClick: function () { return setFloorPlan(false); } }))));
+}
+
+var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
+
+var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
+
+var css_248z$1 = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 9998; /* Ensure it's above other content */\r\n}\r\n\r\n.MessageShareSections {\r\n  height: 550px;\r\n  padding: 10px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n  align-content: center;\r\n  justify-content: center;\r\n  justify-items: center;\r\n  justify-self: center;\r\n}\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .popup-overlay {\r\n    /* Fixed position to cover the whole screen */\r\n\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n\r\n    z-index: 9998; /* Ensure it's above other content */\r\n  }\r\n\r\n  .MessageShareSections {\r\n    height: 650px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n  }\r\n  .button_icon-left {\r\n    width: 90px;\r\n    height: 43px;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  }\r\n  .button-text {\r\n    width: 85px;\r\n    height: 19px;\r\n    flex-grow: 0;\r\n    font-family: Inter;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    font-stretch: normal;\r\n    font-style: normal;\r\n    line-height: normal;\r\n    letter-spacing: normal;\r\n    text-align: center;\r\n  }\r\n  .button_icon-right {\r\n    width: 184px;\r\n  }\r\n  .circle {\r\n    height: 55px;\r\n    width: 55px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    border-color: #000;\r\n    border-width: 2px;\r\n  }\r\n  .button_icon-left {\r\n    width: 184px;\r\n  }\r\n}\r\n";
+styleInject(css_248z$1);
+
+function MessagePopUp(props) {
+    var _a = React.useState(""), themeId = _a[0], setThemeId = _a[1];
+    var _b = React.useState(""), subject = _b[0], setSubject = _b[1];
+    var _c = React.useState(""), messageText = _c[0], setMessageText = _c[1];
+    var _d = React.useState(""), firstName = _d[0], setFirstName = _d[1];
+    var _e = React.useState(""), lastName = _e[0], setLastName = _e[1];
+    var handleClose = function () {
+        props.onCloseClick();
+    };
+    function handleSendMessage() {
+        props.onSubmit({ themeId: themeId, subject: subject, messageText: messageText, firstName: firstName, lastName: lastName });
+    }
+    React.useEffect(function () {
+        var user = JSON.parse(localStorage.getItem("user") || "{}");
+        if (user) {
+            setFirstName(user.firstname || "");
+            setLastName(user.lastname || "");
+        }
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "popup-overlay" },
+            React.createElement("div", { className: "MessageShareSections d-flex flex-column  col-10 col-lg-7" },
+                React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
+                React.createElement("div", { className: "" },
+                    React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
+                        React.createElement("div", { className: "circle align-self-center ms-md-2  me-4" },
+                            React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
+                                    alignSelf: "center",
+                                    justifyContent: "center",
+                                    margin: "14px",
+                                    width: "25px",
+                                    height: "20px",
+                                } })),
+                        React.createElement("div", { className: "popUpHeader d-flex flex-column  text-wrap mb-md-1 " },
+                            "Nachricht senden ",
+                            props.sellerFirstName,
+                            " ",
+                            props.sellerLastName)),
+                    React.createElement("div", { className: "d-flex flex-md-row  flex-column ms-md-5  mt-md-0   " },
+                        React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start" },
+                            React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
+                            React.createElement("div", null,
+                                React.createElement("select", { name: "theme", id: "theme", className: "mb-md-4 col-md-11 col-12", style: { height: "42px" }, value: themeId, onChange: function (e) { return setThemeId(e.target.value); } },
+                                    React.createElement("option", { value: "" }, "Select a theme"),
+                                    props.themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
+                        React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
+                            React.createElement("div", null),
+                            React.createElement("textarea", { className: "popup_textarea col-12 col-md-10  mb-md-0 mt-2 ", placeholder: "Betreff deiner Nachricht", style: { height: "42px" }, value: subject, onChange: function (e) { return setSubject(e.target.value); } }))),
+                    React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
+                        React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
+                        React.createElement("textarea", { className: "popup_textarea mb-md-4 col-md-11 col-12 ", placeholder: "Deine Nachricht hier...", value: messageText, onChange: function (e) { return setMessageText(e.target.value); } })),
+                    React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
+                        React.createElement("div", { className: "d-flex flex-column  col me-4 w-100" },
+                            React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
+                            React.createElement("input", { className: "popup_textarea mb-md-4  col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: firstName, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
+                        React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
+                            React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
+                            React.createElement("input", { className: "popup_textarea col-12 mb-4 col-md-10", placeholder: "Dein Nachname", type: "text", value: lastName, onChange: function (e) { return setLastName(e.target.value); }, style: { height: "42px" } }))),
+                    React.createElement("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" },
+                        React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: handleSendMessage },
+                            React.createElement("strong", null, "Nachricht senden")),
+                        React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
+                            React.createElement("strong", null, "Abbrechen"))))))));
+}
+
+var css_248z = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 2000; /* Ensure it's above other content */\r\n}\r\n\r\n.shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_success-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.main_button {\r\n width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width: 18rem;\r\n  align-self: center;\r\n  align-content: center;\r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button {\r\n  width: 260px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n  height: 713px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1000px;\r\n}\r\n.lightertxt {\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(\r\n    to top,\r\n    rgba(255, 0, 0, 0),\r\n    rgba(255, 0, 0, 1)\r\n  );\r\n}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n/* */\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .Account-popup {\r\n    height: 650px !important;\r\n    padding: 10px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n    width: 90vw;\r\n  }\r\n  .filter {\r\n  height: 260px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.middle-text {\r\n  margin: 5px 25px;\r\n}\r\n.loginFilter {\r\n  height: 180px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n}\r\n";
+styleInject(css_248z);
+
+var icon_checkmark = "/static/media/icon_checkmark.9b48c4a4bc651b08.svg";
+
+function SuccessPopUp(props) {
+    var _a = React.useState(true), showSuccessPopUp = _a[0], setShowSuccessPopUp = _a[1];
+    var handleClose = function () {
+        props.onClick();
+    };
+    var handleSendMessage = function () {
+        setShowSuccessPopUp(false);
+    };
+    return (React.createElement("div", null, showSuccessPopUp && (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "shareSection-Success  d-flex  flex-column  col-7 " },
+            React.createElement("img", { src: x$1, alt: "close", className: "closeIcon d-flex flex-column align-self-end ms-5 ", onClick: handleClose }),
+            React.createElement("div", { className: " d-flex flex-column align-self-center ms-5 " },
+                React.createElement("img", { src: icon_checkmark, alt: "facebook", className: " mb-4" })),
+            React.createElement("div", { className: "popUpHeader d-flex flex-column col- text-center text-wrap mb-5 align-self-center" },
+                React.createElement("span", null, "  Herzlichen Gl\u00FCckwunsch! "),
+                React.createElement("span", null, "   Deine Nachricht wurde erfolgreich gesendet. ")),
+            React.createElement("div", { className: "d-flex flex-column mt-4 mb-4" },
+                React.createElement("span", { className: "text-center ms-5 text-wrap" }, "Neben vielen weiteren Einstellungen und Aktionen kannst du die Antwort auf deine Nachricht in deinem Control Center einsehen, sobald der Verk\u00E4ufer darauf reagiert hat.")),
+            React.createElement("div", { className: " d-flex flex-row align-self-center " },
+                React.createElement("button", { className: "d-flex button_success-left col-sm-5  border-0  rounded-4", type: "button", id: "button", onClick: handleSendMessage },
+                    React.createElement("strong", null, "  Zum Control Center")),
+                React.createElement("button", { className: "button_success-right col-sm-3 border-1 ms-3 rounded-4", type: "button", id: "button" },
+                    React.createElement("strong", null, "Abbrechen"))))))));
 }
 
 // Utility function to show a toast
@@ -745,6 +701,7 @@ exports.PropertyCard = PropertyCard$1;
 exports.PropertyDetailsHeader = PropertyDetailsHeader;
 exports.PropertyImageList = PropertyImageList;
 exports.SharePopup = SharePopup;
+exports.SuccessPopup = SuccessPopUp;
 exports.ToastWrapper = ToastWrapper;
 exports.formatPrice = formatPrice;
 exports.formatPropertyArea = formatPropertyArea;