contentoh-components-library 21.3.59 → 21.3.60

package/dist/components/pages/RetailerProductEdition/styles.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: calc(100% - 341px);\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: calc(100% - 341px);\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
 });

package/dist/components/pages/RetailerProductEdition/utils.js

@@ -5,14 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getInputsData = exports.getAuditVersion = void 0;
+exports.translateService = exports.sendMessage = exports.getInputsData = exports.getAuditVersion = exports.createMessage = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
+var _handle_http = require("../../../global-files/handle_http");
+
 var getAuditVersion = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, setState, token) {
     var auditResponse;
@@ -64,4 +68,59 @@ var getInputsData = function getInputsData(services, activeRetailer, setDatashee
   }
 };
 
-exports.getInputsData = getInputsData;
+exports.getInputsData = getInputsData;
+
+var translateService = function translateService(tab) {
+  switch (tab) {
+    case "description":
+    case "Descripción":
+      return "Descripciones";
+
+    case "datasheet":
+    case "Ficha técnica":
+      return "Fichas técnicas";
+
+    case "images":
+    case "Imágenes":
+      return "Imágenes";
+  }
+};
+
+exports.translateService = translateService;
+
+var createMessage = function createMessage(retailers, idRetailer, oldStatus, newStatus, service) {
+  var _ref2 = (retailers === null || retailers === void 0 ? void 0 : retailers.filter(function (ret) {
+    return ret.id === idRetailer;
+  })) || [],
+      _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+      retailer = _ref3[0];
+
+  return "".concat(translateService(service), " de ").concat(retailer.name, " |").concat(oldStatus, "| a |").concat(newStatus);
+};
+
+exports.createMessage = createMessage;
+
+var sendMessage = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(data) {
+    var paramsBody, paramsHeader;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            paramsBody = data.paramsBody, paramsHeader = data.paramsHeader;
+            return _context2.abrupt("return", (0, _handle_http.fetchPOST)(process.env.REACT_APP_CREATE_MESSAGES, paramsBody, paramsHeader));
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function sendMessage(_x4) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+exports.sendMessage = sendMessage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.59",
+  "version": "21.3.60",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -27,7 +27,7 @@ export const CarouselImagesLogin = ({
       img2.src = images[i];
       const circulo_actual = Array.from(circulos).find((el) => el.id === i);
       Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
-      circulo_actual.classList.add("resaltado");
+      circulo_actual?.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

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

@@ -4,10 +4,13 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
 import { Chat } from "../../organisms/Chat";
 import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
+import { useState } from "react";
+import { render } from "@testing-library/react";
 
 export const HeaderTop = ({
   setHeaderTop,
   withChat,
+  chatType,
   productSelected,
   token,
   auditableVersion,
@@ -16,16 +19,51 @@ export const HeaderTop = ({
   activeRetailer,
 }) => {
   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]);
 
   useEffect(() => {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
 
-  return (
-    <Container ref={headerTop}>
-      <ScreenHeader text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && (
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chat
+              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(
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -37,8 +75,16 @@ export const HeaderTop = ({
             size={18}
             activeRetailer={activeRetailer}
           />
-        )}
+        );
+        break;
+    }
+  };
 
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && chat}
         {isAuditor && auditableVersion && (
           <Button
             buttonType="general-white-button circular-button"

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

@@ -162,3 +162,24 @@ chatTicket_userTECH.args = {
   },
   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

@@ -100,6 +100,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 +127,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 +138,47 @@ export const ContentChat = (props) => {
   /*=======================================================================
                 PETICION GET INICIAL SEGUN EL TIPO DE CHAT
   ======================================================================= */
+  const getInitialProductStatus = async () => {
+    const paramsQuery = {
+      articleData: {
+        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",
@@ -609,12 +653,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();
@@ -627,9 +673,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,
@@ -643,6 +690,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 = {
@@ -690,7 +754,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;
@@ -801,7 +869,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;
     }
@@ -843,7 +911,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
             }
@@ -882,6 +952,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()}
@@ -924,7 +1000,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

@@ -24,7 +24,7 @@ export const Chat = (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)) {
@@ -69,6 +111,8 @@ export const Chat = (props) => {
       retailerId, // number
     } = chatData;
 
+    console.log(chatData, "chatData");
+
     if (!isValidGeneral(userToken, id)) return;
 
     // validar el ID de la OT en donde se encuentra el producto
@@ -197,7 +241,7 @@ export const Chat = (props) => {
           dataChat={data}
           showBtnClose={false}
           ticketCompany={ticketCompany}
-          activeRetailer={props.activeRetailer}
+          activeRetailer={props.activeRetailer || { id: retailerId }}
         />
       </ContainerFixed>
     );
@@ -230,7 +274,7 @@ export const Chat = (props) => {
               onClickBtnClose={() => {
                 setShowPopUpChat(false);
               }}
-              activeRetailer={props.activeRetailer}
+              activeRetailer={props.activeRetailer || { id: retailerId }}
             />
           </ContainerPopUp>
         </Slide>

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

@@ -23,7 +23,7 @@ export const FullProductNameHeader = ({
   useEffect(() => {
     const rtls = headerData?.retailers || headerData?.retailersAvailable;
     servicesData &&
-      rtls.forEach((rt) => {
+      rtls?.forEach((rt) => {
         const element = [];
         servicesData.forEach((sd) => {
           if (sd.id_retailer === rt.id) {

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

@@ -0,0 +1,23 @@
+import { SideModal } from ".";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+export default {
+  title: "Components/organisms/SideModal",
+  component: SideModal,
+};
+
+const Template = (args) => <SideModal {...args} />;
+
+export const DefaultSideModal = Template.bind({});
+DefaultSideModal.args = {
+  show: false,
+  header: [
+    <div className="title-container">
+      <h2></h2>
+    </div>,
+    <ButtonV2 label="Ir al Checkout" />,
+    <ButtonV2 label="X" />,
+  ],
+  body: <></>,
+  footer: <></>,
+};

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

@@ -0,0 +1,41 @@
+import { useRef } from "react";
+import { Container } from "./styles";
+import { useEffect } from "react";
+
+export const SideModal = ({
+  header,
+  body,
+  footer,
+  show,
+  setShow,
+  id = "side-modal",
+}) => {
+  const modal = useRef();
+
+  const closeModal = (e) => {
+    if (!e.target.closest(`#${id}`) && show) {
+      document.removeEventListener("click", closeModal, false);
+      modal?.current?.classList?.remove("shown");
+      setShow && setShow(false);
+    }
+  };
+
+  useEffect(() => {
+    if (show && modal.current) {
+      document.addEventListener("click", closeModal, false);
+      modal?.current?.classList?.add("shown");
+    }
+  }, [show]);
+
+  return (
+    show && (
+      <Container>
+        <div id={id} ref={modal} className="modal-container">
+          <div className="modal-header">{header}</div>
+          <div className="modal-body">{body}</div>
+          <div className="modal-footer">{footer}</div>
+        </div>
+      </Container>
+    )
+  );
+};