contentoh-components-library 21.3.19 → 21.3.20

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

@@ -0,0 +1,235 @@
+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
+    size = 14, // tamaño del icono
+  } = 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]);
+
+  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 chat "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 chat "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 chat "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 chat
+    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 chat "${chatType}"`,
+      errorDetail,
+    });
+  };
+
+  if (chatContainerType?.toLowerCase() === "fixed") {
+    /* chat tipo fixed */
+    return (
+      <ContainerFixed className={classNameContainerFixed}>
+        <ContentChat
+          chatType={chatType?.toLowerCase()}
+          chatContainerType="fixed"
+          dataChat={data}
+          showBtnClose={false}
+        />
+      </ContainerFixed>
+    );
+  } else {
+    /* chat tipo popUp */
+    return (
+      <>
+        <ContainerBtnPopUpChat>
+          <ButtonV2
+            className="container-btn-popUpChat"
+            type="whiteS2"
+            size={size}
+            borderType="circle"
+            icon={IconChat}
+            onClick={() => {
+              setShowPopUpChat(!showPopUpChat);
+            }}
+          />
+        </ContainerBtnPopUpChat>
+
+        <Slide direction="left" in={showPopUpChat} timeout={400}>
+          <ContainerPopUp>
+            <ContentChat
+              chatType={chatType?.toLowerCase()}
+              chatContainerType="popUp"
+              dataChat={data}
+              showPopUpChat={showPopUpChat}
+              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/FullProductNameHeader/index.js

@@ -42,6 +42,7 @@ export const FullProductNameHeader = ({
           headerData?.status ||
           headerData?.article_status
         }
+        percentRequired={percent}
         percent={percent?.toFixed(0)}
         priority={headerData?.prio}
         date={new Date(

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 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

@@ -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/organisms/RangeCalendar/RangeCalendar.stories.js

@@ -0,0 +1,16 @@
+import { RangeCalendar } from ".";
+
+export default {
+  title: "Components/organisms/RangeCalendar",
+  component: RangeCalendar,
+};
+
+const Template = (args) => <RangeCalendar {...args} />;
+
+export const DefaultRangeCalendar = Template.bind({});
+DefaultRangeCalendar.args = {
+  currentDates: {
+    start: "2022-12-15T00:00:00.000Z",
+    end: "2022-12-25T00:00:00.000Z",
+  },
+};

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

@@ -0,0 +1,121 @@
+import { Container, CalendarContainer } from "./styles";
+import { useState } from "react";
+import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
+import es from "date-fns/locale/es";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { useEffect } from "react";
+import { getFormatedDate } from "../../../global-files/utils";
+registerLocale("es", es);
+
+export const RangeCalendar = ({
+  setParameterArray,
+  minDate = new Date(),
+  currentDates,
+  label = "Elige las fechas",
+  calendarId = "calendar-id",
+}) => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [showCalendar, setShowCalendar] = useCloseModal(calendarId);
+  useEffect(() => {
+    if (currentDates) {
+      setStartDate(new Date(currentDates.start));
+      setEndDate(new Date(currentDates.end));
+    }
+  }, [currentDates]);
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end) {
+      setParameterArray &&
+        setParameterArray((current) => {
+          return {
+            ...current,
+            estimatedStartDate: getFormatedDate(new Date(start), "-"),
+            estimatedDate: getFormatedDate(new Date(end), "-"),
+          };
+        });
+    }
+  };
+  return (
+    <Container>
+      <div
+        className="calendar-dropdown"
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowCalendar(true);
+        }}
+      >
+        <p>{label}</p>
+        <div className="arrow-item">&#9664;</div>
+      </div>
+      {showCalendar && (
+        <CalendarContainer id={calendarId}>
+          <DatePicker
+            selected={startDate}
+            onChange={onChange}
+            startDate={startDate}
+            endDate={endDate}
+            renderCustomHeader={({
+              monthDate,
+              customHeaderCount,
+              decreaseMonth,
+              increaseMonth,
+            }) => (
+              <div>
+                <button
+                  aria-label="Previous Month"
+                  className={
+                    "react-datepicker__navigation react-datepicker__navigation--previous"
+                  }
+                  style={
+                    customHeaderCount === 1 ? { visibility: "hidden" } : null
+                  }
+                  onClick={decreaseMonth}
+                >
+                  <span
+                    className={
+                      "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+                    }
+                  >
+                    {"<"}
+                  </span>
+                </button>
+                <span className="react-datepicker__current-month">
+                  {monthDate.toLocaleString("es-Es", {
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </span>
+                <button
+                  aria-label="Next Month"
+                  className={
+                    "react-datepicker__navigation react-datepicker__navigation--next"
+                  }
+                  style={
+                    customHeaderCount === 0 ? { visibility: "hidden" } : null
+                  }
+                  onClick={increaseMonth}
+                >
+                  <span
+                    className={
+                      "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+                    }
+                  >
+                    {">"}
+                  </span>
+                </button>
+              </div>
+            )}
+            monthsShown={2}
+            selectsRange
+            inline
+            minDate={minDate}
+            locale="es"
+          />
+        </CalendarContainer>
+      )}
+    </Container>
+  );
+};