contentoh-components-library 21.0.31 → 21.0.34

package/dist/components/organisms/InputGroup/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  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

package/dist/components/organisms/ProductImageModal/index.js

@@ -23,20 +23,18 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
+var _data = require("../../../global-files/data");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _images$values$active, _images$values$active2, _images$values$active3;
-
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
       headerInfo = _ref.headerInfo,
       validation = _ref.validation,
-      setShowModal = _ref.setShowModal,
-      sendToFacilitator = _ref.sendToFacilitator,
-      approveRejectButtons = _ref.approveRejectButtons;
+      setShowModal = _ref.setShowModal;
 
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)((0, _data.getImage)(images === null || images === void 0 ? void 0 : images.values[0], 710, 710)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       activeImage = _useState2[0],
       setActiveImage = _useState2[1];
@@ -69,8 +67,8 @@ var ProductImageModal = function ProductImageModal(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "modal-image-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
-          img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
-          altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
+          img: activeImage.src,
+          altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
           imageType: "expanded-modal-image"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -79,7 +77,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
           className: "validation-and-table-container",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "validation-panel",
-            children: [approveRejectButtons("images") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
               buttonType: "circular-button ".concat(buttonType),
               onClick: function onClick() {
                 return setShowValidationPanel(true);
@@ -92,15 +90,13 @@ var ProductImageModal = function ProductImageModal(_ref) {
             }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
               id: "validation-panel",
               setOptionClicked: setButtonType,
-              setShowValidationPanel: setShowValidationPanel,
-              sendToFacilitator: sendToFacilitator
+              setShowValidationPanel: setShowValidationPanel
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
+            imageData: activeImage.data,
             headerInfo: headerInfo,
-            activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
-            darkMode: true,
-            lists: images
+            activeImage: activeImage,
+            darkMode: true
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
           images: images,

package/dist/components/organisms/ProductImageModal/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: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
 
 exports.Container = Container;

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

@@ -26,118 +26,356 @@ var Template = function Template(args) {
 var RetailerProductEditionDefault = Template.bind({});
 exports.RetailerProductEditionDefault = RetailerProductEditionDefault;
 RetailerProductEditionDefault.args = {
+  productData: {
+    imagesData: {
+      image: {
+        src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+        name: "Hero.jpg"
+      }
+    },
+    headerData: {
+      name: "Nombre del producto",
+      status: "P",
+      percent: 20,
+      backgroundColor: "in_progress",
+      priority: "low",
+      date: new Date().toLocaleDateString(),
+      features: [{
+        feature: "Prov",
+        value: "Unilever"
+      }, {
+        feature: "Vendor",
+        value: "1234567890"
+      }, {
+        feature: "SKU",
+        value: "1234567890"
+      }, {
+        feature: "UPC",
+        value: "1234567890"
+      }, {
+        feature: "Categoría",
+        value: "Desodorantes Caballero y Dama"
+      }],
+      validation: "null-button"
+    },
+    status: "AA",
+    image: {
+      src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg"
+    },
+    services: {
+      Descripción: [{
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }],
+      "Ficha técnica": [{
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }, {
+        inputGroup: {
+          name: "Información básica del producto",
+          inputs: [{
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }, {
+            label: "Item",
+            value: "1234567890",
+            placeholder: "Ingresar valor"
+          }]
+        }
+      }],
+      Imágenes: [{
+        img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+        alt: "img",
+        name: "Hero",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+        alt: "img",
+        name: "Hero2",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+        alt: "img",
+        name: "Hero3",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+        alt: "img",
+        name: "Hero4",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "https://memegenerator.net/img/images/72798198.jpg",
+        alt: "img",
+        name: "Hero5",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }, {
+        img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+        alt: "img",
+        name: "Hero6",
+        data: [{
+          feature: "Tamaño de imagen",
+          value: "1000x10000"
+        }, {
+          feature: "Formato",
+          value: "jpg"
+        }, {
+          feature: "Resolución",
+          value: "300dpi"
+        }, {
+          feature: "Tipo de imagen",
+          value: "Tipo de imagen"
+        }, {
+          feature: "Identificador",
+          value: "F261"
+        }]
+      }]
+    }
+  },
   tabsSections: {
     Descripción: true,
     "Ficha técnica": false,
     Imágenes: false
-  },
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjcxNWU4ZTc3LTAwMmMtNGMyNC1hNjM2LTYxNDkxYzQ0MzI2MSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjUyMzA3MTUzLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjUyMzEwNzUzLCJpYXQiOjE2NTIzMDcxNTMsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.Ov1kjVt1sWrNu-8gPhBvnS6SpCuPmOYcqBwJVIoz-YJvuyNx0lMeRflG99cpgj4SojZqgMfPMQ8gJg5263fhj9oynolP7kh08AS_uoTf6_FK2KCaY8gVF4OJnoJJaX7J12JxzmRMI-lQJftvvoPxo5KYHCf7uZSj-5C5z6yIdk59T3U7vziYiKVtJFvVpA6IEB-oIS57MSdg27kwOtYjWvkfZ5vDRfkoOBGmBBELI9uFbKQS0cmWaLSBhd8ptbXWkAprxm-nkJnH9KQKmCsCLBthqmZTsMDw3ok0RsVpEE7_x4X0Hg0756ebqDe1kLCVuTIBpPx4ySvCdlewvi9bYA",
-  articleId: 238,
-  category: 846,
-  version: 2,
-  productSelected: {
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1
-    },
-    orderId: 105,
-    status: "AF",
-    datasheet_status: "AA",
-    prio: "none",
-    version: 2,
-    description_status: "AF",
-    images_status: "AF",
-    article: {
-      id_article: 306,
-      id_category: "697",
-      name: "Shampoo anticaida",
-      upc: "234454365",
-      timestamp: "2022-03-17T17:24:57.000Z",
-      id_user: 28,
-      status: "NULL",
-      active: 1,
-      company_id: 1,
-      company_name: "COMPANY DEV",
-      country: "Colombia",
-      id_order: 105,
-      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_recepcionist: null,
-      category: "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
-      missingAttributes: 43,
-      missingDescriptions: 3,
-      missingImages: 4
-    },
-    retailers: [{
-      id: 4,
-      name: "Walmart Super y Superama",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 5,
-      name: "Chedraui",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 9,
-      name: "Amazon",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 12,
-      name: "La Comer",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }, {
-      id: 20,
-      name: "Cornershop",
-      country: "México",
-      id_region: 1,
-      active: 1
-    }],
-    country: "Colombia",
-    upc: "234454365"
-  },
-  user: {
-    id_user: 30,
-    name: "Admin",
-    last_name: "Ulises",
-    email: "salmeron.5@hotmail.com",
-    position: "Admin",
-    telephone: null,
-    country: "México",
-    id_company: 2,
-    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
-    birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
-    id_role: 6,
-    active: 1,
-    is_retailer: 0,
-    membership: {
-      id: 2,
-      start_date: "2021-11-05T02:35:12.000Z",
-      end_date: "2022-11-05T02:34:49.000Z",
-      planID: 1,
-      plan: "prod_KtkvuFFLpOdP6e",
-      name: "Plan Free",
-      user_limit: "1",
-      products_limit: "3",
-      type: "PyMES"
-    },
-    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1649896700986"
   }
 };