contentoh-components-library 21.5.8 → 21.5.9

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

@@ -1,248 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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 } }
-  );
-}

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

@@ -1,201 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: grid;
-  grid-template-columns: 75% 25%;
-  grid-template-rows: 75px 1fr;
-  grid-template-areas:
-    "tabs action_buttons"
-    "table table";
-  margin: 0 30px;
-  body{
-    font-family: Roboto;
-  }
-
-  .tabs {
-    grid-area: tabs;
-    display: flex;
-    align-items: center;
-    gap: 0 10px;
-  }
-  .action_buttons {
-    grid-area: action_buttons;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    gap: 0 10px;
-    & > * {
-      cursor: pointer;
-    }
-  }
-  .table {
-    grid-area: table;
-    background: red;
-    height: 100%;
-    font-family: Raleway;
-  }
-  
-  .buttons-container{
-    display: flex;
-    flex-direction: column;
-    background: white;
-    width: max-content;
-    padding: 8px;
-    border: 1px solid ${GlobalColors.s3};
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-    border-radius: 3px;
-    position: absolute;
-    top: 0;
-    left: 50px;
-    z-index: 100;
-  }
-
-  .validation-button{
-    width: 30px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    color: black;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 18px;
-    background-color: white;
-    margin-right:5px;
-    img {
-      & + p {
-        margin-left: 7px;
-      }
-    }
-
-    &:hover {
-      border-radius: 10px;
-    }
-  }
-
-  .validation-option {
-    display: flex;
-    width: 82px;
-    height: 20px;
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    color: black;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 18px;
-    background-color: white;
-    left: 7px;
-
-    img {
-      & + p {
-        margin-left: 7px;
-      }
-    }
-
-    &:hover {
-      border-radius: 10px;
-    }
-
-    & + * {
-      margin-top: 8px;
-    }
-  }
-
-  td{
-    margin:0;
-    background: #ffffff !important;
-  }
-
-  th{
-    border-radius: 0 0 0 0 !important;
-    padding: 15px !important;
-  }
-  
-  textarea {
-    width: 100%;
-    border: 1px solid
-      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
-
-    font-family: ${FontFamily.AvenirNext};
-    color: ${GlobalColors.deep_gray};
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 15px;
-    padding: 10px;
-    outline: none;
-    border-radius: 5px;
-    resize: none;
-
-    &:focus {
-      border: 1px solid ${GlobalColors.magenta_s2};
-    }
-  }
-
-  .general-input {
-    width: 100%;
-    height:27px;
-    max-height:100px;
-  }
-
-  .select-edition-multiple {
-    padding: 5px 10px;
-    border-radius: 5px;
-    gap: 10px;
-    border:1px solid ${GlobalColors.gray_light};
-    border-width: 1px 2px 1px 1px;
-    outline: none;
-    border-image: initial;
-    width: 100%;
-    min-height:27px;
-    cursor: pointer;
-    color: ${GlobalColors.deep_gray};
-    font-size: 12px;
-    line-height: 21px;
-    overflow:hidden; 
-    white-space:nowrap; 
-    text-overflow:ellipsis;
-    :focus{
-      border:1px solid ${GlobalColors.magenta_s2};
-    }
-  }
-
-  .tooltip {
-    position: relative;
-    display: inline-block;
-  }
-  
-  .tooltiptext {
-    visibility: hidden;
-    width: 200px;
-    background-color: #ffffff;
-    color: #000000;
-    text-align: center;
-    border-radius: 6px;
-    position: absolute;
-    z-index: 6 important!;
-    bottom: 100%;
-    left: 20%;
-    margin-left: -80px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    box-shadow: 0px 2px 4px 0px #00000040;
-    font-family: Roboto;
-    font-size: 12px;
-    padding: 10px;
-    text-align: justify;
-  }
-  
-
-  
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-  }
-`;
-
-
-
-