contentoh-components-library 21.3.39 → 21.3.41

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -16,20 +16,58 @@ ProviderProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJlZjViNDQzYi02ODc0LTQ2NGQtOWZiZS00Y2UwNWU4ZDQ3YTEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MDAzODYyNiwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjgwMDQyMjI1LCJpYXQiOjE2ODAwMzg2MjYsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.rhufpJdUaJOpiKtXJgNoDq863ecFnLp63c9_6NeEbpYYNN19d_xac8aZADN-QMpkmz1oxtqfxf_-JN5jMJexi9gJCRb9O7-xL75v_G9UjdmE8sRA6qRNb_tFUCt1oee_ulgqm_2wTjb7qGMGvY1eb1J1IX2pBYKnBy64KM6J5xFfZ57ac_bGruYhCzUexPBWyZKc5ckoY2zJqK5m5Ok7ds0m1hC0t-eQSGX_8KMsGQKiHevQ07cZUQ9mxOGVweRuAqITNx8fVmpD9QTpoZJJ5STVVcKO2CS0ltyE_DNlyejO7mZqbKvGEeLYc4ga0nozK9aP8H2cN_topT0d4JZ5rA",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMmY0ZTZmNC1jYmM4LTQ5NTItODMyYi0yYTNlNzBlOTM0ZjAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MjAyNDQ4OCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjgyMDI4MDg4LCJpYXQiOjE2ODIwMjQ0ODgsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.eTJuJXGjCEOcOzJreoJQ3GA_3a7-7IR5sojvBwyEp360Z_Nd7LNDAA605jkRTx2c39zk9o3hkgzEZsK6RYwFrB-jOqlFA7E3dvkCaDC0fh6V1tAY3nKWvFE13VHMj08WAPmQOtr2glpzv0vcCNilOmbw8-D7E7zb2K6R63YdVyC1mSVPvlqJaecBVmiWu5OoHDRFjfdkx-tnxQacm3YeuqYPHho4hy18xU4NG4SmeqXQmuBD8lGMZuZ5Kkr9tkjgEQzjaY5wUik6MWDc43xG5pMhXsuluUnwxPWo3V4tc7MKsml6T6solr31JlL5qsVc4trqWMkLG2bbtUzRRxUUXg",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    category: "Iluminación|Lámparas de Interior|Pie y Pedestal",
-    company_name: "Demo",
-    company_id: 923,
-    id_category: "2676",
-    id_article: 17163,
-    name: "Eglo 95055",
-    upc: "165033",
-    version: 1,
+    orderId: 15160,
+    article_status: "RAC",
+    datasheet_status: "AAC",
+    description_status: "RAC",
+    images_status: "AAC",
+    prio: "none",
+    version: 7,
+    brand: null,
+    article: {
+      category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
+      company_name: "Demo",
+      id_company: 924,
+      country: "México",
+      id_category: "2366",
+      id_article: 39290,
+      name: "MOLDURA MARCO MODER 11X4X244 CM",
+      upc: "100030",
+    },
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 68,
+        name: "The Home Depot Merchants",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    statusByRetailer: {
+      58: {
+        datasheet: "AAC",
+        description: "RAC",
+        images: "AAC",
+      },
+    },
+    retailersWithService: ["58"],
+    id_article: 39290,
     retailersAvailable: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
       {
         id: 68,
         name: "The Home Depot Merchants",
@@ -37,26 +75,62 @@ ProviderProductEditionDefault.args = {
     ],
   },
   productToEdit: {
-    idCategory: "2676",
-    ArticleId: 17163,
-    product: [
-      {
-        category: "Iluminación|Lámparas de Interior|Pie y Pedestal",
+    ArticleId: 39290,
+    idCategory: "2366",
+    product: {
+      orderId: 15160,
+      article_status: "RAC",
+      datasheet_status: "AAC",
+      description_status: "RAC",
+      images_status: "AAC",
+      prio: "none",
+      version: 7,
+      brand: null,
+      article: {
+        category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
         company_name: "Demo",
-        company_id: 923,
-        id_category: "2676",
-        id_article: 17163,
-        name: "Eglo 95055",
-        upc: "165033",
-        version: 1,
-        retailersAvailable: [
-          {
-            id: 68,
-            name: "The Home Depot Merchants",
-          },
-        ],
+        id_company: 924,
+        country: "México",
+        id_category: "2366",
+        id_article: 39290,
+        name: "MOLDURA MARCO MODER 11X4X244 CM",
+        upc: "100030",
       },
-    ],
+      retailers: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 68,
+          name: "The Home Depot Merchants",
+        },
+      ],
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      statusByRetailer: {
+        58: {
+          datasheet: "AAC",
+          description: "RAC",
+          images: "AAC",
+        },
+      },
+      retailersWithService: ["58"],
+      id_article: 39290,
+      retailersAvailable: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 68,
+          name: "The Home Depot Merchants",
+        },
+      ],
+    },
   },
   location: {
     pathname: "/EditProducts",
@@ -68,38 +142,58 @@ ProviderProductEditionDefault.args = {
     key: "24vwut",
   },
   user: {
-    id_user: 59,
-    name: "Cadena",
-    last_name: "Comercial",
-    email: "cadena.ismael@allfreemail.net",
-    position: "Admin",
-    telephone: "+523111366336",
-    country: "México",
-    id_company: 817,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
-    birth_Date: null,
-    about_me: "",
-    zip_code: "",
-    address: "",
-    job: "",
-    id_stripe: "",
-    id_role: 0,
-    active: 1,
-    is_retailer: 1,
-    email_notify: 0,
-    is_user_tech: null,
-    membership: {
-      id: 47,
-      start_date: "2022-05-25T14:31:12.000Z",
-      end_date: "2023-05-25T14:31:12.000Z",
-      planID: 5,
-      plan: "prod_Ktl6B5Ou2gqTB2",
-      name: "Plan Pro",
-      user_limit: "5",
-      products_limit: "500",
-      type: "PyMES",
+    orderId: 15160,
+    article_status: "RAC",
+    datasheet_status: "AAC",
+    description_status: "RAC",
+    images_status: "AAC",
+    prio: "none",
+    version: 7,
+    brand: null,
+    article: {
+      category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
+      company_name: "Demo",
+      id_company: 924,
+      country: "México",
+      id_category: "2366",
+      id_article: 39290,
+      name: "MOLDURA MARCO MODER 11X4X244 CM",
+      upc: "100030",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1680038627077",
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 68,
+        name: "The Home Depot Merchants",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    statusByRetailer: {
+      58: {
+        datasheet: "AAC",
+        description: "RAC",
+        images: "AAC",
+      },
+    },
+    retailersWithService: ["58"],
+    id_article: 39290,
+    retailersAvailable: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 68,
+        name: "The Home Depot Merchants",
+      },
+    ],
   },
   company: {
     id_company: 817,
@@ -144,6 +238,11 @@ ProviderProductEditionDefault.args = {
         name: "The Home Depot Merchants",
         country: "México",
       },
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+        country: "México",
+      },
     ],
   },
   showSurvey: (v) => v && alert("se muestra"),

package/src/components/pages/ProviderProductEdition/index.js

@@ -42,7 +42,6 @@ import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
 import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
-import { number } from "prop-types";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -205,7 +204,6 @@ export const ProviderProductEdition = ({
       ? JSON.parse(sessionStorage.getItem("productEdit"))
       : productToEdit
   );
-  const [icon, setIcon] = useState(null);
   const [version, setVersion] = useState(product?.version);
   const [comments] = useState({});
   const [comment, setComment] = useState("");
@@ -226,9 +224,6 @@ export const ProviderProductEdition = ({
     Imágenes: originProp,
   });
   const [inCart, setInCart] = useState(false);
-  const [modalSent, setModalSent] = useState(false);
-  const [modalViewError, setModalViewError] = useState(false);
-  const [showGenericModal, setShowGenericModal] = useState(false);
   const [dataGenericModal, setDataGenericModal] = useState({
     message: "¿Estás seguro de continuar?",
     detail: ` ${
@@ -238,7 +233,7 @@ export const ProviderProductEdition = ({
     }`,
     button1: {
       name: "Cerrar",
-      action: () => setModalViewTextArea(false),
+      action: () => setGlobalModal(),
     },
     button2: {
       name: "Continuar",
@@ -246,7 +241,6 @@ export const ProviderProductEdition = ({
     },
     img: face,
   });
-  const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
   const [saving, setSaving] = useState(loading);
   const [retailerStatus, setRetailerStatus] = useState(
@@ -254,6 +248,109 @@ export const ProviderProductEdition = ({
   );
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
+  const [globalModal, setGlobalModal] = useState();
+
+  const showGlobalModal = useCallback(
+    (type) => {
+      const formatter = new Intl.ListFormat("es", { type: "conjunction" });
+      switch (type) {
+        case "error":
+          setGlobalModal({
+            message: `${activeTab} rechazada`,
+            detail: "Agrega tu comentarios para enviar el rechazo",
+            img: errorModal,
+            textArea: true,
+            button1: {
+              name: "Enviar",
+              action: (e) => {
+                const textArea = document.querySelector("#area");
+                if (textArea.value) {
+                  textArea.style.border = "none";
+                  createComment(e, textArea.value);
+                  showGlobalModal("commentsSent");
+                  validatedAll ? validateAll("R") : sendEvaluation("R");
+                } else {
+                  textArea.style.border = "2px solid red";
+                }
+              },
+            },
+          });
+          break;
+        case "generic":
+          setGlobalModal(dataGenericModal);
+          break;
+        case "commentsSent":
+          setGlobalModal({
+            message: "Gracias, tus comentarios fueron entregados.",
+            detail: "Trabajaremos en conjunto para resolverlo.",
+            button1: {
+              name: "Cerrar",
+              action: () => setGlobalModal(),
+            },
+            img: face,
+            textArea: false,
+          });
+          break;
+        case "RAC":
+          const servicesRejected = [];
+          const translateServices = {
+            datasheet: '"ficha técnica"',
+            description: '"descripción"',
+            images: '"imágenes"',
+          };
+          Object.keys(translateServices).forEach((service) => {
+            if (product[`${service}_status`] === "RAC") {
+              servicesRejected.push(translateServices[service]);
+            }
+          });
+          const plural = ["Los servicios", "cumplen"];
+          const singular = ["El servicio", "cumple"];
+          const grammar = servicesRejected.length > 1 ? plural : singular;
+          const formatted = formatter.format(servicesRejected);
+          const text1 = `${grammar[0]} de ${formatted} no ${grammar[1]} con lo que la cadena necesita.`;
+          const text2 = `¡Solicita el servicio de Content-oh! para completarlo!`;
+          setGlobalModal({
+            message:
+              "Tu producto no cumple con los requerimientos de la cadena",
+            customComponent: (
+              <>
+                <p className="generic-text">
+                  {text1}
+                  <br />
+                  <br />
+                  {text2}
+                </p>
+              </>
+            ),
+            button1: {
+              name: "Continuar",
+              action: () => setGlobalModal(),
+            },
+            button2: {
+              name: "Solicitar a Content-oh!",
+              action: () => setGlobalModal(),
+            },
+            img: face,
+          });
+          break;
+        case "AAC":
+          setGlobalModal({
+            message: "Felicidades",
+            detail: "Tu producto cumple con los requerimientos de la cadena.",
+            button1: {
+              name: "Continuar",
+              action: () => setGlobalModal(),
+            },
+            img: face,
+          });
+          break;
+        default:
+          setGlobalModal();
+          break;
+      }
+    },
+    [activeTab, dataGenericModal]
+  );
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -352,6 +449,8 @@ export const ProviderProductEdition = ({
     getCart();
     fetchUsers(token).then((res) => setUserGroups(res));
     setImages({ action: "orderImages", retailerId: activeRetailer.id });
+    if (["RAC", "AAC"].includes(product.article_status))
+      showGlobalModal(product.article_status);
   }, [product, version]);
 
   useEffect(() => {
@@ -618,22 +717,6 @@ export const ProviderProductEdition = ({
     }
   };
 
-  const getSectionIcon = () => {
-    switch (activeTab) {
-      case "Ficha técnica":
-        setIcon(attributesSent);
-        break;
-      case "Descripción":
-        setIcon(descriptionSent);
-        break;
-      case "Imágenes0,,":
-        setIcon(imagesSent);
-        break;
-      default:
-        break;
-    }
-  };
-
   const createComment = async (e, body, tab) => {
     let concept = "";
     switch (activeTab) {
@@ -716,21 +799,6 @@ export const ProviderProductEdition = ({
     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
   };
 
-  const evaluationComplete = (tab) => {
-    const concept = getConcept(tab);
-    let serv = servicesData.filter((item) => item.service === concept);
-    if (
-      ["RequestWithContentoh", "RequestWithoutContentoh"].includes(origin[tab])
-    ) {
-      serv = serv.filter((f) => f.id_retailer === activeRetailer.id);
-    }
-    const statusArray =
-      user.is_retailer === 1 ? ["ACA", "RCA"] : ["AP", "RP", "ACA"];
-    return (
-      serv.length > 0 && serv.every((item) => statusArray.includes(item.status))
-    );
-  };
-
   const downloadImages = () => {
     selectedImages.length > 0
       ? selectedImages.forEach((e) => {
@@ -824,21 +892,6 @@ export const ProviderProductEdition = ({
     }
   };
 
-  const confirmStatusComplete = () => {
-    const { datasheet_status, description_status, images_status } = product;
-    const completionStates =
-      user.is_retailer === 1
-        ? ["ACA", "Evaluated", "NS"]
-        : ["AP", "Evaluated", "NS"];
-    const dsEvaluated = completionStates.includes(datasheet_status);
-    const descsEvaluated = completionStates.includes(description_status);
-    const imgsEvaluated = completionStates.includes(images_status);
-
-    const AllEvaluated = dsEvaluated && descsEvaluated && imgsEvaluated;
-
-    return AllEvaluated;
-  };
-
   const sendEvaluation = async (result) => {
     setLoading(true);
     const concept = getConcept(activeTab);
@@ -1004,7 +1057,7 @@ export const ProviderProductEdition = ({
     prod.product.services_status = `["${statusComplete}","${statusComplete}","${statusComplete}"]`;
     sessionStorage.setItem("productEdit", JSON.stringify(prod));
     setProduct(prod);
-    setShowGenericModal && setShowGenericModal(false);
+    showGlobalModal("generic");
     await loadData();
   };
 
@@ -1075,7 +1128,7 @@ export const ProviderProductEdition = ({
             action: () => evaluationToRetailer("A"),
           },
         }));
-        setShowGenericModal(true);
+        showGlobalModal("generic");
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           sendEvaluation("A");
@@ -1087,7 +1140,7 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("A"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
         sendEvaluation("A");
@@ -1102,7 +1155,7 @@ export const ProviderProductEdition = ({
       } else if (user.is_retailer) {
         if (product.id_order || product.orderId) {
           setValidatedAll(true);
-          setModalViewError(true);
+          showGlobalModal("error");
         } else {
           setDataGenericModal((prev) => ({
             ...prev,
@@ -1111,11 +1164,11 @@ export const ProviderProductEdition = ({
               action: () => evaluationToRetailer("R"),
             },
           }));
-          setShowGenericModal(true);
+          showGlobalModal("generic");
         }
       } else {
         setValidatedAll(true);
-        setModalViewError(true);
+        showGlobalModal("error");
       }
     }
   };
@@ -1174,7 +1227,7 @@ export const ProviderProductEdition = ({
                     action: () => evaluationToRetailer("A"),
                   },
                 }));
-                setShowGenericModal(true);
+                showGlobalModal("generic");
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   validateAll("A");
@@ -1186,7 +1239,7 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("A"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
                 validateAll("A");
@@ -1202,7 +1255,7 @@ export const ProviderProductEdition = ({
               } else if (user.is_retailer) {
                 if (product.id_order || product.orderId) {
                   setValidatedAll(true);
-                  setModalViewError(true);
+                  showGlobalModal("error");
                 } else {
                   setDataGenericModal((prev) => ({
                     ...prev,
@@ -1211,11 +1264,11 @@ export const ProviderProductEdition = ({
                       action: () => evaluationToRetailer("R"),
                     },
                   }));
-                  setShowGenericModal(true);
+                  showGlobalModal("generic");
                 }
               } else {
                 setValidatedAll(true);
-                setModalViewError(true);
+                showGlobalModal("error");
               }
             }}
             approve={() => sendToEvaluation("A")}
@@ -1442,63 +1495,8 @@ export const ProviderProductEdition = ({
           onClick={() => setMessage("")}
         />
       )}
-      {modalSent && (
-        <GlobalModal
-          close={() => setModalSent(false)}
-          message={message}
-          detail={""}
-          bold={!evaluationComplete(activeTab) && "Aprueba / Rechaza"}
-          widthImg={!evaluationComplete(activeTab) ? "160px" : "354px"}
-          heightImg={!evaluationComplete(activeTab) ? "84px" : "354px"}
-          img={getSectionIcon()}
-        />
-      )}
-      {modalViewError && (
-        <GlobalModal
-          close={() => setModalViewError(false)}
-          message={`${activeTab} rechazada`}
-          detail={"Agrega tu comentarios para enviar el rechazo"}
-          button1={{
-            name: "Enviar",
-            action: (e) => {
-              const textArea = document.querySelector("#area");
-              if (textArea.value) {
-                textArea.style.border = "none";
-                createComment(e, textArea.value);
-                setModalViewError(false);
-                setModalViewTextArea(true);
-                validatedAll ? validateAll("R") : sendEvaluation("R");
-              } else {
-                textArea.style.border = "2px solid red";
-              }
-            },
-          }}
-          img={errorModal}
-          textArea={true}
-        />
-      )}
-      {showGenericModal && (
-        <GlobalModal
-          close={() => setShowGenericModal(false)}
-          message={dataGenericModal.message}
-          detail={dataGenericModal.detail}
-          button1={dataGenericModal.button1}
-          button2={dataGenericModal.button2}
-          img={dataGenericModal.img}
-        />
-      )}
-      {modalViewTextArea && (
-        <GlobalModal
-          close={() => setModalViewTextArea(false)}
-          message={`Gracias, tus comentarios fueron entregados.`}
-          detail={"Trabajaremos en conjunto para resolverlo."}
-          button1={{
-            name: "Cerrar",
-            action: () => setModalViewTextArea(false),
-          }}
-          img={face}
-          textArea={false}
-        />
+      {globalModal && (
+        <GlobalModal close={() => setGlobalModal()} {...globalModal} />
       )}
       {showVersionSelector && (
         <VersionSelector