contentoh-components-library 21.0.96 → 21.0.97

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

@@ -102,6 +102,14 @@ var reducerImages = function reducerImages(state, action) {
         values: values
       });
 
+    case "deleteImage":
+      values = values.filter(function (value) {
+        return action.selectedImages.indexOf(value) === -1;
+      });
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        values: values
+      });
+
     default:
       return state;
   }
@@ -356,6 +364,16 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       socketType = _useState66[0],
       setSocketType = _useState66[1];
 
+  var _useState67 = (0, _react.useState)([]),
+      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
+      servicesStatus = _useState68[0],
+      setServicesStatus = _useState68[1];
+
+  var _useState69 = (0, _react.useState)(loading),
+      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
+      saving = _useState70[0],
+      setSaving = _useState70[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -375,14 +393,14 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             case 2:
               services = _context.sent;
               //Converts the data inside the datasheets object to array
-              setServices(services); //setActiveRetailer(product?.retailers[0]);
+              setServices(services);
+              getServices(); //setActiveRetailer(product?.retailers[0]);
 
               setImages({
                 action: "init",
-                init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2]
+                init: services[2]
               });
               if (((_services$ = services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
-              setActiveRetailer(product.retailers ? product.retailers[0] : product.retailersAvailable[0]);
               (0, _data2.getPercentage)({
                 data: [product]
               }).then(function (res) {
@@ -497,7 +515,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             //   setPercentages(res)
             // );
 
-            getServices();
+            setActiveRetailer(product.retailers ? product.retailers[0] : product.retailersAvailable[0]);
             getComments();
             _context4.t0 = setUserGroups;
             _context4.next = 6;
@@ -832,18 +850,19 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             }
 
             if (!(valid && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0)) {
-              _context7.next = 30;
+              _context7.next = 31;
               break;
             }
 
-            _context7.prev = 10;
+            setLoading(true);
+            _context7.prev = 11;
             data === null || data === void 0 ? void 0 : (_data$articleData3 = data.articleData) === null || _data$articleData3 === void 0 ? void 0 : _data$articleData3.forEach(function (e) {
               e.uuid = (0, _uuid.v4)();
             });
             setDataImages(data);
 
             if (!((data === null || data === void 0 ? void 0 : (_data$articleData4 = data.articleData) === null || _data$articleData4 === void 0 ? void 0 : _data$articleData4.length) > 0)) {
-              _context7.next = 22;
+              _context7.next = 23;
               break;
             }
 
@@ -859,40 +878,40 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               };
               promiseArray.push(myBucket.putObject(params).promise());
             });
-            _context7.next = 19;
+            _context7.next = 20;
             return Promise.all(promiseArray);
 
-          case 19:
+          case 20:
             setImagesUploaded(true);
-            _context7.next = 23;
+            _context7.next = 24;
             break;
 
-          case 22:
+          case 23:
             setImagesUploaded(true);
 
-          case 23:
-            _context7.next = 28;
+          case 24:
+            _context7.next = 29;
             break;
 
-          case 25:
-            _context7.prev = 25;
-            _context7.t0 = _context7["catch"](10);
+          case 26:
+            _context7.prev = 26;
+            _context7.t0 = _context7["catch"](11);
             console.log(_context7.t0); // setMainLoading(false);
 
-          case 28:
-            _context7.next = 31;
+          case 29:
+            _context7.next = 32;
             break;
 
-          case 30:
+          case 31:
             // setMainLoading(false);
             setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
 
-          case 31:
+          case 32:
           case "end":
             return _context7.stop();
         }
       }
-    }, _callee7, null, [[10, 25]]);
+    }, _callee7, null, [[11, 26]]);
   })), [images, imagesUploaded]);
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
     return _regenerator.default.wrap(function _callee8$(_context8) {
@@ -900,11 +919,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         switch (_context8.prev = _context8.next) {
           case 0:
             if (!imagesUploaded) {
-              _context8.next = 14;
+              _context8.next = 13;
               break;
             }
 
-            setLoading(true);
             dataImages.articleData = dataImages === null || dataImages === void 0 ? void 0 : dataImages.articleData.map(function (e) {
               delete e.src;
               e.imageID = e.image_id;
@@ -913,32 +931,32 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               if (product !== null && product !== void 0 && product.orderId) e["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
               return e;
             });
-            _context8.prev = 3;
-            _context8.next = 6;
+            _context8.prev = 2;
+            _context8.next = 5;
             return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), dataImages, {
               headers: {
                 Authorization: token
               }
             });
 
-          case 6:
+          case 5:
             setMessage("Imágenes guardadas con éxito");
             sessionStorage.removeItem("imagesList");
             loadData();
-            _context8.next = 14;
+            _context8.next = 13;
             break;
 
-          case 11:
-            _context8.prev = 11;
-            _context8.t0 = _context8["catch"](3);
+          case 10:
+            _context8.prev = 10;
+            _context8.t0 = _context8["catch"](2);
             console.log(_context8.t0);
 
-          case 14:
+          case 13:
           case "end":
             return _context8.stop();
         }
       }
-    }, _callee8, null, [[3, 11]]);
+    }, _callee8, null, [[2, 10]]);
   })), [dataImages, imagesUploaded]);
 
   var evaluationFinished = function evaluationFinished(userId, tab, statusArray) {
@@ -1234,7 +1252,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }();
 
   var getRequired = function getRequired(services) {
-    var _services$4, _services$4$inputs;
+    var _services$4, _services$4$retailerM, _services$5, _services$5$inputs;
 
     var objetcTemp = {};
     var datasheetServicesArray = Object.values(services[0]);
@@ -1268,8 +1286,18 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       });
     });
     objetcTemp["Descripción"] = desInputsRequired;
-    var requiredImages = (_services$4 = services[2]) === null || _services$4 === void 0 ? void 0 : (_services$4$inputs = _services$4.inputs) === null || _services$4$inputs === void 0 ? void 0 : _services$4$inputs.filter(function (e) {
-      return e.required;
+    var retailersRequested = [];
+    (_services$4 = services[2]) === null || _services$4 === void 0 ? void 0 : (_services$4$retailerM = _services$4.retailerMandatories) === null || _services$4$retailerM === void 0 ? void 0 : _services$4$retailerM.forEach(function (retMan) {
+      return retMan.forEach(function (rm) {
+        return retailersRequested.push(rm);
+      });
+    });
+    var requiredImages = (_services$5 = services[2]) === null || _services$5 === void 0 ? void 0 : (_services$5$inputs = _services$5.inputs) === null || _services$5$inputs === void 0 ? void 0 : _services$5$inputs.filter(function (e) {
+      return e.required === 1 && retailersRequested.filter(function (ret) {
+        return ret.id_image === e.id && servicesData.filter(function (srv) {
+          return srv.id_retailer === ret.id_retailer;
+        }).length > 0;
+      }).length > 0;
     });
     var requiredCounter = 0;
     requiredImages === null || requiredImages === void 0 ? void 0 : requiredImages.forEach(function (req) {
@@ -1444,7 +1472,6 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
   var deleteImages = function deleteImages() {
     setLoading(true);
-    var imagesTemp = images;
     var values = images.values;
     var imgsInBack = [];
     selectedImages.forEach(function (selectedImg) {
@@ -1453,12 +1480,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     var imgsLeft = values.filter(function (value) {
       return selectedImages.indexOf(value) === -1;
     });
-    imagesTemp.values = imgsLeft;
 
     if (imgsInBack.length > 0) {
       var data = {
         articleId: product.article.id_article,
-        deleteImages: selectedImages
+        deleteImages: imgsInBack
       };
 
       try {
@@ -1472,8 +1498,16 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       }
     }
 
-    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
-    loadData();
+    setImages({
+      action: "deleteImage",
+      selectedImages: selectedImages
+    });
+    getRequired([services[0], services[1], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, services[2]), {}, {
+      values: imgsLeft
+    })]);
+    setTimeout(function () {
+      setLoading(false);
+    }, 500);
     setMessage("");
     setComponentsArray([]);
   };
@@ -1544,6 +1578,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   (0, _react.useEffect)(function () {
     services.length > 0 && getRequired(services);
   }, [services, servicesData, activeTab]);
+  (0, _react.useEffect)(function () {
+    setSaving(loading);
+  }, [loading]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     headerTop: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
@@ -1578,6 +1615,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           headerData: product,
           percent: activePercentage,
           activeRetailer: activeRetailer,
+          servicesData: servicesData,
           setActiveRetailer: setActiveRetailer,
           sendToFacilitator: sendToFacilitator,
           approve: function approve() {
@@ -1598,19 +1636,19 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           assig: assig[activeTab],
           setAssignation: setAssignation,
           isRetailer: isRetailer,
-          showSaveButton: true,
+          showSaveButton: userAssigned(),
           onClickSave: function onClickSave() {
             switch (activeTab) {
               case "Descripción":
-                (product === null || product === void 0 ? void 0 : product.description_status) !== "NS" && saveDescriptions();
+                !saving && (product === null || product === void 0 ? void 0 : product.description_status) !== "NS" && saveDescriptions();
                 break;
 
               case "Ficha técnica":
-                (product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" && saveDatasheets();
+                !saving && (product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" && saveDatasheets();
                 break;
 
               case "Imágenes":
-                (product === null || product === void 0 ? void 0 : product.images_status) !== "NS" && updateImages();
+                !saving && (product === null || product === void 0 ? void 0 : product.images_status) !== "NS" && updateImages();
                 break;
 
               default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.96",
+  "version": "21.0.97",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -5,6 +5,8 @@ import removeAsigned from "../../../assets/images/asignationOptions/removeAsigne
 import requesToProvider from "../../../assets/images/asignationOptions/requestToProvider.svg";
 import requestToTeam from "../../../assets/images/asignationOptions/requestToTeam.svg";
 import availableIcon from "../../../assets/images/asignationOptions/availableIcon.svg";
+import { getNewStatus } from "../../../global-files/data";
+import { StatusTag } from "../StatusTag";
 
 export const AsignationOption = ({
   profileImage,
@@ -15,7 +17,21 @@ export const AsignationOption = ({
   onClick,
   btnOnClick,
   active,
+  services,
 }) => {
+  const getStatus = () => {
+    let servCad = "";
+    services.forEach((srv) => (servCad += srv));
+    switch (servCad) {
+      case "NANANA":
+        return "NA";
+      case "RECEIVEDRECEIVEDRECEIVED":
+        return "RECEIVED";
+      default:
+        return getNewStatus(services);
+    }
+  };
+
   const iconsAsignation = {
     assigned: (
       <button onClick={btnOnClick}>
@@ -39,6 +55,11 @@ export const AsignationOption = ({
         <p className="team-label">{team}</p>
       </div>
       {asignationType && iconsAsignation[asignationType]}
+      {services && (
+        <div className="status-container">
+          <StatusTag statusType={getStatus()} />
+        </div>
+      )}
       {active && <div className="green-circle"></div>}
     </Container>
   );

package/src/components/atoms/AsignationOption/styles.js

@@ -40,6 +40,12 @@ export const Container = styled.div`
     }
   }
 
+  .status-container {
+    & + * {
+      margin-left: 10px;
+    }
+  }
+
   .green-circle {
     background-color: ${GlobalColors.exported};
     width: 20px;

package/src/components/atoms/StatusTag/styles.js

@@ -24,7 +24,8 @@ export const Container = styled.div`
   }
 
   &.status-Pr,
-  &.status-Rr {
+  &.status-Rr,
+  &.status-Rc {
     background-color: ${GlobalColors.reception};
   }
 

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

@@ -8,6 +8,7 @@ export const RetailerSelector = ({
   retailers,
   activeRetailer,
   setActiveRetailer,
+  showStatus,
 }) => {
   const [retailersPanel, setRetailersPanel] = useState(false);
 
@@ -47,6 +48,7 @@ export const RetailerSelector = ({
               asignationType={null}
               name={retailer?.name}
               team={retailer?.team}
+              services={retailer?.services}
               onClick={() => {
                 setActiveRetailer(retailer);
                 document.removeEventListener(
@@ -57,6 +59,7 @@ export const RetailerSelector = ({
                 setRetailersPanel(false);
               }}
               active={retailer.id === activeRetailer.id}
+              showStatus={showStatus}
             />
           ))}
         </div>

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

@@ -49,12 +49,14 @@ export const StatusAsignationInfo = ({
       )}
       {imagesSection && (
         <div className="images-buttons">
-          <Button
-            buttonType={"circular-button delete-button"}
-            onClick={() => {
-              askToDeleteImages && askToDeleteImages();
-            }}
-          />
+          {showSaveButton && (
+            <Button
+              buttonType={"circular-button delete-button"}
+              onClick={() => {
+                askToDeleteImages && askToDeleteImages();
+              }}
+            />
+          )}
           <Button
             buttonType={"circular-button download-button"}
             onClick={() => {

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

@@ -2,6 +2,8 @@ import { Container } from "./styles";
 import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
+import { useState } from "react";
+import { useEffect } from "react";
 
 export const FullProductNameHeader = ({
   headerData,
@@ -11,7 +13,23 @@ export const FullProductNameHeader = ({
   showValidationButtons,
   approve,
   reject,
+  servicesData,
 }) => {
+  const [retailers, setRetailers] = useState([]);
+  useEffect(() => {
+    const rtls = headerData?.retailers || headerData?.retailersAvailable;
+    servicesData &&
+      rtls.forEach((rt) => {
+        const element = [];
+        servicesData.forEach((sd) => {
+          if (sd.id_retailer === rt.id) {
+            element.push(sd.status ? sd.status : "RECEIVED");
+          } else element.push("NA");
+          rt["services"] = element;
+        });
+      });
+    setRetailers(rtls);
+  }, [servicesData]);
   return (
     <Container>
       <ProductNameHeader
@@ -41,7 +59,7 @@ export const FullProductNameHeader = ({
           ]}
         />
         <AvatarAndValidation
-          retailers={headerData?.retailers || headerData?.retailersAvailable}
+          retailers={retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
           activeRetailer={activeRetailer}

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

@@ -48,6 +48,11 @@ const reducerImages = (state, action) => {
     case "changeAttrValue":
       attrForImgs[action.retailer][action.index].value = action.value;
       return { ...state, attrForImgs, values };
+    case "deleteImage":
+      values = values.filter(
+        (value) => action.selectedImages.indexOf(value) === -1
+      );
+      return { ...state, values };
     default:
       return state;
   }
@@ -195,6 +200,7 @@ export const ProviderProductEdition = ({
   });
   const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
+  const [saving, setSaving] = useState(loading);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -213,7 +219,7 @@ export const ProviderProductEdition = ({
     //setActiveRetailer(product?.retailers[0]);
     setImages({
       action: "init",
-      init: JSON.parse(sessionStorage.getItem("imagesList")) || services[2],
+      init: services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
 
@@ -500,6 +506,7 @@ export const ProviderProductEdition = ({
       });
     }
     if (valid && duplicated?.length === 0) {
+      setLoading(true);
       try {
         data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
@@ -541,7 +548,6 @@ export const ProviderProductEdition = ({
 
   useEffect(async () => {
     if (imagesUploaded) {
-      setLoading(true);
       dataImages.articleData = dataImages?.articleData.map((e) => {
         delete e.src;
         e.imageID = e.image_id;
@@ -858,7 +864,21 @@ export const ProviderProductEdition = ({
     });
 
     objetcTemp["Descripción"] = desInputsRequired;
-    const requiredImages = services[2]?.inputs?.filter((e) => e.required);
+    const retailersRequested = [];
+    services[2]?.retailerMandatories?.forEach((retMan) =>
+      retMan.forEach((rm) => retailersRequested.push(rm))
+    );
+    const requiredImages = services[2]?.inputs?.filter(
+      (e) =>
+        e.required === 1 &&
+        retailersRequested.filter(
+          (ret) =>
+            ret.id_image === e.id &&
+            servicesData.filter((srv) => srv.id_retailer === ret.id_retailer)
+              .length > 0
+        ).length > 0
+    );
+
     let requiredCounter = 0;
     requiredImages?.forEach(
       (req) =>
@@ -955,7 +975,6 @@ export const ProviderProductEdition = ({
 
   const deleteImages = () => {
     setLoading(true);
-    const imagesTemp = images;
     const { values } = images;
     const imgsInBack = [];
 
@@ -967,12 +986,10 @@ export const ProviderProductEdition = ({
       (value) => selectedImages.indexOf(value) === -1
     );
 
-    imagesTemp.values = imgsLeft;
-
     if (imgsInBack.length > 0) {
       const data = {
-        articleId: product.article.id_article,
-        deleteImages: selectedImages,
+        articleId: product?.id_article || product?.article?.id_article,
+        deleteImages: imgsInBack,
       };
       try {
         axios.put(
@@ -986,8 +1003,16 @@ export const ProviderProductEdition = ({
         console.log(err);
       }
     }
-    sessionStorage.setItem("imagesList", JSON.stringify(imagesTemp));
-    loadData();
+
+    setImages({
+      action: "deleteImage",
+      selectedImages,
+    });
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+
     setMessage("");
     setComponentsArray([]);
   };
@@ -1166,6 +1191,10 @@ export const ProviderProductEdition = ({
     return true;
   };
 
+  useEffect(() => {
+    setSaving(loading);
+  }, [loading]);
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -1278,13 +1307,13 @@ export const ProviderProductEdition = ({
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
-                  saveDescriptions();
+                  !saving && saveDescriptions();
                   break;
                 case "Ficha técnica":
-                  saveDatasheets();
+                  !saving && saveDatasheets();
                   break;
                 case "Imágenes":
-                  updateImages();
+                  !saving && updateImages();
                   break;
                 default:
                   break;
@@ -1301,15 +1330,13 @@ export const ProviderProductEdition = ({
               <Loading />
             ) : (
               <>
-                {!imageLayout &&
-                  activeTab === "Imágenes" &&
-                  product?.services?.images === 1 && (
-                    <GalleryHeader
-                      setSelectedImages={setSelectedImages}
-                      checkAll={checkAll}
-                      setCheckAll={setCheckAll}
-                    />
-                  )}
+                {!imageLayout && activeTab === "Imágenes" && (
+                  <GalleryHeader
+                    setSelectedImages={setSelectedImages}
+                    checkAll={checkAll}
+                    setCheckAll={setCheckAll}
+                  />
+                )}
                 {activeTab === "Ficha técnica" &&
                   (product?.datasheet_status !== "NS" ? (
                     datasheets[0]?.data?.map((dataGroup, index) => (