contentoh-components-library 21.3.18 → 21.3.19

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

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

@@ -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;
-    }
-  }
-`;

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

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

@@ -1,121 +0,0 @@
-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>
-  );
-};