contentoh-components-library 21.4.30 → 21.4.32

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

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+import { ColumnItem } from "./ColumnItem";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const RowItem = ({
+  productsArray = [],
+  chkOnChange,
+  onGridClick,
+  chkChecked,
+}) => {
+  return (
+    <Container>
+      {productsArray.map(({ cols, product, id }, i) => (
+        <div
+          className="row-container"
+          key={id}
+          onClick={(e) => onGridClick && onGridClick(e, product, i)}
+        >
+          <div
+            className="chk-container"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <CheckBox
+              id={"chk-" + id}
+              name={"chk-" + id}
+              className="chk-item"
+              onChange={(e) => chkOnChange && chkOnChange(e, product)}
+              defaultChecked={chkChecked && chkChecked(product)}
+            />
+          </div>
+          {cols.map((col, i) => (
+            <ColumnItem
+              key={id + "-" + i}
+              element={col.name}
+              flex={col.flex}
+              minWidth={col.minWidth}
+            />
+          ))}
+        </div>
+      ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  height: calc(100% - 36px);
+  overflow: auto;
+  min-width: fit-content;
+
+  .row-container {
+    display: flex;
+    cursor: pointer;
+    &:hover {
+      background-color: #fafafa;
+    }
+
+    .chk-container {
+      width: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .chk-item {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+`;
+
+export const Column = styled.div`
+  flex: ${({ flex }) => (flex ? flex : 1)};
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
+  text-align: center;
+  color: #262626;
+  font-family: ${FontFamily.Lato};
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px 5px;
+  display: flex;
+  justify-content: center;
+`;

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

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

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

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { PaymentForm } from "./paymentForm";
+import { Loading } from "../../atoms/Loading";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const StripeCardForm = ({
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+  isSelected = false,
+  onClick,
+}) => {
+  const [stripeLoaded, setStripeLoaded] = useState(false);
+
+  const loadStripeJS = async () => {
+    await stripeApiKey;
+    setStripeLoaded(true);
+  };
+  useEffect(() => {
+    loadStripeJS();
+  }, []);
+
+  return stripeLoaded ? (
+    <Container onClick={() => onClick && onClick()}>
+      <Elements stripe={stripeApiKey}>
+        <PaymentForm
+          labelForm={"Pago con tarjeta"}
+          setToken={setToken}
+          setCard={setCard}
+          setStripe={setStripe}
+          setModalErrorCard={setModalErrorCard}
+          setMsj={setMsj}
+          isSelected={isSelected}
+        />
+      </Elements>
+    </Container>
+  ) : (
+    <Loading />
+  );
+};

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

@@ -0,0 +1,126 @@
+import { useState, useEffect } from "react";
+import { PaymentFormContainer } from "./styles";
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from "@stripe/react-stripe-js";
+import check from "../../../assets/images/defaultImages/check_circle.svg";
+
+export const PaymentForm = ({
+  labelForm = "Pago con tarjeta",
+  setToken,
+  setCard,
+  setStripe,
+  setModalErrorCard,
+  setMsj,
+  isSelected = false,
+}) => {
+  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 isSelected={isSelected}>
+      {isSelected ? <img src={check} alt="Seleccionado" /> : null}
+      <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,84 @@
+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.RobotoMedium};
+
+    & + * {
+      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;
+        background-color: #fff;
+      }
+
+      &.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;
+        }
+      }
+    }
+  }
+  position: relative;
+  ${({ isSelected }) =>
+    isSelected &&
+    `border-color: #8A6CAA;
+  background: #F7F7FC;`}
+  img {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+`;

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,59 @@
+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";
+import check from "../../../assets/images/defaultImages/check_circle.svg";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const CardSelector = ({
+  jwt,
+  setCard,
+  setStripe,
+  isSelected = false,
+  onClick,
+}) => {
+  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();
+    stripeApiKey.then(() => {
+      setStripeLoaded(true);
+      getAllCards(jwt).then((cardsResponse) => {
+        setCards(cardsResponse);
+      });
+    });
+  }, []);
+
+  return stripeLoaded ? (
+    <Container isSelected={isSelected} onClick={() => onClick && onClick()}>
+      {isSelected ? <img src={check} alt="Seleccionado" /> : null}
+      <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,15 @@
+import styled from "styled-components";
+import { PaymentFormContainer } from "../StripeCardForm/styles";
+
+export const Container = styled(PaymentFormContainer)`
+  position: relative;
+  ${({ isSelected }) =>
+    isSelected &&
+    `border-color: #8A6CAA;
+  background: #F7F7FC;`}
+  img {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+`;

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

@@ -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;