contentoh-components-library 21.3.30 → 21.3.31

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

@@ -0,0 +1,149 @@
+import { Chat } from "./index";
+
+export default {
+  title: "Components/organisms/Chat",
+  component: Chat,
+  argTypes: {
+    chatContainerType: {
+      options: ["popUp", "fixed"],
+      control: { type: "select" },
+    },
+    chatType: {
+      options: ["order_product", "merchant_product", "ticket"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Chat {...args} />;
+
+// ejemplo del chat orderProduct con user CADENA
+export const chatCAD_orderProduct = Template.bind({});
+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
+export const chatPROV_orderProduct = Template.bind({});
+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
+export const chatFAB_orderProduct_user37 = Template.bind({});
+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
+export const chatFAB_orderProduct_user49 = Template.bind({});
+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
+export const chatCAD_merchantsProduct = Template.bind({});
+chatCAD_merchantsProduct.args = {
+  chatType: "merchant_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken:
+      "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhMWYyM2IzZC1mOTk0LTRjNWUtOTk4MC04ZThjYmQxMzcwMzYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3NDU3NjMzNywibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjc0NTc5OTM3LCJpYXQiOjE2NzQ1NzYzMzcsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.GZIbxwAqZBifyxJQdb-Asbf2X9k4Nmi44TRINg9oGdvz0MknHOUtCiQ2ID7XiqKzgcVvbl9RDDx2GFWZt0Fd2-Sd5NSMxEl3C3ZWqVWQb9ncrMdVcAOHPp76w2eR6IzOwpa5L4GAc_mLACaJtfGdYrSLSxYTpMPQfhxaG2GDdWbOLA-_hNflff0lQD-EvCg8wEirAcZHro2mEeqMFG2GLhh0zfb_H-A8EWMqmMM3kYXVHTza04S1HSYsXhGzBi-7paL_Oh3bcORN95CqeddkReSmThG5wcp0_YScCSFNeUDEvJo2Z9w9TlOrEgUIrSkaY0aLZUpERfOST55P4R9hRw",
+    id: 429,
+    version: 1,
+  },
+};
+
+export const chatCAD_merchantsProductProvider = Template.bind({});
+chatCAD_merchantsProductProvider.args = {
+  chatType: "merchant_product",
+  chatContainerType: "popUp",
+  chatData: {
+    userToken:
+      "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4MWY3NmNjYy0yZDYzLTQyYzYtYjQzOS03NDQ2ZWFhYjFhZDciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjgxZjc2Y2NjLTJkNjMtNDJjNi1iNDM5LTc0NDZlYWFiMWFkNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJiN2M5YWVlYS0zMmRmLTQ0YmUtODliNy01OGY1MzE0YzMzN2IiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3NDUxMTUzMiwibmFtZSI6Im1lcmNoYW50czIzZW5lQGFsbGZyZWVtYWlsLm5ldCBtZXJjaGFudHMyM2VuZUBhbGxmcmVlbWFpbC5uZXQiLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODkzIiwiZXhwIjoxNjc0NTE1MTMyLCJpYXQiOjE2NzQ1MTE1MzIsImVtYWlsIjoibWVyY2hhbnRzMjNlbmVAYWxsZnJlZW1haWwubmV0In0.eeR19yCD--WMFFfbljOufIthXUuXc_gFoJzLX9Q6mzgPpA2TOmzabQFLh2O1WKgGgcmFSEfGfTjzFRAd44O5MYqB_VltFPoMSNIVA38rmX8yfKhVlzF_ZBRVLNHZZOrKOQrCTZX7vibtUtvnbXPtkPgJV1Wb3RoB-45qi3qa1xIUcHwtdInsdQG1PvL28ryH4-ZupjXYRC9JB2wMDFPF1c6HnUQQupTSHRgTHVj9USNCYblOuCJSj1s2_lUrmFZJBifRGXsYj8rBz6mkkl5wAGU-YCmCFkwuD3Gl5bsevFg_VL2CGEfSwSXMzsB-ud4FMIaMZuQHpF-CefGJaEHYxg",
+    id: 429,
+    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
+export const chatTicket_userNORMAL = Template.bind({});
+chatTicket_userNORMAL.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 104,
+    ticketOwnerUserId: 49,
+    statusTicket: "IN_PROGRESS",
+    ticketCompany: 817,
+    currentUser: {
+      token:
+        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI2YmI0NzExMi03ZTNiLTRjYzUtYmVhZS02MzMxZjEwYjk3MzIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NTYxNjI0MSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjY1NjE5ODQxLCJpYXQiOjE2NjU2MTYyNDEsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.gi1Jiua_O175vHLy-CYXOR945IRcObIj5j1LNk4_EhcKPz-MzPnfWDLH7L3sTiNS-VUhIRtAhtUVPUSYv0oP1qfJwFHomerxJvYgJge8SLWPjL6yGBnTxAvHVbuLU8kcaoZup2eNMV6XOIAEBAHeCDm4vW0rYWwfrKADPyYGZQF2si14o3wtgSMX5a4ccxGwikT3to3HttWBhmJs_I1Xr_BvBxePc4WghjQr5GVGbq8vhr4HwdkTmlcJAnQsc_fmIdbJ_ACyTa1wr343KYYOQVwBjAmZDa6rU16y0yTr_J4IVWY3aS5UpBEBHy4XE0c76UaN-_DcGiVl4ayWQIUz8A",
+      id: 59,
+      companyId: 817,
+      isUserTech: false,
+    },
+  },
+};
+
+// ejemplo del chat ticket con user TECH
+export const chatTicket_userTECH = Template.bind({});
+chatTicket_userTECH.args = {
+  chatType: "ticket",
+  chatContainerType: "fixed",
+  chatData: {
+    id: 130,
+    ticketOwnerUserId: 49,
+    ticketCompany: 817,
+    statusTicket: "IN_PROGRESS",
+    currentUser: {
+      token:
+        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5M2FkOTM5Yy04MzJjLTQ4NWItOWUzMS0yN2MxNzBjMDk1NWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTY2MjU5MiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2Njk2NjYxOTIsImlhdCI6MTY2OTY2MjU5MiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.hhdlQk-ljHpyZPRoG02YcvPow8jpm9coZfmEuZ29vIVX7bX5k05Ss3FkaT0dYNr2qEvqZHHqH61oJvx4xr2i6z2c3xEZxyJZFR-Cc_skhH0UwGXbCH9up5PW1aipY5rL45E42R7GKSGmB5Z-B7vxe2NcL-ZojYZkXNZ7Gx_lM8Vpq-XsFLJ4nCJlH7vx9D4SkREN3lLfYIIgqNrxJ_wqfqvcqexwRJfnr76ZqCuDR4dTWsES2Lf5D8Wa_wkQAjQNdzP7ai28l9fRyCSwkTxvamdJkx7p-tssOL5pAnCsKkD22UN-09c1bhuGrgfKWUV4awbptfjvHS7TSq0bWiv4gQ",
+      id: 28,
+      companyId: 1,
+      isUserTech: true,
+    },
+  },
+};

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

@@ -0,0 +1,65 @@
+import { ChatLists } from "./index";
+import THD from "./THD.png";
+import Rotoplas from "./Rotoplas.jpeg";
+
+export default {
+  title: "Components/organisms/Chat/ChatLists",
+  component: ChatLists,
+};
+
+const Template = (args) => <ChatLists {...args} />;
+
+// companies de prueba
+const companies = {
+  200: {
+    name: "The Home Depot",
+    src: THD,
+    lastChatDate: "2022-11-4 21:01:00",
+    statusChat: "disabled",
+  },
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    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
+const companies2 = {
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    lastChatDate: "2022-10-27 21:01:00",
+    statusChat: "enabled",
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-9-27 21:01:00",
+    statusChat: "current",
+  },
+};
+
+export const exampleChatLists = Template.bind({});
+exampleChatLists.args = {
+  companies,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};
+
+export const onlyOpenChatLists = Template.bind({});
+onlyOpenChatLists.args = {
+  companies: companies2,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};

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

@@ -0,0 +1,141 @@
+import { Container, ContainerItemChat, ContainerTooltip } from "./styles";
+import { useEffect, useState } from "react";
+import { getCustomDate } from "../../../../global-files/utils";
+import { faImage as IconImage } from "@fortawesome/free-solid-svg-icons";
+import { CustomIcon } from "../../../atoms/CustomIcon";
+import { Image } from "../../../atoms/Image";
+import { Tooltip } from "../../../atoms/Tooltip";
+
+export const ChatLists = (props) => {
+  const {
+    companies /* {
+        id: { name , src , statusChat , items } ,
+        ...
+    } */,
+    currentCompanyId, // number
+    onClickCompany, // (id) => {}
+  } = props;
+  const [openChats, setOpenChats] = useState([]);
+  const [closedChats, setClosedChats] = useState([]);
+
+  useEffect(() => {
+    renderChats();
+  }, [companies]);
+
+  const renderChats = () => {
+    let jsxOpenChats = [];
+    let jsxClosedChats = [];
+
+    for (const companyId of Object.keys(companies)) {
+      const company = companies[companyId];
+      // crear el item chat
+      const itemChat = (
+        <ContainerItemChat
+          key={"itemChat-" + companyId}
+          onClick={(event) => {
+            onClickCompany && onClickCompany(companyId);
+          }}
+        >
+          {/* logo de la compañia */}
+          <Image
+            className="img-logoCompany"
+            width={"34px"}
+            sizeLoading={24}
+            colorLoading={undefined}
+            src={company.src}
+            componentDefault={
+              <CustomIcon
+                className="icon-logoCompany"
+                type={"white"}
+                borderType={"circle"}
+                size={15}
+                icon={IconImage}
+              />
+            }
+          />
+
+          {/* name y date */}
+          <div className="container-info">
+            <label className="label-name"> {company.name} </label>
+            <label className="label-lastDate">
+              {getCustomDate(
+                new Date(
+                  company.items.length ? company.items[0].date : undefined
+                )
+              )}
+            </label>
+          </div>
+
+          {/* label interno */}
+          <div className="container-indicators">
+            {currentCompanyId == companyId && (
+              <div className="label-ownCompany">Interno</div>
+            )}
+          </div>
+        </ContainerItemChat>
+      );
+
+      // checar si es chat abierto
+      if (company.statusChat == "closed") jsxClosedChats.push(itemChat);
+      else jsxOpenChats.push(itemChat);
+    }
+    setOpenChats(jsxOpenChats);
+    setClosedChats(jsxClosedChats);
+  };
+
+  return (
+    <>
+      <Container>
+        {openChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats abiertos </label>
+                    <label className="label-message">{`De acuerdo al estatus 
+                  actual del producto, puedes establecer una conversación 
+                  con estas compañias`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats abiertos </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{openChats}</div>
+          </section>
+        )}
+
+        {closedChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats cerrados </label>
+                    <label className="label-message">{`Las conversaciones 
+                  con estas compañias han finalizado debido al cambio de 
+                  estatus, sigue el flujo de trabajo con tus chats abiertos`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats cerrados </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{closedChats}</div>
+          </section>
+        )}
+      </Container>
+    </>
+  );
+};

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

@@ -0,0 +1,162 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  max-height: 100%;
+  flex-grow: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 30px;
+  background: white;
+  padding: 20px;
+  overflow: auto;
+  //border: 1px solid red;
+
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    // container del nombre de la seccion con su icono info
+    .container-headerChats {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: 5px;
+
+      .tooltip-title {
+        max-width: 100%;
+
+        label {
+          font-family: ${FontFamily.RobotoMedium}, sans-serif;
+          font-size: 15px;
+          text-align: left;
+          color: #262626;
+        }
+      }
+    }
+
+    // container de la lista de los items chats de la seccion
+    .container-bodyChats {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+`;
+
+export const ContainerItemChat = styled.div`
+  width: 100%;
+  min-width: min-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+  background: #f7f7fc;
+  padding: 15px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.25s;
+
+  * {
+    cursor: inherit;
+  }
+
+  // imagen del logo de la compañia
+  .img-logoCompany {
+    border-radius: 50%;
+    overflow: hidden;
+    height: 34px;
+    width: 34px;
+
+    .icon-logoCompany {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // container de las etiquetas "name" y "lastDate"
+  .container-info {
+    flex-grow: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+
+    .label-name {
+      font-family: ${FontFamily.RobotoMedium}, sans-serif;
+      font-size: 15px;
+      text-align: left;
+      color: #262626;
+    }
+    .label-lastDate {
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: 11px;
+      text-align: left;
+      color: #b3b3b3;
+    }
+  }
+
+  .container-indicators {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 7px;
+
+    // label "Interno"
+    .label-ownCompany {
+      padding: 5px 10px;
+      border-radius: 3px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: 10px;
+      background-color: rgba(0, 0, 0, 0.05);
+      color: #707070;
+    }
+  }
+
+  // cuando el item chat tenga el cursor
+  &:hover {
+    background-color: #d7d7dd;
+
+    .container-info {
+      .label-lastDate {
+        color: #959292;
+      }
+    }
+
+    /*
+    .label-ownCompany {
+      background-color: ;
+    }*/
+  }
+`;
+
+// container con 2 labels "label-title" y "label-message"
+export const ContainerTooltip = styled.div`
+  min-width: min-content;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  background: transparent;
+
+  .label-title {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    text-align: left;
+    color: #262626;
+  }
+  .label-message {
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 11px;
+    text-align: left;
+    color: #262626;
+  }
+`;

package/src/components/organisms/Chat/ContainerItems/ContainerItems.stories.js

@@ -0,0 +1,142 @@
+import { ContainerItems } from "./index";
+
+export default {
+  title: "Components/organisms/Chat/ContainerItems",
+  component: ContainerItems,
+};
+
+const Template = (args) => <ContainerItems {...args} />;
+
+// items de prueba
+const items = {
+  1: {
+    date: "2022-10-13 10:10:00",
+    type: "message",
+    value: "mensaje 1 user10",
+    userId: 10,
+  },
+  2: {
+    date: "2022-10-12 13:19:00",
+    type: "message",
+    value: "mensaje 1 user20",
+    userId: 20,
+  },
+  3: {
+    date: "2022-10-12 12:33:00",
+    type: "comment",
+    value: "comentario 1 user20",
+    userId: 20,
+  },
+  4: {
+    date: "2022-10-12 11:56:00",
+    type: "comment",
+    value: "comentario 1 user30",
+    userId: 30,
+  },
+  5: {
+    date: "2022-10-12 8:41:00",
+    type: "statusService",
+    value: "La sección imágenes ha sido validada",
+    userId: 20,
+  },
+  6: {
+    date: "2022-10-11 14:58:00",
+    type: "img",
+    value: "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg",
+    userId: 10,
+  },
+  7: {
+    date: "2022-10-10 16:12:00",
+    type: "img",
+    value: `84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg`,
+    userId: 30,
+  },
+  8: {
+    date: "2022-10-10 15:55:00",
+    type: "statusArticle",
+    value: "El estatus cambio a Aprobado Coordinador",
+    userId: 20,
+  },
+  9: {
+    date: "2022-10-10 9:15:00",
+    type: "comment",
+    value: "comentario 1 user10",
+    userId: 10,
+  },
+  10: {
+    date: "2022-10-9 6:24:00",
+    type: "file",
+    value:
+      "84300/1/chat/acuse RFC-8b2eb177-5bfc-4266-9b26-4e7297880594-9e2e5853-4697-442a-8ff7-3b7a1ede0856.pdf",
+    userId: 10,
+  },
+  11: {
+    date: "2022-10-9 4:29:00",
+    type: "file",
+    value: "84300/1/chat/noExiste.docx",
+    userId: 30,
+  },
+  12: {
+    date: "2022-10-9 2:39:00",
+    type: "file",
+    value: "84300/1/chat/noExiste2.xlsx",
+    userId: 20,
+  },
+  13: {
+    date: "2022-10-8 23:46:00",
+    type: "file",
+    value: "84300/1/chat/noExiste3.csv",
+    userId: 20,
+  },
+  14: {
+    date: "2022-10-8 23:22:00",
+    type: "file",
+    value: "84300/1/chat/noExiste4.pptx",
+    userId: 30,
+  },
+  15: {
+    date: "2022-10-8 21:01:00",
+    type: "file",
+    value: "84300/1/chat/noExiste5.zip",
+    userId: 10,
+  },
+  16: {
+    date: "2022-10-8 20:11:00",
+    type: "file",
+    value: "84300/1/chat/noExiste6.txt",
+    userId: 10,
+  },
+};
+
+// users de prueba
+const users = {
+  10: { name: "Pedro Castillo", companyId: 100 },
+  20: { name: "Ana Carranza", companyId: 200 },
+  30: { name: "Javier Aguayo", companyId: 100 },
+};
+
+// companies de prueba multiple
+const companies = {
+  100: { name: "Fábrica", statusChat: "enabled" },
+  200: { name: "Proveedor", statusChat: "current" },
+};
+
+export const exampleChat = Template.bind({});
+exampleChat.args = {
+  chatData: {
+    items,
+    users,
+    companies,
+  },
+  currentUser: { id: 10, companyId: 100 },
+};
+
+export const emptyChat = Template.bind({});
+emptyChat.args = {
+  chatData: {
+    items: [],
+    users: [],
+    companies: [],
+  },
+  currentUser: { id: 10, companyId: 100 },
+};