contentoh-components-library 21.0.92 → 21.0.97

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

@@ -41,66 +41,66 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1
     },
-    orderId: 9,
-    status: "QF",
-    datasheet_status: "QF",
+    orderId: 4,
+    status: "ASSIGNED",
+    datasheet_status: null,
     prio: "none",
-    version: 2,
-    description_status: "QF",
-    images_status: "QF",
+    version: 3,
+    description_status: null,
+    images_status: null,
     article: {
-      id_article: 35698,
-      id_category: "2143",
-      name: "FOCO LED A19 (60W) LUZ AMARILLA",
-      upc: "12087311",
-      timestamp: "2022-06-15T14:35:46.000Z",
-      id_user: 59,
+      id_article: 33249,
+      id_category: "684",
+      name: "Crema dental ",
+      upc: "232435",
+      timestamp: "2022-06-14T14:52:51.000Z",
+      id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
-      company_name: "Cadena Ismael",
+      company_name: "COMPANY DEV",
       country: "México",
-      id_order: 9,
-      id_datasheet_especialist: 54,
-      id_datasheet_facilitator: 52,
-      id_description_especialist: 54,
-      id_description_facilitator: 52,
-      id_images_especialist: 55,
-      id_images_facilitator: 53,
-      id_auditor: 30,
+      id_order: 4,
+      id_datasheet_especialist: null,
+      id_datasheet_facilitator: null,
+      id_description_especialist: null,
+      id_description_facilitator: null,
+      id_images_especialist: null,
+      id_images_facilitator: null,
+      id_auditor: 37,
       id_recepcionist: null,
-      category: "ILUMINACIÓN|FOCOS|FOCOS",
-      missingAttributes: 0,
-      missingDescriptions: 0,
-      missingImages: -1
+      category: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
+      missingAttributes: 13,
+      missingDescriptions: 4,
+      missingImages: 3
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot Golden",
+      id: 4,
+      name: "Walmart Super y Superama",
       country: "México",
       id_region: 1,
       active: 1
     }, {
-      id: 59,
-      name: "The Home Depot Platinum",
+      id: 9,
+      name: "Amazon",
       country: "México",
       id_region: 1,
       active: 1
     }, {
-      id: 60,
-      name: "The Home Depot Resizing",
-      country: "México",
-      id_region: 1,
+      id: 1013,
+      name: "Cencosud Colombia",
+      country: "Colombia",
+      id_region: 2,
       active: 1
     }, {
-      id: 61,
-      name: "Home Depot TAB",
-      country: "México",
-      id_region: 1,
+      id: 2005,
+      name: "ClubCo",
+      country: "Costa Rica",
+      id_region: 3,
       active: 1
     }],
     country: "México",
-    upc: "12087311"
+    upc: "232435"
   },
   location: {
     product: {
@@ -109,22 +109,22 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 52,
-    name: "FACILITADOR TXT PRUEBA",
+    id_user: 54,
+    name: "ESPECIALISTA TXTS PRUEBA",
     last_name: "",
-    email: "azarate@contentoh.com",
+    email: "rlegorreta@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "b2ce5b2a-609c-4e79-9ea9-2f74cff43889",
+    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 4,
+    id_role: 7,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -138,6 +138,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-52/52.png?1655320339846"
+    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1655433250522"
   }
 };

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([]);
   };
@@ -1534,7 +1568,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     var _arr$filter2 = (0, _slicedToArray2.default)(_arr$filter, 1);
 
     retailerService = _arr$filter2[0];
-    return retailerService ? retailerService.status : "NA";
+    return retailerService ? retailerService.status : "NS";
   };
 
   (0, _react.useEffect)(function () {
@@ -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.92",
+  "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/InputFormatter/index.js

@@ -60,7 +60,7 @@ export const InputFormatter = ({
     value = valueFormater(value);
 
     let idInput = inputId;
-    let dataSave = updatedDescriptions.slice();
+    let dataSave = updatedDescriptions?.slice();
     if (dataSave.length > 0) {
       if (dataSave.filter((e) => e.attributeId === idInput).length > 0) {
         dataSave.forEach((e) => {

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}