nestiq-component-library 1.1.46 → 1.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/MessagePopup/MessagePopUp.d.ts +2 -2
- package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +5 -0
- package/dist/index.es.js +68 -65
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +68 -65
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/MessagePopup/MessagePopUp.tsx +8 -8
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +18 -6
package/dist/index.js
CHANGED
|
@@ -453,6 +453,70 @@ var arrowRight = "/static/media/card-arrow-right.c60af4cbbd49f3aa.svg";
|
|
|
453
453
|
|
|
454
454
|
var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
|
|
455
455
|
|
|
456
|
+
var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
|
|
457
|
+
|
|
458
|
+
var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
|
|
459
|
+
|
|
460
|
+
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";
|
|
461
|
+
styleInject(css_248z);
|
|
462
|
+
|
|
463
|
+
function MessagePopUp(props) {
|
|
464
|
+
var _a, _b;
|
|
465
|
+
var _c = React.useState(), showMessagePopUp = _c[0]; _c[1];
|
|
466
|
+
var _d = React.useState(false); _d[0]; _d[1];
|
|
467
|
+
var _e = React.useState(false); _e[0]; _e[1];
|
|
468
|
+
var _f = React.useState(""), themeId = _f[0], setThemeId = _f[1];
|
|
469
|
+
var _g = React.useState(""), subject = _g[0], setSubject = _g[1];
|
|
470
|
+
var _h = React.useState(""), messageText = _h[0], setMessageText = _h[1];
|
|
471
|
+
var _j = React.useState(""); _j[0]; var setFirstName = _j[1];
|
|
472
|
+
var _k = React.useState(""), lastName = _k[0], setLastName = _k[1];
|
|
473
|
+
var _l = React.useState([]), themesList = _l[0]; _l[1];
|
|
474
|
+
var handleClose = props.onClick;
|
|
475
|
+
return (React.createElement("div", null, showMessagePopUp && (React.createElement("div", { className: "popup-overlay" },
|
|
476
|
+
React.createElement("div", { className: "MessageShareSections d-flex flex-column col-10 col-lg-7" },
|
|
477
|
+
React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
|
|
478
|
+
React.createElement("div", { className: "" },
|
|
479
|
+
React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
|
|
480
|
+
React.createElement("div", { className: "circle align-self-center ms-md-2 me-4" },
|
|
481
|
+
React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
|
|
482
|
+
alignSelf: "center",
|
|
483
|
+
justifyContent: "center",
|
|
484
|
+
margin: "14px",
|
|
485
|
+
width: "25px",
|
|
486
|
+
height: "20px",
|
|
487
|
+
} })),
|
|
488
|
+
React.createElement("div", { className: "popUpHeader d-flex flex-column text-wrap mb-md-1 " },
|
|
489
|
+
"Nachricht senden ", (_a = props.userData) === null || _a === void 0 ? void 0 :
|
|
490
|
+
_a.firstname,
|
|
491
|
+
" ", (_b = props.userData) === null || _b === void 0 ? void 0 :
|
|
492
|
+
_b.lastname)),
|
|
493
|
+
React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 mt-md-0 " },
|
|
494
|
+
React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4 col me-4 w-100 align-self-start justify-content-start" },
|
|
495
|
+
React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
|
|
496
|
+
React.createElement("div", null,
|
|
497
|
+
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); } },
|
|
498
|
+
React.createElement("option", { value: "" }, "Select a theme"),
|
|
499
|
+
themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
|
|
500
|
+
React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
|
|
501
|
+
React.createElement("div", null),
|
|
502
|
+
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); } }))),
|
|
503
|
+
React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
|
|
504
|
+
React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
|
|
505
|
+
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); } })),
|
|
506
|
+
React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
|
|
507
|
+
React.createElement("div", { className: "d-flex flex-column col me-4 w-100" },
|
|
508
|
+
React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
|
|
509
|
+
React.createElement("input", { className: "popup_textarea mb-md-4 col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: props === null || props === void 0 ? void 0 : props.userData.firstname, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
|
|
510
|
+
React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
|
|
511
|
+
React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
|
|
512
|
+
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" } }))),
|
|
513
|
+
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" },
|
|
514
|
+
React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: props.handleSendMessage },
|
|
515
|
+
React.createElement("strong", null, "Nachricht senden")),
|
|
516
|
+
React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
|
|
517
|
+
React.createElement("strong", null, "Abbrechen")))))))));
|
|
518
|
+
}
|
|
519
|
+
|
|
456
520
|
function PropertyCard(props) {
|
|
457
521
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
458
522
|
var _h = React.useState(false); _h[0]; _h[1];
|
|
@@ -460,7 +524,7 @@ function PropertyCard(props) {
|
|
|
460
524
|
var _k = React.useState(0), currentImageIndex = _k[0], setCurrentImageIndex = _k[1];
|
|
461
525
|
var imageListRef = React.useRef(null);
|
|
462
526
|
var _l = React.useState(false), floorPlan = _l[0], setFloorPlan = _l[1];
|
|
463
|
-
var _m = React.useState(false)
|
|
527
|
+
var _m = React.useState(false), messagePopUp = _m[0], setMessagPopUp = _m[1];
|
|
464
528
|
var _o = React.useState(false), sharePopUp = _o[0], setSharePopUp = _o[1];
|
|
465
529
|
var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
466
530
|
? props.property.pictures.map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
|
|
@@ -470,9 +534,11 @@ function PropertyCard(props) {
|
|
|
470
534
|
};
|
|
471
535
|
var handleMessagPopUp = function () {
|
|
472
536
|
setMessagPopUp(true);
|
|
537
|
+
console.log("messagePopUp", messagePopUp);
|
|
473
538
|
};
|
|
474
539
|
var handleSharePopUp = function () {
|
|
475
540
|
setSharePopUp(true);
|
|
541
|
+
console.log("sharePopUp", sharePopUp);
|
|
476
542
|
};
|
|
477
543
|
var handleArrowClickInMainImage = function (direction) {
|
|
478
544
|
if (!props.property || pictureUrls.length === 0)
|
|
@@ -578,73 +644,10 @@ function PropertyCard(props) {
|
|
|
578
644
|
React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
|
|
579
645
|
React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen "))))),
|
|
580
646
|
floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: ((_g = props.property.pictures[0]) === null || _g === void 0 ? void 0 : _g.contentUrl) || noImageIcon, onCloseClick: function () { return setFloorPlan(false); } })),
|
|
647
|
+
messagePopUp && (React.createElement(MessagePopUp, { onClick: function () { return setMessagPopUp(false); }, userData: props.userData, handleSendMessage: props.handleSendMessage })),
|
|
581
648
|
sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
|
|
582
649
|
}
|
|
583
650
|
|
|
584
|
-
var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
|
|
585
|
-
|
|
586
|
-
var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
|
|
587
|
-
|
|
588
|
-
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";
|
|
589
|
-
styleInject(css_248z);
|
|
590
|
-
|
|
591
|
-
function MessagePopUp(props) {
|
|
592
|
-
var _a, _b;
|
|
593
|
-
var _c = React.useState(), showMessagePopUp = _c[0]; _c[1];
|
|
594
|
-
var _d = React.useState(false); _d[0]; _d[1];
|
|
595
|
-
var _e = React.useState(false); _e[0]; _e[1];
|
|
596
|
-
var _f = React.useState(""), themeId = _f[0], setThemeId = _f[1];
|
|
597
|
-
var _g = React.useState(""), subject = _g[0], setSubject = _g[1];
|
|
598
|
-
var _h = React.useState(""), messageText = _h[0], setMessageText = _h[1];
|
|
599
|
-
var _j = React.useState(""); _j[0]; var setFirstName = _j[1];
|
|
600
|
-
var _k = React.useState(""), lastName = _k[0], setLastName = _k[1];
|
|
601
|
-
var _l = React.useState([]), themesList = _l[0]; _l[1];
|
|
602
|
-
var handleClose = props.onclose;
|
|
603
|
-
return (React.createElement("div", null, showMessagePopUp && (React.createElement("div", { className: "popup-overlay" },
|
|
604
|
-
React.createElement("div", { className: "MessageShareSections d-flex flex-column col-10 col-lg-7" },
|
|
605
|
-
React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
|
|
606
|
-
React.createElement("div", { className: "" },
|
|
607
|
-
React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
|
|
608
|
-
React.createElement("div", { className: "circle align-self-center ms-md-2 me-4" },
|
|
609
|
-
React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
|
|
610
|
-
alignSelf: "center",
|
|
611
|
-
justifyContent: "center",
|
|
612
|
-
margin: "14px",
|
|
613
|
-
width: "25px",
|
|
614
|
-
height: "20px",
|
|
615
|
-
} })),
|
|
616
|
-
React.createElement("div", { className: "popUpHeader d-flex flex-column text-wrap mb-md-1 " },
|
|
617
|
-
"Nachricht senden ", (_a = props.userdata) === null || _a === void 0 ? void 0 :
|
|
618
|
-
_a.firstname,
|
|
619
|
-
" ", (_b = props.userdata) === null || _b === void 0 ? void 0 :
|
|
620
|
-
_b.lastname)),
|
|
621
|
-
React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 mt-md-0 " },
|
|
622
|
-
React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4 col me-4 w-100 align-self-start justify-content-start" },
|
|
623
|
-
React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
|
|
624
|
-
React.createElement("div", null,
|
|
625
|
-
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); } },
|
|
626
|
-
React.createElement("option", { value: "" }, "Select a theme"),
|
|
627
|
-
themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
|
|
628
|
-
React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
|
|
629
|
-
React.createElement("div", null),
|
|
630
|
-
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); } }))),
|
|
631
|
-
React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
|
|
632
|
-
React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
|
|
633
|
-
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); } })),
|
|
634
|
-
React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
|
|
635
|
-
React.createElement("div", { className: "d-flex flex-column col me-4 w-100" },
|
|
636
|
-
React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
|
|
637
|
-
React.createElement("input", { className: "popup_textarea mb-md-4 col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: props === null || props === void 0 ? void 0 : props.userdata.firstname, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
|
|
638
|
-
React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
|
|
639
|
-
React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
|
|
640
|
-
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" } }))),
|
|
641
|
-
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" },
|
|
642
|
-
React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: props.handleSendMessage },
|
|
643
|
-
React.createElement("strong", null, "Nachricht senden")),
|
|
644
|
-
React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
|
|
645
|
-
React.createElement("strong", null, "Abbrechen")))))))));
|
|
646
|
-
}
|
|
647
|
-
|
|
648
651
|
// Utility function to show a toast
|
|
649
652
|
var showToast = function (message, type) {
|
|
650
653
|
if (type === void 0) { type = "info"; }
|