contentoh-components-library 21.2.84 → 21.2.86

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,6 +15,8 @@ var _index2 = require("../../atoms/GeneralButton/index");
 
 var _react = require("react");
 
+var _Chat = _interopRequireDefault(require("../../organisms/Chat"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var HeaderTop = function HeaderTop(_ref) {
@@ -25,11 +29,14 @@ var HeaderTop = function HeaderTop(_ref) {
     ref: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Edici\xF3n de producto"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
-      buttonType: "close-button",
-      onClick: function onClick() {
-        window.location.href = "/products";
-      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-top",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
+        buttonType: "close-button",
+        onClick: function onClick() {
+          window.location.href = "/products";
+        }
+      })
     })]
   });
 };

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  .buttons-top {\n    display: flex;\n    align-items: center;\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/ImageTooltip/ImageTooltip.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageTooltipTest = exports.ImageTooltipOK = exports.ImageTooltipERROR = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ImageTooltip",
+  component: _index.default,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+};
+
+var keyS3_test = "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
+var srcTest = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_test);
+var ImageTooltipTest = Template.bind({});
+exports.ImageTooltipTest = ImageTooltipTest;
+ImageTooltipTest.args = {
+  width: "200px",
+  sizeLoading: "50",
+  colorLoading: "#bbbbbb",
+  src: "bn",
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " test error "
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip test "
+  })
+};
+var keyS3_OK = "84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png";
+var srcOK = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_OK);
+var ImageTooltipOK = Template.bind({});
+exports.ImageTooltipOK = ImageTooltipOK;
+ImageTooltipOK.args = {
+  width: "250px",
+  sizeLoading: "40",
+  src: srcOK,
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " img no cargada "
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip OK "
+  })
+};
+var keyS3_ERROR = "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg";
+var srcERROR = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_ERROR);
+var ImageTooltipERROR = Template.bind({});
+exports.ImageTooltipERROR = ImageTooltipERROR;
+ImageTooltipERROR.args = {
+  width: "300px",
+  sizeLoading: "60",
+  src: srcERROR,
+  componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " ERROR al cargar "
+  }),
+  componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    children: " mensaje del tooltip ERROR "
+  })
+};

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

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageTooltip;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _defaultUpdate = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultUpdate.png"));
+
+var _react = require("react");
+
+var _Tooltip = _interopRequireDefault(require("../../atoms/Tooltip"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ImageTooltip(props) {
+  var className = props.className,
+      width = props.width,
+      sizeLoading = props.sizeLoading,
+      colorLoading = props.colorLoading,
+      classNameLoading = props.classNameLoading,
+      src = props.src,
+      componentDefault = props.componentDefault,
+      classNameImg = props.classNameImg,
+      classNameTooltip = props.classNameTooltip,
+      componentTooltip = props.componentTooltip;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      imgLoad = _useState2[0],
+      setImgLoad = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+  /* solo para hacer pruebas en modo dev
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
+  */
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tooltip.default, {
+    position: "topCenter",
+    addArrow: false,
+    transitionType: "zoom",
+    followCursor: false,
+    className: className,
+    classNameTooltip: classNameTooltip,
+    componentTooltip: imgLoad !== undefined && !loading && componentTooltip,
+    children: [src && (imgLoad === undefined || loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerLoading, {
+      className: classNameLoading,
+      sizeLoading: sizeLoading,
+      colorLoading: colorLoading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+        pulse: true,
+        icon: _freeSolidSvgIcons.faSpinner
+      })
+    }), (!src || imgLoad === false && !loading) && componentDefault, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Img, {
+      className: classNameImg,
+      src: src,
+      onLoad: function onLoad(event) {
+        return setImgLoad(true);
+      },
+      onError: function onError(event) {
+        return setImgLoad(false);
+      },
+      show: imgLoad === true && !loading
+    })]
+  });
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Img = exports.ContainerLoading = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2;
+
+var ContainerLoading = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  place-items: center;\n  min-width: min-content;\n  font-size: ", "px;\n  color: ", ";\n  padding: 5px;\n"])), function (_ref) {
+  var sizeLoading = _ref.sizeLoading;
+  return sizeLoading ? sizeLoading : "30";
+}, function (_ref2) {
+  var colorLoading = _ref2.colorLoading;
+  return colorLoading ? colorLoading : "#9e2674";
+});
+
+exports.ContainerLoading = ContainerLoading;
+
+var Img = _styledComponents.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  width: 100%;\n  object-fit: contain;\n"])), function (_ref3) {
+  var show = _ref3.show;
+  return show ? "grid" : "none";
+});
+
+exports.Img = Img;

package/dist/components/organisms/Chat/Chat.stories.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.chatTECH_ticketOpen_user65 = exports.chatTECH_ticketOpenOwn_user66 = exports.chatTECH_ticketClosed_user65 = exports.chatTECH_ticketClosedOwn_user66 = exports.chatPROV_orderProduct = exports.chatFAB_ticketOpen_user49 = exports.chatFAB_ticketClosed_user49 = exports.chatFAB_orderProduct_user49 = exports.chatFAB_orderProduct_user37 = exports.chatCAD_orderProduct = exports.chatCAD_merchantsProduct = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Chat",
+  component: _index.default,
+  argTypes: {
+    chatContainerType: {
+      options: ["popUp", "fixed"],
+      control: {
+        type: "select"
+      }
+    },
+    chatType: {
+      options: ["order_product", "merchant_product", "ticket"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+}; // ejemplo del chat orderProduct con user CADENA
+
+
+var chatCAD_orderProduct = Template.bind({});
+exports.chatCAD_orderProduct = chatCAD_orderProduct;
+chatCAD_orderProduct.args = {
+  chatType: "order_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI2YmI0NzExMi03ZTNiLTRjYzUtYmVhZS02MzMxZjEwYjk3MzIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTYxNjI0MSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjY1NjE5ODQxLCJpYXQiOjE2NjU2MTYyNDEsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.gi1Jiua_O175vHLy-CYXOR945IRcObIj5j1LNk4_EhcKPz-MzPnfWDLH7L3sTiNS-VUhIRtAhtUVPUSYv0oP1qfJwFHomerxJvYgJge8SLWPjL6yGBnTxAvHVbuLU8kcaoZup2eNMV6XOIAEBAHeCDm4vW0rYWwfrKADPyYGZQF2si14o3wtgSMX5a4ccxGwikT3to3HttWBhmJs_I1Xr_BvBxePc4WghjQr5GVGbq8vhr4HwdkTmlcJAnQsc_fmIdbJ_ACyTa1wr343KYYOQVwBjAmZDa6rU16y0yTr_J4IVWY3aS5UpBEBHy4XE0c76UaN-_DcGiVl4ayWQIUz8A",
+    id: 84311,
+    retailerId: 68,
+    orderId: 3118
+  }
+}; // ejemplo del chat orderProduct con user PROVEEDOR
+
+var chatPROV_orderProduct = Template.bind({});
+exports.chatPROV_orderProduct = chatPROV_orderProduct;
+chatPROV_orderProduct.args = {
+  chatType: "order_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZDBjYzVjOC1hODllLTRiZGQtOWUyZC0zNThhMDFjYzlhNjIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiOWQwY2M1YzgtYTg5ZS00YmRkLTllMmQtMzU4YTAxY2M5YTYyIiwiYXVkIjoiNTJkOXNra2RjZzhxanA4OG9vazF1c2U2bWsiLCJldmVudF9pZCI6IjU1NDQ5NzhmLWExMGEtNGE5Ni05M2NkLWY5Y2ZmNTFlNWRlOCIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjY1NjI0MjYyLCJuYW1lIjoiSXNtYWVsIExvcGV6IiwicGhvbmVfbnVtYmVyIjoiKzUyMzExMTM2NjMzNiIsImV4cCI6MTY2NTYyNzg2MiwiaWF0IjoxNjY1NjI0MjYyLCJlbWFpbCI6Imlsb3BlekBjb250ZW50b2guY29tIn0.bIDIv57LRgafkymcUY4DqFRxR91iTBlZ7H7v1o3TnwJpIFPUEvzfvHObDR534xfa-R5ZRz46YCjsV6yQ-2hd8OA97VFLrqyC8Yqx_hjoIA1QxX_5_-b4UWaIib_1wSkrWd2gQtuKAUucfzAisZp1UNiY6Sm4VPGXsc5Lk6kLo1X_rctLUlQMhl5KaMNaSWqvbcYZLz5XSpbJR_MHegkdquKBaQJVKl76TkvDT8Eyr6rPUUAtnRBAPfnP4dW82HgT-aZp-0wUH5fYcb02agPg4-wqVsxPr8WxihATqn9rVfR5CjZWYOGPdSw7AUS33yYAkx5Nmnz4oIcRlPsvF5U62g",
+    id: 84311,
+    retailerId: 68,
+    orderId: 3118
+  }
+}; // ejemplo del chat orderProduct con user FABRICA 37
+
+var chatFAB_orderProduct_user37 = Template.bind({});
+exports.chatFAB_orderProduct_user37 = chatFAB_orderProduct_user37;
+chatFAB_orderProduct_user37.args = {
+  chatType: "order_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI1YTg4MmFkMS04OWFjLTQwYTYtYWRhMi02NzgyNWNjMzNiZTciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NjIwNTg2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NjIwOTQ2NSwiaWF0IjoxNjY2MjA1ODY1LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.HOsBuNBBeDL4Vwhi5Rou0jzZqOO_n_AIvoFOVRuFFiVppzaTDFNEVcapq9hCLIGQZT5NK8Arwo-nZkcVVAqHMsu8KKJsPQZIkGbHI6CVD7IkBBfm756e-tTuHHBYd4ND3HifVDWwno8mEODLZdaWRcy5MN3TErqCEy8cf1u7CQSguKmjeElL-8DHtNfLKMnxJOGGW_JAEa1JVWninzekPAeFKmWFOtByFCJZT1HBmL9XERIXXN6qWU_g0KlUm_wBWkmIDxuVRPorFEPinh0ETAGkGa5mf1SPaibXXSEoiF58DkFRyrOcTVKnV7Dixjo6DvBwN98fYW0zaeo3G5nSXw",
+    id: 84311,
+    retailerId: 68,
+    orderId: 3118
+  }
+}; // ejemplo del chat orderProduct con user FABRICA 49
+
+var chatFAB_orderProduct_user49 = Template.bind({});
+exports.chatFAB_orderProduct_user49 = chatFAB_orderProduct_user49;
+chatFAB_orderProduct_user49.args = {
+  chatType: "order_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxODA1MDQ1Mi0xOGQ0LTQxM2ItYjg2MC1iMWMyMzZmMTM5OWYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjE4MDUwNDUyLTE4ZDQtNDEzYi1iODYwLWIxYzIzNmYxMzk5ZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkYmU1ODRmOS0xOTJmLTRkNDEtOWMxMS0xMzRkMDgzODVjMDQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTcxNjI3NywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NTcxOTg3NywiaWF0IjoxNjY1NzE2Mjc3LCJlbWFpbCI6Im16dW5pZ2FAY29udGVudG9oLmNvbSJ9.KoPNFy9gZYoYjiCGanSe_MvnuX7rSvNTXqQVffXSzGYeb4R3G6yDWrWItjHfgFmmo1jLlTmLT_yiVC4g9Vpo9WxebPwZA9rFwKDbc3vKeAs1JSUfaatQOwIqS1NsHwEkAM-agsO2s2Rnqq4h-FCcURqjiknbvHXUjcXqSea-3JlxtVFw3x7NLG3bUPqfPyVV1N5jR-XMrDOSZctS2k4WvPqhxf75Iv77U23YNFRoOIUZIAYx8SmSw792h4YwmJqMUuZlo48aBaaZO3NE83KdMR-mYvvoa-TDIE2d9ww-vPctauVL9ydB5ISSB8gUz90o8IZIWjrwQgbzE7eRPKxPWw",
+    id: 84311,
+    retailerId: 68,
+    orderId: 3118
+  }
+}; // ejemplo del chat merchantProduct con user CADENA
+
+var chatCAD_merchantsProduct = Template.bind({});
+exports.chatCAD_merchantsProduct = chatCAD_merchantsProduct;
+chatCAD_merchantsProduct.args = {
+  chatType: "merchant_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI2YmI0NzExMi03ZTNiLTRjYzUtYmVhZS02MzMxZjEwYjk3MzIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTYxNjI0MSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjY1NjE5ODQxLCJpYXQiOjE2NjU2MTYyNDEsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.gi1Jiua_O175vHLy-CYXOR945IRcObIj5j1LNk4_EhcKPz-MzPnfWDLH7L3sTiNS-VUhIRtAhtUVPUSYv0oP1qfJwFHomerxJvYgJge8SLWPjL6yGBnTxAvHVbuLU8kcaoZup2eNMV6XOIAEBAHeCDm4vW0rYWwfrKADPyYGZQF2si14o3wtgSMX5a4ccxGwikT3to3HttWBhmJs_I1Xr_BvBxePc4WghjQr5GVGbq8vhr4HwdkTmlcJAnQsc_fmIdbJ_ACyTa1wr343KYYOQVwBjAmZDa6rU16y0yTr_J4IVWY3aS5UpBEBHy4XE0c76UaN-_DcGiVl4ayWQIUz8A",
+    id: 84300,
+    version: 1
+  }
+};
+/*
+export const chatPROV_merchantsProduct = Template.bind({});
+chatPROV_merchantsProduct.args = {
+  userToken:
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZDBjYzVjOC1hODllLTRiZGQtOWUyZC0zNThhMDFjYzlhNjIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiOWQwY2M1YzgtYTg5ZS00YmRkLTllMmQtMzU4YTAxY2M5YTYyIiwiYXVkIjoiNTJkOXNra2RjZzhxanA4OG9vazF1c2U2bWsiLCJldmVudF9pZCI6IjU1NDQ5NzhmLWExMGEtNGE5Ni05M2NkLWY5Y2ZmNTFlNWRlOCIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjY1NjI0MjYyLCJuYW1lIjoiSXNtYWVsIExvcGV6IiwicGhvbmVfbnVtYmVyIjoiKzUyMzExMTM2NjMzNiIsImV4cCI6MTY2NTYyNzg2MiwiaWF0IjoxNjY1NjI0MjYyLCJlbWFpbCI6Imlsb3BlekBjb250ZW50b2guY29tIn0.bIDIv57LRgafkymcUY4DqFRxR91iTBlZ7H7v1o3TnwJpIFPUEvzfvHObDR534xfa-R5ZRz46YCjsV6yQ-2hd8OA97VFLrqyC8Yqx_hjoIA1QxX_5_-b4UWaIib_1wSkrWd2gQtuKAUucfzAisZp1UNiY6Sm4VPGXsc5Lk6kLo1X_rctLUlQMhl5KaMNaSWqvbcYZLz5XSpbJR_MHegkdquKBaQJVKl76TkvDT8Eyr6rPUUAtnRBAPfnP4dW82HgT-aZp-0wUH5fYcb02agPg4-wqVsxPr8WxihATqn9rVfR5CjZWYOGPdSw7AUS33yYAkx5Nmnz4oIcRlPsvF5U62g",
+  chatType: "merchants_products",
+  articleId: "84300",
+  articleVersion: "1",
+};*/
+// ejemplo del chat ticket con user FAB
+
+var chatFAB_ticketClosed_user49 = Template.bind({});
+exports.chatFAB_ticketClosed_user49 = chatFAB_ticketClosed_user49;
+chatFAB_ticketClosed_user49.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 10,
+    ticketOwnerUserId: 23,
+    statusTicket: "COMPLETED",
+    currentUser: {
+      id: 49,
+      companyId: 2,
+      isUserTech: false
+    }
+  }
+}; // ejemplo del chat ticket con user TECH
+
+var chatTECH_ticketClosed_user65 = Template.bind({});
+exports.chatTECH_ticketClosed_user65 = chatTECH_ticketClosed_user65;
+chatTECH_ticketClosed_user65.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 10,
+    ticketOwnerUserId: 23,
+    statusTicket: "COMPLETED",
+    currentUser: {
+      id: 65,
+      companyId: 2,
+      isUserTech: true
+    }
+  }
+}; // ejemplo del chat ticket con user TECH propietario del ticket
+
+var chatTECH_ticketClosedOwn_user66 = Template.bind({});
+exports.chatTECH_ticketClosedOwn_user66 = chatTECH_ticketClosedOwn_user66;
+chatTECH_ticketClosedOwn_user66.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 10,
+    ticketOwnerUserId: 66,
+    statusTicket: "COMPLETED",
+    currentUser: {
+      id: 66,
+      companyId: 2,
+      isUserTech: true
+    }
+  }
+}; // ejemplo del chat ticket con user FAB
+
+var chatFAB_ticketOpen_user49 = Template.bind({});
+exports.chatFAB_ticketOpen_user49 = chatFAB_ticketOpen_user49;
+chatFAB_ticketOpen_user49.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 11,
+    ticketOwnerUserId: 23,
+    statusTicket: "PENDING",
+    currentUser: {
+      id: 49,
+      companyId: 2,
+      isUserTech: false
+    }
+  }
+}; // ejemplo del chat ticket con user TECH
+
+var chatTECH_ticketOpen_user65 = Template.bind({});
+exports.chatTECH_ticketOpen_user65 = chatTECH_ticketOpen_user65;
+chatTECH_ticketOpen_user65.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 11,
+    ticketOwnerUserId: 23,
+    statusTicket: "PENDING",
+    currentUser: {
+      id: 65,
+      companyId: 2,
+      isUserTech: true
+    }
+  }
+}; // ejemplo del chat ticket con user TECH propietario del ticket
+
+var chatTECH_ticketOpenOwn_user66 = Template.bind({});
+exports.chatTECH_ticketOpenOwn_user66 = chatTECH_ticketOpenOwn_user66;
+chatTECH_ticketOpenOwn_user66.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 11,
+    ticketOwnerUserId: 66,
+    statusTicket: "PENDING",
+    currentUser: {
+      id: 66,
+      companyId: 2,
+      isUserTech: true
+    }
+  }
+};

package/dist/components/organisms/Chat/ChatLists/ChatLists.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onlyOpenChatLists = exports.exampleChatLists = exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _THD = _interopRequireDefault(require("./THD.png"));
+
+var _Rotoplas = _interopRequireDefault(require("./Rotoplas.jpeg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Chat/ChatLists",
+  component: _index.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+}; // companies de prueba
+
+
+var companies = {
+  200: {
+    name: "The Home Depot",
+    src: _THD.default,
+    lastChatDate: "2022-11-4 21:01:00",
+    statusChat: "disabled"
+  },
+  300: {
+    name: "Rotoplas",
+    src: _Rotoplas.default,
+    lastChatDate: "2022-11-03 21:01:00",
+    statusChat: "enabled"
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-11-02 21:01:00",
+    statusChat: "current"
+  }
+}; // companies de prueba sin chats cerrados
+
+var companies2 = {
+  300: {
+    name: "Rotoplas",
+    src: _Rotoplas.default,
+    lastChatDate: "2022-10-27 21:01:00",
+    statusChat: "enabled"
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-9-27 21:01:00",
+    statusChat: "current"
+  }
+};
+var exampleChatLists = Template.bind({});
+exports.exampleChatLists = exampleChatLists;
+exampleChatLists.args = {
+  companies: companies,
+  currentCompanyId: 100,
+  onClickCompany: function onClickCompany(companyId) {
+    console.log("click en company:", companyId);
+  }
+};
+var onlyOpenChatLists = Template.bind({});
+exports.onlyOpenChatLists = onlyOpenChatLists;
+onlyOpenChatLists.args = {
+  companies: companies2,
+  currentCompanyId: 100,
+  onClickCompany: function onClickCompany(companyId) {
+    console.log("click en company:", companyId);
+  }
+};