contentoh-components-library 21.4.124 → 21.4.126

package/src/components/organisms/BarButtons/index.js

@@ -0,0 +1,150 @@
+import { Container, ContainerIcon } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+// import { Button } from "../../atoms/GeneralButton/index";
+import { useState, useEffect, useRef } from "react";
+import { Chatv2 } from "../Chatv2";
+import { Button } from "@mui/material";
+
+export const BarButtons = ({
+  showSaveButton,
+  imagesSection,
+  onClickSave,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+  activeRetailer,
+  setImageLayout,
+  setShowVersionSelector,
+  askToDeleteImages,
+  downloadImages,
+}) => {
+  const [layout, setLayout] = useState(false);
+  const headerTop = useRef();
+  const [chat, setChat] = useState(null);
+  const [chatData, setChatData] = useState(null);
+  useEffect(() => {
+    if (activeRetailer?.id && productSelected && token.length) {
+      setChatData({
+        id: productSelected?.article?.id_article || productSelected?.id_article,
+        version: productSelected?.version,
+        retailerId: activeRetailer?.id,
+        status: productSelected?.status,
+        userToken: token,
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+
+  useEffect(() => {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
+
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chatv2
+              chatType="product_status"
+              chatContainerType="popUp"
+              chatData={{
+                id: chatData?.id,
+                version: chatData?.version,
+                retailerId: chatData?.retailerId,
+                status: chatData?.status,
+                userToken: chatData?.userToken,
+              }}
+              size={18}
+              activeRetailer={activeRetailer}
+            />
+          );
+        break;
+      default:
+        setChat(
+          <Chatv2
+            chatType="merchant_product"
+            chatContainerType="popUp"
+            chatData={{
+              userToken: token,
+              id: productSelected.id_article,
+              version: productSelected.version,
+            }}
+            size={18}
+            activeRetailer={activeRetailer}
+          />
+        );
+        break;
+    }
+  };
+
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+        {imagesSection && (<Button className="btn-gral" onClick={() => {
+              setLayout(!layout);
+              setImageLayout && setImageLayout(!layout);
+            }}>
+            <ContainerIcon className="container-btn">
+              <span class="iconos-out icono-gris">{layout ? "table_chart" : "grid_view"}</span>
+            </ContainerIcon>
+          </Button>)}
+          {/* <Button
+            buttonType={layout ? "grid-layout" : "row-layout"}
+            onClick={() => {
+              setLayout(!layout);
+              setImageLayout && setImageLayout(!layout);
+            }}
+          /> */}
+      {showSaveButton && (
+        <Button className="btn-gral" onClick={onClickSave}>
+            <ContainerIcon className="container-btn">
+                <span class="iconos-out icono-gris">save</span>
+            </ContainerIcon>
+        </Button>
+        // <Button
+        //   buttonType={"circular-button save-button"}
+        //   onClick={onClickSave}
+        // />
+      )}
+      {imagesSection && (
+        <div className="images-buttons">
+          {showSaveButton && (
+            <Button className="btn-gral" onClick={() => {askToDeleteImages && askToDeleteImages();}}>
+                <ContainerIcon className="container-btn">
+                    <span class="iconos-out icono-gris">delete_forever</span>
+                </ContainerIcon>
+            </Button>
+          )}
+          {/* <Button
+            buttonType={"circular-button download-button"}
+            onClick={() => {
+              downloadImages();
+            }}
+          /> */}
+        </div>
+          )}
+      {withChat && chat}
+      <Button className="btn-gral" onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowVersionSelector(true);
+          }}>
+        <ContainerIcon className="container-btn">
+          <span class="iconos-out icono-gris">layers</span>
+        </ContainerIcon>
+      </Button>
+      {imagesSection && (
+        <div className="images-buttons">
+          <Button className="btn-gral" onClick={() => {downloadImages();}}>
+            <ContainerIcon className="container-btn">
+              <span class="iconos-out icono-gris">download</span>
+            </ContainerIcon>
+          </Button>
+        </div>
+      )}
+    </Container>
+  );
+};

package/src/components/organisms/BarButtons/styles.js

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+justify-content: center;
+width: auto;
+height:34px;
+gap:10px;
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+    padding:0;
+  }
+  .images-buttons{
+    display:flex;
+  }
+`;
+
+export const ContainerIcon = styled.div`
+  cursor: pointer;
+  border-radius: 50%;
+  height: 34px;
+  width: 34px;
+  border:1px solid ${GlobalColors.gray_light};
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+      format("woff2");
+  }
+  .container-btn {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+  }
+  .iconos-out {
+    font-family: "Material Symbols Outlined";
+    font-size: 20px;
+    //line-height: 1;
+    margin-top: 10px;
+  }
+  .iconos-out {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+    color:  #B64545;
+  }
+
+  .icono-gris{
+    font-size:18px;
+    color: ${GlobalColors.gray};
+  }
+`;

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

@@ -148,17 +148,37 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 130,
-    ticketOwnerUserId: 194,
-    ticketCompany: undefined,
-    statusTicket: "PENDING",
+    id: 171,
+    ticketOwnerUserId: 52,
+    statusTicket: "IN_PROGRESS",
     currentUser: {
       token:
-        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJlYTRlZmQ1Zi1mYTg4LTRjNDEtYTM3Ny02MWVkNmY0YTMyOTciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MDA1Njg2NSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODAwNjA0NjUsImlhdCI6MTY4MDA1Njg2NSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.oRuv3LkdvctEMUjmeGw0-XefzV_Aoh1O2hFMik4RxpkkCUeP1O7AjA7lJI6sgoqa9Nwa2fCPRXk6ufi84UbgxGEgkupQmAvXTHQCw_uwCUVAZitlNGXSBl-VSisMuXSnckxdZQ1MvLV5BgLmiw4mu6HxKDN-Uw0xc7yL_yDtGu3NWxoO0Cm2zbej8jYLE9DV9wG297bjfzVQ7hzpEfEcB52I5Tg6nF2VDTx-8_m4mVVrpisbV5uBoYokbFyyOFVLZzUU7Je5uHukscHS5dje9IMTY8DE5S8xUWJubHjf_ktcy7Y2-F2cG5dI5oSdrBNU-wNNW5-OtRLgclSJLmbPCw",
-      id: 28,
-      companyId: 1,
+        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI3M2NjOGQ0MC1jODQxLTQyMmEtYTJmMi1lNjlkN2ZlMjZlYmYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjczY2M4ZDQwLWM4NDEtNDIyYS1hMmYyLWU2OWQ3ZmUyNmViZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwYWNiYTdlYy01OGJhLTQyNGYtOTM5OC02ZGMxOGI1YTRkODYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4ODk0MzcxNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4ODk0NzMxNywiaWF0IjoxNjg4OTQzNzE3LCJlbWFpbCI6Im9hcmVuYXNAY29udGVudG9oLmNvbSJ9.SHeA5EMqLdqlTuDBTpJ3l_lAAqjMlOT2Dm9U9yf-Y3-4FR-3cwQ_16sdsmGCjJpwkhdYBEyuQbFkY1xnQHOBLMow0izWD4CDlhlNXkWBE_3DjgCspyPMlz31Lfik2ddnkHp3HQeLwucC4uyum3N-roQA7HkuWQHSBIplp6b-Xd44OmN9X-V_kseN3QOX6o7kxNFjwZL_DUzTJUdMDOtIXXIKYO2FLkR1eWJDNdvee5FEIWAxJXfaSZ__Awawfi5k93ILXrPX7QVt78lOH3THMyiPTtfiOOwMhoSQz_k5DIuofE8FM_1-nLNajM18pI49wPQ_-k3ltCjChjqy-OlERQ",
+      id: 65,
+      companyId: 2,
       isUserTech: true,
     },
   },
   classNameContainerFixed: "chatTicket",
 };
+
+// ejemplo del chat para los cambios de status del producto.
+export const chatProduct_status = Template.bind({});
+chatProduct_status.args = {
+  chatType: "product_status",
+  chatContainerType: "popUp",
+  chatData: {
+    id: 37414,
+    version: 7,
+    retailerId: 70,
+    status: "AA",
+    orderId: 15189,
+    userToken:
+      "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhOWFhMDQ4Zi05YzRjLTQxODMtYWUzMS03OWVjNjBhY2NjZGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzU4ODM4OSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MzU5MTk4OSwiaWF0IjoxNjgzNTg4Mzg5LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.k9FQfRR02XC3WWfOzWhrbJGmp69AmCHJEIrgtXKhIwC69trdphSm1AKkZnDJMsEdkpUgjF_zAOsa_xYRxO6goXy7WXVc_p7N-yFHlkhZrRyn3LEFKaLzD8vVqlWx4kgfSERm7KhI1AxPmrA-lw8eF6Axvqn3PvuszAw89_WhPOcnOt8vU0MxAVhLgS8oM6vyHFmHEHWQ2FnSYYed9sEvAxGh_B44aIgWeDteQGeGdYhsm6rUcxgkrskywZJp9FW5VgYXuDcC5NpvomMMRy_v95UV897JzCHl__sK2Z9ahm0eczVN3tAc0GbKnlN96ZrGTQ_nmNHbuMDPQBPXH5HXZQ",
+    currentUser: {
+      id: 37,
+      companyId: 2,
+      isUserTech: false,
+    },
+  },
+};

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

@@ -22,6 +22,7 @@ import { Tooltip } from "../../../atoms/Tooltip";
 import { Slide, Zoom } from "@mui/material";
 import { useRef } from "react";
 import { ImagePreview } from "../../../atoms/ImagePreview";
+import { Status } from "../../../atoms/Status";
 import { isUserTech } from "../../../../global-files/handle_userTech";
 import { container } from "aws-amplify";
 
@@ -55,7 +56,10 @@ export const ContainerItems = (props) => {
 
   useEffect(() => {
     if (!items) return;
-    if (["merchant_product", "order_product"].includes(chatType)) renderItems();
+    if (
+      ["merchant_product", "order_product", "product_status"].includes(chatType)
+    )
+      renderItems();
     else if (chatType === "ticket") renderItemsTicket();
     else setCustomItems([]);
   }, [items]);
@@ -130,6 +134,16 @@ export const ContainerItems = (props) => {
     return <label className="item-statusTicket">{item.value}</label>;
   };
 
+  const renderStatusItem = (item) => {
+    const splitText = item.value.split("|");
+    let message = [];
+    splitText.forEach((text, i) => {
+      if (i === 1 || i === 3) message.push(<Status statusType={text} />);
+      else message.push(text);
+    });
+    return <label className="item-statusItem">{message}</label>;
+  };
+
   const renderStatusTicketNeutral = (item) => {
     return (
       <Tooltip
@@ -304,7 +318,7 @@ export const ContainerItems = (props) => {
       >
         <li
           className={
-            (ownMessage ? "own-message " : "") +
+            (ownMessage && item.type !== "status" ? "own-message " : "") +
             (lastUserId === item.userId ? "sameUser" : "")
           }
         >
@@ -339,6 +353,8 @@ export const ContainerItems = (props) => {
             ? renderComment(item)
             : item.type === "img"
             ? renderImg(item)
+            : item.type === "status"
+            ? renderStatusItem(item)
             : item.type === "file"
             ? renderFile(item, ownMessage)
             : item.type === "statusTicket" &&

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

@@ -36,6 +36,10 @@ export const Container = styled.div`
     }
   }
 
+  @media (max-width: 768px) { 
+    width: 90%;
+  }
+
   // lista de items
   > ul {
     --marginUserValue: 10px;
@@ -158,7 +162,8 @@ export const Container = styled.div`
       .item-message,
       .item-comment,
       .item-file,
-      .item-statusTicket {
+      .item-statusTicket,
+      .item-statusItem {
         border-radius: 10px;
         padding: 10px;
         font-family: ${FontFamily.RobotoRegular}, sans-serif;
@@ -173,10 +178,17 @@ export const Container = styled.div`
       .item-file {
         background-color: #8386ee;
       }
-      .item-statusTicket {
+      .item-statusTicket,
+      .item-statusItem {
         background-color: #85bc5b;
       }
 
+      .item-statusItem {
+        display: flex;
+        gap: 3px;
+        align-items: center;
+      }
+
       .item-message {
         &.different-company {
           border: 1px solid #e33aa9;

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

@@ -86,7 +86,8 @@ export const ContentChat = (props) => {
 
   // al cargar el componente
   useEffect(() => {
-    if (dataChat && showPopUpChat) {
+    //if (dataChat && showPopUpChat) {
+    if (Object.keys(dataChat || {}).length) {
       stopUpdate();
       if (dataChat.code) {
         setErrorChat({
@@ -100,6 +101,7 @@ export const ContentChat = (props) => {
       }
       if (chatType === "merchant_product") getInitialMerchantProduct();
       else if (chatType === "order_product") getInitialOrderProduct();
+      else if (chatType === "product_status") getInitialProductStatus();
       else getInitialTicket();
     }
     if (!showPopUpChat) {
@@ -126,6 +128,8 @@ export const ContentChat = (props) => {
     } 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();
@@ -135,6 +139,47 @@ export const ContentChat = (props) => {
   /*=======================================================================
                 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",
@@ -568,14 +613,14 @@ export const ContentChat = (props) => {
   };
 
   /*=======================================================================
-            FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM 
+            FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM
   Este metodo recibe los items que queremos agregar al chat.
   requiere:
-    => items: [ { type , value } , ... ] 
+    => items: [ { type , value } , ... ]
   NOTA: si se quiere agregar un mensaje mandar un array con un object
-  example: [ { 
-    type: "message" , 
-    value: "mi mensaje" 
+  example: [ {
+    type: "message" ,
+    value: "mi mensaje"
   } ]
   ======================================================================= */
   const createItemsChat = async (items = []) => {
@@ -611,12 +656,14 @@ export const ContentChat = (props) => {
     // 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 (chatType === "merchant_product") {
+    if (["merchant_product", "product_status"].includes(chatType)) {
       await getUpdateLatestMerchantProduct();
     } else if (chatType === "order_product") {
       await getUpdateLatestOrderProduct();
@@ -629,9 +676,10 @@ export const ContentChat = (props) => {
   };
 
   const createItemsMerchantProduct = async (items = []) => {
-    const { id, version } = dataChat;
+    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,
@@ -645,6 +693,23 @@ export const ContentChat = (props) => {
       };
     }
   };
+  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 = {
@@ -692,7 +757,11 @@ export const ContentChat = (props) => {
                         SECCION DE FUNCIONES
   ======================================================================= */
   const isSingleChat = () => {
-    if (chatType === "merchant_product" || chatType === "ticket") {
+    if (
+      chatType === "merchant_product" ||
+      chatType === "ticket" ||
+      chatType === "product_status"
+    ) {
       return true;
     }
     if (companies && Object.keys(companies).length < 2) return true;
@@ -807,7 +876,7 @@ export const ContentChat = (props) => {
     // mostrar chat?
     let items;
     let enabledLoadMore;
-    if (["merchant_product", "ticket"].includes(chatType)) {
+    if (["merchant_product", "ticket", "product_status"].includes(chatType)) {
       items = singleChat.items;
       enabledLoadMore = singleChat.enabledLoadMore;
     }
@@ -849,7 +918,9 @@ export const ContentChat = (props) => {
             activeCompanyId={activeCompanyId}
             ticketCompany={ticketCompany}
             currentUser={
-              ["merchant_product", "order_product"].includes(chatType)
+              ["merchant_product", "order_product", "product_status"].includes(
+                chatType
+              )
                 ? currentUser
                 : dataChat.currentUser
             }
@@ -888,6 +959,12 @@ export const ContentChat = (props) => {
                 ? { 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()}
@@ -930,7 +1007,6 @@ export const ContentChat = (props) => {
             }}
           />
         )}
-
         {/* body */}
         {renderBodyChat()}
       </Container>

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

@@ -169,6 +169,17 @@ export const Footer = (props) => {
                 errorMessage = "El ID del ticket no es valido";
               }
               break;
+            case "product_status":
+              if (
+                isValidNaturalNumber(dataChat?.id) &&
+                isValidNaturalNumber(dataChat?.version) &&
+                isValidNaturalNumber(dataChat?.retailerId)
+              ) {
+                fileKey += `productStatus/${dataChat.id}-${dataChat?.version}-${dataChat?.retailerId}/`;
+              } else {
+                errorMessage = "El ID del ticket no es valido";
+              }
+              break;
 
             default:
               errorMessage =

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

@@ -17,14 +17,14 @@ export const Chat = (props) => {
   const {
     chatType, // "merchant_product" | "order_product" | "ticket"
     chatContainerType, // ("fixed") | ("popUp")
-    chatData, // {} => aqui poner los datos requeridos segun el tipo de chat
+    chatData = {}, // {} => aqui poner los datos requeridos segun el tipo de chat
     classNameContainerFixed, // clases CSS del envoltoria chat fixed
     size = 14, // tamaño del icono
   } = props;
   const [showPopUpChat, setShowPopUpChat] = useState(false);
   const [data, setData] = useState();
 
-  const { ticketCompany } = chatData || {};
+  const { ticketCompany, retailerId } = chatData || {};
 
   useEffect(() => {
     switch (chatType) {
@@ -37,6 +37,9 @@ export const Chat = (props) => {
       case "ticket":
         validateChatTicket();
         break;
+      case "product_status":
+        validateProductStatus();
+        break;
       default:
         setData({
           code: 404,
@@ -46,6 +49,45 @@ export const Chat = (props) => {
     }
   }, [chatType]);
 
+  const validateProductStatus = () => {
+    const {
+      userToken, // string
+      id, // number
+      version,
+      retailerId, // number
+      status,
+      orderId,
+    } = chatData;
+
+    if (!isValidGeneral(userToken, id)) return;
+
+    // validar el ID de la cadena asociada al producto en la OT
+    if (!isValidNaturalNumber(retailerId)) {
+      setDataError("La cadena relacionada al producto no es válida");
+      return;
+    }
+
+    // validar el ID de la version asociada al producto en la OT
+    if (!isValidNaturalNumber(version)) {
+      setDataError("La versión del producto no es válida");
+      return;
+    }
+
+    if (orderId && !isValidNaturalNumber(orderId)) {
+      setDataError("La orden del producto no es válida");
+      return;
+    }
+
+    setData({
+      userToken,
+      id,
+      version,
+      retailerId,
+      orderId,
+      status,
+    });
+  };
+
   const isValidGeneral = (userToken, id) => {
     // validar token del user
     if (isStringEmpty(userToken)) {
@@ -197,7 +239,7 @@ export const Chat = (props) => {
           dataChat={data}
           showBtnClose={false}
           ticketCompany={ticketCompany}
-          activeRetailer={props.activeRetailer}
+          activeRetailer={props.activeRetailer || { id: retailerId }}
         />
       </ContainerFixed>
     );
@@ -230,7 +272,7 @@ export const Chat = (props) => {
               onClickBtnClose={() => {
                 setShowPopUpChat(false);
               }}
-              activeRetailer={props.activeRetailer}
+              activeRetailer={props.activeRetailer || { id: retailerId }}
             />
           </ContainerPopUp>
         </Slide>

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

@@ -12,6 +12,10 @@ export const ContainerFixed = styled.div`
   border: 1px solid #f0f0f0;
   z-index: 1000;
   padding: 0px;
+  @media (max-width: 1024px) {
+    width: auto;
+    max-width: 100%;
+  }
   @media (max-width: 600px) {
     width: 90%;
     min-width: 300px;