contentoh-components-library 21.4.134 → 21.4.136

package/src/components/organisms/Chatv2/ContentChat/index.js

@@ -0,0 +1,1016 @@
+import ReactHowler from "react-howler";
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { NotFound } from "../../../atoms/NotFound";
+import { Header } from "../Header";
+import { faComments as IconChat } from "@fortawesome/free-solid-svg-icons";
+import { Loading } from "../../../atoms/Loading";
+import { ContainerItems } from "../ContainerItems";
+import { Footer } from "../Footer";
+import { ChatLists } from "../ChatLists";
+import { CustomIcon } from "../../../atoms/CustomIcon";
+import { fetchGET, fetchPOST } from "../../../../global-files/handle_http";
+import {
+  encodeUriJson,
+  isStringEmpty,
+  isValidNaturalNumber,
+} from "../../../../global-files/utils";
+import newMessage from "../../../../assets/sounds/newMessage.mp3";
+
+export const ContentChat = (props) => {
+  const {
+    chatType, // "merchant_product" | "order_product" | "ticket"
+    chatContainerType, // "fixed" | "popUp"
+    dataChat, // { data | error }
+    showBtnClose, // boolean
+    onClickBtnClose, // () => {}
+    showPopUpChat, // boolean
+    ticketCompany, // id de la compañía que creó el ticket
+    activeRetailer, // object retailer
+  } = props;
+  const [companies, setCompanies] = useState({}); /* {
+    companyId: {
+      name: string,
+      statusChat: string  => current | open | closed
+      items: [{..}] ,
+      enabledLoadMore: boolean
+    },
+    ...
+  } chat orderProduct */
+  const [singleChat, setSingleChat] = useState({
+    items: undefined,
+    enabledLoadMore: false,
+    statusChat: undefined,
+  }); // chat merchantProduct o ticket
+  const [activeCompanyId, setActiveCompanyId] = useState(); // number
+  const [allUsers, setAllUsers] = useState({}); // {...}
+  const [currentUser, setCurrentUser] = useState({
+    id: undefined,
+    companyId: undefined,
+  });
+  const [currentArticle, setCurrentArticle] = useState({
+    status: undefined,
+    version: undefined,
+  });
+  const [lastUpdateDate, setLastUpdateDate] = useState(); // string
+  const [isLoading, setIsLoading] = useState(true); // boolean
+  const [showChatsList, setShowChatsList] = useState(false); // boolean
+  const [processUpdateID, setProcessUpdateID] = useState(); // number
+  const [startUpdate, setStartUpdate] = useState(0); // number
+  const [runUpdate, setRunUpdate] = useState(0); // number
+  const [errorChat, setErrorChat] = useState({
+    existError: false,
+    code: undefined,
+    message: undefined,
+    errorDetail: undefined,
+  });
+  const [errorUpdate, setErrorUpdate] = useState({
+    startDate: undefined, // Date()
+    lastDate: undefined, // Date()
+  });
+  const [playSound, setPlaySound] = useState(false);
+
+  // matar update al desmontar el componente del chat
+  useEffect(() => {
+    return () => {
+      if (processUpdateID !== undefined) clearTimeout(processUpdateID);
+    };
+  }, []);
+
+  const stopUpdate = () => {
+    if (processUpdateID !== undefined) {
+      clearTimeout(processUpdateID);
+      setProcessUpdateID(undefined);
+    }
+  };
+
+  // al cargar el componente
+  useEffect(() => {
+    //if (dataChat && showPopUpChat) {
+    if (Object.keys(dataChat || {}).length) {
+      stopUpdate();
+      if (dataChat.code) {
+        setErrorChat({
+          existError: true,
+          code: dataChat.code,
+          message: dataChat.message,
+          errorDetail: dataChat.errorDetail,
+        });
+        setIsLoading(false);
+        return;
+      }
+      if (chatType === "merchant_product") getInitialMerchantProduct();
+      else if (chatType === "order_product") getInitialOrderProduct();
+      else if (chatType === "product_status") getInitialProductStatus();
+      else getInitialTicket();
+    }
+    if (!showPopUpChat) {
+      stopUpdate();
+    }
+  }, [dataChat, showPopUpChat]);
+
+  // comenzar temporizador del update de 20s
+  useEffect(() => {
+    // return; // -- descomentarizar para hacer pruebas sin update
+    if (startUpdate === 0) return;
+    const processID = setTimeout(() => {
+      setRunUpdate((prev) => prev + 1);
+    }, 15000);
+    setProcessUpdateID(processID);
+    return () => clearTimeout(processID);
+  }, [startUpdate]);
+
+  // ejecutar update
+  useEffect(() => {
+    if (chatType === "merchant_product") {
+      if (singleChat.items) getUpdateLatestMerchantProduct(true);
+      else getInitialMerchantProduct();
+    } else if (chatType === "order_product") {
+      if (companies) getUpdateLatestOrderProduct(true);
+      else getInitialOrderProduct();
+    } else if (chatType === "product_status") {
+      getInitialProductStatus();
+    } else {
+      if (singleChat.items) getUpdateLatestTicket(true);
+      else getInitialTicket();
+    }
+  }, [runUpdate]);
+
+  /*=======================================================================
+                PETICION GET INICIAL SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+  const getInitialProductStatus = async () => {
+    const paramsQuery = {
+      articleData: JSON.stringify({
+        articleId: JSON.stringify(dataChat.id),
+        version: JSON.stringify(dataChat.version),
+        retailerId: JSON.stringify(dataChat.retailerId),
+        status: dataChat.status,
+      })
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchGET(
+      process.env.REACT_APP_READ_MESSAGES,
+      paramsQuery,
+      paramsHeaders
+    );
+    if (!response.body) {
+      setErrorChat({
+        existError: true,
+        code: 400,
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      setIsLoading(false);
+      return;
+    }
+    // success
+    setStartUpdate((prev) => prev + 1);
+    setCurrentUser({
+      id: response.body.data.currentUserId,
+      companyId: response.body.data.currentCompanyId,
+    });
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    setAllUsers(response.body.users);
+    setSingleChat({
+      items: response.body.items,
+      enabledLoadMore: response.body.items.length === 50,
+    });
+    setErrorChat({ existError: false });
+    setIsLoading(false);
+  };
+
+  const getInitialMerchantProduct = async () => {
+    const paramsQuery = {
+      getType: "initial",
+      id: JSON.stringify(dataChat.id),
+      version: JSON.stringify(dataChat.version),
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery,
+      paramsHeaders
+    );
+    if (!response.body) {
+      setErrorChat({
+        existError: true,
+        code: 400,
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      setIsLoading(false);
+      return;
+    }
+    // success
+    setStartUpdate((prev) => prev + 1);
+    setCurrentUser({
+      id: response.body.data.currentUserId,
+      companyId: response.body.data.currentCompanyId,
+    });
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    setAllUsers(response.body.users);
+    setSingleChat({
+      items: response.body.items,
+      enabledLoadMore: response.body.items.length === 50,
+    });
+    setErrorChat({ existError: false });
+    setIsLoading(false);
+  };
+
+  const getInitialOrderProduct = async () => {
+    clearTimeout(processUpdateID); // finalizamos el temporizador
+    const paramsQuery = {
+      getType: "initial",
+      id: JSON.stringify(dataChat.id),
+      orderId: JSON.stringify(dataChat.orderId),
+      retailerId: JSON.stringify(dataChat.retailerId),
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery,
+      paramsHeaders
+    );
+    setStartUpdate((prev) => prev + 1); // TEMPORAL
+    if (!response.body) {
+      setErrorChat({
+        existError: true,
+        code: 400,
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      setIsLoading(false);
+      return;
+    }
+    // success
+    setCurrentUser({
+      id: response.body.data.currentUserId,
+      companyId: response.body.data.currentCompanyId,
+    });
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    setCurrentArticle({
+      status: response.body.data.status,
+      version: response.body.data.version,
+    });
+    setAllUsers(response.body.users);
+    const companiesList = response.body.companies;
+    const companiesIdList = Object.keys(companiesList);
+    let companyActive;
+    // encontrar el chat inicial a cargar y si se debe permitir cargar mas
+    for (const companyId of companiesIdList) {
+      if (companiesList[companyId].items.length < 50) {
+        companiesList[companyId].enabledLoadMore = false;
+      } else {
+        companiesList[companyId].enabledLoadMore = true;
+      }
+
+      if (companiesList[companyId].statusChat === "current") {
+        companyActive = Number(companyId);
+      }
+    }
+    if (!companyActive && companiesIdList.length) {
+      companyActive = Number(companiesIdList[0]);
+    }
+    setCompanies(companiesList);
+    if (companyActive) setActiveCompanyId(companyActive);
+    setErrorChat({ existError: false });
+    setIsLoading(false);
+  };
+
+  const getInitialTicket = async () => {
+    stopUpdate(); // finalizamos el temporizador
+    const dataUser = {
+      id: dataChat.currentUser?.id,
+      companyId: dataChat.currentUser?.companyId,
+      isUserTech: dataChat.currentUser?.isUserTech,
+    };
+    const paramsQuery = {
+      //id: JSON.stringify(dataChat.id),
+      id: dataChat.id,
+      getType: "initial",
+      //currentUser: encodeUriJson(dataUser),
+      currentUser: encodeURIComponent(JSON.stringify(dataUser)),
+      currentItemsFront: encodeUriJson(getItemsIdSingleChat()),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_TICKETS_CHAT_ENDPOINT,
+      paramsQuery,
+      { Authorization: dataChat.currentUser?.token }
+    );
+    // programar update en 20s
+    setStartUpdate((prev) => prev + 1);
+    if (!response.body) {
+      setErrorChat({
+        existError: true,
+        code: 400,
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      setIsLoading(false);
+      return;
+    }
+    // success
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    setAllUsers(response.body.users);
+    setSingleChat({
+      items: response.body.items,
+      enabledLoadMore: response.body.items.length === 50,
+      statusChat: dataChat.statusChat,
+    });
+    setErrorChat({ existError: false });
+    setIsLoading(false);
+  };
+
+  /*=======================================================================
+                PETICION GET LOAD_MORE SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+  const getLoadMoreMerchantProduct = async () => {
+    clearTimeout(processUpdateID); // finalizamos el temporizador
+    let date = singleChat.items[singleChat.items.length - 1].date;
+    const paramsQuery = {
+      getType: "loadMore",
+      id: JSON.stringify(dataChat.id),
+      version: JSON.stringify(dataChat.version),
+      date: encodeURIComponent(date),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery
+    );
+    //setStartUpdate((prev) => prev + 1); // comendar un nuevo temporizador
+    if (!response.body) {
+      return {
+        title: response.message,
+        message: response.errorDetail,
+      };
+    }
+    // success
+    // actualizar la lista de los users
+    updateAllUsers(response.body.users);
+    // actualizar los items del chat
+    let newSingleChat = { ...singleChat };
+    newSingleChat.items = addOldItemsChat(
+      newSingleChat.items,
+      response.body.items
+    );
+    newSingleChat.enabledLoadMore = response.body.items.length === 50;
+    setSingleChat(newSingleChat);
+  };
+
+  const getLoadMoreOrderProduct = async () => {
+    clearTimeout(processUpdateID); // finalizamos el temporizador
+    let company = companies[activeCompanyId];
+    let date = company.items[company.items.length - 1].date;
+    const paramsQuery = {
+      getType: "loadMore",
+      id: JSON.stringify(dataChat.id),
+      orderId: JSON.stringify(dataChat.orderId),
+      version: JSON.stringify(currentArticle.version),
+      currentCompanyId: JSON.stringify(currentUser.companyId),
+      date: encodeURIComponent(date),
+      othersCompanyId: JSON.stringify([activeCompanyId]),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery
+    );
+    //setStartUpdate((prev) => prev + 1); // comendar un nuevo temporizador
+    if (!response.body) {
+      return {
+        title: response.message,
+        message: response.errorDetail,
+      };
+    }
+    // success
+    // actualizar la lista de los users
+    updateAllUsers(response.body.users);
+    // actualizar los items del chat y la lista de users
+    company.items = addOldItemsChat(company.items, response.body.items);
+    company.enabledLoadMore = response.body.items.length === 50;
+    setCompanies((prev) => ({
+      ...prev,
+      [activeCompanyId]: company,
+    }));
+  };
+
+  // este GET obtiene la lista de compañoas con las que se puede chatear
+  const getLoadMoreTicket = async () => {
+    stopUpdate(); // finalizamos el temporizador
+    let date = singleChat.items[singleChat.items.length - 1].date;
+    const dataUser = {
+      id: dataChat.currentUser?.id,
+      companyId: dataChat.currentUser?.companyId,
+      isUserTech: dataChat.currentUser?.isUserTech,
+    };
+    const paramsQuery = {
+      id: JSON.stringify(dataChat.id),
+      getType: "loadMore",
+      date: encodeURIComponent(date),
+      currentUser: encodeUriJson(dataUser),
+      currentItemsFront: encodeUriJson(getItemsIdSingleChat()),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_TICKETS_CHAT_ENDPOINT,
+      paramsQuery,
+      { Authorization: dataChat.currentUser?.token }
+    );
+    //programar update en 20s
+    setStartUpdate((prev) => prev + 1);
+    if (!response.body) {
+      return {
+        title: response.message,
+        message: response.errorDetail,
+      };
+    }
+    // success
+    // actualizar la lista de los users
+    updateAllUsers(response.body.users);
+    // actualizar los items del chat
+    let newSingleChat = { ...singleChat };
+    newSingleChat.items = addOldItemsChat(
+      newSingleChat.items,
+      response.body.items
+    );
+    newSingleChat.enabledLoadMore = response.body.items.length === 50;
+    setSingleChat(newSingleChat);
+  };
+
+  /*=======================================================================
+                PETICION GET UPDATE_LATEST SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+  const getUpdateLatestMerchantProduct = async (fromUpdate = false) => {
+    const paramsQuery = {
+      getType: "updateLatest",
+      id: JSON.stringify(dataChat.id),
+      version: JSON.stringify(dataChat.version),
+      date: encodeURIComponent(lastUpdateDate),
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery,
+      paramsHeaders
+    );
+    if (!response.body) {
+      console.log("ERROR updateLatest:", {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      return;
+    }
+    // success
+    setStartUpdate((prev) => prev + 1);
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    // actualizar la lista de los users
+    updateAllUsers(response.body.users);
+    // actualizar los items del chat
+    let newSingleChat = { ...singleChat };
+    newSingleChat.items = addNewItemsChat(
+      newSingleChat.items,
+      response.body.items,
+      fromUpdate
+    );
+    setSingleChat(newSingleChat);
+  };
+
+  const getUpdateLatestOrderProduct = async (fromUpdate = false) => {
+    const paramsQuery = {
+      getType: "updateLatest",
+      id: JSON.stringify(dataChat.id),
+      orderId: JSON.stringify(dataChat.orderId),
+      retailerId: JSON.stringify(dataChat.retailerId),
+      version: JSON.stringify(currentArticle.version),
+      status: currentArticle.status,
+      currentCompanyId: JSON.stringify(currentUser.companyId),
+      othersCompanyId: encodeURIComponent(
+        JSON.stringify(Object.keys(companies))
+      ),
+      date: encodeURIComponent(lastUpdateDate),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsQuery
+    );
+    if (!response.body) {
+      console.log("ERROR update: ", {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      return;
+    }
+    // success
+    setStartUpdate((prev) => prev + 1);
+    // cuando cambie la lista de chats por un cambio de version o estatus
+    if (response.body.data.status) {
+      setIsLoading(true);
+      setTimeout(() => {
+        setLastUpdateDate(response.body.data.lastUpdateDate);
+        setCurrentArticle({
+          status: response.body.data.status,
+          version: response.body.data.version,
+        });
+        setAllUsers(response.body.users);
+        const companiesList = response.body.companies;
+        const companiesIdList = Object.keys(companiesList);
+        let companyActive;
+        // encontrar el chat inicial a cargar y si se debe permitir cargar mas
+        for (const companyId of companiesIdList) {
+          if (companiesList[companyId].items.length < 50) {
+            companiesList[companyId].enabledLoadMore = false;
+          } else {
+            companiesList[companyId].enabledLoadMore = true;
+          }
+
+          if (companiesList[companyId].statusChat === "current") {
+            companyActive = Number(companyId);
+          }
+        }
+        if (!companyActive && companiesIdList.length) {
+          companyActive = Number(companiesIdList[0]);
+        }
+        setCompanies(companiesList);
+        if (companyActive) setActiveCompanyId(companyActive);
+        setErrorChat({ existError: false });
+        setIsLoading(false);
+      }, 2000);
+    }
+    // cuando se hizo un update de los mismos chats
+    else {
+      setLastUpdateDate(response.body.data.lastUpdateDate);
+      // actualizar la lista de los users
+      updateAllUsers(response.body.users);
+      // actualizar los items de los chats
+      let companiesList = { ...companies };
+      Object.keys(response.body.companies).forEach((companyId) => {
+        companiesList[companyId].items = addNewItemsChat(
+          companiesList[companyId].items,
+          response.body.companies[companyId].items,
+          fromUpdate
+        );
+      });
+      setCompanies(companiesList);
+    }
+  };
+
+  const getUpdateLatestTicket = async (fromUpdate = false) => {
+    if (singleChat.statusChat === "closed") return;
+    const dataUser = {
+      id: dataChat.currentUser?.id,
+      companyId: dataChat.currentUser?.companyId,
+      isUserTech: dataChat.currentUser?.isUserTech,
+    };
+    const paramsQuery = {
+      id: JSON.stringify(dataChat.id),
+      getType: "updateLatest",
+      date: encodeURIComponent(lastUpdateDate),
+      currentUser: encodeUriJson(dataUser),
+      currentItemsFront: encodeUriJson(getItemsIdSingleChat()),
+    };
+    const response = await fetchGET(
+      process.env.REACT_APP_TICKETS_CHAT_ENDPOINT,
+      paramsQuery,
+      { Authorization: dataChat.currentUser?.token }
+    );
+    //programar update en 20s
+    setStartUpdate((prev) => prev + 1);
+    if (!response.body) {
+      if (errorUpdate.startDate) {
+        setErrorUpdate((prev) => ({
+          ...prev,
+          lastDate: new Date(),
+        }));
+      } else {
+        setErrorUpdate((prev) => ({
+          startDate: new Date(),
+        }));
+      }
+      console.log("ERROR updateLatest:", {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      });
+      return;
+    }
+    // limpiar error update
+    if (errorUpdate.startDate) {
+      setErrorUpdate({});
+    }
+    // success
+    setLastUpdateDate(response.body.data.lastUpdateDate);
+    // actualizar la lista de los users
+    updateAllUsers(response.body.users);
+    // actualizar los items del chat
+    if (response.body.items.length === 0) return;
+    let newSingleChat = { ...singleChat };
+    newSingleChat.items = addNewItemsChat(
+      newSingleChat.items,
+      response.body.items,
+      fromUpdate
+    );
+    newSingleChat.statusChat = response.body.data.statusChat;
+
+    setSingleChat(newSingleChat);
+  };
+
+  /*=======================================================================
+            FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM
+  Este metodo recibe los items que queremos agregar al chat.
+  requiere:
+    => items: [ { type , value } , ... ]
+  NOTA: si se quiere agregar un mensaje mandar un array con un object
+  example: [ {
+    type: "message" ,
+    value: "mi mensaje"
+  } ]
+  ======================================================================= */
+  const createItemsChat = async (items = []) => {
+    if (items.length === 0) {
+      return {
+        message:
+          "No se especifico ningun mensaje, imagen o archivo nuevo " +
+          "que se quiera enviar al chat",
+        errorDetail: "Reporta esto a TI",
+      };
+    }
+    for (const item of items) {
+      if (!["message", "img", "file"].includes(item.type)) {
+        return {
+          message:
+            "Uno de los elementos que se quiere enviar al chat " +
+            `no es un tipo valido "${item.type}"`,
+          errorDetail: "Reporta esto a TI",
+        };
+      }
+      if (isStringEmpty(item.value)) {
+        return {
+          message:
+            "Uno de los elementos que se quiere enviar al chat " +
+            `contiene un valor vacio`,
+          errorDetail: "Reporta esto a TI",
+        };
+      }
+    }
+    let errorCreate;
+    stopUpdate(); // finalizamos el temporizador
+
+    // enviar items a la BD
+    if (chatType === "merchant_product") {
+      errorCreate = await createItemsMerchantProduct(items);
+    } else if (chatType === "product_status") {
+      errorCreate = await createItemsProductStatus(items);
+    } else if (chatType === "order_product") {
+      errorCreate = await createItemsOrderProduct(items);
+    } else errorCreate = await createItemsTicket(items);
+
+    // actualizar chat para que aparezcan los items enviados
+    if (["merchant_product", "product_status"].includes(chatType)) {
+      await getUpdateLatestMerchantProduct();
+    } else if (chatType === "order_product") {
+      await getUpdateLatestOrderProduct();
+    } else await getUpdateLatestTicket();
+
+    // cuando no se pudieron guardar los items
+    if (errorCreate) {
+      return errorCreate;
+    }
+  };
+
+  const createItemsMerchantProduct = async (items = []) => {
+    const { id, version, orderId } = dataChat;
+    const { id: retailerId } = activeRetailer;
+    const paramsBody = { id, version, items, retailerId };
+    if (chatType === "product_status") paramsBody["orderId"] = orderId;
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchPOST(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      return {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      };
+    }
+  };
+  const createItemsProductStatus = async (items = []) => {
+    const { id, version, orderId, status } = dataChat;
+    const { id: retailerId } = activeRetailer;
+    const paramsBody = { id, version, items, retailerId, orderId, status };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchPOST(
+      process.env.REACT_APP_CREATE_MESSAGES,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      return {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      };
+    }
+  };
+
+  const createItemsOrderProduct = async (items = []) => {
+    const paramsBody = {
+      id: dataChat.id,
+      version: currentArticle.version,
+      items,
+      orderId: dataChat.orderId,
+      retailerId: activeRetailer?.id,
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchPOST(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      return {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      };
+    }
+  };
+
+  const createItemsTicket = async (items = []) => {
+    const paramsBody = {
+      id: JSON.stringify(dataChat.id),
+      userId: JSON.stringify(dataChat.currentUser.id),
+      items: JSON.stringify(items),
+    };
+    const paramsHeaders = { Authorization: dataChat.userToken };
+    const response = await fetchPOST(
+      process.env.REACT_APP_TICKETS_CHAT_ENDPOINT,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      return {
+        message: response.message,
+        errorDetail: response.errorDetail,
+      };
+    }
+  };
+
+  /*=======================================================================
+                        SECCION DE FUNCIONES
+  ======================================================================= */
+  const isSingleChat = () => {
+    if (
+      chatType === "merchant_product" ||
+      chatType === "ticket" ||
+      chatType === "product_status"
+    ) {
+      return true;
+    }
+    if (companies && Object.keys(companies).length < 2) return true;
+    else return false;
+  };
+
+  const getItemsIdSingleChat = () => {
+    const itemsId = {};
+    if (Array.isArray(singleChat.items)) {
+      singleChat.items.forEach((item) => {
+        if (isValidNaturalNumber(item.id)) itemsId[item.id] = true;
+      });
+    }
+    return itemsId;
+  };
+
+  const getChatCompany = () => {
+    if (chatType === "merchant_product" || chatType === "ticket") {
+      return undefined;
+    }
+    if (companies && companies[activeCompanyId]) {
+      return {
+        ...companies[activeCompanyId],
+        id: activeCompanyId,
+      };
+    }
+    return undefined;
+  };
+
+  const addOldItemsChat = (currentItems = [], newItems = []) => {
+    let items = currentItems.slice();
+    let itemsId = {};
+    items.forEach((item) => {
+      itemsId[item.id] = true;
+    });
+    newItems.forEach((item) => {
+      if (!itemsId[item.id]) {
+        items.push(item);
+        itemsId[item.id] = true;
+      }
+    });
+    return items;
+  };
+
+  const addNewItemsChat = (
+    currentItems = [],
+    newItems = [],
+    fromUpdate = false
+  ) => {
+    let itemsId = {};
+    currentItems.forEach((item) => {
+      itemsId[item.id] = item;
+    });
+    let thereAreNewItems = false;
+    newItems.forEach((newitem) => {
+      if (!itemsId[newitem.id]) {
+        itemsId[newitem.id] = newitem;
+        thereAreNewItems = true;
+      }
+    });
+    if (thereAreNewItems && fromUpdate) {
+      setPlaySound(true);
+      setTimeout(() => {
+        setPlaySound(false);
+      }, 5000);
+    }
+    if (chatType !== "ticket") {
+      return Object.values(itemsId).sort((a, b) => {
+        if (a.id > b.id) return 1;
+        if (a.id < b.id) return -1;
+        return 0;
+      });
+    } else {
+      return Object.values(itemsId).reverse();
+    }
+  };
+
+  const updateAllUsers = (newUsers = {}) => {
+    let currentUsers = { ...allUsers };
+    Object.keys(newUsers).forEach((userId) => {
+      if (!currentUsers[userId]) {
+        currentUsers[userId] = newUsers[userId];
+      }
+    });
+    setAllUsers(currentUsers);
+  };
+
+  const renderBodyChat = () => {
+    if (isLoading) return <Loading />;
+    if (errorChat.existError) {
+      return (
+        <NotFound
+          code={errorChat.code}
+          message={errorChat.message}
+          details={errorChat.errorDetail}
+        />
+      );
+    }
+    // cuando se quiere ver la lista de chats
+    if (showChatsList) {
+      return (
+        <ChatLists
+          companies={companies}
+          currentCompanyId={currentUser?.companyId}
+          onClickCompany={(companyIdSelected) => {
+            setActiveCompanyId(Number(companyIdSelected));
+            setShowChatsList(false);
+          }}
+        />
+      );
+    }
+    // mostrar chat?
+    let items;
+    let enabledLoadMore;
+    if (["merchant_product", "ticket", "product_status"].includes(chatType)) {
+      items = singleChat.items;
+      enabledLoadMore = singleChat.enabledLoadMore;
+    }
+    // ORDER_PRODUCT
+    else if (companies) {
+      // caso 0 chats
+      if (Object.keys(companies).length === 0) {
+        return (
+          <div className="container-chatEmpty">
+            <CustomIcon
+              className="icon-chat"
+              transparent
+              size={35}
+              icon={IconChat}
+              type={"gray"}
+            />
+            <label>
+              De acuerdo al estatus del producto, tu compañia no tiene
+              disponible ningun chat abierto o cerrado
+            </label>
+          </div>
+        );
+      }
+      // caso 1 o mas chats
+      if (companies[activeCompanyId]) {
+        items = companies[activeCompanyId].items;
+        enabledLoadMore = companies[activeCompanyId].enabledLoadMore;
+      }
+    }
+    if (items) {
+      let containerItems = null;
+      if (items.length) {
+        containerItems = (
+          <ContainerItems
+            items={items}
+            users={allUsers}
+            showBtnLoadMore={enabledLoadMore}
+            chatType={chatType}
+            activeCompanyId={activeCompanyId}
+            ticketCompany={ticketCompany}
+            currentUser={
+              ["merchant_product", "order_product", "product_status"].includes(
+                chatType
+              )
+                ? currentUser
+                : dataChat.currentUser
+            }
+            onClickBtnLoadMore={
+              chatType === "merchant_product"
+                ? getLoadMoreMerchantProduct
+                : chatType === "order_product"
+                ? getLoadMoreOrderProduct
+                : getLoadMoreTicket
+            }
+          />
+        );
+      } else {
+        containerItems = (
+          <div className="container-chatEmpty">
+            <CustomIcon
+              className="icon-chat"
+              size={35}
+              icon={IconChat}
+              type={"gray"}
+              transparent
+            />
+            <label>Este chat no tiene mensajes</label>
+          </div>
+        );
+      }
+      return (
+        <>
+          {containerItems}
+          <Footer
+            chatType={chatType}
+            dataChat={
+              chatType === "merchant_product"
+                ? { id: dataChat.id, version: dataChat.version }
+                : chatType === "order_product"
+                ? { id: dataChat.id, version: currentArticle.version }
+                : chatType === "ticket"
+                ? { id: dataChat.id }
+                : chatType === "product_status"
+                ? {
+                    id: dataChat.id,
+                    version: dataChat.version,
+                    retailerId: dataChat.retailerId,
+                  }
+                : undefined
+            }
+            chatCompany={getChatCompany()}
+            statusChat={
+              chatType === "order_product"
+                ? getChatCompany()?.statusChat
+                : chatType === "ticket"
+                ? singleChat.statusChat
+                : undefined
+            }
+            messageDisabled={
+              chatType === "order_product"
+                ? `La conversación con ${getChatCompany()?.name} ha finalizado`
+                : chatType === "ticket"
+                ? "Ticket cerrado"
+                : `La conversación ha finalizado`
+            }
+            createItemsChat={createItemsChat}
+            errorUpdate={errorUpdate}
+          />
+        </>
+      );
+    }
+    return <Loading />;
+  };
+
+  return (
+    <>
+      <Container>
+        {/* header */}
+        {(chatContainerType !== "fixed" || !isSingleChat()) && (
+          <Header
+            showBtnClose={showBtnClose}
+            onClickBtnClose={onClickBtnClose}
+            showChatsList={showChatsList}
+            chatCompany={getChatCompany()}
+            multipleCompanies={!isSingleChat()}
+            onClickBtnChooseChat={() => {
+              setShowChatsList(true);
+            }}
+          />
+        )}
+        {/* body */}
+        {renderBodyChat()}
+      </Container>
+      <ReactHowler src={newMessage} playing={playSound} />
+    </>
+  );
+};