contentoh-components-library 21.4.72 → 21.4.74

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

@@ -1,281 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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/DragAndDropPhases/DragAndDropPhases.stories.js

@@ -1,12 +0,0 @@
-import { DragAndDropPhases } from "./index";
-
-export default {
-  title: "Components/organisms/DragAndDropPhases",
-  component: DragAndDropPhases,
-};
-
-const Template = (args) => <DragAndDropPhases {...args} />;
-
-export const DragAndDropPhasesDefault = Template.bind({});
-DragAndDropPhasesDefault.args = {
-}

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

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import { Container } from "./styles";
-import { Phase } from "../../molecules/Phase";
-
-export const DragAndDropPhases = () => {
-  const [items, setItems] = useState([
-    { grupos: ["Impuestos", "Legal"] },
-    { grupos: ["Legal", "Jefe comercial"] },
-    { grupos: ["Finanzas", "Datos maestros"] },
-  ]);
-  const [draggedItem, setDraggedItem] = useState(null);
-  const [tempItems, setTempItems] = useState(items);
-
-  const onDragStart = (e, idx) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(items[idx]);
-  };
-
-  const onDragOver = (index) => {
-    if (!draggedItem) {
-      return;
-    }
-
-    if (draggedItem === tempItems[index]) {
-      return;
-    }
-
-    const draggedIndex = tempItems.findIndex((item) => item === draggedItem);
-    let updatedItems = [...tempItems];
-
-    if (draggedIndex > index) {
-      updatedItems[draggedIndex] = tempItems[index];
-      updatedItems[index] = draggedItem;
-    } else {
-      updatedItems.splice(draggedIndex, 1);
-      updatedItems.splice(index, 0, draggedItem);
-    }
-
-    setTempItems(updatedItems);
-  };
-
-  const onDragEnd = () => {
-    setItems(tempItems);
-    setDraggedItem(null);
-  };
-
-  return (
-    <Container>
-      <ul>
-        {tempItems.map((item, idx) => (
-          <li className="item" key={idx} onDragOver={() => onDragOver(idx)}>
-            <div
-              className="drag"
-              draggable
-              onDragStart={(e) => onDragStart(e, idx)}
-              onDragEnd={onDragEnd}
-            >
-              <Phase id={idx + 1} grupos={item.grupos} phases={tempItems} />
-            </div>
-          </li>
-        ))}
-      </ul>
-    </Container>
-  );
-};

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

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-display:flex;
-width:100%;
-ul{
-  display:flex;
-  flex-direction:column;
-  width:100%;
-  gap:10px;
-}
-  .item{
-    display:flex;
-    width:100%;
-  }
-  .drag{
-    width:100%;
-  }
-`;

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

@@ -1,12 +0,0 @@
-import { DragPrueba } from "./index";
-
-export default {
-  title: "Components/organisms/DragPrueba",
-  component: DragPrueba,
-};
-
-const Template = (args) => <DragPrueba {...args} />;
-
-export const DragPruebaDefault = Template.bind({});
-DragPruebaDefault.args = {
-}