contentoh-components-library 13.0.0 → 16.0.0

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

@@ -7,6 +7,7 @@ import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { InputGroup } from "../../organisms/InputGroup";
 import { useEffect, useReducer, useState, useCallback } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
+import { saveAs } from "file-saver";
 import {
   getRetailerServices,
   getPercentage,
@@ -24,6 +25,8 @@ import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 import { Button } from "../../atoms/GeneralButton";
 import { Commentary } from "../../atoms/Commentary";
+import { GenericModal } from "../../atoms/GenericModal";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -58,22 +61,19 @@ const myBucket = new AWS.S3({
 });
 
 export const RetailerProductEdition = ({
-  productData,
   tabsSections,
-  articleId,
   productSelected = {},
   user = {},
   token,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
-  const [imageLayout, setImageLayout] = useState(true);
+  const [imageLayout, setImageLayout] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [descriptions, setDescriptions] = useState([]);
   const [datasheets, setDatasheets] = useState([]);
   const [images, setImages] = useReducer(reducerImages, {});
   const [showModal, setShowModal] = useState(false);
-  const [retailerSelected, setRetailerSelected] = useState(54); // revisar después como trabajar esto de mejor forma
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     noKeyboard: true,
@@ -115,7 +115,7 @@ export const RetailerProductEdition = ({
   const [imagesUploaded, setImagesUploaded] = useState(false);
   const [dataImages, setDataImages] = useState();
   const [percentages, setPercentages] = useState(
-    new Array(productSelected.retailers.length).fill({ percentage: 0 })
+    new Array(productSelected?.retailers?.length).fill({ percentage: 0 })
   );
   const [activePercentage, setActivePercentage] = useState(0);
   const [activeRetailer, setActiveRetailer] = useState({});
@@ -131,13 +131,19 @@ export const RetailerProductEdition = ({
   const [crossComment, setCrossComment] = useState(false);
   const [userGroups, setUserGroups] = useState([]);
   const [assig, setAssig] = useState({});
+  const [selectedImages, setSelectedImages] = useState([]);
+  const [componentsArray, setComponentsArray] = useState([]);
+  const [checkAll, setCheckAll] = useState(false);
   const isRetailer = user?.is_retailer;
+  useEffect(() => {
+    checkAll && setSelectedImages(images.values);
+  }, [checkAll]);
 
   const loadData = async () => {
     const services = await getRetailerServices(
-      productSelected.article.id_article,
-      parseInt(productSelected.article.id_category),
-      productSelected.version
+      productSelected?.article?.id_article,
+      parseInt(productSelected?.article?.id_category),
+      productSelected?.version
     );
 
     //Converts the data inside the datasheets object to array
@@ -166,10 +172,9 @@ export const RetailerProductEdition = ({
     }
     const selected = productSelected;
     const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${selected.article.id_article}&orderId=${selected.article.id_order}&end=true`
+      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${selected?.article?.id_article}&orderId=${selected?.article?.id_order}&end=true`
     );
-    const parsedResponse = JSON.parse(servicesResponse.data.body).data;
-
+    const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
     setServicesData(parsedResponse);
   };
 
@@ -201,10 +206,10 @@ export const RetailerProductEdition = ({
     let comments = {};
     commentsResponse.forEach(
       (comment) =>
-        JSON.parse(comment.data.body).data[0] &&
+        JSON.parse(comment?.data?.body).data[0] &&
         (comments[
-          translateConcept(JSON.parse(comment.data.body).data[0]?.concept)
-        ] = JSON.parse(comment.data.body).data[0])
+          translateConcept(JSON.parse(comment?.data?.body)?.data[0]?.concept)
+        ] = JSON.parse(comment?.data?.body).data[0])
     );
     setComment(comments[tab]);
     setComments(comments);
@@ -278,42 +283,48 @@ export const RetailerProductEdition = ({
   }, [userGroups]);
 
   useEffect(() => {
-    productSelected.retailers.forEach((retailer) => {
-      retailer["percentage"] = percentages.filter(
-        (percent) => retailer.id === percent.id_retailer
+    productSelected?.retailers?.forEach((retailer) => {
+      retailer["percentage"] = percentages?.filter(
+        (percent) => retailer?.id === percent?.id_retailer
       )[0]?.percentage;
     });
     setActivePercentage(productSelected?.retailers[0]?.percentage);
   }, [percentages]);
 
   useEffect(() => {
+    const required = {};
     if (services.length > 0) {
-      services[0][activeRetailer?.id].data = Object.values(
-        services[0][activeRetailer?.id].data
+      services[0][activeRetailer.id].data = Object.values(
+        services[0][activeRetailer.id].data
       );
-      setActivePercentage(Math.round(activeRetailer.percentage, 0));
-      setDatasheets([services[0][activeRetailer.id], services[0].inputs]);
-      setDescriptions(
-        services[1].filter((service) => service.id === activeRetailer.id)
+      setActivePercentage(Math.round(activeRetailer?.percentage, 0));
+      const datagroups = services[0][activeRetailer?.id];
+      const inputs = services[0]?.inputs;
+      const descriptions = services[1]?.filter(
+        (service) => service?.id === activeRetailer?.id
       );
+      setRequiredNull(required);
+      setDatasheets([datagroups, inputs]);
+      setDescriptions(descriptions);
     }
   }, [activeRetailer]);
 
   const thumbs = () => {
-    const imageInputs = images.inputs.map((e) => ({
-      value: e.id,
-      name: e.name,
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
     }));
-    const imageType = images.imageType.map((e) => ({
-      value: e.id,
-      name: e.name,
+    const imageType = images?.imageType?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
     }));
-    const imagePackagingType = images.imagePackagingType.map((e) => ({
-      value: e.id,
-      name: e.name,
+    const imagePackagingType = images?.imagePackagingType?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
     }));
     return images?.values?.map((image, index) => (
       <GalleryElement
+        setCheckAll={setCheckAll}
         key={index}
         image={image}
         gridLayout={imageLayout}
@@ -323,6 +334,8 @@ export const RetailerProductEdition = ({
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
         changeImage={setImages}
+        selectedImages={selectedImages}
+        setSelectedImages={setSelectedImages}
       />
     ));
   };
@@ -362,7 +375,6 @@ export const RetailerProductEdition = ({
           },
         }
       );
-      console.log("saved");
     } catch (error) {
       console.log(error);
     }
@@ -370,53 +382,53 @@ export const RetailerProductEdition = ({
 
   const updateImages = useCallback(async () => {
     const imagesList = images?.values?.slice();
-    const imagesListTemp = imagesList.reduce((acc, image) => {
-      acc[image.image_id] = ++acc[image.image_id] || 0;
+    const imagesListTemp = imagesList?.reduce((acc, image) => {
+      acc[image?.image_id] = ++acc[image?.image_id] || 0;
       return acc;
     }, {});
 
-    const duplicated = imagesList.filter((image) => {
-      return imagesListTemp[image.image_id];
+    const duplicated = imagesList?.filter((image) => {
+      return imagesListTemp[image?.image_id];
     });
 
     const attrForImgs = Object.values(images?.attrForImgs);
     attrForImgs.pop();
     const data = {
-      articleId,
-      attrReqImgs: attrForImgs.map((e) => ({
-        attrId: e[0].id,
-        value: e[0].value,
+      articleId: product?.article?.id_article,
+      attrReqImgs: attrForImgs?.map((e) => ({
+        attrId: e[0]?.id,
+        value: e[0]?.value,
       })),
-      articleData: imagesList.filter((e) => !e.id),
-      updateImages: imagesList.filter((e) => e.id),
+      articleData: imagesList?.filter((e) => !e.id),
+      updateImages: imagesList?.filter((e) => e.id),
     };
     let valid =
-      data.articleData.length === 0
+      data?.articleData?.length === 0
         ? true
-        : data.articleData.every((e, i) => {
-            if (e.image_id && e.packing_type && e.image_type) {
+        : data?.articleData?.every((e, i) => {
+            if (e?.image_id && e?.packing_type && e?.image_type) {
               return true;
             }
             return false;
           });
-    if (valid && data.updateImages.length > 0 && duplicated.length === 0) {
-      valid = data.updateImages.every((e, i) => {
-        if (e.image_id && e.packing_type && e.image_type) {
+    if (valid && data?.updateImages?.length > 0 && duplicated?.length === 0) {
+      valid = data?.updateImages?.every((e, i) => {
+        if (e?.image_id && e?.packing_type && e?.image_type) {
           return true;
         }
         return false;
       });
     }
-    if (valid && duplicated.length === 0) {
+    if (valid && duplicated?.length === 0) {
       try {
-        data.articleData.forEach((e) => {
+        data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
         });
         setDataImages(data);
-        if (data.articleData.length > 0) {
+        if (data?.articleData?.length > 0) {
           setImagesUploaded(false);
           const promiseArray = [];
-          data.articleData.forEach((e) => {
+          data?.articleData?.forEach((e) => {
             const file = Buffer.from(
               e.src.replace(/^data:image\/\w+;base64,/, ""),
               "base64"
@@ -425,7 +437,7 @@ export const RetailerProductEdition = ({
               ACL: "public-read",
               Body: file,
               Bucket: S3_BUCKET,
-              Key: `id-${data.articleId}/${version}/${e.image_id}-${e.uuid}.${e.ext}`,
+              Key: `id-${data.articleId}/${version}/${e?.image_id}-${e?.uuid}.${e?.ext}`,
             };
             promiseArray.push(myBucket.putObject(params).promise());
           });
@@ -440,25 +452,16 @@ export const RetailerProductEdition = ({
       }
     } else {
       // setMainLoading(false);
-      console.log(
-        "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.",
-        "Recuerda hay campos obligatorios y no podras avanzar si no estan completos."
+      setMessage(
+        "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.<br>Recuerda hay campos obligatorios y no podras avanzar si no estan completos."
       );
-      // setAlertList((prev) => [
-      //   ...prev,
-      //   {
-      //     titleMsg: "Completa los campos que solicita cada una de la imágenes",
-      //     alertMsg:
-      //       "Recuerda hay campos obligatorios y no podras avanzar si no estan completos.",
-      //   },
-      // ]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [images, imagesUploaded]);
 
   useEffect(async () => {
     if (imagesUploaded) {
-      dataImages.articleData = dataImages.articleData.map((e) => {
+      dataImages.articleData = dataImages?.articleData.map((e) => {
         delete e.src;
         e.imageID = e.image_id;
         e.packingType = e.packing_type;
@@ -475,7 +478,7 @@ export const RetailerProductEdition = ({
             },
           }
         );
-        console.log("imágenes guardadas con éxito");
+        setMessage("Imágenes guardadas con éxito");
       } catch (error) {
         console.log(error);
       }
@@ -500,11 +503,11 @@ export const RetailerProductEdition = ({
     concept = action ? action : concept;
     return (
       (productSelected[`${concept}_status`] === "QF" &&
-        (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
+        (user?.id_role === 1 || user?.id_role === 4 || user?.id_role === 5)) ||
       (productSelected[`${concept}_status`] === "AF" &&
-        (user.id_role === 1 || user.id_role === 6)) ||
+        (user?.id_role === 1 || user?.id_role === 6)) ||
       (productSelected[`${concept}_status`] === "RP" &&
-        (user.id_role === 1 || user.id_role === 6))
+        (user?.id_role === 1 || user?.id_role === 6))
     );
   };
 
@@ -526,7 +529,7 @@ export const RetailerProductEdition = ({
 
   const updateCompaniesList = (status, result, retailerId, concept) => {
     let serv = servicesData.slice();
-    let item = serv.find(
+    let item = serv?.find(
       (item) => item.id_retailer === retailerId && item.service === concept
     );
     let index = serv.indexOf(item);
@@ -754,7 +757,6 @@ export const RetailerProductEdition = ({
       concept: concept,
       version: version,
     };
-    e.preventDefault();
     await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
       headers: {
         Authorization: token,
@@ -818,6 +820,131 @@ export const RetailerProductEdition = ({
     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
   };
 
+  const evaluationComplete = (tab) => {
+    let concept = "";
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+    let serv = servicesData.filter((item) => item.service === concept);
+    let approved = "";
+    let rejected = "";
+    if (
+      product.status === "IN_PROGRESS" ||
+      product.status === "QF" ||
+      product.status === "RF"
+    ) {
+      approved = "AF";
+      rejected = "RF";
+      if (product.status === "QF") {
+        return (
+          serv.filter(
+            (item) =>
+              item.status === approved ||
+              item.status === rejected ||
+              item.status === "AA" ||
+              item.status === "AP"
+          ).length === serv.length
+        );
+      }
+    } else if (
+      product.status === "AF" ||
+      product.status === "RA" ||
+      product.status === "RP"
+    ) {
+      approved = "AA";
+      rejected = "RA";
+
+      if (product.status === "RP" || product.status === "AF") {
+        return (
+          serv.filter(
+            (item) =>
+              item.status === approved ||
+              item.status === rejected ||
+              item.status === "AP"
+          ).length === serv.length
+        );
+      }
+    } else if (product.status === "RC") {
+      approved = "AP";
+      rejected = "RA";
+      return (
+        serv.filter(
+          (item) => item.status === approved || item.status === rejected
+        ).length === serv.length
+      );
+    }
+    return (
+      serv.filter(
+        (item) => item.status === approved || item.status === rejected
+      ).length === serv.length
+    );
+  };
+
+  const downloadImages = () => {
+    selectedImages.forEach((e) => {
+      if (e.id) {
+        saveAs(
+          `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
+          `${product.article.upc}_${e.name}.${e.ext}`
+        );
+      }
+    });
+  };
+
+  const deleteImages = () => {
+    const data = {
+      articleId: product.article.id_article,
+      deleteImages: selectedImages,
+    };
+    try {
+      axios.put(
+        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+        data,
+        {
+          headers: { Authorization: token },
+        }
+      );
+    } catch (err) {
+      console.log(err);
+    }
+    setMessage("");
+  };
+
+  const askToDeleteImages = () => {
+    if (selectedImages.length > 0) {
+      setMessage("¿Está seguro de eliminar las imágenes seleccionadas?");
+      setComponentsArray([
+        <ScreenHeader
+          key={"1"}
+          text={""}
+          Paragraph={"¿Está seguro de eliminar las imágenes seleccionadas?"}
+          headerType="header-and-paragraph"
+        />,
+        <Button
+          key={"2"}
+          buttonType="general-white-button"
+          label={"Cancelar"}
+          onClick={() => setMessage("")}
+        />,
+        <Button
+          key={"3"}
+          buttonType="general-button-default"
+          label={"Aceptar"}
+          onClick={() => deleteImages()}
+        />,
+      ]);
+    }
+  };
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -838,6 +965,7 @@ export const RetailerProductEdition = ({
             imagesStatus={productSelected?.images_status}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
+            onClickSave={() => updateImages()}
           />
         </div>
         <div className="product-information">
@@ -866,16 +994,30 @@ export const RetailerProductEdition = ({
               )[0]?.status,
               Imágenes: product?.images_status,
             }}
-            profileImage={productData.asigned}
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             setImageLayout={setImageLayout}
-            saveDescriptions={saveDescriptions}
-            saveDatasheets={saveDatasheets}
-            updateImages={updateImages}
+            downloadImages={downloadImages}
+            askToDeleteImages={askToDeleteImages}
             assig={assig[activeTab]}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
+            onClickSave={() => {
+              switch (activeTab) {
+                case "Descripción":
+                  saveDescriptions();
+                  break;
+                case "Ficha técnica":
+                  saveDatasheets();
+                  break;
+                case "Imágenes":
+                  updateImages();
+                  break;
+
+                default:
+                  break;
+              }
+            }}
           />
           <div
             className={
@@ -883,7 +1025,13 @@ export const RetailerProductEdition = ({
               (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
             }
           >
-            {!imageLayout && <GalleryHeader />}
+            {!imageLayout && activeTab === "Imágenes" && (
+              <GalleryHeader
+                setSelectedImages={setSelectedImages}
+                checkAll={checkAll}
+                setCheckAll={setCheckAll}
+              />
+            )}
             {activeTab === "Ficha técnica" &&
               (product?.services?.datasheets === 1 ? (
                 datasheets[0]?.data?.map((dataGroup, index) => (
@@ -908,7 +1056,7 @@ export const RetailerProductEdition = ({
                   inputGroup={descriptions[0]}
                   updatedDescriptions={updatedDescriptions}
                   setUpdatedDescriptions={setUpdatedDescriptions}
-                  articleId={articleId}
+                  articleId={product?.article?.id_article}
                   version={version}
                   dinamicHeight={true}
                 />
@@ -948,24 +1096,13 @@ export const RetailerProductEdition = ({
                       onClick={(e) =>
                         createComment(
                           e,
-                          document.getElementById(
-                            "description-commentary-box-0"
-                          ).value,
+                          document.querySelector(
+                            "#description-commentary-box-0 .ql-container .ql-editor > p"
+                          ).innerHTML,
                           activeTab
                         )
                       }
                     />
-                    <Button
-                      buttonType={
-                        requiredNull !== 0 ||
-                        !specialistValid(activeTab) ||
-                        !versionMatch()
-                          ? "general-button-disabled"
-                          : "general-green-button"
-                      }
-                      label={"Enviar evaluación"}
-                      onClick={() => sendToFacilitator()}
-                    />
                   </div>
                 </div>
               ) : (
@@ -983,6 +1120,17 @@ export const RetailerProductEdition = ({
                   />
                 </div>
               )}
+              <Button
+                buttonType={
+                  !requiredNull[activeTab] === 0 ||
+                  !approveRejectButtons() ||
+                  !evaluationComplete(activeTab)
+                    ? "general-button-disabled"
+                    : "general-green-button"
+                }
+                label={"Enviar evaluación"}
+                onClick={() => sendToFacilitator()}
+              />
             </div>
           )}
         </div>
@@ -995,6 +1143,18 @@ export const RetailerProductEdition = ({
           approveRejectButtons={approveRejectButtons}
         />
       )}
+      {message.length > 0 && (
+        <GenericModal
+          componentsArray={
+            componentsArray.length > 0 ? (
+              componentsArray
+            ) : (
+              <ScreenHeader text={message} />
+            )
+          }
+          onClick={() => setMessage("")}
+        />
+      )}
     </Container>
   );
 };

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

@@ -4,6 +4,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  flex: 1;
+  overflow: auto;
 
   .data-container {
     display: flex;
@@ -49,6 +51,12 @@ export const Container = styled.div`
           align-items: flex-end;
 
           .input-container {
+            width: 500px;
+
+            .quill {
+              height: 100px;
+            }
+
             & + * {
               margin-left: 5px;
             }
@@ -56,7 +64,7 @@ export const Container = styled.div`
 
           .buttons-box {
             display: flex;
-            max-width: 201px;
+            width: 210px;
             flex-wrap: wrap;
 
             .general-transparent-button {
@@ -66,8 +74,10 @@ export const Container = styled.div`
             }
 
             .general-transparent-button,
-            .general-green-button {
-              width: 201px;
+            .general-green-button,
+            .general-button-disabled {
+              width: fit-content;
+              min-width: 201px;
               height: 40px;
             }
           }

package/src/components/atoms/Percent/Percent.stories.js

@@ -1,38 +0,0 @@
-import { Percent } from "./index";
-
-const status = [
-  "-",
-  "Pr",
-  "Rc",
-  "As",
-  "P",
-  "QF",
-  "AF",
-  "AA",
-  "AP",
-  "AC",
-  "RA",
-  "RF",
-  "RP",
-  "RC",
-  "Ex",
-];
-
-export default {
-  title: "Components/atoms/Percent",
-  component: Percent,
-  argTypes: {
-    statusType: {
-      options: status,
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Percent {...args}/>;
-
-export const PercentDefault = Template.bind ({});
-
-PercentDefault.args = {
-  statusType: "-",
-};

package/src/components/atoms/Percent/index.js

@@ -1,15 +0,0 @@
-import { Container } from "./styles";
-import polygon from "../../../assets/images/arrow/polygon.svg";
-
-export const Percent = ({ statusType }) => {
-  return (
-    <Container className={`status-${statusType}`}>
-      <p className="text">Productos en proceso</p>
-      <div className="percent-text">
-        <p className="number">20</p>
-        <img src={polygon} alt=""/>
-        <span className="span">1%</span>
-      </div>
-    </Container>
-  );
-};