contentoh-components-library 21.2.102 → 21.2.103

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

@@ -1,294 +0,0 @@
-import {
-  ContainerBtnPopUpChat,
-  ContainerFixed,
-  ContainerPopUp,
-} 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";
-
-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
-    classNameContainerFixed, // clases CSS del envoltoria chat fixed
-  } = props;
-  const [showPopUpChat, setShowPopUpChat] = useState(false);
-  const [data, setData] = useState();
-
-  useEffect(() => {
-    switch (chatType) {
-      case "merchant_product":
-        validateChatMerchantProduct();
-        break;
-      case "order_product":
-        validateChatOrderProduct();
-        break;
-      case "ticket":
-        validateChatTicket();
-        break;
-      default:
-        setData({
-          code: 404,
-          message: `El tipo de chat especificado "${chatType}" no es valido`,
-          errorDetail: "",
-        });
-    }
-  }, [chatType]);
-
-  // validar props que se requieren para el tipo de chat "order_product"
-  const validateChatOrderProduct = () => {
-    const {
-      userToken, // string
-      id, // number
-      orderId, // number
-      retailerId, // number
-    } = chatData;
-
-    // validar token del user
-    if (isStringEmpty(userToken)) {
-      setDataError("El token del usuario no es valido");
-      return;
-    }
-    // validar ID del producto
-    if (!isValidNaturalNumber(id)) {
-      setDataError("El ID del producto no es valido");
-      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 chat "merchants_product"
-  const validateChatMerchantProduct = () => {
-    const {
-      userToken, // string
-      id, // number
-      version, // number
-    } = chatData;
-
-    // validar token del user
-    if (isStringEmpty(userToken)) {
-      setDataError("El token del usuario no es valido");
-      return;
-    }
-    // validar ID del producto
-    if (!isValidNaturalNumber(id)) {
-      setDataError("El ID del producto no es valido");
-      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 chat "ticket"
-  const validateChatTicket = () => {
-    const {
-      currentUser /* {
-        id: number ,
-        companyId: number , 
-        isUserTech: boolean ,
-      } */,
-      id, // number
-      statusTicket, // (string) "IN_PROGRESS" | "PENDING" | "COMPLETED"
-      ticketOwnerUserId, // number
-    } = chatData;
-
-    // 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 (
-      currentUser?.isUserTech === undefined ||
-      typeof currentUser.isUserTech !== "boolean"
-    ) {
-      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 chat
-    if (isStringEmpty(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 chat "${chatType}"`,
-      errorDetail,
-    });
-  };
-
-  /*
-  const createItem = async (valueType, valueInput) => {
-    clearTimeout(processUpdateID);
-    let currentItems = items.slice();
-    let paramsBody = {};
-    let paramsHeaders = {};
-    switch (chatType.toLowerCase()) {
-      case "order_product": //------------------------------------------
-        paramsBody = {
-          articleId: articleId,
-          valueType: valueType,
-          value: valueInput,
-          isOrderProduct: "1",
-          orderId: orderId,
-          retailerId: retailerId,
-        };
-        paramsHeaders = { Authorization: userToken };
-        break;
-
-      default:
-        // merchants_products--------------------------------------
-        paramsBody = {
-          articleId: articleId,
-          articleVersion: articleVersion,
-          valueType: valueType,
-          value: valueInput,
-          isOrderProduct: "0",
-        };
-        paramsHeaders = { Authorization: userToken };
-    }
-    const response = await fetchPOST(
-      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
-      paramsBody,
-      paramsHeaders
-    );
-    if (!response.body) {
-      let itemType =
-        valueType === "txt"
-          ? "el mensaje"
-          : valueType === "img"
-          ? "la imagen"
-          : "el archivo";
-      showModalAlert(
-        `No fue posible agregar ${itemType} en el chat`,
-        response.errorDetail,
-        "error"
-      );
-      setItems(currentItems);
-    } else {
-      if (currentItems?.length == 0) {
-        // console.log("NUEVO ITEM <> NUEVO INITIAL");
-        await getInitial();
-      } else {
-        // console.log("NUEVO ITEM <> NUEVO UPDATE");
-        await getUpdate();
-      }
-    }
-  };
-  */
-
-  return (
-    <>
-      {chatContainerType?.toLowerCase() === "fixed" ? (
-        <>
-          {/* chat tipo fixed */}
-          <ContainerFixed className={classNameContainerFixed}>
-            <ContentChat
-              chatType={chatType?.toLowerCase()}
-              chatContainerType={"fixed"}
-              dataChat={data}
-              showBtnClose={false}
-            />
-          </ContainerFixed>
-        </>
-      ) : (
-        <>
-          {/* chat tipo popUp */}
-          <ContainerBtnPopUpChat>
-            <ButtonV2
-              className={"container-btn-popUpChat"}
-              type={"whiteS2"}
-              size={14}
-              borderType={"circle"}
-              icon={IconChat}
-              onClick={async (event) => {
-                setShowPopUpChat(!showPopUpChat);
-              }}
-            />
-          </ContainerBtnPopUpChat>
-
-          <Slide direction={"left"} in={showPopUpChat} timeout={400}>
-            <ContainerPopUp>
-              <ContentChat
-                chatType={chatType?.toLowerCase()}
-                chatContainerType={"popUp"}
-                dataChat={data}
-                showBtnClose={true}
-                onClickBtnClose={() => {
-                  setShowPopUpChat(false);
-                }}
-              />
-            </ContainerPopUp>
-          </Slide>
-        </>
-      )}
-    </>
-  );
-};

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

@@ -1,42 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-// 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;
-`;
-
-export const ContainerBtnPopUpChat = styled.div`
-  border-radius: 50%;
-  height: 34px;
-  width: 34px;
-
-  .container-btn-popUpChat {
-    height: inherit;
-    width: inherit;
-    overflow: hidden;
-  }
-`;
-
-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/Modal/Modal.stories.js

@@ -1,55 +0,0 @@
-import { Modal } from "./index";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-
-export default {
-  title: "Components/organisms/Modal",
-  component: Modal,
-  argTypes: {
-    icon: {
-      options: [undefined, "error", "warning", "success", "info"],
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Modal {...args} />;
-
-export const modalDefault = Template.bind({});
-modalDefault.args = {
-  show: false,
-  title: "Titulo del modal",
-  icon: undefined,
-  message: `descripcion amplia sobre el componente 
-	modal white para saber como se ven varias lineas
-	de codigo`,
-};
-
-export const modalWithButtons = Template.bind({});
-modalWithButtons.args = {
-  show: false,
-  title: "Titulo del modal",
-  icon: undefined,
-  message: `descripcion amplia sobre el componente 
-	modal white para saber como se ven varias lineas
-	de codigo`,
-  buttons: [
-    <ButtonV2
-      key={"btn-Cancelar"}
-      type={"white"}
-      label={"Cancelar"}
-      size={12}
-      onClick={(event) => {
-        alert("cancelar");
-      }}
-    />,
-    <ButtonV2
-      key={"btn-Aceptar"}
-      type={"pink"}
-      label={"Aceptar"}
-      size={12}
-      onClick={(event) => {
-        alert("aceptar");
-      }}
-    />,
-  ],
-};

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

@@ -1,97 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { ContainerModal } from "./styles";
-import {
-  faClose as xIcon,
-  faExclamationTriangle as warningIcon,
-  faCheck as successIcon,
-  faExclamation as infoIcon,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { Fade, Grow, Zoom, Modal as ModalMUI, Backdrop } from "@mui/material";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { CustomIcon } from "../../atoms/CustomIcon";
-
-export const Modal = (props) => {
-  const {
-    className, // clases CSS del componente raiz del modal
-    show, // boolean
-    title, // string
-    message, // string
-    icon, // "error" | "warning" | "success" | "info" | (por default no icon)
-    customComponent, // JSX
-    buttons, // array<JSX>
-    onClickModal, // (event) => {}
-    onClickBtnDefault, // (event) => {}
-  } = props;
-  const icons = {
-    error: xIcon,
-    warning: warningIcon,
-    info: infoIcon,
-    success: successIcon,
-  };
-
-  return (
-    <Backdrop
-      open={show}
-      className="container-backgroundModal"
-      timeout={400}
-      style={{
-        backgroundColor: "transparent",
-        zIndex: 10,
-      }}
-      onClick={(event) => onClickModal && onClickModal(event)}
-    >
-      <Fade in={show} timeout={400}>
-        <ContainerModal className={className ? className : ""}>
-          <div className="contentModal">
-            <header>
-              {/* titulo */}
-              {![null, undefined, ""].includes(title?.trim()) && (
-                <label className="label-title">{title.trim()}</label>
-              )}
-            </header>
-
-            {/* icono modal */}
-            {icons[icon?.toLowerCase()] && (
-              <CustomIcon
-                type={"white"}
-                className={"iconModal " + "iconModal-" + icon.toLowerCase()}
-                size={35}
-                borderType={"circle"}
-                icon={icons[icon.toLowerCase()]}
-              />
-            )}
-
-            {/* label message */}
-            {![null, undefined, ""].includes(message?.trim()) && (
-              <label className="label-message"> {message.trim()} </label>
-            )}
-
-            {/* custom component */}
-            {customComponent && (
-              <div className="container-customComponent">{customComponent}</div>
-            )}
-
-            {/* container buttons */}
-            <div className="container-buttons">
-              {buttons?.length ? (
-                buttons
-              ) : (
-                <ButtonV2
-                  key={"btn-Aceptar"}
-                  type={"white"}
-                  borderType={"oval"}
-                  label={"Aceptar"}
-                  size={12}
-                  onClick={(event) =>
-                    onClickBtnDefault && onClickBtnDefault(event)
-                  }
-                />
-              )}
-            </div>
-          </div>
-        </ContainerModal>
-      </Fade>
-    </Backdrop>
-  );
-};

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

@@ -1,103 +0,0 @@
-import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
-
-export const ContainerModal = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  display: grid;
-  place-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
-
-  .contentModal {
-    width: fit-content;
-    max-width: 80%;
-    min-width: 80px;
-    height: fit-content;
-    max-height: 90%;
-    min-height: 120px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: white;
-    border-radius: 10px;
-    padding: 25px 25px 20px 25px;
-    box-shadow: 0px 2px 4px 0px #00000040;
-
-    header {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 6px;
-      margin-bottom: 20px;
-
-      .label-title {
-        width: 100%;
-        text-align: center;
-        font-family: ${FontFamily.RobotoMedium}, sans-serif;
-        font-size: 17px;
-        line-height: 1.2;
-        color: #262626;
-        white-space: pre-wrap;
-      }
-    }
-
-    .iconModal {
-      width: 50px;
-      height: 50px;
-      font-size: 30px;
-      border-width: 4px;
-      margin-bottom: 20px;
-      overflow: hidden;
-
-      &.iconModal-error {
-        background-color: #953737;
-        border-color: #953737;
-        color: white;
-      }
-      &.iconModal-warning {
-        font-size: 27px;
-        padding-bottom: 8px;
-        color: #af9647;
-        border-color: #af9647;
-      }
-      &.iconModal-info {
-        border-color: #9e3e26;
-        color: #9e3e26;
-      }
-      &.iconModal-success {
-      }
-    }
-
-    .label-message {
-      width: 100%;
-      text-align: center;
-      font-family: ${FontFamily.RobotoRegular}, sans-serif;
-      font-size: 13px;
-      color: #707070;
-      white-space: pre-wrap;
-    }
-
-    .container-customComponent {
-      width: 100%;
-      max-height: 50vh;
-      display: flex;
-      flex-direction: column;
-      margin-top: 20px;
-      padding: 0px 0px;
-      //border: 1px solid red;
-    }
-
-    .container-buttons {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      gap: 12px;
-      margin-top: 20px;
-      //border: 1px solid red;
-    }
-  }
-`;