contentoh-components-library 21.4.83 → 21.4.85

package/src/components/molecules/ProductNameHeader/index.js

@@ -3,6 +3,7 @@ import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
 import { PriorityFlag } from "../../atoms/PriorityFlag/index";
+import { ObservationFlag } from "../../atoms/ObservationFlag/index";
 
 export const ProductNameHeader = ({
   productName,
@@ -10,7 +11,9 @@ export const ProductNameHeader = ({
   priority,
   date,
   percentRequired,
+  productObservation
 }) => {
+  const typeFlag = productObservation!== null && productObservation !== "" ? "high" : "low";
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
@@ -20,7 +23,8 @@ export const ProductNameHeader = ({
         progressBarType={statusType}
         percentRequired={percentRequired}
       />
-      <PriorityFlag priority={priority} />
+      {/* <PriorityFlag priority={priority} /> */}
+      <ObservationFlag observation={typeFlag}contentObservation={productObservation}/>
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>
   );

package/src/components/organisms/EditGroup/index.js

@@ -43,7 +43,6 @@ export const EditGroup = ({ token, show, onClose }) => {
   const [newGroup, setNewGroup] = useState(false);
   const [currentEditIndex, setCurrentEditIndex] = useState(null);
   const [inputValue, setInputValue] = useState([]);
-  const [shouldClose, setShouldClose] = useState(false);
 
   useEffect(() => {}, [groups]);
 
@@ -51,12 +50,6 @@ export const EditGroup = ({ token, show, onClose }) => {
     loadData();
   }, []);
 
-  useEffect(() => {
-    if (shouldClose) {
-      onClose && onClose();
-    }
-  }, [shouldClose, onClose]);
-
   const loadData = async () => {
     try {
       const response = await axios.post(
@@ -241,7 +234,6 @@ export const EditGroup = ({ token, show, onClose }) => {
         backgroundColor: "transparent",
         zIndex: 10,
       }}
-      onClick={onClose}
     >
       <Fade in={show} timeout={400}>
         <Container>

package/src/components/organisms/FullProductNameHeader/index.js

@@ -17,6 +17,7 @@ export const FullProductNameHeader = ({
   rejectAll,
   servicesData,
   showApproveRejectAll,
+  productObservation
 }) => {
   const [retailers, setRetailers] = useState([]);
 
@@ -52,6 +53,7 @@ export const FullProductNameHeader = ({
         percentRequired={percent}
         percent={percent?.toFixed(0)}
         priority={headerData?.prio}
+        productObservation={productObservation}
         date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
       />
       <div className="features-bar-container">

package/src/components/organisms/VersionSelector/index.js

@@ -1,106 +1,106 @@
-import { Container } from "./styles";
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Button } from "../../atoms/GeneralButton";
-import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-import { GlobalColors } from "../../../../dist/global-files/variables";
-import { FontFamily } from "../../../global-files/variables";
-import { VersionItem } from "../../molecules/VersionItem";
-import { CreateVersion } from "../../organisms/CreateVersion";
-import { useCloseModal } from "../../../global-files/customHooks";
+// import { Container } from "./styles";
+// import axios from "axios";
+// import { useEffect, useState } from "react";
+// import { ScreenHeader } from "../../atoms/ScreenHeader";
+// import { Button } from "../../atoms/GeneralButton";
+// import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+// import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+// import { GlobalColors } from "../../../../dist/global-files/variables";
+// import { FontFamily } from "../../../global-files/variables";
+// import { VersionItem } from "../../molecules/VersionItem";
+// import { CreateVersion } from "../../organisms/CreateVersion";
+// import { useCloseModal } from "../../../global-files/customHooks";
 
-export const VersionSelector = ({
-  modalId,
-  articleId,
-  setVersion,
-  companyName,
-  currentVersion,
-  setShowVersionSelector,
-  jwt,
-}) => {
-  const [versions, setVersions] = useState([]);
-  const [showCreateVersion, setShowCreateVersion] =
-    useCloseModal("create-version");
-  const [reload, setReload] = useState(false);
+// export const VersionSelector = ({
+//   modalId,
+//   articleId,
+//   setVersion,
+//   companyName,
+//   currentVersion,
+//   setShowVersionSelector,
+//   jwt,
+// }) => {
+//   const [versions, setVersions] = useState([]);
+//   const [showCreateVersion, setShowCreateVersion] =
+//     useCloseModal("create-version");
+//   const [reload, setReload] = useState(false);
 
-  const loadProductVersions = async (articleId) => {
-    try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-        {
-          headers: {
-            Authorization: jwt,
-          },
-        }
-      );
+//   const loadProductVersions = async (articleId) => {
+//     try {
+//       const response = await axios.get(
+//         `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+//         {
+//           headers: {
+//             Authorization: jwt,
+//           },
+//         }
+//       );
 
-      const versionList = JSON.parse(response.data.body).data;
-      setVersions(versionList);
-    } catch (error) {
-      console.log(error);
-    }
-  };
+//       const versionList = JSON.parse(response.data.body).data;
+//       setVersions(versionList);
+//     } catch (error) {
+//       console.log(error);
+//     }
+//   };
 
-  useEffect(() => {
-    const ac = new AbortController();
-    loadProductVersions(articleId);
+//   useEffect(() => {
+//     const ac = new AbortController();
+//     loadProductVersions(articleId);
 
-    return () => {
-      setVersions([]);
-      setShowCreateVersion(false);
-      return () => ac.abort(); // Abort both fetches on unmount
-    };
-  }, [reload]);
+//     return () => {
+//       setVersions([]);
+//       setShowCreateVersion(false);
+//       return () => ac.abort(); // Abort both fetches on unmount
+//     };
+//   }, [reload]);
 
-  return (
-    <Container id={modalId}>
-      <div className="versions-header">
-        <ScreenHeader
-          text={"Versión del producto"}
-          headerType={"input-name-header"}
-          color={GlobalColors.white}
-          fontFamily={FontFamily.Lato}
-        />
-        <div className="buttons-container">
-          <Button
-            image={addVersion}
-            buttonType={"circular-button"}
-            onClick={() => setShowCreateVersion(true)}
-            id="add-version"
-          />
-          <Button
-            image={closeIcon}
-            buttonType={"circular-button"}
-            onClick={() => setShowVersionSelector(false)}
-            id="close-button"
-          />
-        </div>
-      </div>
-      <div className="versions-container">
-        {versions?.map((item) => (
-          <VersionItem
-            key={item.version}
-            version={item.version}
-            articleStatus={item.article_status}
-            currentVersion={item.version === currentVersion}
-            productOwner={companyName}
-            setVersion={setVersion}
-            timestamp={item.timestamp}
-          />
-        ))}
-      </div>
-      {showCreateVersion && (
-        <CreateVersion
-          articleId={articleId}
-          version={currentVersion}
-          versionsList={versions}
-          setShowCreateVersion={setShowCreateVersion}
-          realoadVersion={() => setReload(!reload)}
-          jwt={jwt}
-        />
-      )}
-    </Container>
-  );
-};
+//   return (
+//     <Container id={modalId}>
+//       <div className="versions-header">
+//         <ScreenHeader
+//           text={"Versión del producto"}
+//           headerType={"input-name-header"}
+//           color={GlobalColors.white}
+//           fontFamily={FontFamily.Lato}
+//         />
+//         <div className="buttons-container">
+//           <Button
+//             image={addVersion}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowCreateVersion(true)}
+//             id="add-version"
+//           />
+//           <Button
+//             image={closeIcon}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowVersionSelector(false)}
+//             id="close-button"
+//           />
+//         </div>
+//       </div>
+//       <div className="versions-container">
+//         {versions?.map((item) => (
+//           <VersionItem
+//             key={item.version}
+//             version={item.version}
+//             articleStatus={item.article_status}
+//             currentVersion={item.version === currentVersion}
+//             productOwner={companyName}
+//             setVersion={setVersion}
+//             timestamp={item.timestamp}
+//           />
+//         ))}
+//       </div>
+//       {showCreateVersion && (
+//         <CreateVersion
+//           articleId={articleId}
+//           version={currentVersion}
+//           versionsList={versions}
+//           setShowCreateVersion={setShowCreateVersion}
+//           realoadVersion={() => setReload(!reload)}
+//           jwt={jwt}
+//         />
+//       )}
+//     </Container>
+//   );
+// };

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

@@ -11,8 +11,8 @@ export const ProviderProductEditionDefault = Template.bind({});
 
 ProviderProductEditionDefault.args = {
   tabsSections: {
-    Descripción: true,
-    "Ficha técnica": false,
+    Descripción: false,
+    "Ficha técnica": true,
     Imágenes: false,
   },
   token:
@@ -21,41 +21,46 @@ 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,
+    id_article: 121067,
+    upc: "2342341",
+    name: "asd",
+    timestamp: "2024-01-03T19:42:59.000Z",
+    categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+    id_category: 4,
     version: 1,
+    value: null,
     retailersAvailable: [
-      { name: "The Home Depot Golden", id: 58 },
-      { name: "The Home Depot Onboarding", id: 68 },
+      {
+        "name": "Walmart Marketplace",
+        "id": 75
+      }
     ],
-    percentage: "89",
+    percentage: 1.33
   },
   productToEdit: {
-    idCategory: 287,
-    ArticleId: 39550,
+    idCategory: 4,
+    ArticleId: 121067,
     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,
-        version: 1,
-        retailersAvailable: [
-          { name: "The Home Depot Golden", id: 58, percentage: 100 },
-          { name: "The Home Depot Onboarding", id: 68, percentage: 78 },
-        ],
-        percentage: "89",
-      },
-    ],
-  },
+        {
+            id_article: 121067,
+            upc: "2342341",
+            name: "asd",
+            timestamp: "2024-01-03T19:42:59.000Z",
+            categoryName: "Abarrotes|Abarrotes Secos|Alimentos Deshidratados",
+            id_category: 4,
+            version: 1,
+            value: null,
+            retailersAvailable: [
+                {
+                    name: "Walmart Marketplace",
+                    id: 75,
+                    percentage: 1.33
+                }
+            ],
+            percentage: 1.33
+        }
+    ]
+},
   location: {
     pathname: "/EditProducts",
     search: "",
@@ -68,72 +73,54 @@ ProviderProductEditionDefault.args = {
     key: "24vwut",
   },
   user: {
-    id_user: 191,
-    name: "Demo",
-    last_name: "Demo",
-    email: "merchants24feb@allfreemail.net",
-    position: "Test",
-    telephone: "+52123456789",
+    id_user: 28,
+    name: "Ismael",
+    last_name: "López",
+    email: "ilopez@contentoh.com",
+    position: "Test States",
+    telephone: "+523111366336",
     country: "México",
-    id_company: 923,
-    id_cognito: "c3cd160c-76c2-497c-9357-5ef949307e1e",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
     id_role: 0,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: null,
+    is_user_tech: "ADMIN-AS",
     membership: {
-      id: 114,
-      start_date: "2023-02-24T18:14:43.000Z",
-      end_date: "2024-02-24T18:14:43.000Z",
-      planID: 8,
-      plan: "prod_KtlhECVSFG2iro",
-      name: "Plan Pro",
-      user_limit: "50",
-      products_limit: "5000",
-      type: "Enterprise",
+        id: 76,
+        start_date: "2022-01-18T17:25:35.000Z",
+        end_date: "2023-01-18T17:25:35.000Z",
+        planID: 8,
+        plan: "prod_KtlhECVSFG2iro",
+        name: "Plan Pro",
+        user_limit: "50",
+        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-28/28.png?1704310718113"
   },
   company: {
-    id_company: 923,
-    trade_name: "Demo",
-    company_name: "Demo",
-    rfc: "Demo",
-    adress: "Demo",
-    about_company: null,
-    telephone: null,
-    web_site: null,
-    zip_code: null,
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
     email: null,
-    social_link: null,
+    social_link: "",
     is_retailer: 0,
-    financedRetailers: [
-      {
-        id: 68,
-        name: "The Home Depot Onboarding",
-        country: "México",
-        id_region: 1,
-        active: 1,
-        flow: 1,
-      },
-    ],
-    retailers: [
-      {
-        id: 68,
-        name: "The Home Depot Onboarding",
-        country: "México",
-        id_region: 1,
-        active: 1,
-        flow: 1,
-      },
-    ],
-  },
+    financedRetailers: [],
+    retailers: []
+},
   showSurvey: (v) => v && alert("se muestra"),
 };

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 };
     }
@@ -144,7 +151,7 @@ export const ProviderProductEdition = ({
   const [datasheets, setDatasheets] = useState([]);
   const [images, setImages] = useReducer(reducerImages, {});
   const [showModal, setShowModal] = useState(false);
-  const [boxData, setBoxData] = useState();
+  const [boxData, setBoxData] = useState({});
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     noKeyboard: true,
@@ -485,7 +492,20 @@ 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 = [
+      {
+        id_article: product.id_article,
+        id_category: product.id_category,
+        version: product.version,
+        id_retailer_array: (
+          product.retailersAvailable ?? product.retailers
+        ).map(({ id }) => id),
+      },
+    ];
+    const headers = { Authorization: token };
+    getPercentage({ data, headers }).then((res) => {
+      setPercentages(res[0]);
+    });
     setLoading(false);
   };
 
@@ -545,12 +565,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,11 +670,11 @@ 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]);
-
+  
   const saveDescriptions = async () => {
     setLoading(true);
     const dataObject = {
@@ -692,7 +714,7 @@ export const ProviderProductEdition = ({
           attributeId,
           value: valueOfAtribute,
           boxId,
-        })
+        });
       });
     });
 
@@ -700,8 +722,10 @@ export const ProviderProductEdition = ({
       articleId: product?.id_article,
       articleData: updatedDatasheets,
       ...(parseBoxData.length > 0 && { boxData: parseBoxData }),
-    };   
-    
+    };
+
+    console.log({dataObject});
+    console.log(product?.orderId);
     if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       const res = await axios.put(
@@ -720,8 +744,7 @@ export const ProviderProductEdition = ({
       }
     } catch (error) {
       console.log(error);
-    } 
-    console.log(dataObject)
+    }
   };
 
   const updateImages = useCallback(async () => {
@@ -1154,13 +1177,6 @@ export const ProviderProductEdition = ({
     }
   };
 
-
-
-
-
-
-
-
   const evaluationToRetailer = async (result) => {
     const data = {
       articleId: product.id_article,
@@ -1240,7 +1256,6 @@ export const ProviderProductEdition = ({
     },
   ];
   const sendToEvaluation = (result) => {
-    console.log({ result });
     if (result === "A") {
       if (
         origin[activeTab] === "RequestWithoutContentoh" &&