contentoh-components-library 21.2.100 → 21.2.102

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

@@ -0,0 +1,332 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  ClickAwayListener,
+  Fade,
+  Grow,
+  Popper,
+  Tooltip as TooltipMUI,
+  Zoom,
+} from "@mui/material";
+import { Container, ContainerSelect } from "./styles";
+import React from "react";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import {
+  faCaretDown as IconDownArrow,
+  faSearch as IconSearch,
+} from "@fortawesome/free-solid-svg-icons";
+import { isArrayEmpty, isStringEmpty } from "../../../global-files/utils";
+import { SelectItemV2 } from "../../atoms/SelectItemV2";
+import { InputText } from "../../atoms/InputText";
+
+export const SelectV2 = (props) => {
+  const {
+    items /* [
+			{
+				label: string,
+				value: string | number,
+				selected: (boolean) true -> item seleccionado al inicio
+			} , 
+			...
+		] */,
+    triggerType, // (string) "hover" | "click"
+    selectButton /* {
+			className: string,
+			type:	(string) tipos validos de ButtonV2,
+			transparent: boolean,
+			disabled: boolean,
+			label: string ,
+			size: number ,
+		} */,
+    defaultItem /* {
+      label: string,
+      itemType: (string) "checkbox" | "marginCheckbox" | "labelOnly"
+      showLabelInSelect: boolean, cuando esta seleccionado ver label en el btnSelect??
+    } */,
+    inputSearch /* {
+      className: string,
+      defaultText: string ,
+    } */,
+    maxWidthSelect, // string
+    maxWidthDropdown, // string
+    maxHeightDropdown, // string
+    maxWidthItems, // string
+    alignmentItemsOverflow, // (string) "columns" | "rows" -> por default "rows"
+    typeSelectItems, // (string) "checkbox" | "marginCheckbox" | "labelOnly"
+    multiple, // (boolean) se permite multiple seleccion??
+    borderType, // (string) "rectangle" | "oval" -> por default oval
+    classNameSelect, // (string) clase del container select
+    classNameDropdown, // (string) clase del contenedor tooltip
+    positionDropdown, // (string) posicion del contenedor tooltip (values en object positions)
+    onChange, // (selectedItems: []) = {}  array con los values de los items seleccionados
+  } = props;
+  const positions = {
+    topStart: "top-start",
+    topEnd: "top-end",
+    topCenter: "top",
+
+    rightStart: "right-start",
+    rightEnd: "right-end",
+    rightCenter: "right",
+
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    bottomCenter: "bottom",
+
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    leftCenter: "left",
+  };
+  const [selectedItems, setSelectedItems] = useState(); // { .. }
+  const [customItems, setCustomItems] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [labelSelect, setLabelSelect] = useState("Sin titulo");
+  const [textInputSearch, setTextInputSearch] = useState("");
+
+  const refInputTextSearch = useRef();
+
+  // cada que cambie la lista de items
+  useEffect(() => {
+    if (isArrayEmpty(items)) {
+      setSelectedItems({});
+      return;
+    }
+    // items iniciales seleccionados
+    let initialSelectedItems = {};
+    items.forEach((item) => {
+      if (item.selected) {
+        if (multiple) initialSelectedItems[item.value] = item.value;
+        else initialSelectedItems = { [item.value]: item.value };
+      }
+    });
+    setSelectedItems(initialSelectedItems);
+  }, [items]);
+
+  // cada que cambien los items seleccionados
+  useEffect(() => {
+    if (!selectedItems) return;
+    renderItems();
+    renderLabelSelect();
+    onChange && onChange(Object.values(selectedItems));
+  }, [selectedItems]);
+
+  // evento click de cada item de la lista
+  const onClickItem = (isSelected, value) => {
+    let selectedItemsCopy = { ...selectedItems };
+    if (isSelected) {
+      multiple
+        ? (selectedItemsCopy[value] = value)
+        : (selectedItemsCopy = { [value]: value });
+    } else delete selectedItemsCopy[value];
+    setSelectedItems(selectedItemsCopy);
+  };
+
+  const onClickSearch = () => {
+    setTextInputSearch(textInputSearch.trim());
+    refInputTextSearch?.current && refInputTextSearch.current.blur();
+    renderItems(textInputSearch.trim());
+  };
+
+  const renderLabelSelect = () => {
+    if (!selectedItems) return;
+    const selectedItemsCopy = Object.values(selectedItems);
+    if (selectedItemsCopy.length > 1) {
+      setLabelSelect("Personalizado");
+    } else if (selectedItemsCopy.length === 1) {
+      let labelItem = undefined;
+      for (const item of items) {
+        if (item.value == selectedItemsCopy[0]) {
+          labelItem = item.label;
+          break;
+        }
+      }
+      !isStringEmpty(labelItem)
+        ? setLabelSelect(labelItem)
+        : setLabelSelect("Sin titulo");
+    } else {
+      if (
+        !isStringEmpty(defaultItem?.label) &&
+        defaultItem?.showLabelInSelect
+      ) {
+        setLabelSelect(defaultItem.label);
+      } else if (!isStringEmpty(selectButton?.label)) {
+        setLabelSelect(selectButton.label);
+      } else {
+        setLabelSelect("Sin titulo");
+      }
+    }
+  };
+
+  const renderItems = (textSearch = "") => {
+    if (isArrayEmpty(items)) setCustomItems([]);
+    setCustomItems(
+      items.map((item, index) => {
+        if (
+          !isStringEmpty(textSearch) &&
+          !item.label
+            .trim()
+            .toLowerCase()
+            .includes(textSearch.trim().toLowerCase())
+        ) {
+          return null;
+        }
+        return (
+          <SelectItemV2
+            key={classNameSelect + "_item" + index}
+            label={item.label}
+            value={item.value}
+            checkbox={
+              typeSelectItems === "checkbox"
+                ? true
+                : typeSelectItems === "marginCheckbox"
+                ? false
+                : undefined
+            }
+            selected={selectedItems && selectedItems[item.value] ? true : false}
+            onClick={onClickItem}
+          />
+        );
+      })
+    );
+  };
+
+  return (
+    <ClickAwayListener
+      onClickAway={(event) => {
+        if (triggerType !== "hover") setShowDropdown(false);
+      }}
+    >
+      <Container
+        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
+        borderType={borderType}
+        maxWidthSelect={maxWidthSelect}
+        maxWidthDropdown={maxWidthDropdown}
+        maxHeightDropdown={maxHeightDropdown}
+        alignmentItemsOverflow={alignmentItemsOverflow}
+        maxWidthItems={maxWidthItems}
+      >
+        <TooltipMUI
+          {...props}
+          placement={positions[positionDropdown] ?? positions.bottomCenter}
+          open={triggerType !== "hover" ? showDropdown : undefined}
+          arrow={false}
+          componentsProps={{
+            tooltip: {
+              className:
+                "dropdownSelect" +
+                (isStringEmpty(classNameDropdown)
+                  ? ""
+                  : " " + classNameDropdown),
+            },
+            popper: { disablePortal: true },
+            transition: { timeout: 300 },
+          }}
+          TransitionComponent={Fade}
+          enterDelay={100}
+          followCursor={false}
+          disableFocusListener
+          disableTouchListener
+          disableHoverListener={triggerType !== "hover"}
+          title={
+            <>
+              {/* input search */}
+              {inputSearch && (
+                <div
+                  className={
+                    "container-inputSearch" +
+                    (!isStringEmpty(inputSearch?.className)
+                      ? " " + inputSearch.className
+                      : "")
+                  }
+                >
+                  <ButtonV2
+                    className="buttonSearch"
+                    type={"gray"}
+                    transparent
+                    size={14}
+                    icon={IconSearch}
+                    onClick={(event) => {
+                      if (
+                        isStringEmpty(textInputSearch) &&
+                        refInputTextSearch?.current
+                      ) {
+                        setTextInputSearch("");
+                        refInputTextSearch.current.focus();
+                      } else {
+                        onClickSearch();
+                      }
+                    }}
+                  />
+
+                  <InputText
+                    className="inputSearch"
+                    type="black"
+                    transparent
+                    size={12}
+                    placeHolder={
+                      isStringEmpty(inputSearch?.defaultText)
+                        ? "Texto a buscar"
+                        : inputSearch.defaultText
+                    }
+                    text={textInputSearch}
+                    onChangeText={(newValue) => setTextInputSearch(newValue)}
+                    onEnter={(event) => onClickSearch()}
+                    refInputText={refInputTextSearch}
+                  />
+                </div>
+              )}
+
+              {/* item por default */}
+              {defaultItem && (
+                <SelectItemV2
+                  label={defaultItem.label}
+                  value={null}
+                  checkbox={
+                    defaultItem.itemType === "checkbox"
+                      ? true
+                      : defaultItem.itemType === "marginCheckbox"
+                      ? false
+                      : undefined
+                  }
+                  selected={
+                    selectedItems && Object.keys(selectedItems).length
+                      ? false
+                      : true
+                  }
+                  onClick={(isSelected, value) => {
+                    selectedItems &&
+                      Object.keys(selectedItems).length &&
+                      setSelectedItems({});
+                  }}
+                />
+              )}
+
+              {/* lista de items */}
+              <div className="container-items">{customItems}</div>
+            </>
+          }
+        >
+          <ContainerSelect className={"container-buttonSelect"}>
+            <ButtonV2
+              className={
+                "buttonSelect" +
+                (!isStringEmpty(selectButton?.className)
+                  ? " " + selectButton.className
+                  : "")
+              }
+              disabled={selectButton?.disabled}
+              type={selectButton?.type}
+              transparent={selectButton?.transparent}
+              label={labelSelect}
+              size={selectButton?.size}
+              icon={IconDownArrow}
+              iconPosition="end"
+              onClick={(event) => {
+                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
+              }}
+            />
+          </ContainerSelect>
+        </TooltipMUI>
+      </Container>
+    </ClickAwayListener>
+  );
+};

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

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

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

@@ -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);
+  },
+};