nestiq-component-library 1.1.58 → 1.1.60

package/src/components/MessagePopup/MessagePopUp.tsx

@@ -1,156 +1,156 @@
-import React, { useEffect, useState } from "react";
-import x from "../../assets/Images/icon_close_2.png";
-import mail_icon from "../../assets/Images/mail-icon.png";
-import "../MessagePopup/MessagePopUp.css";
-import { MessageModel } from "../../models/message.model";
-
-interface PopupProps {
-  sellerFirstName: string;
-  sellerLastName: string;
-  onCloseClick: () => void;
-  themesList: any;
-  onSubmit: (formValues: MessageModel) => void;
-}
-
-export default function MessagePopUp(props: PopupProps) {
-  const [themeId, setThemeId] = useState("");
-  const [subject, setSubject] = useState("");
-  const [messageText, setMessageText] = useState("");
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-
-  const handleClose = () => {
-    props.onCloseClick();
-  };
-  function handleSendMessage() {
-    props.onSubmit({ themeId, subject, messageText, firstName, lastName });
-  }
-
-  useEffect(() => {
-    const user = JSON.parse(localStorage.getItem("user") || "{}");
-    if (user) {
-      setFirstName(user.firstname || "");
-      setLastName(user.lastname || "");
-    }
-  }, []);
-  return (
-    <div>
-      <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.sellerFirstName} {props.sellerLastName}
-              </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>
-                    {props.themesList.map(
-                      (theme: { id: string; name: string }) => (
-                        <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={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={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>
-    </div>
-  );
-}
+import React, { useEffect, useState } from "react";
+import x from "../../assets/Images/icon_close_2.png";
+import mail_icon from "../../assets/Images/mail-icon.png";
+import "../MessagePopup/MessagePopUp.css";
+import { MessageModel } from "../../models/message.model";
+
+interface PopupProps {
+  sellerFirstName: string;
+  sellerLastName: string;
+  onCloseClick: () => void;
+  themesList: any;
+  onSubmit: (formValues: MessageModel) => void;
+}
+
+export default function MessagePopUp(props: PopupProps) {
+  const [themeId, setThemeId] = useState("");
+  const [subject, setSubject] = useState("");
+  const [messageText, setMessageText] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+
+  const handleClose = () => {
+    props.onCloseClick();
+  };
+  function handleSendMessage() {
+    props.onSubmit({ themeId, subject, messageText, firstName, lastName });
+  }
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("user") || "{}");
+    if (user) {
+      setFirstName(user.firstname || "");
+      setLastName(user.lastname || "");
+    }
+  }, []);
+  return (
+    <div>
+      <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.sellerFirstName} {props.sellerLastName}
+              </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>
+                    {props.themesList.map(
+                      (theme: { id: string; name: string }) => (
+                        <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={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={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>
+    </div>
+  );
+}