contentoh-components-library 21.2.105 → 21.3.0

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/OrderDetail/OrderDetail.stories.js

@@ -58,7 +58,7 @@ OrderDetailDefault.args = {
     company_name: "GRUPO BRAHMA",
     date: "2022-11-12T00:00:00.000Z",
     type: "En oficina",
-    id_order: 5,
+    id_order: 1,
     status: "PA",
     total: 731.2639770507812,
     timestamp: "2022-11-12T22:48:23.000Z",

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
-import { Loading } from "../../atoms/Loading/index";
 import moment from "moment";
 import "moment/locale/es";
 import {
@@ -19,7 +18,6 @@ moment.locale("es");
 
 export const OrderDetail = (props) => {
   const { order } = props;
-  const [isLoading, setIsLoading] = useState(true);
   const [showPaymentButton, setShowPaymentButton] = useState(
     order.payment !== "pagado"
   );
@@ -53,7 +51,6 @@ export const OrderDetail = (props) => {
 
   useEffect(() => {
     const ac = new AbortController();
-    setIsLoading(true);
     props.getOrderDetail &&
       props
         .getOrderDetail({ query: { orderId: order.id_order } })
@@ -78,7 +75,6 @@ export const OrderDetail = (props) => {
           });
           setOrderData(obj);
           setDataGeneral({ ...countArticles, totalArticles });
-          setIsLoading(false);
         });
     return () => ac.abort(); // Abort both fetches on unmount
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -159,21 +155,18 @@ export const OrderDetail = (props) => {
         </div>
       </Details>
       <div className="body">
-        {isLoading
-          ? <Loading />
-          : <Table
-              headers={[
-                { width: 140, name: "UPC" },
-                { width: 210, name: "Nombre" },
-                { width: 100, name: "Cadena", type: "groupImages" },
-                { width: 130, name: "Servicios", type: "services" },
-                { width: 70, name: "Estatus", type: "status" },
-                { width: 65, name: "Fact.", type: "checkout" },
-              ]}
-              data={orderData}
-              isProvider={props.isProvider}
-            />
-        }
+        <Table
+          headers={[
+            { width: 140, name: "UPC" },
+            { width: 210, name: "Nombre" },
+            { width: 100, name: "Cadena", type: "groupImages" },
+            { width: 130, name: "Servicios", type: "services" },
+            { width: 70, name: "Estatus", type: "status" },
+            { width: 65, name: "Fact.", type: "checkout" },
+          ]}
+          data={orderData}
+          isProvider={props.isProvider}
+        />
       </div>
       <div className="footer">
         <h2 className="headerTitle">Totales</h2>

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

@@ -14,7 +14,6 @@ export const MainContainer = styled.div`
   & > * {
     padding: 0 30px;
   }
-  box-shadow: -4px 0px 8px 0px rgba(0,0,0,0.1);
   .headerTitle {
     font-weight: bold;
     font-size: 25px;

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -36,32 +36,6 @@ export const Column = styled.div`
   &:nth-child(2) {
     overflow: hidden;
   }
-
-  .tooltip {
-    position: relative;
-    display: inline-block;
-  }
-
-  .tooltip .tooltiptext {
-    visibility: hidden;
-    background-color: #fff;
-    color: black;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 3px;
-  
-    position: absolute;
-    z-index: 1;
-    top: -8px;
-    left: 3px;
-    font-family: Roboto;
-    font-size: 10px;
-    padding: 2px 5px;
-  }
-
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-  }
 `;
 
 export const Rows = styled.div`

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -1,42 +1,27 @@
 export const servicesCodeIcon = {
   datasheet: (
-    <div key="datasheet" className="tooltip">
-      <span className="material-icons small">
-        &#xf8ee;
-      </span>
-      <span className="tooltiptext">Ficha Técnica</span>
-    </div>
+    <span key="datasheet" className="material-icons small">
+      &#xf8ee;
+    </span>
   ),
   description: (
-    <div key="description" className="tooltip">
-      <span className="material-icons small">
-          &#xe873;
-        </span>
-      <span className="tooltiptext">Descripción</span>
-    </div>
+    <span key="description" className="material-icons small">
+      &#xe873;
+    </span>
   ),
   image: (
-    <div key="image" className="tooltip">
-      <span className="material-icons small">
-        &#xe3f4;
-      </span>
-      <span className="tooltiptext">Imagen</span>
-    </div>
+    <span key="image" className="material-icons small">
+      &#xe3f4;
+    </span>
   ),
   translate: (
-    <div key="translate" className="tooltip">
-      <span className="material-icons small">
-        &#xe8e2;
-      </span>
-      <span className="tooltiptext">Traducción</span>
-    </div>
+    <span key="translate" className="material-icons small">
+      &#xe8e2;
+    </span>
   ),
   build: (
-    <div key="build"  className="tooltip">
-      <span className="material-icons small">
-        &#xe1bd;
-      </span>
-      <span className="tooltiptext">Construcción</span>
-    </div>
+    <span key="build" className="material-icons small">
+      &#xe1bd;
+    </span>
   ),
 };

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

@@ -0,0 +1,11 @@
+import { RangeCalendar } from ".";
+
+export default {
+  title: "Components/organisms/RangeCalendar",
+  component: RangeCalendar,
+};
+
+const Template = (args) => <RangeCalendar {...args} />;
+
+export const DefaultRangeCalendar = Template.bind({});
+DefaultRangeCalendar.args = {};

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

@@ -0,0 +1,117 @@
+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";
+registerLocale("es", es);
+
+export const RangeCalendar = ({
+  setParameterArray,
+  minDate = new Date(),
+  currentDates,
+  label = "Elige las fechas",
+  calendarId = "calendar-id",
+}) => {
+  const [startDate, setStartDate] = useState(
+    currentDates?.start ? currentDates.start : new Date()
+  );
+  const [endDate, setEndDate] = useState(
+    currentDates?.end ? currentDates.end : new Date()
+  );
+  const [showCalendar, setShowCalendar] = useCloseModal(calendarId);
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end) {
+      setParameterArray &&
+        setParameterArray((current) => {
+          return {
+            ...current,
+            estimatedStartDate: start.toISOString().substring(0, 10),
+            estimatedDate: end.toISOString().substring(0, 10),
+          };
+        });
+    }
+  };
+  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>
+  );
+};