contentoh-components-library 21.2.98 → 21.2.99

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

@@ -1,100 +0,0 @@
-import { FontFamily } from "../../../global-files/variables";
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: fit-content;
-  max-width: ${({ maxWidthSelect }) =>
-    maxWidthSelect ? maxWidthSelect : "unset"};
-  //border: 1px solid red;
-  border-radius: ${({ borderType }) => {
-    return borderType?.toLowerCase() === "rectangle"
-      ? "6px"
-      : borderType?.toLowerCase() === "oval"
-      ? "17px"
-      : "0px"; // default none
-  }};
-`;
-
-export const ContainerSelect = styled.div`
-  width: 100%;
-  border-radius: inherit;
-
-  .buttonSelect {
-    width: 100%;
-    border-radius: inherit;
-
-    .button {
-      padding: 10px 16px;
-      gap: 10px;
-      .icon {
-        font-size: 13px;
-      }
-    }
-  }
-
-  + .MuiTooltip-popper {
-    background-color: transparent;
-
-    .dropdownSelect {
-      --background: white;
-      box-shadow: 0px 0px 10px 1px gray;
-      background-color: var(--background);
-      padding: 6px 0px;
-      border-radius: 7px;
-      display: flex;
-      flex-direction: column;
-      gap: 0px;
-      max-width: ${({ maxWidthDropdown }) =>
-        maxWidthDropdown ? maxWidthDropdown : "400px"};
-      max-height: ${({ maxHeightDropdown }) =>
-        maxHeightDropdown ? maxHeightDropdown : "80vh"};
-
-      .container-inputSearch {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        align-items: center;
-        gap: 0px;
-        padding: 0px 10px 8px 10px;
-        border-bottom: 1px solid #f0f0f0;
-
-        .inputSearch {
-          padding-left: 8px;
-          flex-grow: 2;
-        }
-      }
-
-      .selectItemV2 {
-        width: 100%;
-      }
-
-      .container-items {
-        flex-grow: 2;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: ${({ alignmentItemsOverflow }) =>
-          alignmentItemsOverflow === "columns" ? "wrap" : "nowrap"};
-        overflow: auto;
-
-        .selectItemV2 {
-          width: ${({ maxWidthItems }) =>
-            maxWidthItems ? maxWidthItems : "100%"};
-        }
-      }
-    }
-
-    &[data-popper-placement*="bottom"] .dropdownSelect {
-      margin-top: 10px;
-    }
-    &[data-popper-placement*="top"] .dropdownSelect {
-      margin-bottom: 10px;
-    }
-    &[data-popper-placement*="left"] .dropdownSelect {
-      margin-right: 10px;
-    }
-    &[data-popper-placement*="right"] .dropdownSelect {
-      margin-left: 10px;
-    }
-  }
-`;

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

@@ -1,199 +0,0 @@
-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.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
-export const chatFAB_ticketClosed_user49 = Template.bind({});
-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
-export const chatTECH_ticketClosed_user65 = Template.bind({});
-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
-export const chatTECH_ticketClosedOwn_user66 = Template.bind({});
-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
-export const chatFAB_ticketOpen_user49 = Template.bind({});
-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
-export const chatTECH_ticketOpen_user65 = Template.bind({});
-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
-export const chatTECH_ticketOpenOwn_user66 = Template.bind({});
-chatTECH_ticketOpenOwn_user66.args = {
-  chatType: "ticket",
-  chatContainerType: "fixed",
-  chatData: {
-    id: 11,
-    ticketOwnerUserId: 66,
-    statusTicket: "PENDING",
-    currentUser: {
-      id: 66,
-      companyId: 2,
-      isUserTech: true,
-    },
-  },
-};

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

@@ -1,65 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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;
-  }
-`;