contentoh-components-library 21.2.83 → 21.2.85

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

@@ -0,0 +1,295 @@
+import {
+  ContainerBtnPopUpChat,
+  ContainerFixed,
+  ContainerPopUp,
+} from "./styles";
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+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 default function 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

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

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

@@ -0,0 +1,97 @@
+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 default function 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

@@ -0,0 +1,103 @@
+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;
+    }
+  }
+`;

package/src/components/pages/ProviderProductEdition/index.js

@@ -45,7 +45,7 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs, inputsByRetailer } = state;
+  let { values = [], attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
       const newInputsByRetailer = {};
@@ -100,7 +100,7 @@ const reducerImages = (state, action) => {
           imageIdArray.includes(input.id)
         );
 
-        values = orderedImages.length > 0 ? orderedImages : [];
+        if (orderedImages.length > 0) values = orderedImages;
       } catch (error) {
         console.log(error);
       }
@@ -877,11 +877,10 @@ export const ProviderProductEdition = ({
         const newProductEdit = productEdit;
         newProductEdit.product[sectionStatusKey] = serviceStatus;
         setProductEdit(newProductEdit);
-        const showSurveyByProvider =
-          !user.is_retailer && orderStatus[orderId] === "AP";
-        const showSurveyByRetailer =
-          user.is_retailer && orderStatus[orderId] === "ACA";
-        showSurvey && showSurvey(showSurveyByProvider || showSurveyByRetailer);
+        const showSurveyByProvider = !user.is_retailer && orderStatus[orderId] === "AP";
+        const showSurveyByRetailer = user.is_retailer && orderStatus[orderId] === "ACA";
+        showSurvey && 
+          showSurvey(showSurveyByProvider || showSurveyByRetailer);
       } else {
         res = await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
           headers: {

package/src/components/pages/RetailerProductEdition/index.js

@@ -35,7 +35,7 @@ import { useCloseModal } from "../../../global-files/customHooks";
 import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
-  let { values, attrForImgs, inputsByRetailer } = state;
+  let { values = [], attrForImgs, inputsByRetailer } = state;
   switch (action.action) {
     case "init":
       const newInputsByRetailer = {};
@@ -80,9 +80,8 @@ const reducerImages = (state, action) => {
       try {
         const orderedImages = [];
         const imageIdArray = [];
-        if (action?.retailerId && !inputsByRetailer[action.retailerId]) {
+        if (action?.retailerId && !inputsByRetailer[action.retailerId])
           inputsByRetailer[action.retailerId] = [];
-        }
         action.retailerId &&
           inputsByRetailer[action.retailerId]?.filter((input) => {
             imageIdArray.push(input.id_image);
@@ -90,10 +89,12 @@ const reducerImages = (state, action) => {
               if (value.image_id === input.id_image) orderedImages.push(value);
             });
           });
+
         inputs = inputsInitial?.filter((input) =>
           imageIdArray.includes(input.id)
         );
-        values = orderedImages.length > 0 ? orderedImages : [];
+
+        if (orderedImages.length > 0) values = orderedImages;
       } catch (error) {
         console.log(error);
       }

package/src/global-files/fonts.css

@@ -43,3 +43,21 @@
   src: url("../assets/fonts/raleway/Raleway-Black.ttf");
   font-weight: 900;
 }
+
+@font-face {
+  font-family: "RobotoMedium";
+  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "RobotoRegular";
+  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf");
+  font-weight: 400;
+}
+
+.prueba {
+  color: #9e3e26;
+  color: #b42983;
+  color: #e7e7e7;
+}