contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,154 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+
+  .data-container {
+    display: flex;
+    flex-direction:row-reverse;
+    flex: 0%;
+    height: calc(100% - ${({ headerTop }) => headerTop}px);
+    margin-top:15px;
+    .image-data-panel {
+      width: 192px;
+      height: 192px;
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+
+    .product-information {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .services-information-container {
+        height: 100%;
+        overflow: auto;
+        padding: 0 20px;
+      }
+
+      .product-information-image{
+        display:flex;
+        width: 100%;
+        margin-bottom:10px;
+      }
+
+      .product-image{
+        display:flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0 20px;
+        gap:20px;
+        width:100%;
+      }
+
+      .image-services {
+        aside {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, 179px);
+          column-gap: 15px;
+          row-gap: 15px;
+          padding: 20px;
+        }
+      }
+
+      .commentary-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: 10px;
+        padding-left: 0;
+
+        .commentary {
+          display: flex;
+          align-items: flex-end;
+
+          .input-container {
+            width: 500px;
+
+            .quill {
+              height: 100px;
+            }
+
+            & + * {
+              margin-left: 5px;
+            }
+          }
+
+          .buttons-box {
+            display: flex;
+            width: 210px;
+            flex-wrap: wrap;
+
+            .general-transparent-button {
+              & + * {
+                margin-top: 5px;
+              }
+            }
+
+            .general-transparent-button,
+            .general-green-button,
+            .general-button-disabled {
+              width: fit-content;
+              min-width: 201px;
+              height: 40px;
+            }
+          }
+        }
+      }
+
+      .feedback-box {
+        display: flex;
+      }
+
+      .required-inputs-message {
+        font-family: ${FontFamily.AvenirNext};
+        font-size: 13px;
+        color: ${GlobalColors.s4};
+        padding: 10px;
+        display: flex;
+        align-items: center;
+
+        p + * {
+          margin-top: 10px;
+        }
+
+        button {
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+  #modal-message-box {
+    width: 400px;
+    height: 100px;
+  }
+  .container {
+    width: 100%;
+    height: auto;
+    border:1px solid ${GlobalColors.gray_light};
+    .dropzone {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .container-imagesM{
+    display:flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .container-bars{
+    display:flex;
+    gap:20px;
+    margin:10px 0;
+  }
+`;

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -21,38 +21,54 @@ ProviderProductEditionDefault.args = {
   category: 287,
   version: 1,
   productSelected: {
-    id_article: 39550,
-    upc: 43654697,
-    name: "Campana de Cocina",
-    timestamp: "2023-08-04T22:23:40.000Z",
-    categoryName:
-      "Ferretería|Ferretería General|Tornillos, Tuercas y Arandelas",
-    id_category: 287,
+    category: "Accesorios Decorativos|Accesorios Decorativos",
+    company_name: "Demo",
+    company_id: 923,
+    id_category: "2028",
+    id_article: 118465,
+    name: "VELA AROMA 18 OZ MAN/CAN",
+    upc: "Modelo6",
+    isVisible: 1,
+    retailers: [
+      {
+        id: 68,
+        name: "The Home Depot Onboarding",
+      },
+    ],
     version: 1,
     retailersAvailable: [
-      { name: "The Home Depot Golden", id: 58 },
-      { name: "The Home Depot Onboarding", id: 68 },
+      {
+        id: 68,
+        name: "The Home Depot Onboarding",
+      },
     ],
-    percentage: "89",
   },
   productToEdit: {
-    idCategory: 287,
-    ArticleId: 39550,
+    idCategory: "2028",
+    ArticleId: 118465,
     product: [
       {
-        id_article: 39550,
-        upc: 43654697,
-        name: "Campana de Cocina",
-        timestamp: "2023-08-04T22:23:40.000Z",
-        categoryName:
-          "Ferretería|Ferretería General|Tornillos, Tuercas y Arandelas",
-        id_category: 287,
+        category: "Accesorios Decorativos|Accesorios Decorativos",
+        company_name: "Demo",
+        company_id: 923,
+        id_category: "2028",
+        id_article: 118465,
+        name: "VELA AROMA 18 OZ MAN/CAN",
+        upc: "Modelo6",
+        isVisible: 1,
+        retailers: [
+          {
+            id: 68,
+            name: "The Home Depot Onboarding",
+          },
+        ],
         version: 1,
         retailersAvailable: [
-          { name: "The Home Depot Golden", id: 58, percentage: 100 },
-          { name: "The Home Depot Onboarding", id: 68, percentage: 78 },
+          {
+            id: 68,
+            name: "The Home Depot Onboarding",
+          },
         ],
-        percentage: "89",
       },
     ],
   },
@@ -99,7 +115,7 @@ ProviderProductEditionDefault.args = {
       products_limit: "5000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-191/191.png?1697171804447",
+    src: "https://content-management-profile.s3.amazonaws.com/id-191/191.png?1701729602068",
   },
   company: {
     id_company: 923,
@@ -119,9 +135,6 @@ ProviderProductEditionDefault.args = {
         id: 68,
         name: "The Home Depot Onboarding",
         country: "México",
-        id_region: 1,
-        active: 1,
-        flow: 1,
       },
     ],
     retailers: [
@@ -129,9 +142,6 @@ ProviderProductEditionDefault.args = {
         id: 68,
         name: "The Home Depot Onboarding",
         country: "México",
-        id_region: 1,
-        active: 1,
-        flow: 1,
       },
     ],
   },

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

@@ -82,19 +82,26 @@ const reducerImages = (state, action) => {
       );
       return { ...state, values };
     case "orderImages": {
-      let { inputsByRetailer, valuesInitial, inputsInitial, inputs } = state;
+      let {
+        inputsByRetailer = {},
+        valuesInitial,
+        inputsInitial,
+        inputs,
+      } = state;
       try {
         const orderedImages = [];
         const imageIdArray = [];
-        if (action?.retailerId && !inputsByRetailer[action.retailerId])
+        if (action?.retailerId && !inputsByRetailer[action.retailerId]) {
           inputsByRetailer[action.retailerId] = [];
-        action.retailerId &&
+        }
+        if (action.retailerId) {
           inputsByRetailer[action.retailerId]?.filter((input) => {
             imageIdArray.push(input.id_image);
             valuesInitial.forEach((value) => {
               if (value.image_id === input.id_image) orderedImages.push(value);
             });
           });
+        }
 
         inputs = inputsInitial?.filter((input) =>
           imageIdArray.includes(input.id)
@@ -102,7 +109,7 @@ const reducerImages = (state, action) => {
 
         values = orderedImages.length > 0 ? orderedImages : [];
       } catch (error) {
-        console.log(error);
+        console.log(action.action, error);
       }
       return { ...state, values, inputs };
     }
@@ -485,7 +492,15 @@ export const ProviderProductEdition = ({
 
     setImages({ action: "init", init: services[2] });
     if (services[2]?.values?.length > 0) setActiveImage(0);
-    getPercentage({ data: [product] }).then((res) => setPercentages(res[0]));
+    const data = [
+      {
+        ...product,
+        retailersAvailable: product.retailersAvailable.map(({ id }) => id),
+      },
+    ];
+    getPercentage({ data }).then((res) => {
+      setPercentages(res[0]);
+    });
     setLoading(false);
   };
 
@@ -545,12 +560,14 @@ export const ProviderProductEdition = ({
   };
 
   const getCart = async () => {
-    const res = await axios.get(process.env.REACT_APP_CART, {
+    const res = await axios.get(`${process.env.REACT_APP_CART}/general/`, {
       headers: {
         Authorization: token,
       },
     });
-    const arr = JSON.parse(res.data.body).data.map((e) => e.article_id);
+    const arr = Object.values(JSON.parse(res.data.body).data)
+      ?.map((e) => e.article_id)
+      .filter(Boolean);
     setInCart(arr.some((e) => e.articleId === product.id_article));
   };
 
@@ -648,7 +665,7 @@ export const ProviderProductEdition = ({
       value: e?.id,
       name: e?.name,
       required: e?.required,
-      active: images?.values.some((value) => value?.image_id === e?.id),
+      active: images?.values?.some((value) => value?.image_id === e?.id),
     }));
     setSocketType(imageInputs);
   }, [images]);
@@ -692,7 +709,7 @@ export const ProviderProductEdition = ({
           attributeId,
           value: valueOfAtribute,
           boxId,
-        })
+        });
       });
     });
 
@@ -700,8 +717,8 @@ export const ProviderProductEdition = ({
       articleId: product?.id_article,
       articleData: updatedDatasheets,
       ...(parseBoxData.length > 0 && { boxData: parseBoxData }),
-    };   
-    
+    };
+
     if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       const res = await axios.put(
@@ -720,8 +737,7 @@ export const ProviderProductEdition = ({
       }
     } catch (error) {
       console.log(error);
-    } 
-    console.log(dataObject)
+    }
   };
 
   const updateImages = useCallback(async () => {
@@ -1154,13 +1170,6 @@ export const ProviderProductEdition = ({
     }
   };
 
-
-
-
-
-
-
-
   const evaluationToRetailer = async (result) => {
     const data = {
       articleId: product.id_article,
@@ -1240,7 +1249,6 @@ export const ProviderProductEdition = ({
     },
   ];
   const sendToEvaluation = (result) => {
-    console.log({ result });
     if (result === "A") {
       if (
         origin[activeTab] === "RequestWithoutContentoh" &&

package/src/global-files/data.js

@@ -122,9 +122,7 @@ export const getPercentage = async (params = {}) => {
           },
         }
       )
-      .then((response) => {
-        return [response.data];
-      })
+      .then((response) => [response.data])
       .catch((err) => console.log(err, "Errror"));
   };
 

package/src/global-files/variables.js

@@ -19,6 +19,8 @@ export const GlobalColors = {
   gray:"#707070",
   blue_light:"#F7F7FC",
   purple:"#8A6CAA",
+  gray_medium:"#CBCBCB",
+  black:"#262626",
 };
 
 export const FontFamily = {