contentoh-components-library 21.4.74 → 21.4.75

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

@@ -0,0 +1,281 @@
+import {
+  Container,
+  ContainerBtnPopUpChat,
+  ContainerFixed,
+  ContainerPopUp,
+  ContainerIcon
+} from "./styles";
+import { useEffect, useState } from "react";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { ContentChat } from "./ContentChat";
+import { faComments as IconChat } from "@fortawesome/free-solid-svg-icons";
+import { Slide } from "@mui/material";
+import {
+  isStringEmpty,
+  isValidNaturalNumber,
+} from "../../../global-files/utils";
+import {Button} from "@mui/material";
+
+export const Chatv2 = (props) => {
+  const {
+    chatType, // "merchant_product" | "order_product" | "ticket"
+    chatContainerType, // ("fixed") | ("popUp")
+    chatData = {}, // {} => aqui poner los datos requeridos segun el tipo de Chatv2
+    classNameContainerFixed, // clases CSS del envoltoria Chatv2 fixed
+    size = 14, // tamaño del icono
+  } = props;
+  const [showPopUpChat, setShowPopUpChat] = useState(false);
+  const [data, setData] = useState();
+
+  const { ticketCompany, retailerId } = chatData || {};
+
+  useEffect(() => {
+    switch (chatType) {
+      case "merchant_product":
+        validateChatMerchantProduct();
+        break;
+      case "order_product":
+        validateChatOrderProduct();
+        break;
+      case "ticket":
+        validateChatTicket();
+        break;
+      case "product_status":
+        validateProductStatus();
+        break;
+      default:
+        setData({
+          code: 404,
+          message: `El tipo de Chatv2 especificado "${chatType}" no es valido`,
+          errorDetail: "",
+        });
+    }
+  }, [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)) {
+      setDataError("El token del usuario no es valido");
+      return false;
+    }
+    // validar ID del producto
+    if (!isValidNaturalNumber(id)) {
+      setDataError("El ID del producto no es valido");
+      return false;
+    }
+    return true;
+  };
+
+  // validar props que se requieren para el tipo de Chatv2 "order_product"
+  const validateChatOrderProduct = () => {
+    const {
+      userToken, // string
+      id, // number
+      orderId, // number
+      retailerId, // number
+    } = chatData;
+
+    if (!isValidGeneral(userToken, id)) return;
+
+    // validar el ID de la OT en donde se encuentra el producto
+    if (!isValidNaturalNumber(orderId)) {
+      setDataError("El ID de la orden del producto no es valido");
+      return;
+    }
+    // validar el ID de la cadena asociada al producto en la OT
+    if (!isValidNaturalNumber(retailerId)) {
+      setDataError("La cadena relacionada al producto no es valida");
+      return;
+    }
+    setData({
+      userToken,
+      id,
+      orderId,
+      retailerId,
+    });
+  };
+
+  // validar props que se requieren para el tipo de Chatv2 "merchants_product"
+  const validateChatMerchantProduct = () => {
+    const {
+      userToken, // string
+      id, // number
+      version, // number
+    } = chatData;
+
+    if (!isValidGeneral(userToken, id)) return;
+
+    // validar la version del producto
+    if (!isValidNaturalNumber(version)) {
+      setDataError("La version del producto no es valida");
+      return;
+    }
+    setData({
+      userToken,
+      id,
+      version,
+    });
+  };
+
+  // validar props que se requieren para el tipo de Chatv2 "ticket"
+  const validateChatTicket = () => {
+    const {
+      currentUser /* {
+        token, // string
+        id: number ,
+        companyId: number , 
+        isUserTech: boolean ,
+      } */,
+      id, // number
+      statusTicket, // (string) "IN_PROGRESS" | "PENDING" | "COMPLETED"
+      ticketOwnerUserId, // number
+    } = chatData;
+    // validar el token del usuario conectado
+    if (isStringEmpty(currentUser?.token)) {
+      setDataError("Tu identificación de usuario no fue especificado");
+      return;
+    }
+    // validar si ID del usuario conectado
+    if (!isValidNaturalNumber(currentUser?.id)) {
+      setDataError("Tu ID de usuario no fue especificado");
+      return;
+    }
+    // validar si ID de la compañia del usuario conectado
+    if (!isValidNaturalNumber(currentUser?.companyId)) {
+      setDataError("El ID de tu compañia no fue especificado");
+      return;
+    }
+    // validar si el usuario conectado es de tecnologia o no
+    if (![false, true].includes(currentUser?.isUserTech)) {
+      setDataError("Tu tipo de usuario no fue especificado");
+      return;
+    }
+    // validar ID del ticket
+    if (!isValidNaturalNumber(id)) {
+      setDataError("El ID del ticket no es valido");
+      return;
+    }
+    // validar ID del usuario que creó el ticket
+    if (!isValidNaturalNumber(ticketOwnerUserId)) {
+      setDataError(
+        "El ID del usuario al que le pertenece el ticket no es valido"
+      );
+      return;
+    }
+    // validar el status del Chatv2
+    if (!["IN_PROGRESS", "PENDING", "COMPLETED"].includes(statusTicket)) {
+      setDataError("El estatus del ticket no es valido");
+      return;
+    }
+    let statusChat = "open";
+    if (statusTicket === "COMPLETED") statusChat = "closed";
+
+    // convertir user TECH a NORMAL si es el propietario del ticket
+    let isUserTech = currentUser.isUserTech;
+    if (isUserTech && currentUser.id === ticketOwnerUserId) {
+      isUserTech = false;
+    }
+    setData({
+      currentUser: {
+        ...currentUser,
+        isUserTech,
+      },
+      id,
+      statusChat,
+    });
+  };
+
+  const setDataError = (errorDetail) => {
+    setData({
+      code: 404,
+      message: `No se especificaron algunos datos requeridos para el tipo de Chatv2 "${chatType}"`,
+      errorDetail,
+    });
+  };
+
+  if (chatContainerType?.toLowerCase() === "fixed") {
+    /* Chatv2 tipo fixed */
+    return (
+      <ContainerFixed className={classNameContainerFixed}>
+        <ContentChat
+          chatType={chatType?.toLowerCase()}
+          chatContainerType="fixed"
+          dataChat={data}
+          showBtnClose={false}
+          ticketCompany={ticketCompany}
+          activeRetailer={props.activeRetailer || { id: retailerId }}
+        />
+      </ContainerFixed>
+    );
+  } else {
+    /* Chatv2 tipo popUp */
+    return (
+      <Container>
+        <Button 
+            borderType="circle" className="container-btn-popUpChat boton-ch" onClick={() => {
+              setShowPopUpChat(!showPopUpChat);
+            }}>
+            <ContainerBtnPopUpChat>
+                <span class="iconos-out iconos-grises">forum</span>
+            </ContainerBtnPopUpChat>
+        </Button>
+
+        <Slide direction="left" in={showPopUpChat} timeout={400}>
+          <ContainerPopUp>
+            <ContentChat
+              chatType={chatType?.toLowerCase()}
+              chatContainerType="popUp"
+              dataChat={data}
+              showPopUpChat={showPopUpChat}
+              showBtnClose={true}
+              ticketCompany={ticketCompany}
+              onClickBtnClose={() => {
+                setShowPopUpChat(false);
+              }}
+              activeRetailer={props.activeRetailer || { id: retailerId }}
+            />
+          </ContainerPopUp>
+        </Slide>
+      </Container>
+    );
+  }
+};

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

@@ -0,0 +1,85 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+// Container para chat fixed
+export const Container = styled.div`
+  .boton-ch{
+    min-width: 34px;
+    min-height: 34px;
+    padding:0;
+  }
+`;
+
+// Container para chat fixed
+export const ContainerFixed = styled.div`
+  width: auto;
+  max-width: 550px;
+  min-width: 325px;
+  height: 100%;
+  flex-grow: 2;
+  background-color: white;
+  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;
+  }
+`;
+
+export const ContainerBtnPopUpChat = styled.div`
+  border-radius: 50%;
+  height: 34px;
+  width: 34px;
+  border:1px solid ${GlobalColors.gray_light};
+
+  .container-btn-popUpChat {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+    min-width: 34px;
+  min-height:34px;
+  }
+  cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 18px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.gray};
+}
+`;
+
+export const ContainerPopUp = styled.div`
+  position: fixed;
+  top: 20px;
+  right: 23px;
+  bottom: 20px;
+  box-shadow: 0px 2px 10px 0px #00000073;
+  z-index: 1000;
+  width: calc(100% - 50px);
+  max-width: 550px;
+  min-width: 325px;
+  border-radius: 10px;
+  background: white;
+  padding: 0px;
+`;

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

@@ -0,0 +1,91 @@
+import { CompleteServices } from "./index";
+
+export default {
+  title: "Components/organisms/CompleteServices",
+  component: CompleteServices,
+};
+
+const Template = (args) => <CompleteServices {...args} />;
+
+export const CompleteServicesDefault = Template.bind({});
+CompleteServicesDefault.args = {
+ activeRetailer:{
+    id:34,
+    image:"https://content-management-images.s3.amazonaws.com/retailers/34.png",
+    name:"San Pablo",
+    services:["AA", "AP", "AA"]
+  },
+  headerData:{
+    "orderId": 15275,
+    "status": "AA",
+    "datasheet_status": "AA",
+    "prio": "none",
+    "version": 3,
+    "description_status": "AA",
+    "images_status": "AA",
+    "brand": null,
+    "retailerOrder": 0,
+    "missing": {
+      "datasheet": null,
+      "descriptions": null,
+      "images": null
+    },
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
+    },
+    "article": {
+      "category": "Abarrotes|Abarrotes Secos|Frutos Secos",
+      "company_name": "GRUPO BRAHMA",
+      "country": "México",
+      "id_category": "11",
+      "id_datasheet_especialist": 54,
+      "id_datasheet_facilitator": 52,
+      "id_description_especialist": 54,
+      "id_description_facilitator": 52,
+      "id_images_especialist": 55,
+      "id_images_facilitator": 53,
+      "id_order": 15275,
+      "id_article": 39485,
+      "id_auditor": 37,
+      "name": "Mix de nueces",
+      "timestamp": "2023-07-14T21:03:19.000Z",
+      "upc": "7543453453"
+    },
+    "retailers": [
+      {
+        "id": 34,
+        "name": "San Pablo",
+        "services": [
+          "AA",
+          "AP",
+          "AA"
+        ],
+        "image": "https://content-management-images.s3.amazonaws.com/retailers/34.png"
+      }
+    ],
+    "statusByRetailer": {
+      "34": {
+        "datasheet": "AA",
+        "description": "AA",
+        "images": "AA"
+      }
+    },
+    "retailersAvailable": [
+      {
+        "id": 34,
+        "name": "San Pablo"
+      }
+    ],
+    "categoryName": "Abarrotes|Abarrotes Secos|Frutos Secos",
+    "upc": "7543453453",
+    "id_article": 39485,
+    "id_order": 15275
+  },
+  showApproveRejectAll:true,
+  showValidationButtons:true,
+  text:"Descripción",
+  showValidation:true,
+  missingData:1,
+}

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

@@ -0,0 +1,82 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect, useRef } from "react";
+import { ServiceDataValidator } from "../../molecules/ServiceDataValidator";
+import { Button } from "../../atoms/GeneralButton";
+
+export const CompleteServices = ({
+  headerData,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  showApproveRejectAll,
+  approveAll,
+  rejectAll,
+  approve,
+  reject,
+  complete = false,
+  missingData = 1,
+  onClick
+}) => {
+  const headerTop = useRef();
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+      <div className="service-cont">
+        <ServiceDataValidator
+          headerData={headerData}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          showValidationButtons={showValidationButtons}
+          showApproveRejectAll={showApproveRejectAll}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          approve={approve}
+          reject={reject}
+          text={"Descripción"}
+          showValidation={true}
+          complete={complete}
+          missingData={missingData}
+        ></ServiceDataValidator>
+        <ServiceDataValidator
+          headerData={headerData}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          showValidationButtons={showValidationButtons}
+          showApproveRejectAll={showApproveRejectAll}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          approve={approve}
+          reject={reject}
+          text={"Ficha Técnica"}
+          showValidation={false}
+          complete={complete}
+          missingData={missingData}
+        ></ServiceDataValidator>
+        <ServiceDataValidator
+          headerData={headerData}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          showValidationButtons={showValidationButtons}
+          showApproveRejectAll={showApproveRejectAll}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          approve={approve}
+          reject={reject}
+          text={"Imágenes"}
+          showValidation={false}
+          complete={complete}
+          missingData={missingData}
+        ></ServiceDataValidator>
+      </div>
+      <Button
+        onClick={onClick}
+        buttonType="general-button-sol"
+        label="Solicitar a Content-oh!"
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+padding: 15px 15px;
+border:0.6px solid ${GlobalColors.gray_light};
+width: 100%;
+align-items: center;
+justify-content: space-between;
+
+  * + * {
+    margin-left: 10px;
+  }
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+  }
+  .images-buttons{
+    display:flex;
+  }
+  .service-cont{
+    display:flex;
+  }
+  .service-text{
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+    font-weight: 500;
+    color:${GlobalColors.gray};
+  }
+  .service-complete {
+    color:${GlobalColors.black}!important;
+  }
+`;

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

@@ -22,7 +22,9 @@ export const DashboardMetric = ({
 }) => {
   const labels =
     type === "doughnut"
-      ? Object.keys(dataObject).map((key) => key !== "NS" && getFullStatus(key))
+      ? Object.entries(dataObject).map(
+          ([key, value]) => key !== "NS" && `${getFullStatus(key)} (${value})`
+        )
       : Object.keys(dataObject);
   const newObject =
     type === "doughnut" ? removeOldStatus(dataObject) : dataObject;
@@ -63,10 +65,11 @@ export const DashboardMetric = ({
             }, 0);
             const { raw } = element.$context;
             const operation = 100 * (raw / sum);
-            const percent =
+            const percent = `${
               ((operation + "").includes(".")
                 ? (100 * (raw / sum)).toFixed(2)
-                : 100 * (raw / sum)) + "%";
+                : 100 * (raw / sum)) + "%"
+            } - ${raw}`;
             return showPercent ? percent : raw;
           },
         },

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

@@ -0,0 +1,40 @@
+import { DragAndDropPhases } from "./index";
+
+export default {
+  title: "Components/organisms/DragAndDropPhases",
+  component: DragAndDropPhases,
+};
+
+const Template = (args) => <DragAndDropPhases {...args} />;
+
+export const DragAndDropPhasesDefault = Template.bind({});
+DragAndDropPhasesDefault.args = {
+  items :[
+    { grupos: ["Impuestos", "Legal"] },
+    { grupos: ["Legal", "Jefe comercial"] },
+    { grupos: ["Finanzas", "Datos maestros"] },
+  ],
+  grupos: [
+    {
+      id:1,
+      name:"Impuestos", 
+    },
+    {
+      id:2,
+      name:"Legal",
+    },
+    {
+      id:3,
+      name:"Jefe comercial"
+    },
+    {
+      id:4,
+      name:"Finanzas"
+    },
+    {
+      id:5,
+      name:"Datos maestros"
+    } 
+  ],
+  token:"eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwZjQyNDdkZi1mMDJmLTRjYjgtOTA5YS1lNjI2NDlkMzQ3ODIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBmNDI0N2RmLWYwMmYtNGNiOC05MDlhLWU2MjY0OWQzNDc4MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzMTJjMzkzOC0yODFlLTRjZTMtOGQwMC1lNDJmMDJhMjliNDkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMTgwNDA2MywibmFtZSI6IlByb3ZlZWRvciBVbm8gUmFkaW9zaGFjayIsInBob25lX251bWJlciI6Iis1MjEyMzQ1Njc4OTgiLCJleHAiOjE3MDE4MDc2NjIsImlhdCI6MTcwMTgwNDA2MywiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrdW5vQGFsbGZyZWVtYWlsLm5ldCJ9.TlytxDFcBq6dMXaDGqIQ2Dr3P81JQgIJ2k8DgfVKvHmmJAyfj5hZcdaWPBCW_qXT_93HtXje2fmQuyTJeN4pL_AXkEEQJsi6Ye-8ipteb616OFLLm8AkMV7NmxyYn59yfY9bPoWmanTjicONFNtL_SOACebXUI4c1uZtFmMWMvAR29l_89uj3e5J-ZrS1PQn36Eid66LYtV7lBsKAn3JJeftDiXx750AHERXjoXdzHwjJttm4jmMZ4LJPk8efuvZWdPhcgXJ-4CuvWNbjxCmFiDkxSjFK_qLix73HtoCLWee-FJElqxW2ZjTflOiRZknmt2M-7kQj4FzhgEK3n6jyg"
+}