contentoh-components-library 21.2.84 → 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/Dashboard/Dashboard.stories.js

@@ -9,30 +9,29 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 1236,
-    name: "THD",
-    last_name: "Proveedor",
-    email: "thd@allfreemail.net",
-    position: "Prod test",
-    telephone: "+523111111111",
-    country: "México",
-    id_company: 816,
-    id_cognito: "d660ccca-f906-4970-892c-6d152e832e5d",
+    id_user: 425,
+    name: "Auditor QA",
+    last_name: " ",
+    email: "ladiboh785@mi166.com",
+    position: "Tester",
+    telephone: null,
+    country: null,
+    id_company: 254,
+    id_cognito: "23a3f496-4e38-4e12-9bf5-7f90b77a2f35",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 0,
+    id_role: 6,
     active: 1,
     is_retailer: 0,
-    email_notify: 1,
-    is_superadmin: 0,
+    email_notify: null,
     membership: {
-      id: 797,
-      start_date: "2022-06-19T04:18:39.000Z",
-      end_date: "2023-06-19T04:18:39.000Z",
+      id: 750,
+      start_date: "2022-01-07T21:32:54.000Z",
+      end_date: "2023-01-07T21:32:54.000Z",
       planID: 6,
       plan: "prod_KvGd6YSTJyR3AP",
       name: "Plan Small",
@@ -40,37 +39,7 @@ DashboardDeafult.args = {
       products_limit: "1000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-1236/1236.png?1668676098688",
-  },
-  company: {
-    id_company: 816,
-    trade_name: "Prod Test",
-    company_name: "Prod Test",
-    rfc: "ASER12345",
-    adress: "Av. Insurgentes",
-    about_company: null,
-    telephone: null,
-    web_site: null,
-    zip_code: null,
-    email: null,
-    social_link: null,
-    is_retailer: 0,
-    financedRetailers: [
-      {
-        id: 58,
-        name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-    ],
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-425/425.png?1666639556174",
   },
-  jwt: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJkNjYwY2NjYS1mOTA2LTQ5NzAtODkyYy02ZDE1MmU4MzJlNWQiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImQ2NjBjY2NhLWY5MDYtNDk3MC04OTJjLTZkMTUyZTgzMmU1ZCIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI2NzYzN2VlZi1iMjE3LTRiYWEtODM4MC05NDMzODZjYTU5OTIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2ODY3NjA5OCwibmFtZSI6IlRIRCBQcm92ZWVkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMTExMTExIiwiZXhwIjoxNjY4Njc5Njk3LCJpYXQiOjE2Njg2NzYwOTgsImVtYWlsIjoidGhkQGFsbGZyZWVtYWlsLm5ldCJ9.ghtkS2S6ipJgGDEkGVoEd2iaxD5iKkGL_HBQ6ay-Kp-nh0VWjYW9cUBQhv83Je6gBsYdywkRfAmW9bEeqW7IuOAV9-CcQtcg7NtARtPjm3XLwt-vZePHefNASS1GdkFjjb3wioSdHoxa5UR6Di-mCTvQPad7tUdDy5XZf--8HyuB2Ir-yGnBqQ5mcyUloIwKWA0U0kboKUb97j8wCxGGP4oArrNH9yuwlwCC5dW2eyF1MKBDb4zPAnKmKM3IR-iFuyl9kAuo88YAas8o8pJ3_oc49NJ6ti2yY2hUyDFiMYlhjo-nDGMK1hQqFqjTPvrCV71H7P2vVuFHkkln9G-MbQ",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkYWVmODU5ZC00ODQyLTRkNDQtYTNiNC02ODZlNmJhNTVkMjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NzA3MjM5MCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NzA3NTk5MCwiaWF0IjoxNjY3MDcyMzkwLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.FbGtX1sC3b2c76hGcxkx-GSurEMKZSwNVEnuUOlV9Dhhqrre1VmtfjvodH_3Leipr4g38Sukb6Pr9lVgEy6DJ57MShpS63niXE7Y43FUJ4gVe4F6k8sYbXUaZYS2vw2_PibnycNsFrpD76fZ_ulTqlSuHNrnzf2mjcDFJ5Qlj8hcLlRnpu_DFVpIiXVyK9kvLE5jImHvo4oQZUSrnuIs-oUE7j8mX8-GH2e95Up2wnBMak6S6meMibKoUEFo2qdtDSFbS1JCMBq4vWw2DxToX-7AGXGp_CLxf-sjJ_UpLmFa0KyyxjhAE2cR9BGo8DM8LEUIqMvcz2KH-7e9QTgisA",
 };