contentoh-components-library 21.4.68 → 21.4.70

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;

package/src/components/organisms/Chatv2/ChatLists/ChatLists.stories.js

@@ -0,0 +1,65 @@
+import { ChatLists } from "./index";
+import THD from "./THD.png";
+import Rotoplas from "./Rotoplas.jpeg";
+
+export default {
+  title: "Components/organisms/Chat/ChatLists",
+  component: ChatLists,
+};
+
+const Template = (args) => <ChatLists {...args} />;
+
+// companies de prueba
+const companies = {
+  200: {
+    name: "The Home Depot",
+    src: THD,
+    lastChatDate: "2022-11-4 21:01:00",
+    statusChat: "disabled",
+  },
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    lastChatDate: "2022-11-03 21:01:00",
+    statusChat: "enabled",
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-11-02 21:01:00",
+    statusChat: "current",
+  },
+};
+// companies de prueba sin chats cerrados
+const companies2 = {
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    lastChatDate: "2022-10-27 21:01:00",
+    statusChat: "enabled",
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-9-27 21:01:00",
+    statusChat: "current",
+  },
+};
+
+export const exampleChatLists = Template.bind({});
+exampleChatLists.args = {
+  companies,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};
+
+export const onlyOpenChatLists = Template.bind({});
+onlyOpenChatLists.args = {
+  companies: companies2,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};

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

@@ -0,0 +1,141 @@
+import { Container, ContainerItemChat, ContainerTooltip } from "./styles";
+import { useEffect, useState } from "react";
+import { getCustomDate } from "../../../../global-files/utils";
+import { faImage as IconImage } from "@fortawesome/free-solid-svg-icons";
+import { CustomIcon } from "../../../atoms/CustomIcon";
+import { Image } from "../../../atoms/Image";
+import { Tooltip } from "../../../atoms/Tooltip";
+
+export const ChatLists = (props) => {
+  const {
+    companies /* {
+        id: { name , src , statusChat , items } ,
+        ...
+    } */,
+    currentCompanyId, // number
+    onClickCompany, // (id) => {}
+  } = props;
+  const [openChats, setOpenChats] = useState([]);
+  const [closedChats, setClosedChats] = useState([]);
+
+  useEffect(() => {
+    renderChats();
+  }, [companies]);
+
+  const renderChats = () => {
+    let jsxOpenChats = [];
+    let jsxClosedChats = [];
+
+    for (const companyId of Object.keys(companies)) {
+      const company = companies[companyId];
+      // crear el item chat
+      const itemChat = (
+        <ContainerItemChat
+          key={"itemChat-" + companyId}
+          onClick={(event) => {
+            onClickCompany && onClickCompany(companyId);
+          }}
+        >
+          {/* logo de la compañia */}
+          <Image
+            className="img-logoCompany"
+            width={"34px"}
+            sizeLoading={24}
+            colorLoading={undefined}
+            src={company.src}
+            componentDefault={
+              <CustomIcon
+                className="icon-logoCompany"
+                type={"white"}
+                borderType={"circle"}
+                size={15}
+                icon={IconImage}
+              />
+            }
+          />
+
+          {/* name y date */}
+          <div className="container-info">
+            <label className="label-name"> {company.name} </label>
+            <label className="label-lastDate">
+              {getCustomDate(
+                new Date(
+                  company.items.length ? company.items[0].date : undefined
+                )
+              )}
+            </label>
+          </div>
+
+          {/* label interno */}
+          <div className="container-indicators">
+            {currentCompanyId === companyId && (
+              <div className="label-ownCompany">Interno</div>
+            )}
+          </div>
+        </ContainerItemChat>
+      );
+
+      // checar si es chat abierto
+      if (company.statusChat === "closed") jsxClosedChats.push(itemChat);
+      else jsxOpenChats.push(itemChat);
+    }
+    setOpenChats(jsxOpenChats);
+    setClosedChats(jsxClosedChats);
+  };
+
+  return (
+    <>
+      <Container>
+        {openChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats abiertos </label>
+                    <label className="label-message">{`De acuerdo al estatus 
+                  actual del producto, puedes establecer una conversación 
+                  con estas compañias`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats abiertos </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{openChats}</div>
+          </section>
+        )}
+
+        {closedChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats cerrados </label>
+                    <label className="label-message">{`Las conversaciones 
+                  con estas compañias han finalizado debido al cambio de 
+                  estatus, sigue el flujo de trabajo con tus chats abiertos`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats cerrados </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{closedChats}</div>
+          </section>
+        )}
+      </Container>
+    </>
+  );
+};