contentoh-components-library 21.3.5 → 21.3.7

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerSelect = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _variables = require("../../../global-files/variables");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  max-width: ", ";\n  //border: 1px solid red;\n  border-radius: ", ";\n"])), function (_ref) {
+  var maxWidthSelect = _ref.maxWidthSelect;
+  return maxWidthSelect ? maxWidthSelect : "unset";
+}, function (_ref2) {
+  var borderType = _ref2.borderType;
+  return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "oval" ? "17px" : "0px"; // default none
+});
+
+exports.Container = Container;
+
+var ContainerSelect = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-radius: inherit;\n\n  .buttonSelect {\n    width: 100%;\n    border-radius: inherit;\n\n    .button {\n      padding: 10px 16px;\n      gap: 10px;\n      .icon {\n        font-size: 13px;\n      }\n    }\n  }\n\n  + .MuiTooltip-popper {\n    background-color: transparent;\n\n    .dropdownSelect {\n      --background: white;\n      box-shadow: 0px 0px 10px 1px gray;\n      background-color: var(--background);\n      padding: 0px 0px;\n      border-radius: 7px;\n      display: flex;\n      flex-direction: column;\n      gap: 0px;\n      overflow: hidden;\n      max-width: ", ";\n      max-height: ", ";\n\n      .container-inputSearch {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        gap: 0px;\n        padding: 0px 10px 8px 10px;\n        border-bottom: 1px solid #f0f0f0;\n\n        .inputSearch {\n          padding-left: 8px;\n          flex-grow: 2;\n        }\n      }\n\n      .selectItemV2 {\n        width: 100%;\n\n        .button {\n          justify-content: flex-start;\n        }\n      }\n\n      .container-items {\n        flex-grow: 2;\n        display: flex;\n        flex-direction: column;\n        flex-wrap: ", ";\n        overflow: auto;\n\n        .selectItemV2 {\n          width: ", ";\n        }\n      }\n    }\n\n    &[data-popper-placement*=\"bottom\"] .dropdownSelect {\n      margin-top: 10px;\n    }\n    &[data-popper-placement*=\"top\"] .dropdownSelect {\n      margin-bottom: 10px;\n    }\n    &[data-popper-placement*=\"left\"] .dropdownSelect {\n      margin-right: 10px;\n    }\n    &[data-popper-placement*=\"right\"] .dropdownSelect {\n      margin-left: 10px;\n    }\n  }\n"])), function (_ref3) {
+  var maxWidthDropdown = _ref3.maxWidthDropdown;
+  return maxWidthDropdown ? maxWidthDropdown : "400px";
+}, function (_ref4) {
+  var maxHeightDropdown = _ref4.maxHeightDropdown;
+  return maxHeightDropdown ? maxHeightDropdown : "80vh";
+}, function (_ref5) {
+  var alignmentItemsOverflow = _ref5.alignmentItemsOverflow;
+  return alignmentItemsOverflow === "columns" ? "wrap" : "nowrap";
+}, function (_ref6) {
+  var maxWidthItems = _ref6.maxWidthItems;
+  return maxWidthItems ? maxWidthItems : "100%";
+});
+
+exports.ContainerSelect = ContainerSelect;

package/dist/components/molecules/SelectV2/test.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TestSelectV2 = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var TestSelectV2 = function TestSelectV2() {
+  var _useState = (0, _react.useState)([{
+    label: "item 1",
+    value: 1
+  }, {
+    label: "item 2",
+    value: 2
+  }, {
+    label: "item 3",
+    value: 3
+  }, {
+    label: "item 4",
+    value: 4
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    2: null,
+    4: null
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.SelectV2, {
+      items: items,
+      initialSelectedItems: undefined,
+      triggerType: "hover",
+      selectButton: {
+        type: "whiteS3",
+        transparent: true,
+        disabled: false,
+        label: "Prueba select",
+        size: 12
+      },
+      defaultItem: {
+        label: "default opcion",
+        itemType: "labelOnly",
+        showLabelInSelect: true
+      },
+      inputSearch: {
+        defaultText: "Buscar"
+      },
+      typeSelectItems: "checkbox",
+      multiple: false,
+      borderType: "oval",
+      onChange: function onChange(selectedItems) {
+        console.log("onChange:", selectedItems);
+        setSelected(selectedItems);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      onClick: function onClick(event) {
+        setItems([{
+          label: "item 1",
+          value: 1
+        }, {
+          label: "item 2",
+          value: 2
+        }, {
+          label: "item 3",
+          value: 3
+        }, {
+          label: "item 4",
+          value: 4
+        }, {
+          label: "item 5",
+          value: 5
+        }]);
+      },
+      children: "Refresh lista"
+    })]
+  });
+};
+
+exports.TestSelectV2 = TestSelectV2;

package/dist/components/molecules/SelectV2/test.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Test = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _test = require("./test");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/SelectV2/TestSelectV2",
+  component: _test.TestSelectV2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_test.TestSelectV2, (0, _objectSpread2.default)({}, args));
+};
+
+var Test = Template.bind({});
+exports.Test = Test;

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 = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Chat",
+  component: _index.Chat,
+  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.Chat, (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 = 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.ChatLists
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChatLists, (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);
+  }
+};

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

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatLists = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _utils = require("../../../../global-files/utils");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _CustomIcon = require("../../../atoms/CustomIcon");
+
+var _Image = require("../../../atoms/Image");
+
+var _Tooltip = require("../../../atoms/Tooltip");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ChatLists = function ChatLists(props) {
+  var companies = props.companies,
+      currentCompanyId = props.currentCompanyId,
+      onClickCompany = props.onClickCompany;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      openChats = _useState2[0],
+      setOpenChats = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      closedChats = _useState4[0],
+      setClosedChats = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    renderChats();
+  }, [companies]);
+
+  var renderChats = function renderChats() {
+    var jsxOpenChats = [];
+    var jsxClosedChats = [];
+
+    var _loop = function _loop() {
+      var companyId = _Object$keys[_i];
+      var company = companies[companyId]; // crear el item chat
+
+      var itemChat = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerItemChat, {
+        onClick: function onClick(event) {
+          onClickCompany && onClickCompany(companyId);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
+          className: "img-logoCompany",
+          width: "34px",
+          sizeLoading: 24,
+          colorLoading: undefined,
+          src: company.src,
+          componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "icon-logoCompany",
+            type: "white",
+            borderType: "circle",
+            size: 15,
+            icon: _freeSolidSvgIcons.faImage
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "container-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            className: "label-name",
+            children: [" ", company.name, " "]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            className: "label-lastDate",
+            children: (0, _utils.getCustomDate)(new Date(company.items.length ? company.items[0].date : undefined))
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-indicators",
+          children: currentCompanyId == companyId && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "label-ownCompany",
+            children: "Interno"
+          })
+        })]
+      }, "itemChat-" + companyId); // checar si es chat abierto
+
+      if (company.statusChat == "closed") jsxClosedChats.push(itemChat);else jsxOpenChats.push(itemChat);
+    };
+
+    for (var _i = 0, _Object$keys = Object.keys(companies); _i < _Object$keys.length; _i++) {
+      _loop();
+    }
+
+    setOpenChats(jsxOpenChats);
+    setClosedChats(jsxClosedChats);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [openChats.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-headerChats",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+            className: "tooltip-title",
+            position: "topCenter",
+            addArrow: false,
+            transitionType: "zoom",
+            followCursor: false,
+            componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerTooltip, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                className: "label-title",
+                children: " Chats abiertos "
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                className: "label-message",
+                children: "De acuerdo al estatus \n                  actual del producto, puedes establecer una conversaci\xF3n \n                  con estas compa\xF1ias"
+              })]
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              children: " Chats abiertos "
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-bodyChats",
+          children: openChats
+        })]
+      }), closedChats.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-headerChats",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+            className: "tooltip-title",
+            position: "topCenter",
+            addArrow: false,
+            transitionType: "zoom",
+            followCursor: false,
+            componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerTooltip, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                className: "label-title",
+                children: " Chats cerrados "
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                className: "label-message",
+                children: "Las conversaciones \n                  con estas compa\xF1ias han finalizado debido al cambio de \n                  estatus, sigue el flujo de trabajo con tus chats abiertos"
+              })]
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              children: " Chats cerrados "
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-bodyChats",
+          children: closedChats
+        })]
+      })]
+    })
+  });
+};
+
+exports.ChatLists = ChatLists;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerTooltip = exports.ContainerItemChat = exports.Container = 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, _templateObject3;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 30px;\n  background: white;\n  padding: 20px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  section {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n\n    // container del nombre de la seccion con su icono info\n    .container-headerChats {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: 5px;\n\n      .tooltip-title {\n        max-width: 100%;\n\n        label {\n          font-family: ", ", sans-serif;\n          font-size: 15px;\n          text-align: left;\n          color: #262626;\n        }\n      }\n    }\n\n    // container de la lista de los items chats de la seccion\n    .container-bodyChats {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;
+
+var ContainerItemChat = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  min-width: min-content;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n  background: #f7f7fc;\n  padding: 15px;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background 0.25s;\n\n  * {\n    cursor: inherit;\n  }\n\n  // imagen del logo de la compa\xF1ia\n  .img-logoCompany {\n    border-radius: 50%;\n    overflow: hidden;\n    height: 34px;\n    width: 34px;\n\n    .icon-logoCompany {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  // container de las etiquetas \"name\" y \"lastDate\"\n  .container-info {\n    flex-grow: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n\n    .label-name {\n      font-family: ", ", sans-serif;\n      font-size: 15px;\n      text-align: left;\n      color: #262626;\n    }\n    .label-lastDate {\n      font-family: ", ", sans-serif;\n      font-size: 11px;\n      text-align: left;\n      color: #b3b3b3;\n    }\n  }\n\n  .container-indicators {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 7px;\n\n    // label \"Interno\"\n    .label-ownCompany {\n      padding: 5px 10px;\n      border-radius: 3px;\n      font-family: ", ", sans-serif;\n      font-size: 10px;\n      background-color: rgba(0, 0, 0, 0.05);\n      color: #707070;\n    }\n  }\n\n  // cuando el item chat tenga el cursor\n  &:hover {\n    background-color: #d7d7dd;\n\n    .container-info {\n      .label-lastDate {\n        color: #959292;\n      }\n    }\n\n    /*\n    .label-ownCompany {\n      background-color: ;\n    }*/\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular); // container con 2 labels "label-title" y "label-message"
+
+
+exports.ContainerItemChat = ContainerItemChat;
+
+var ContainerTooltip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: min-content;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 5px;\n  background: transparent;\n\n  .label-title {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    text-align: left;\n    color: #262626;\n  }\n  .label-message {\n    font-family: ", ", sans-serif;\n    font-size: 11px;\n    text-align: left;\n    color: #262626;\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+
+exports.ContainerTooltip = ContainerTooltip;