contentoh-components-library 21.2.104 → 21.2.106

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,36 +36,6 @@ export const Column = styled.div`
   &:nth-child(2) {
     overflow: hidden;
   }
-
-  .tooltip {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-  }
-
-  /* Tooltip text */
-  .tooltip .tooltiptext {
-    visibility: hidden;
-    background-color: #fff;
-    color: black;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 3px;
-  
-    /* Position the tooltip text - see examples below! */
-    position: absolute;
-    z-index: 1;
-    top: -8px;
-    left: 3px;
-    font-family: Roboto;
-    font-size: 10px;
-    padding: 2px 5px;
-  }
-  
-  /* Show the tooltip text when you mouse over the tooltip container */
-  .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/VersionSelector/index.js

@@ -8,8 +8,7 @@ import closeIcon from "../../../assets/images/versionSelector/closeVersionSelect
 import { GlobalColors } from "contentoh-components-library/dist/global-files/variables";
 import { FontFamily } from "../../../global-files/variables";
 import { VersionItem } from "../../molecules/VersionItem";
-import { CreateVersion } from "../../organisms/CreateVersion";
-import { useCloseModal } from "../../../global-files/customHooks";
+import { version } from "react";
 
 export const VersionSelector = ({
   modalId,
@@ -17,13 +16,11 @@ export const VersionSelector = ({
   setVersion,
   companyName,
   currentVersion,
+  setShowCreateVersion,
   setShowVersionSelector,
   jwt,
 }) => {
   const [versions, setVersions] = useState([]);
-  const [showCreateVersion, setShowCreateVersion] =
-    useCloseModal("create-version");
-  const [reload, setReload] = useState(false);
 
   const loadProductVersions = async (articleId) => {
     try {
@@ -44,15 +41,13 @@ export const VersionSelector = ({
   };
 
   useEffect(() => {
-    const ac = new AbortController();
     loadProductVersions(articleId);
 
     return () => {
       setVersions([]);
       setShowCreateVersion(false);
-      return () => ac.abort(); // Abort both fetches on unmount
     };
-  }, [reload]);
+  }, []);
 
   return (
     <Container id={modalId}>
@@ -91,16 +86,6 @@ export const VersionSelector = ({
           />
         ))}
       </div>
-      {showCreateVersion && (
-        <CreateVersion
-          articleId={articleId}
-          version={currentVersion}
-          versionsList={versions}
-          setShowCreateVersion={setShowCreateVersion}
-          realoadVersion={() => setReload(!reload)}
-          jwt={jwt}
-        />
-      )}
     </Container>
   );
 };