contentoh-components-library 21.3.29 → 21.3.30

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

@@ -1,357 +0,0 @@
-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,
-  isObject,
-  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,
-			} , 
-			...
-		] */,
-    initialSelectedItems, // { value: null , ... }  -> value = string | number
-    triggerType, // (string) "hover" | "click"
-    selectButton /* {
-			className: string,
-			type:	(string) tipos validos de ButtonV2,
-			transparent: boolean,
-			disabled: boolean,
-			label: string ,
-			size: number ,
-      iconPosition: string (por default "right")
-		} */,
-    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: {}) = {}  obj 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) || !isObject(initialSelectedItems)) {
-      setSelectedItems({});
-      renderItems();
-      renderLabelSelect();
-      return;
-    }
-    // items iniciales seleccionados
-    if (!multiple) {
-      const values = Object.keys(initialSelectedItems);
-      if (values.length) setSelectedItems({ [values[0]]: null });
-      else setSelectedItems({});
-    } else {
-      setSelectedItems(initialSelectedItems);
-    }
-    renderItems();
-    renderLabelSelect();
-  }, [items]);
-
-  // cada que cambien los items seleccionados
-  useEffect(() => {
-    if (!isObject(selectedItems)) return;
-    renderItems();
-    renderLabelSelect();
-  }, [selectedItems]);
-
-  // evento click de cada item de la lista
-  const onClickItem = (isSelected, value) => {
-    let selectedItemsCopy = { ...selectedItems };
-    if (isSelected) {
-      multiple
-        ? (selectedItemsCopy[value] = null)
-        : (selectedItemsCopy = { [value]: null });
-    } else delete selectedItemsCopy[value];
-    setSelectedItems(selectedItemsCopy);
-    onChange && onChange(selectedItemsCopy);
-  };
-
-  const onClickSearch = () => {
-    setTextInputSearch(textInputSearch.trim());
-    refInputTextSearch?.current && refInputTextSearch.current.blur();
-    renderItems(textInputSearch.trim());
-  };
-
-  const renderLabelSelect = () => {
-    if (!isObject(selectedItems)) return;
-    const selectedItemsCopy = Object.keys(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={
-              isObject(selectedItems) && selectedItems[item.value] !== undefined
-                ? true
-                : false
-            }
-            onClick={onClickItem}
-          />
-        );
-      })
-    );
-  };
-
-  return (
-    <ClickAwayListener
-      onClickAway={(event) => {
-        if (triggerType !== "hover") setShowDropdown(false);
-      }}
-    >
-      <Container
-        className={!isStringEmpty(classNameSelect) ? classNameSelect : ""}
-        borderType={borderType}
-        maxWidthSelect={maxWidthSelect}
-      >
-        <TooltipMUI
-          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" || selectButton?.disabled
-          }
-          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={
-                    isObject(selectedItems) && Object.keys(selectedItems).length
-                      ? false
-                      : true
-                  }
-                  onClick={(isSelected, value) => {
-                    if (
-                      isObject(selectedItems) &&
-                      Object.keys(selectedItems).length
-                    ) {
-                      setSelectedItems({});
-                      onChange && onChange({});
-                    }
-                  }}
-                />
-              )}
-
-              {/* lista de items */}
-              <div className="container-items">{customItems}</div>
-            </>
-          }
-        >
-          <ContainerSelect
-            className={"container-buttonSelect"}
-            maxWidthDropdown={maxWidthDropdown}
-            maxHeightDropdown={maxHeightDropdown}
-            alignmentItemsOverflow={alignmentItemsOverflow}
-            maxWidthItems={maxWidthItems}
-          >
-            <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={
-                ["left", "right", "top", "bottom"].includes(
-                  selectButton?.iconPosition
-                )
-                  ? selectButton.iconPosition
-                  : "right"
-              }
-              onClick={(event) => {
-                if (triggerType !== "hover") setShowDropdown((prev) => !prev);
-              }}
-            />
-          </ContainerSelect>
-        </TooltipMUI>
-      </Container>
-    </ClickAwayListener>
-  );
-};

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

@@ -1,105 +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: 0px 0px;
-      border-radius: 7px;
-      display: flex;
-      flex-direction: column;
-      gap: 0px;
-      overflow: hidden;
-      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%;
-
-        .button {
-          justify-content: flex-start;
-        }
-      }
-
-      .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/molecules/SelectV2/test.js

@@ -1,60 +0,0 @@
-import { useEffect, useState } from "react";
-import { SelectV2 } from ".";
-
-export const TestSelectV2 = () => {
-  const [items, setItems] = useState([
-    { label: "item 1", value: 1 },
-    { label: "item 2", value: 2 },
-    { label: "item 3", value: 3 },
-    { label: "item 4", value: 4 },
-  ]);
-  const [selected, setSelected] = useState({
-    2: null,
-    4: null,
-  });
-
-  return (
-    <>
-      <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={(selectedItems) => {
-          setSelected(selectedItems);
-        }}
-      />
-
-      <button
-        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 },
-          ]);
-        }}
-      >
-        Refresh lista
-      </button>
-    </>
-  );
-};

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

@@ -1,10 +0,0 @@
-import { TestSelectV2 } from "./test";
-
-export default {
-  title: "Components/molecules/SelectV2/TestSelectV2",
-  component: TestSelectV2,
-};
-
-const Template = (args) => <TestSelectV2 {...args} />;
-
-export const Test = Template.bind({});

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

@@ -1,149 +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.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,
-    },
-  },
-};