nestiq-component-library 1.1.172 → 1.2.0

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -1,154 +0,0 @@
-import "./ImageListPopup.css";
-import React, { useRef, useState } from "react";
-import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
-import blcIconArrowLeft from "../../assets/images/blckarrow-Left.svg";
-import iconClose from "../../assets/images/close.png";
-import "../../styles/common.css";
-
-interface PopupProps {
-  pictureUrls: { title: string; url: string }[];
-  onClose?: () => void;
-}
-
-export default function ImageListPopup(props: PopupProps) {
-  const [showPopUp, setShowPopUp] = useState(true);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const imageListRef = useRef<HTMLDivElement | null>(null);
-
-  const handleArrowClickInMainImage = (direction: any) => {
-    if (props.pictureUrls.length === 0) return;
-
-    let newIndex = currentImageIndex;
-    if (direction === "left") {
-      newIndex =
-        (currentImageIndex - 1 + props.pictureUrls.length) %
-        props.pictureUrls.length;
-    } else if (direction === "right") {
-      newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
-    }
-
-    setCurrentImageIndex(newIndex);
-
-    imageListRef.current!.scrollTo({
-      left: newIndex * 150,
-      behavior: "smooth",
-    });
-  };
-
-  const handleClose = () => {
-    if (props.onClose) {
-      props.onClose();
-    }
-  };
-
-  return (
-    <div>
-      {showPopUp && (
-        <div className="popup-overlay">
-          <div className=" d-flex  flex-column  ">
-            <div className="d-flex  align-self-end me-5 ">
-              <img
-                src={iconClose}
-                alt="close"
-                className="closeIconNestiq"
-                onClick={handleClose}
-              />
-            </div>
-            <span className="text-white align-self-center">
-              {props.pictureUrls[currentImageIndex].title}
-            </span>
-            <div className="d-flex justify-content-center">
-              <div className="p-2 bd-highlight align-self-center align-items-center me-5">
-                <div
-                  className="rounded-circle border onImageArrow d-flex  justify-content-center"
-                  role="button"
-                  onClick={() => handleArrowClickInMainImage("left")}
-                >
-                  <img
-                    src={blcIconArrowLeft}
-                    className="blackArrow align-self-center"
-                    alt="Left Arrow"
-                  />
-                </div>
-              </div>
-              <div className="p-2 bd-highlight">
-                <div
-                  className=" rounded-5"
-                  style={{
-                    backgroundImage: `url(${props.pictureUrls[currentImageIndex].url})`,
-                    height: "465px",
-                    width: "880px",
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                  }}
-                ></div>
-              </div>
-              <div className="p-2 bd-highlight align-self-center ms-5">
-                {" "}
-                <div
-                  role="button"
-                  className="rounded-circle border onImageArrow d-flex justify-content-center"
-                  onClick={() => handleArrowClickInMainImage("right")}
-                >
-                  <img
-                    src={blcIconArrowRight}
-                    className="blackArrow align-self-center"
-                    alt="Right Arrow"
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="d-flex flex-row">
-              {/* Arrows on the main image */}
-            </div>
-            <div className="d-flex flex-row justify-content-center w-100 mt-5">
-              <div
-                className="d-flex flex-row gap-4 overflow-auto px-3"
-                ref={imageListRef}
-                style={{
-                  maxWidth: "100%",
-                  scrollbarWidth: "thin",
-                }}
-              >
-                {props.pictureUrls.length > 0 && (
-                  <>
-                    {props.pictureUrls.map((picture, index) => (
-                      <div
-                        key={index}
-                        className={`flex-shrink-0 activeStyle ${
-                          index === currentImageIndex ? "active" : ""
-                        }`}
-                        onClick={() => {
-                          setCurrentImageIndex(index);
-                          imageListRef.current!.scrollTo({
-                            left: index * 170, // 150px width + gap
-                            behavior: "smooth",
-                          });
-                        }}
-                        role="button"
-                        style={{
-                          cursor: "pointer",
-                          width: "150px",
-                          height: "150px",
-                        }}
-                      >
-                        <img
-                          src={picture.url}
-                          alt={`Image ${index + 1}`}
-                          className="w-100 h-100 rounded-3 object-fit-cover"
-                          style={{
-                            display: "block",
-                          }}
-                        />
-                      </div>
-                    ))}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/MessagePopup/MessagePopUp.css

@@ -1,196 +0,0 @@
-.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;
-  max-width: 1280px;
-}
-.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;
-  right: 0;
-  z-index: 1;
-  background-image: var(--gradient);
-  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

@@ -1,160 +0,0 @@
-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;
-  userData:{
-    firstname: string;
-    lastname: string;
-  };
-}
-
-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.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>
-                    {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>
-  );
-}