contentoh-components-library 21.3.21 → 21.3.23

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

@@ -32,6 +32,7 @@ import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
 import errorModal from "../../../assets/images/genericModal/errorModal.svg";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { getAuditVersion, getInputsData } from "./utils";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -210,6 +211,41 @@ export const RetailerProductEdition = ({
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
   const shotThd = [58, 59, 60, 61].includes(activeRetailer.id);
+  const [auditableVersion, setAuditableVersion] = useState(null);
+  const [auditServices, setAuditServices] = useState([]);
+  const [auditDatasheets, setAuditDatasheets] = useState([]);
+  const [auditDescriptions, setAuditDescriptions] = useState([]);
+  const [auditImages, setAuditImages] = useState([]);
+  const [compare, setCompare] = useState(false);
+
+  useEffect(async () => {
+    const { id_article } = product?.article || {};
+    if (id_article)
+      await getAuditVersion(id_article, setAuditableVersion, token);
+  }, []);
+
+  const loadAuditableData = async () => {
+    if (auditableVersion) {
+      const auditServices = await getRetailerServices(
+        product?.article?.id_article,
+        product?.article?.category,
+        parseInt(product?.article?.id_category),
+        auditableVersion.version
+      );
+      getInputsData(
+        auditServices,
+        activeRetailer,
+        setAuditDatasheets,
+        setAuditDescriptions
+      );
+      setAuditServices(auditServices);
+      setAuditImages(auditServices[2]);
+    }
+  };
+
+  useEffect(() => {
+    loadAuditableData();
+  }, [auditableVersion]);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -223,6 +259,9 @@ export const RetailerProductEdition = ({
         parseInt(product?.article?.id_category),
         version
       );
+      if (auditableVersion) {
+        loadAuditableData();
+      }
       //Converts the data inside the datasheets object to array
       setServices(services);
       getServices();
@@ -384,21 +423,15 @@ export const RetailerProductEdition = ({
   }, [percentages]);
 
   useEffect(() => {
-    if (services.length > 0) {
-      if (services[0][activeRetailer.id]?.data)
-        services[0][activeRetailer.id].data = Object.values(
-          services[0][activeRetailer.id].data
-        );
-      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
+    getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
+    auditableVersion &&
+      getInputsData(
+        auditServices,
+        activeRetailer,
+        setAuditDatasheets,
+        setAuditDescriptions
       );
-      setDatasheets([datagroups, inputs]);
-      setDescriptions(descriptions);
-    }
+    setActivePercentage(Math.round(activeRetailer?.percentage, 0));
     activeRetailer?.id &&
       setImages({ action: "orderImages", retailerId: activeRetailer.id });
   }, [activeRetailer, services]);
@@ -424,7 +457,7 @@ export const RetailerProductEdition = ({
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index + "-" + image.name}
+        index={index + "-" + image.name + "-" + compare}
         number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
@@ -434,12 +467,14 @@ export const RetailerProductEdition = ({
         changeImage={setImages}
         selectedImages={selectedImages}
         setSelectedImages={setSelectedImages}
+        auditImages={auditImages}
+        compare={compare}
       />
     ));
   };
 
   const saveDescriptions = async () => {
-    const dataClean = updatedDescriptions.filter((f) => f.value !== '');
+    const dataClean = updatedDescriptions.filter((f) => f.value !== "");
     if (dataClean.length > 0) {
       setLoading(true);
       const productTemp = product;
@@ -480,7 +515,7 @@ export const RetailerProductEdition = ({
   };
 
   const saveDatasheets = async () => {
-    const dataClean = updatedDatasheets.filter((f) => f.value !== '');
+    const dataClean = updatedDatasheets.filter((f) => f.value !== "");
     if (dataClean.length > 0) {
       setLoading(true);
       const productTemp = product;
@@ -1233,7 +1268,11 @@ export const RetailerProductEdition = ({
 
   return (
     <Container headerTop={headerTop}>
-      <HeaderTop setHeaderTop={setHeaderTop} />
+      <HeaderTop
+        setHeaderTop={setHeaderTop}
+        auditableVersion={auditableVersion}
+        setCompare={setCompare}
+      />
       <div className="data-container">
         <div className="image-data-panel">
           <ImagePreviewer
@@ -1409,8 +1448,10 @@ export const RetailerProductEdition = ({
                         activeSection={activeTab}
                         inputGroup={dataGroup}
                         dataInputs={datasheets[1]}
+                        auditInputs={auditDatasheets[1]}
                         updatedDatasheets={updatedDatasheets}
                         setUpdatedDatasheets={setUpdatedDatasheets}
+                        compare={compare}
                       />
                     ))
                   ) : (
@@ -1424,11 +1465,13 @@ export const RetailerProductEdition = ({
                     <InputGroup
                       activeSection={activeTab}
                       inputGroup={descriptions[0]}
+                      auditInputGroup={auditDescriptions[0]}
                       updatedDescriptions={updatedDescriptions}
                       setUpdatedDescriptions={setUpdatedDescriptions}
                       articleId={product?.article?.id_article}
                       version={version}
                       dinamicHeight={true}
+                      compare={compare}
                     />
                   ) : (
                     <ScreenHeader

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

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+export const getAuditVersion = async (articleId, setState, token) => {
+  const auditResponse = await axios.get(
+    `${process.env.REACT_APP_GET_AUDIT}?articleId=${articleId}`,
+    { headers: { Authorization: token } }
+  );
+  console.log(auditResponse, "auditResponse");
+  if (auditResponse.status === 200) {
+    setState(JSON.parse(auditResponse.data.body).data);
+  }
+};
+
+export const getInputsData = (
+  services,
+  activeRetailer,
+  setDatasheetState,
+  setDescriptionState
+) => {
+  if (services.length > 0) {
+    if (services[0][activeRetailer.id]?.data)
+      services[0][activeRetailer.id].data = Object.values(
+        services[0][activeRetailer.id].data
+      );
+
+    const datagroups = services[0][activeRetailer?.id];
+    const inputs = services[0]?.inputs;
+    const descriptions = services[1]?.filter(
+      (service) => service?.id === activeRetailer?.id
+    );
+    setDatasheetState([datagroups, inputs]);
+    setDescriptionState(descriptions);
+  }
+};