contentoh-components-library 21.3.88 → 21.3.90

package/src/components/molecules/StripeCardForm/paymentForm.js

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { PaymentFormContainer } from "./styles";
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from "@stripe/react-stripe-js";
+import { useEffect } from "react";
+
+export const PaymentForm = ({
+  labelForm = "Pago con tarjeta",
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [cardName, setCardName] = useState("");
+  const [valuesComplete, setValuesComplete] = useState({
+    name: false,
+    number: false,
+    cvc: false,
+    exp: false,
+  });
+
+  const handleIputChange = (event, key) => {
+    const temp = { ...valuesComplete };
+    if (key === "name") {
+      temp[key] = event?.length;
+      setValuesComplete(temp);
+    } else {
+      temp[key] = event.complete;
+      setValuesComplete(temp);
+    }
+  };
+
+  /**
+   * Este método crea un nuevo token que será enviado a la bd para generar una nueva tarjeta
+   */
+  const createToken = async () => {
+    /* isNew values
+      1: is new
+      0: use card existing
+      -1: use other payment metoh */
+    let token = "";
+    token = await stripe.createToken(elements.getElement(CardNumberElement));
+
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: "card",
+      card: elements.getElement(CardNumberElement),
+      billing_details: {
+        name: cardName,
+      },
+    });
+
+    try {
+      if (token.token) {
+        token = token.token.id;
+      } else {
+        setModalErrorCard && setModalErrorCard(true);
+        setMsj && setMsj(token.error.message);
+      }
+
+      paymentMethod.isNew = 1;
+      setToken && setToken(token);
+      setCard && setCard(paymentMethod);
+    } catch (err) {
+      console.log(err, error);
+    }
+  };
+
+  useEffect(() => {
+    const valuesArray = Object.values(valuesComplete);
+    const allValuesComplete = valuesArray?.every((val) => val);
+    allValuesComplete ? createToken() : "le falta algo oiga";
+    setStripe && setStripe(stripe);
+  }, [valuesComplete]);
+
+  const handleCardNameChange = (event) => {
+    handleIputChange(event.target.value, "name");
+    setCardName(event.target.value);
+  };
+
+  return (
+    <PaymentFormContainer>
+      <h2>{labelForm}</h2>
+      <div className="card-fields">
+        <div className="element card-name">
+          <label>Nombre en la tarjeta</label>
+          <input
+            className="card-input"
+            value={cardName}
+            onChange={handleCardNameChange}
+          />
+        </div>
+        <div className="element card-number">
+          <label>No. de tarjeta</label>
+          <CardNumberElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "number")}
+          />
+        </div>
+        <div className="element expiration-date">
+          <label>Fecha de expiración</label>
+          <CardExpiryElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "exp")}
+          />
+        </div>
+        <div className="element cvc-code ">
+          <label>CVC</label>
+          <CardCvcElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "cvc")}
+          />
+        </div>
+      </div>
+    </PaymentFormContainer>
+  );
+};

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

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div``;
+
+export const PaymentFormContainer = styled.form`
+  padding: 20px;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+
+  h2 {
+    font-size: 15px;
+    line-height: 20px;
+    color: #262626;
+    font-family: ${FontFamily.Lato};
+
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .card-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    .element {
+      display: flex;
+      align-items: center;
+
+      label {
+        color: #808080;
+        font-family: ${FontFamily.Lato};
+        font-size: 12px;
+        display: flex;
+
+        & + * {
+          margin-left: 6px;
+        }
+      }
+
+      .card-input {
+        border: 1px solid #f0f0f0 !important;
+        border-radius: 5px;
+        padding: 3px;
+        font-family: ${FontFamily.Lato};
+        font-size: 12px;
+        flex: 1;
+      }
+
+      &.card-name {
+        flex: 1 0 100%;
+        label + * {
+          margin-left: 6px;
+        }
+      }
+
+      &.card-number {
+        flex: 1 0 100%;
+        label + * {
+          margin-left: 43px;
+        }
+      }
+
+      &.expiration-date,
+      &.cvc-code {
+        flex: 1 1 49%;
+        label + * {
+          margin-left: 9px;
+        }
+      }
+    }
+  }
+`;

package/src/components/molecules/StripeCardSelector/CardSelector.stories.js

@@ -0,0 +1,12 @@
+import { CardSelector } from ".";
+
+export default {
+  title: "Components/molecules/CardSelector",
+  component: CardSelector,
+};
+
+const Template = (args) => <CardSelector {...args} />;
+export const CardSelectorDefault = Template.bind({});
+CardSelectorDefault.args = {
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
+};

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

@@ -0,0 +1,44 @@
+import { useState, useEffect } from "react";
+import { Container } from "./styles";
+import { loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { getAllCards } from "./utils";
+import { Card } from "../../atoms/Card";
+import { Loading } from "../../atoms/Loading";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const CardSelector = ({ jwt, setCard, setStripe }) => {
+  const [stripeLoaded, setStripeLoaded] = useState(false);
+  const [cards, setCards] = useState([]);
+  const [selectedCard, setSelectedCard] = useState("");
+
+  const loadStripeJS = async () => {
+    await stripeApiKey;
+    setStripeLoaded(true);
+    const cardsResponse = await getAllCards(jwt);
+    setCards(cardsResponse);
+  };
+  useEffect(() => {
+    loadStripeJS();
+  }, []);
+
+  return stripeLoaded ? (
+    <Container>
+      <h2>Tarjetas guardadas</h2>
+      <Elements stripe={stripeApiKey}>
+        {cards.map((card) => (
+          <Card
+            key={card.id}
+            card={card}
+            selectedCard={selectedCard}
+            setSelectedCard={setSelectedCard}
+            setCard={setCard}
+            setStripe={setStripe}
+          />
+        ))}
+      </Elements>
+    </Container>
+  ) : (
+    <Loading />
+  );
+};

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

@@ -0,0 +1,4 @@
+import styled from "styled-components";
+import { PaymentFormContainer } from "../StripeCardForm/styles";
+
+export const Container = styled(PaymentFormContainer)``;

package/src/components/molecules/StripeCardSelector/utils.js

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+export const getAllCards = async (jwt) => {
+  try {
+    const response = await axios({
+      method: "get",
+      url: `${process.env.REACT_APP_CARDS_ENDPOINT}`,
+      headers: {
+        Authorization: jwt,
+      },
+    });
+    const stripeCards = JSON.parse(response.data.body).data;
+    return stripeCards;
+  } catch (error) {
+    console.log(error);
+  }
+};

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

@@ -36,14 +36,16 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <div className="title-container">
-        <ScreenHeader
-          text={label}
-          headerType={"input-name-header"}
-          color={color}
-        />
-        {showTooltip && <span className="tooltip">{label}</span>}
-      </div>
+      {label?.length && (
+        <div className="title-container">
+          <ScreenHeader
+            text={label}
+            headerType={"input-name-header"}
+            color={color}
+          />
+          {showTooltip && <span className="tooltip">{label}</span>}
+        </div>
+      )}
       <GeneralInput
         inputId={inputId}
         inputType={inputType}

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

@@ -158,7 +158,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 +174,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 =