contentoh-components-library 21.5.3 → 21.5.4

package/src/components/pages/MultipleEdition/components/ImageVisor.js

@@ -0,0 +1,143 @@
+import { useState, useEffect } from "react";
+import ReactImageFallback from "react-image-fallback";
+import { ImageContainer, ImageView } from "./styles.js";
+import ImageUploader from "./ImageUploader.js";
+import { getImageURL } from "../../../../global-files/utils.js";
+import defaultProductImage from "../../../../assets/images/defaultImages/defaultProductImage.png";
+import fullscreen from "../../../../assets/images/Icons/fullscreen.svg";
+import close from "../../../../assets/images/Icons/close.svg";
+import uploadFile from "../../../../assets/images/Icons/upload-file.svg";
+import deleteForever from "../../../../assets/images/Icons/delete-forever-white.svg";
+
+export const ImageVisor = ({
+  value,
+  name,
+  setModalFromTable,
+  setDataServices,
+  setModal,
+  ...props
+}) => {
+  const [smallSrc, setSmallSrc] = useState("");
+  function handleNewImage(imageFile) {
+    const payload = { ...props, ...imageFile };
+    setDataServices({ type: "updateImage", payload });
+  }
+
+  function handleUpdateImage(file) {
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        getImageDimensions(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  const getImageDimensions = (dataURL) => {
+    const img = new Image();
+    img.onload = () => {
+      const image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height,
+      };
+      handleNewImage(image);
+      changeVisor();
+    };
+    img.src = dataURL;
+  };
+
+  function changeVisor(view) {
+    if (!view) {
+      setModalFromTable(null);
+      return;
+    }
+    const isSmall = view === "small";
+    let src = isSmall
+      ? smallSrc
+      : `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value?.src}`;
+    setModalFromTable(
+      <ImageView visorView={view}>
+        <div className="header">
+          <p>{name}</p>
+          <div className="buttons">
+            {isSmall ? (
+              <>
+                {value?.src ? (
+                  <img
+                    src={fullscreen}
+                    alt="Ver en pantalla completa"
+                    onClick={() => changeVisor("fullscreen")}
+                  />
+                ) : null}
+                <img src={close} alt="Cerrar" onClick={() => changeVisor()} />
+              </>
+            ) : (
+              <>
+                <label className="borderCircle" htmlFor="fileInput">
+                  <img src={uploadFile} alt="Actualizar imagen" />
+                  <input
+                    type="file"
+                    id="fileInput"
+                    accept="image/png, image/jpeg"
+                    style={{ display: "none" }}
+                    onChange={(e) => handleUpdateImage(e.target.files[0])}
+                  />
+                </label>
+                <img
+                  className="borderCircle"
+                  src={deleteForever}
+                  alt="Eliminar imágen"
+                  onClick={() => {
+                    setModal({
+                      type: "delete",
+                      functions: { setModal, setDataServices },
+                      payload: props,
+                    });
+                    changeVisor();
+                  }}
+                />
+                <img
+                  className="borderCircle"
+                  src={close}
+                  alt="Cerrar"
+                  onClick={() => changeVisor("small")}
+                />
+              </>
+            )}
+          </div>
+        </div>
+        <div className="body">
+          <ReactImageFallback
+            className="imageLoaded"
+            src={src}
+            fallbackImage={<ImageUploader handleNewImage={handleNewImage} />}
+            alt={name ?? "Imagen del producto"}
+          />
+        </div>
+      </ImageView>
+    );
+  }
+
+  useEffect(() => {
+    let src = value?.src?.includes("image/")
+      ? value?.src
+      : getImageURL(process.env.REACT_APP_IMAGES_BUCKET, value?.src, 250, 250);
+    setSmallSrc(src);
+  }, [value]);
+
+  return (
+    <>
+      <ImageContainer onClick={() => changeVisor("small")}>
+        <ReactImageFallback
+          src={smallSrc}
+          fallbackImage={defaultProductImage}
+          alt={name ?? "Imagen del producto"}
+        />
+      </ImageContainer>
+    </>
+  );
+};
+
+export default ImageVisor;

package/src/components/pages/MultipleEdition/components/styles.js

@@ -0,0 +1,106 @@
+import styled, { css } from "styled-components";
+import uploadFile from "../../../../assets/images/Icons/upload-file.svg";
+
+export const ImageContainer = styled.div`
+  align-items: center;
+  background: var(--white-main, #fff);
+  border-radius: 7px;
+  border: 1px solid var(--grey-medium, #cbcbcb);
+  cursor: pointer;
+  display: flex;
+  height: 52px;
+  justify-content: center;
+  width: 52px;
+  & > img {
+    border-radius: 7px;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+`;
+
+export const ImageView = styled.div`
+  background: var(--white-main, #fff);
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  height: 280px;
+  left: calc(50% - 125px);
+  position: absolute;
+  top: calc(50% - 140px);
+  width: 250px;
+  z-index: 10;
+  .header {
+    align-items: center;
+    background: var(--grey-medium, #cbcbcb);
+    border-radius: 5px 5px 0px 0px;
+    color: var(--white-main, #fff);
+    display: flex;
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    height: 30px;
+    justify-content: space-between;
+    line-height: normal;
+    overflow: hidden;
+    padding: 0 9px 0 10px;
+    text-overflow: ellipsis;
+    width: 100%;
+    .buttons {
+      display: flex;
+      gap: 10px;
+      img {
+        cursor: pointer;
+      }
+      label {
+        display: flex;
+        align-items: center;
+        padding: 3px;
+      }
+      .borderCircle {
+        border-radius: 20px;
+        border: 1px solid var(--white-main, #fff);
+      }
+    }
+  }
+  .body {
+    width: 100%;
+    height: calc(100% - 30px);
+    .imageLoaded {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  ${({ visorView }) =>
+    visorView === "fullscreen" &&
+    css`
+      background: var(--black-main, #262626d9);
+      height: 100%;
+      left: 0;
+      top: 0;
+      width: 100%;
+      .header {
+        background: var(--black-main, #262626);
+        font-size: 14px;
+        height: 45px;
+        .buttons > img {
+          border-radius: 20px;
+          border: 1px solid var(--white-main, #fff);
+          padding: 3px;
+        }
+      }
+      > div {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+        & > img {
+          border-radius: 5px;
+          height: 500px;
+          width: 500px;
+        }
+      }
+    `}
+`;

package/src/components/pages/MultipleEdition/index.js

@@ -0,0 +1,248 @@
+import React, { useState, useEffect, useReducer } from "react";
+import { Modal } from "../../organisms/Modal";
+import { EditionTabs } from "../../molecules/EditionTabs";
+import { Table } from "../../organisms/Table";
+import beenhere from "../../../assets/images/Icons/beenhere.svg";
+import closeMagenta from "../../../assets/images/Icons/close-magenta.svg";
+import { Container } from "./styles";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
+import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
+
+import { initData, setDataColumns, dataReducer, modalReducer } from "./utils";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { GenericModal } from "../../atoms/GenericModal";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+
+export const MultipleEdition = ({ articles, versions, onClose, token }) => {
+  const [section, setSection] = useState("description");
+  const [attributeSelected, setAttributeSelected] = useState({
+    articleId: "",
+    attributeId: "",
+    versionId: "",
+  });
+  const [attributesReviewed, setAttributesReviewed] = useState([]);
+  const [descriptionsReviewed, setDescriptionsReviewed] = useState([]);
+  const [imagesReviewed, setImagesReviewed] = useState([]);
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+  const [message, setMessage] = useState("");
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+  const [currentData, setCurrentData] = useState({
+    columns: [],
+    data: [],
+  });
+  const [dataServices, setDataServices] = useReducer(dataReducer, {
+    description: {
+      data: [],
+    },
+    datasheet: {
+      data: [],
+    },
+    images: {
+      data: [],
+    },
+  });
+  const [modalFromTable, setModalFromTable] = useState();
+  const [modal, setModal] = useReducer(modalReducer, {
+    showModal: false,
+  });
+
+  function callbackToInitData() {
+    initData(setDataServices, articles, versions, token);
+  }
+
+  useEffect(() => {
+    callbackToInitData();
+  }, []);
+
+  useEffect(() => {
+    const [columns, data] = setDataColumns(
+      section,
+      dataServices[section],
+      token,
+      setModalFromTable,
+      setDataServices,
+      setModal,
+      setShowValidationPanel,
+      setAttributeSelected,
+      setShowRejectModal,
+      setAttributesReviewed,
+      setMessage,
+      showValidationPanel,
+      attributeSelected,
+      attributesReviewed,
+      descriptionsReviewed,
+      imagesReviewed
+    );
+    setCurrentData({
+      columns,
+      data,
+    });
+  }, [
+    section,
+    dataServices,
+    attributeSelected,
+    showValidationPanel,
+    attributesReviewed,
+    descriptionsReviewed,
+    imagesReviewed
+  ]);
+
+  return (
+    <Container>
+      <div className="tabs">
+        <div>
+          <EditionTabs getSection={setSection} />{" "}
+        </div>{" "}
+        <img src={beenhere} alt="beenhere" />
+      </div>{" "}
+      
+      <div className="action_buttons">
+        <img
+          src={closeMagenta}
+          alt="Cerrar"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+          //onClick={() => onClose && onClose()}
+        />{" "}
+      </div>{" "}
+      <div className="table">
+        <Table
+          withCheckbox
+          columns={currentData.columns}
+          data={currentData.data}
+          withTooltip={true}
+        />{" "}
+      </div>{" "}
+      {modalFromTable} <Modal {...modal} />{" "}
+      {showRejectModal && (
+        <Modal
+          title={"Agregar mensaje de rechazo"}
+          show={showRejectModal}
+          customComponent={
+            <TagAndInput
+              inputType={"textarea"}
+              inputId={"modal-message-box"}
+              index={0}
+              color={"white"}
+            />
+          }
+          buttons={[
+            <ButtonV2
+              key={"btn-Cancelar"}
+              type={"white"}
+              label={"Cancelar"}
+              size={12}
+              onClick={() => {
+                setShowRejectModal(false);
+              }}
+            />,
+            <ButtonV2
+              key={"btn-Aceptar"}
+              type={"pink"}
+              label={"Aceptar"}
+              size={12}
+              onClick={async () => {
+                const body = document.querySelector(
+                  "#modal-message-box .ql-container .ql-editor > p"
+                ).innerHTML;
+                const comment = [
+                  {
+                    type: "comment",
+                    value: body?.replace(/<.*?\/?>/gm, ""),
+                  },
+                ];
+                if(section=="description"|| section=="datasheet"){
+                  
+                  if(section=="datasheet"){
+                    var index = attributesReviewed.findIndex(
+                      (e) =>
+                        e.articleId === attributeSelected.articleId &&
+                        e.attributeId === attributeSelected.attributeId &&
+                        e.versionId === attributeSelected.versionId
+                    );
+                    attributesReviewed[index].isApproved = false;
+                    attributesReviewed[index].isReviewed = true;
+                    attributesReviewed[index].comment = comment[0].value;
+                  }
+                  if(section=="description"){
+                    var index = descriptionsReviewed.findIndex(
+                      (e) =>
+                        e.articleId === attributeSelected.articleId &&
+                        e.attributeId === attributeSelected.attributeId &&
+                        e.versionId === attributeSelected.versionId
+                    );
+                    descriptionsReviewed[index].isApproved = false;
+                    descriptionsReviewed[index].isReviewed = true;
+                    descriptionsReviewed[index].comment = comment[0].value;
+                    console.log(descriptionsReviewed[index]);
+                  }
+                  document.getElementById(
+                    "button_" +
+                      attributeSelected.articleId +
+                      "_" +
+                      attributeSelected.attributeId +
+                      "_" +
+                      attributeSelected.versionId
+                  ).src = rejectIcon;
+                  
+                  
+                }
+                if(section=="images"){
+                  var index = imagesReviewed.findIndex(
+                    (e) =>
+                      e.articleId === attributeSelected.articleId &&
+                      e.imageId === attributeSelected.attributeId &&
+                      e.versionId === attributeSelected.versionId
+                  );
+                  imagesReviewed[index].isApproved = false;
+                  imagesReviewed[index].isReviewed = true;
+                  imagesReviewed[index].comment = comment[0].value;
+                  console.log(imagesReviewed[index]);
+                }
+                document.getElementById(
+                  "button_" +
+                    attributeSelected.articleId +
+                    "_" +
+                    attributeSelected.attributeId +
+                    "_" +
+                    attributeSelected.versionId
+                ).src = rejectIcon;
+                setShowRejectModal(false);
+              }}
+            />,
+          ]}
+        />
+      )}{" "}
+      {message.length > 0 && (
+        <GenericModal
+          componentsArray={[
+            <img key="1" src={succes} alt="success icon" />,
+            <ScreenHeader
+              key="2"
+              headerType={"retailer-name-header"}
+              text={message}
+              color={"white"}
+            />,
+          ]}
+          onClick={() => {
+            setMessage("");
+            callbackToInitData();
+          }}
+        />
+      )}{" "}
+      
+    </Container>
+  );
+};

package/src/components/pages/MultipleEdition/saveData.js

@@ -0,0 +1,92 @@
+import AWS from "aws-sdk";
+import { v4 as uuidv4 } from "uuid";
+import axios from "axios";
+
+const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+const REGION = "us-east-1";
+
+AWS.config.update({
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3,
+});
+
+const myBucket = new AWS.S3({
+  params: { Bucket: S3_BUCKET },
+  region: REGION,
+});
+
+export async function saveData(params) {
+  const { section, data, token } = params;
+  if (section === "images") {
+    if (await saveImagesData(data, token)) {
+      //callbackToInitData();
+      /**setModal({
+        type: "saved successfully",
+        functions: { setModal },
+        payload: { service: "imágenes" },
+      });**/
+      // aquí va modal de que todo salío bien y actualiza la data
+    }
+  }
+  return true;
+}
+
+async function saveImagesData(articles, token) {
+  const imagesToUpdate = [];
+  articles.data.forEach((article) => {
+    const { images, version } = article;
+    console.log(images);
+    const imagesToAdd = Object.values(images).filter(
+      (f) => f.value && !f.value.src.startsWith("id-")
+    );
+    if (imagesToAdd.length > 0) {
+      imagesToUpdate.push(
+        ...imagesToAdd.map((e) => ({
+          imageId: e.imageId,
+          ...e.value,
+          version,
+          uuid: uuidv4(),
+        }))
+      );
+    }
+  });
+  const promiseArray = imagesToUpdate.map((e) => {
+    const { src, articleId, imageId, uuid, ext, version } = e;
+    const file = Buffer.from(
+      src.replace(/^data:image\/\w+;base64,/, ""),
+      "base64"
+    );
+    const params = {
+      ACL: "public-read",
+      Body: file,
+      Bucket: S3_BUCKET,
+      Key: `id-${articleId}/${version}/${imageId}-${uuid}.${ext}`,
+    };
+    return myBucket.putObject(params).promise();
+  });
+  await Promise.all(promiseArray);
+  console.log("finish upload");
+
+  const res = await axios.put(
+    process.env.REACT_APP_BASE_UPDATE_IMAGES_ENDPOINT,
+    imagesToUpdate.map((e) => {
+      delete e.src;
+      return e;
+    }),
+    {
+      headers: {
+        Authorization: token,
+      },
+    }
+  );
+  if (res.data.statusCode !== 200) return false;
+  return true;
+}
+
+export async function deleteImage(data, version, token) {
+  await axios.put(
+    `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+    data,
+    { headers: { Authorization: token } }
+  );
+}