contentoh-components-library 21.0.82 → 21.0.83

package/dist/components/molecules/GalleryElement/index.js

@@ -41,7 +41,8 @@ var GalleryElement = function GalleryElement(_ref) {
       changeImage = _ref.changeImage,
       selectedImages = _ref.selectedImages,
       setSelectedImages = _ref.setSelectedImages,
-      setCheckAll = _ref.setCheckAll;
+      setCheckAll = _ref.setCheckAll,
+      setSocketType = _ref.setSocketType;
 
   var _useState = (0, _react.useState)(validation),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -110,7 +111,9 @@ var GalleryElement = function GalleryElement(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
             width: "100%",
             placeholder: "Tipo de toma",
-            options: imageInputs,
+            options: imageInputs === null || imageInputs === void 0 ? void 0 : imageInputs.filter(function (img) {
+              return img.value === image.image_id || !img.active;
+            }),
             valueSelected: image.image_id,
             onChange: function onChange(e) {
               changeImage({

package/dist/components/molecules/TableHeader/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .input-name-header {\n    overflow: auto;\n    max-width: 40%;\n    white-space: nowrap;\n  }\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  .input-name-header {\n    overflow-x: auto;\n    max-width: 40%;\n    white-space: nowrap;\n    height: 23px;\n    line-height: 23px;\n    text-overflow: initial;\n  }\n  .status-asignation-info {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 5px;\n    }\n  }\n\n  & + * {\n    margin-top: 4px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

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

@@ -439,6 +439,11 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       modalViewTextArea = _useState78[0],
       setModalViewTextArea = _useState78[1];
 
+  var _useState79 = (0, _react.useState)(null),
+      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
+      socketType = _useState80[0],
+      setSocketType = _useState80[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -684,15 +689,9 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
-    var _images$inputs, _images$imageType, _images$imagePackagin, _images$values;
+    var _images$imageType, _images$imagePackagin, _images$values;
 
-    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name,
-        required: e === null || e === void 0 ? void 0 : e.required
-      };
-    });
+    var imageInputs = socketType.slice();
     var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
       return {
         value: e === null || e === void 0 ? void 0 : e.id,
@@ -723,6 +722,22 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     });
   };
 
+  (0, _react.useEffect)(function () {
+    var _images$inputs;
+
+    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: images === null || images === void 0 ? void 0 : images.values.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    setSocketType(imageInputs);
+  }, [images]);
+
   var saveDescriptions = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
       var productTemp, dataObject;

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

@@ -42,8 +42,8 @@ RetailerProductEditionDefault.args = {
       images: 1
     },
     orderId: 233,
-    status: "IN_PROGRESS",
-    datasheet_status: "IN_PROGRESS",
+    status: "QF",
+    datasheet_status: "QF",
     prio: "none",
     version: 2,
     description_status: "QF",
@@ -79,13 +79,15 @@ RetailerProductEditionDefault.args = {
       name: "Walmart Super y Superama",
       country: "México",
       id_region: 1,
-      active: 1
+      active: 1,
+      percentage: 100
     }, {
       id: 26,
       name: "Mercado Libre",
       country: "México",
       id_region: 1,
-      active: 1
+      active: 1,
+      percentage: 100
     }],
     country: "México",
     upc: "6545345"
@@ -97,22 +99,22 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 54,
-    name: "ESPECIALISTA TXTS PRUEBA",
+    id_user: 53,
+    name: "FACILITADOR ED PRUEBA",
     last_name: "",
-    email: "rlegorreta@contentoh.com",
+    email: "arojas@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
+    id_cognito: "c106e141-e221-49e8-a382-ce99385c6d88",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 7,
+    id_role: 5,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -126,6 +128,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1653425316222"
+    src: "https://content-management-profile.s3.amazonaws.com/id-53/53.png?1655161876316"
   }
 };

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

@@ -367,6 +367,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       statusArray = _useState64[0],
       setStatusArray = _useState64[1];
 
+  var _useState65 = (0, _react.useState)(null),
+      _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
+      socketType = _useState66[0],
+      setSocketType = _useState66[1];
+
   (0, _react.useEffect)(function () {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -629,15 +634,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, [activeRetailer, services]);
 
   var thumbs = function thumbs() {
-    var _images$inputs, _images$imageType, _images$imagePackagin, _images$values;
+    var _images$imageType, _images$imagePackagin, _images$values;
 
-    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name,
-        required: e === null || e === void 0 ? void 0 : e.required
-      };
-    });
+    var imageInputs = socketType.slice();
     var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
       return {
         value: e === null || e === void 0 ? void 0 : e.id,
@@ -661,6 +660,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         imageType: imageType,
         imagePackagingType: imagePackagingType,
         imageInputs: imageInputs,
+        setSocketType: setSocketType,
         changeImage: setImages,
         selectedImages: selectedImages,
         setSelectedImages: setSelectedImages
@@ -777,6 +777,21 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     };
   }();
 
+  (0, _react.useEffect)(function () {
+    var _images$inputs;
+
+    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: images === null || images === void 0 ? void 0 : images.values.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    setSocketType(imageInputs);
+  }, [images]);
   var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
     var _images$values2, _product$article10, _data$articleData, _data$articleData2, _data$updateImages;
 
@@ -992,8 +1007,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var approveRejectButtons = function approveRejectButtons(action) {
-    var concept = getConcept(activeTab);
-    concept = action ? action : concept;
+    var concept = getConcept(action || activeTab);
 
     var _servicesData$filter = servicesData.filter(function (srv) {
       return srv.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && srv.service === concept;
@@ -1152,24 +1166,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }();
 
   var userAssigned = function userAssigned(tab, rol) {
-    var concept = "";
-
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-
+    var concept = getConcept(activeTab);
     var allowedRoles = [1, 4, 5, 6, 7, 8];
-    var validUser = allowedRoles.indexOf(user === null || user === void 0 ? void 0 : user.id_role) !== -1;
+    var validUser = allowedRoles.includes(user === null || user === void 0 ? void 0 : user.id_role);
 
     if (!rol) {
       switch (user.id_role) {

package/package.json

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

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

@@ -20,6 +20,7 @@ export const GalleryElement = ({
   selectedImages,
   setSelectedImages,
   setCheckAll,
+  setSocketType,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -76,7 +77,9 @@ export const GalleryElement = ({
               <Select
                 width="100%"
                 placeholder="Tipo de toma"
-                options={imageInputs}
+                options={imageInputs?.filter(
+                  (img) => img.value === image.image_id || !img.active
+                )}
                 valueSelected={image.image_id}
                 onChange={(e) => {
                   changeImage({

package/src/components/molecules/TableHeader/styles.js

@@ -8,9 +8,12 @@ export const Container = styled.div`
   border-bottom: 1px solid ${GlobalColors.s2};
 
   .input-name-header {
-    overflow: auto;
+    overflow-x: auto;
     max-width: 40%;
     white-space: nowrap;
+    height: 23px;
+    line-height: 23px;
+    text-overflow: initial;
   }
   .status-asignation-info {
     display: flex;

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

@@ -192,6 +192,7 @@ export const ProviderProductEdition = ({
     img: face,
   });
   const [modalViewTextArea, setModalViewTextArea] = useState(false);
+  const [socketType, setSocketType] = useState(null);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -355,11 +356,7 @@ export const ProviderProductEdition = ({
   }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-    }));
+    const imageInputs = socketType.slice();
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
       name: e?.name,
@@ -387,6 +384,16 @@ export const ProviderProductEdition = ({
     ));
   };
 
+  useEffect(() => {
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+      active: images?.values.some((value) => value?.image_id === e?.id),
+    }));
+    setSocketType(imageInputs);
+  }, [images]);
+
   const saveDescriptions = async () => {
     setLoading(true);
     const productTemp = product;

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

@@ -27,8 +27,8 @@ RetailerProductEditionDefault.args = {
       images: 1,
     },
     orderId: 233,
-    status: "IN_PROGRESS",
-    datasheet_status: "IN_PROGRESS",
+    status: "QF",
+    datasheet_status: "QF",
     prio: "none",
     version: 2,
     description_status: "QF",
@@ -67,6 +67,7 @@ RetailerProductEditionDefault.args = {
         country: "México",
         id_region: 1,
         active: 1,
+        percentage: 100,
       },
       {
         id: 26,
@@ -74,6 +75,7 @@ RetailerProductEditionDefault.args = {
         country: "México",
         id_region: 1,
         active: 1,
+        percentage: 100,
       },
     ],
     country: "México",
@@ -83,22 +85,22 @@ RetailerProductEditionDefault.args = {
     product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 54,
-    name: "ESPECIALISTA TXTS PRUEBA",
+    id_user: 53,
+    name: "FACILITADOR ED PRUEBA",
     last_name: "",
-    email: "rlegorreta@contentoh.com",
+    email: "arojas@contentoh.com",
     position: null,
     telephone: null,
     country: null,
     id_company: 2,
-    id_cognito: "ca1d24ab-e992-4c19-b4e1-2fe6f720c16b",
+    id_cognito: "c106e141-e221-49e8-a382-ce99385c6d88",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 7,
+    id_role: 5,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -112,6 +114,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-54/54.png?1653425316222",
+    src: "https://content-management-profile.s3.amazonaws.com/id-53/53.png?1655161876316",
   },
 };

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

@@ -150,6 +150,7 @@ export const RetailerProductEdition = ({
   const [loading, setLoading] = useState(true);
   const [retailerStatus, setRetailerStatus] = useState("-");
   const [statusArray, setStatusArray] = useState([]);
+  const [socketType, setSocketType] = useState(null);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -339,11 +340,7 @@ export const RetailerProductEdition = ({
   }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-    }));
+    const imageInputs = socketType.slice();
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
       name: e?.name,
@@ -364,6 +361,7 @@ export const RetailerProductEdition = ({
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
+        setSocketType={setSocketType}
         changeImage={setImages}
         selectedImages={selectedImages}
         setSelectedImages={setSelectedImages}
@@ -432,6 +430,16 @@ export const RetailerProductEdition = ({
     }
   };
 
+  useEffect(() => {
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+      active: images?.values.some((value) => value?.image_id === e?.id),
+    }));
+    setSocketType(imageInputs);
+  }, [images]);
+
   const updateImages = useCallback(async () => {
     const imagesList = images?.values?.slice();
     const imagesListTemp = imagesList?.reduce((acc, image) => {
@@ -591,8 +599,7 @@ export const RetailerProductEdition = ({
   };
 
   const approveRejectButtons = (action) => {
-    let concept = getConcept(activeTab);
-    concept = action ? action : concept;
+    let concept = getConcept(action || activeTab);
 
     const [retailerStatus] = servicesData.filter(
       (srv) => srv.id_retailer === activeRetailer?.id && srv.service === concept
@@ -725,22 +732,10 @@ export const RetailerProductEdition = ({
   };
 
   const userAssigned = (tab, rol) => {
-    let concept = "";
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
+    let concept = getConcept(activeTab);
 
     const allowedRoles = [1, 4, 5, 6, 7, 8];
-    const validUser = allowedRoles.indexOf(user?.id_role) !== -1;
+    const validUser = allowedRoles.includes(user?.id_role);
 
     if (!rol) {
       switch (user.id_role) {