contentoh-components-library 21.5.97 → 21.5.99

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

@@ -42,7 +42,6 @@ import errorIcon from "../../../assets/images/genericModal/errorModal.svg";
 import warningIcon from "../../../assets/images/genericModal/genericModalWarning.svg";
 
 import { Container } from "./styles";
-import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
 
 const ProviderProductEditionView = ({
   tabsSections,
@@ -70,6 +69,7 @@ const ProviderProductEditionView = ({
 
   const isRetailer = user?.is_retailer;
 
+  const [boxData, setBoxData] = useState(null);
   const [showModal, setShowModal] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
@@ -143,16 +143,19 @@ const ProviderProductEditionView = ({
   useEffect(() => {
     const setProductData = () => {
       try {
-        const product = productSelected
-          ? productSelected
-          : JSON.parse(sessionStorage.getItem("productSelected"));
+        const product = JSON.parse(sessionStorage.getItem("productSelected"))
+          ? JSON.parse(sessionStorage.getItem("productSelected"))
+          : productSelected;
 
         const productNormalized = normalizeProduct(product);
 
+        console.log({ productNormalized });
+
         dispatch({
           type: "SET_PRODUCT",
           payload: productNormalized,
         });
+
         if (
           productNormalized.categoryRetailerInOrder.length > 0 &&
           productNormalized.statusByRetailer
@@ -253,29 +256,6 @@ const ProviderProductEditionView = ({
           return orderA - orderB;
         });
 
-        //Cuando carguemos la información de los servicios, las actualizamos en el estado del producto
-
-        const updatedStatusByRetailer = servicesDataRes.reduce(
-          (acc, current, idx) => {
-            const { id_retailer, service, status } = current;
-
-            if (!acc[id_retailer]) acc[id_retailer] = {};
-
-            acc[id_retailer][service] = status;
-
-            return acc;
-          },
-          {},
-        );
-
-        dispatch({
-          type: "SET_PRODUCT",
-          payload: {
-            ...state.product,
-            statusByRetailer: updatedStatusByRetailer,
-          },
-        });
-
         dispatch({
           type: "SET_SERVICES",
           payload: {
@@ -295,7 +275,7 @@ const ProviderProductEditionView = ({
         dispatch({
           type: "SET_ACTIVE_PERCENTAGES",
           payload: percentages.find(
-            ({ id_retailer: rId }) => rId === id_retailer
+            ({ id_retailer: rId }) => rId === id_retailer,
           ),
         });
       } catch (error) {
@@ -307,16 +287,7 @@ const ProviderProductEditionView = ({
     };
 
     fetchData();
-  }, [
-    state.product?.datasheet_status,
-    state.product?.description_status,
-    state.product?.images_status,
-    state.product?.status,
-    state.product?.percentages,
-    state.product?.version,
-    state.active_retailer,
-    token
-  ]);
+  }, [state.product, state.active_retailer, token]);
 
   // Actualizador de campos del ui para que coincidan con el retailer activo
   useEffect(() => {
@@ -324,14 +295,15 @@ const ProviderProductEditionView = ({
     console.log("Actualizar inputs del retailer activo");
     const updateInputsActiveRetailer = () => {
       if (!state.services) return;
-
       if (state.services.datasheets) {
         const retailerDatasheets =
           state.services.datasheets[state.active_retailer.id_retailer];
+
         const datasheetsActiveRetailer = {
           ...retailerDatasheets,
           data: Object.values(retailerDatasheets.data),
         };
+
         dispatch({
           type: "SET_DATASHEETS_INPUTS",
           payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
@@ -377,54 +349,37 @@ const ProviderProductEditionView = ({
   const canShowValidationButtons = () => {
     if (!state.product?.statusByRetailer) return false;
 
-    try {
-      const currentService = getConceptByTab(state.active_tab);
-      // const currentStatus = state.product[`${currentService}_status`];
-      const currentRetailer = state.active_retailer.id_retailer;
-
-      //Información del servicio de la cadena seleccionada
-      const { status: currentStatus } = state.services_data.find(
-        (service) =>
-          service.service === currentService &&
-          service.id_retailer === currentRetailer,
-      );
-
-      const originTab = origin[state.active_tab];
-      const isRetailerUser = user?.is_retailer === 1;
-
-      const validStatuses = ["AA", "AP", "R", "CA", "RCA"];
-      if (!validStatuses.includes(currentStatus)) return false;
+    const currentService = getConceptByTab(state.active_tab);
+    const currentStatus = state.product[`${currentService}_status`];
+    const originTab = origin[state.active_tab];
+    const isRetailerUser = user?.is_retailer === 1;
 
-      const validOrigins = [
-        "RequestWithContentoh",
-        "RequestWithoutContentoh",
-        "Contentoh",
-      ];
+    const validStatuses = ["AA", "AP", "R", "CA", "RCA"];
+    if (!validStatuses.includes(currentStatus)) return false;
 
-      if (!validOrigins.includes(originTab)) return false;
+    const validOrigins = [
+      "RequestWithContentoh",
+      "RequestWithoutContentoh",
+      "Contentoh",
+    ];
 
-      // Retailer: solo AP
-      if (isRetailerUser) {
-        return currentStatus === "AP";
-      }
+    if (!validOrigins.includes(originTab)) return false;
 
-      // No retailer
-      const hasNoOrder = !state.product.id_order && !state.product.orderId;
+    // Retailer: solo AP
+    if (isRetailerUser) {
+      return currentStatus === "AP";
+    }
 
-      const condition =
-      (
-        originTab === "RequestWithoutContentoh" && (
-          ["R", "CA"].includes(currentStatus) || (currentStatus === "RCA" && hasNoOrder)
-        )
-      ) ||
-      (
-        ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA"
-      )
+    // No retailer
+    const hasNoOrder = !state.product.id_order && !state.product.orderId;
 
-      return condition;
-    } catch (error) {
-      return false;
-    }
+    return (
+      (originTab === "RequestWithoutContentoh" &&
+        (["R", "CA"].includes(currentStatus) ||
+          (currentStatus === "RCA" && hasNoOrder))) ||
+      (["RequestWithContentoh", "Contentoh"].includes(originTab) &&
+        currentStatus === "AA")
+    );
   };
 
   const canShowSaveButton = (version_status) => {
@@ -445,9 +400,8 @@ const ProviderProductEditionView = ({
 
     const currentService = getConceptByTab(state.active_tab);
     const currentRetailer = state.active_retailer.id_retailer;
-
     const currentStatus =
-      statusByRetailer[currentRetailer][currentService] || "N/S";
+      statusByRetailer[currentRetailer][currentService] || "ERR";
     return currentStatus;
   };
 
@@ -709,7 +663,6 @@ const ProviderProductEditionView = ({
       state.product[sectionStatusKey] || state.product?.version_status;
 
     let data = { articleId, orderId, concept, evalStatus };
-
     const retailerId = state.active_retailer?.id_retailer;
 
     try {
@@ -730,7 +683,6 @@ const ProviderProductEditionView = ({
         const newStatuses = JSON.parse(res.data.body);
         const serviceStatus =
           newStatuses.newServiceStatus[articleId][`${concept}Status`];
-          
 
         // Actualizar el producto con los nuevos estados
         const updatedProduct = {
@@ -739,22 +691,12 @@ const ProviderProductEditionView = ({
             ...state.product.statusByRetailer,
             [retailerId]: {
               ...state.product.statusByRetailer[retailerId],
-              [concept]: newStatuses?.newStatus ?? serviceStatus,
+              [concept]: serviceStatus,
             },
           },
         };
 
-        const updatedServicesData = state.services_data?.map((service) => ({
-          ...service,
-          status:
-            service?.id_retailer === retailerId && service?.service === concept
-              ? newStatuses?.newStatus ?? serviceStatus
-              : service?.status,
-        }));
-
-        dispatch({ type: "SET_SERVICES_DATA", payload: updatedServicesData });
-
-        // console.log({ updatedProduct });
+        console.log({ updatedProduct });
 
         dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
 
@@ -983,7 +925,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          })
+          }),
         );
       });
 
@@ -1028,7 +970,7 @@ const ProviderProductEditionView = ({
           ArticleId: updatedProduct.id_article,
           idCategory: updatedProduct.id_category,
           product: updatedProduct,
-        })
+        }),
       );
 
       // Mostrar modal de éxito
@@ -1094,427 +1036,411 @@ const ProviderProductEditionView = ({
   if (state.loading || !state.services || !state.product) return <Loading />;
 
   return (
-    <AiProductEditionProvider
-      isCreatorsEdition={false}
-      state={state}
-    >
-      <Container headerTop={headerTop}>
-        {showVersionSelector && (
-          <VersionSelector
-            modalId={"version-selector"}
-            articleId={state.product.id_article}
-            setVersion={handleOnChangeProductVersion}
-            companyName={company.company_name}
-            currentVersion={state.product.version}
-            setShowVersionSelector={setShowVersionSelector}
-            jwt={token}
-          />
-        )}
-        {showModal && (
-          <ProductImageModal
-            images={state.images_values}
-            setShowModal={setShowModal}
-            approveRejectButtons={canShowValidationButtons()}
-            sendToFacilitator={handleOnSendEvaluation}
-          />
-        )}
-        {state.modal.show && (
-          <GenericModal
-            componentsArray={[
-              state.modal.image && (
-                <img key="1" src={state.modal.image} alt="modal icon" />
-              ),
-              state.modal.title && (
-                <ScreenHeader
-                  key="2"
-                  headerType={"retailer-name-header"}
-                  text={state.modal.title}
-                  color={"white"}
-                />
-              ),
-              state.modal.message && (
-                <ScreenHeader
-                  key="3"
-                  headerType={"retailer-name-header"}
-                  text={state.modal.message}
-                  color={"white"}
-                />
-              ),
-              state.modal.buttons && (
-                <div key="4" style={{ marginTop: "16px" }}>
-                  {state.modal.buttons.map((button, index) => (
-                    <Button
-                      key={index}
-                      buttonType={button.buttonType}
-                      label={button.text}
-                      onClick={button.action}
-                    />
-                  ))}
-                </div>
-              ),
-            ].filter(Boolean)}
-            onClick={() =>
-              dispatch({
-                type: "SET_MODAL",
-                payload: { show: false, title: "", message: "", image: null },
-              })
-            }
-          />
-        )}
-        {showRejectModal && (
-          <Modal
-            title={
-              rejectAll
-                ? "Agregar mensaje para rechazar todo"
-                : "Agregar mensaje de rechazo"
-            }
-            show={showRejectModal}
-            customComponent={
-              <TagAndInput
-                inputType={"textarea"}
-                inputId={"modal-message-box"}
-                index={0}
+    <Container headerTop={headerTop}>
+      {/* <button onClick={() => console.log(state)}>log</button> */}
+      {showVersionSelector && (
+        <VersionSelector
+          modalId={"version-selector"}
+          articleId={state.product.id_article}
+          setVersion={handleOnChangeProductVersion}
+          companyName={company.company_name}
+          currentVersion={state.product.version}
+          setShowVersionSelector={setShowVersionSelector}
+          jwt={token}
+        />
+      )}
+      {showModal && (
+        <ProductImageModal
+          images={state.images_values}
+          setShowModal={setShowModal}
+          approveRejectButtons={canShowValidationButtons()}
+          sendToFacilitator={handleOnSendEvaluation}
+        />
+      )}
+      {state.modal.show && (
+        <GenericModal
+          componentsArray={[
+            state.modal.image && (
+              <img key="1" src={state.modal.image} alt="modal icon" />
+            ),
+            state.modal.title && (
+              <ScreenHeader
+                key="2"
+                headerType={"retailer-name-header"}
+                text={state.modal.title}
                 color={"white"}
               />
-            }
-            buttons={[
-              <ButtonV2
-                key={"btn-Cancelar"}
-                type={"white"}
-                label={"Cancelar"}
-                size={12}
-                onClick={() => {
-                  setShowRejectModal(false);
-                }}
-              />,
-              <ButtonV2
-                key={"btn-Aceptar"}
-                type={"pink"}
-                label={"Aceptar"}
-                size={12}
-                onClick={async () => {
-                  const elements = document.querySelectorAll(
-                    "#modal-message-box .ql-container .ql-editor > p",
-                  );
+            ),
+            state.modal.message && (
+              <ScreenHeader
+                key="3"
+                headerType={"retailer-name-header"}
+                text={state.modal.message}
+                color={"white"}
+              />
+            ),
+            state.modal.buttons && (
+              <div key="4" style={{ marginTop: "16px" }}>
+                {state.modal.buttons.map((button, index) => (
+                  <Button
+                    key={index}
+                    buttonType={button.buttonType}
+                    label={button.text}
+                    onClick={button.action}
+                  />
+                ))}
+              </div>
+            ),
+          ].filter(Boolean)}
+          onClick={() =>
+            dispatch({
+              type: "SET_MODAL",
+              payload: { show: false, title: "", message: "", image: null },
+            })
+          }
+        />
+      )}
+      {showRejectModal && (
+        <Modal
+          title={
+            rejectAll
+              ? "Agregar mensaje para rechazar todo"
+              : "Agregar mensaje de rechazo"
+          }
+          show={showRejectModal}
+          customComponent={
+            <TagAndInput
+              inputType={"textarea"}
+              inputId={"modal-message-box"}
+              index={0}
+              color={"white"}
+            />
+          }
+          buttons={[
+            <ButtonV2
+              key={"btn-Cancelar"}
+              type={"white"}
+              label={"Cancelar"}
+              size={12}
+              onClick={() => {
+                setShowRejectModal(false);
+              }}
+            />,
+            <ButtonV2
+              key={"btn-Aceptar"}
+              type={"pink"}
+              label={"Aceptar"}
+              size={12}
+              onClick={async () => {
+                const elements = document.querySelectorAll(
+                  "#modal-message-box .ql-container .ql-editor > p",
+                );
+
+                if (!elements || elements.length === 0) {
+                  console.error("Elemento no encontrado");
+                  return;
+                }
 
-                  if (!elements || elements.length === 0) {
-                    console.error("Elemento no encontrado");
-                    return;
-                  }
+                const isMessageEmpty = Array.from(elements).every((el) => {
+                  const body = el.innerHTML;
+                  return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
+                });
 
-                  const isMessageEmpty = Array.from(elements).every((el) => {
-                    const body = el.innerHTML;
-                    return (
-                      !body || body.replace(/<.*?\/?>/gm, "").trim() === ""
-                    );
-                  });
-
-                  if (isMessageEmpty) {
-                    const container = document.querySelector(
-                      ".container-customComponent",
-                    );
-                    const existingAlert =
-                      container.querySelector(".alert-error");
-
-                    if (!existingAlert) {
-                      const alert = document.createElement("div");
-                      alert.className = "alert-error";
-                      alert.style.cssText = `
-                        color: #d32f2f;
-                        background-color: #ffebee;
-                        border: 1px solid #ef5350;
-                        border-radius: 4px;
-                        padding: 12px 16px;
-                        margin-top: 10px;
-                        font-size: 14px;
-                        display: flex;
-                        align-items: center;
-                        gap: 8px;
-                        font-family: 'Roboto', sans-serif;
-                        text-align: center;
-                      `;
-                      alert.innerHTML = `<span>El mensaje no puede estar vacío.</span>`;
-                      container.appendChild(alert);
-                    }
-                    return;
+                if (isMessageEmpty) {
+                  const container = document.querySelector(
+                    ".container-customComponent",
+                  );
+                  const existingAlert = container.querySelector(".alert-error");
+
+                  if (!existingAlert) {
+                    const alert = document.createElement("div");
+                    alert.className = "alert-error";
+                    alert.style.cssText = `
+                      color: #d32f2f;
+                      background-color: #ffebee;
+                      border: 1px solid #ef5350;
+                      border-radius: 4px;
+                      padding: 12px 16px;
+                      margin-top: 10px;
+                      font-size: 14px;
+                      display: flex;
+                      align-items: center;
+                      gap: 8px;
+                      font-family: 'Roboto', sans-serif;
+                      text-align: center;
+                    `;
+                    alert.innerHTML = `<span>El mensaje no puede estar vacío.</span>`;
+                    container.appendChild(alert);
                   }
+                  return;
+                }
 
-                  const fullMessage = Array.from(elements)
-                    .map((element) => element.innerHTML)
-                    .join("")
-                    .replace(/<br\s*\/?>/gi, "\n");
+                const fullMessage = Array.from(elements)
+                  .map((element) => element.innerHTML)
+                  .join("")
+                  .replace(/<br\s*\/?>/gi, "\n");
 
-                  await createComment(fullMessage, token);
+                await createComment(fullMessage);
 
-                  rejectAll
-                    ? handleOnEvaluateAll("R")
-                    : handleOnSendEvaluation("R");
-                  setShowRejectModal(false);
-                }}
-              />,
-            ]}
-          />
-        )}
-        <HeaderTop
-          setHeaderTop={setHeaderTop}
-          withChat={location?.state?.withChat}
-          chatType={location?.state?.chatType}
-          productSelected={state.product}
-          token={token}
-          activeRetailer={{
-            id: state.active_retailer?.id_retailer,
-            name: state.active_retailer?.retailer,
-          }}
+                rejectAll
+                  ? handleOnEvaluateAll("R")
+                  : handleOnSendEvaluation("R");
+                setShowRejectModal(false);
+              }}
+            />,
+          ]}
         />
-        <div className="data-container">
-          <div className="image-data-panel">
-            <ImagePreviewer
-              activeImage={
-                state.images_values.values[state.current_image] ?? {}
-              }
-              imagesArray={state.images_values || []}
-              setActiveImage={handleOnChangeCurrentImage}
-              setShowModal={handleOnShowModalGalery}
+      )}
+      <HeaderTop
+        setHeaderTop={setHeaderTop}
+        withChat={location?.state?.withChat}
+        chatType={location?.state?.chatType}
+        productSelected={state.product}
+        token={token}
+        activeRetailer={{
+          id: state.active_retailer?.id_retailer,
+          name: state.active_retailer?.retailer,
+        }}
+      />
+      <div className="data-container">
+        <div className="image-data-panel">
+          <ImagePreviewer
+            activeImage={state.images_values.values[state.current_image] ?? {}}
+            imagesArray={state.images_values || []}
+            setActiveImage={handleOnChangeCurrentImage}
+            setShowModal={handleOnShowModalGalery}
+          />
+          <ImageDataTable
+            lists={state.images_values || []}
+            activeImage={
+              state.images_values?.values
+                ? state.images_values?.values[state.current_image]
+                : {}
+            }
+            assignationsImages={assig}
+            retailerSelected={state.active_retailer?.id_retailer}
+            imagesStatus={state.product?.images_status || "-"}
+            isRetailer={isRetailer}
+            setShowVersionSelector={setShowVersionSelector}
+            version={state.product.version}
+            setImages={handleOnChangeCurrentImage}
+            onClickSave={handleOnClickSaveImages}
+            setAssignation={handleOnChangeAssignations} // No se usa?
+          />
+        </div>
+        <div className="product-information">
+          <div className="product-information">
+            <FullProductNameHeader
+              headerData={state.product}
+              percent={state.active_percentage.percentagesGeneral.required}
+              activeRetailer={{
+                id: state.active_retailer?.id_retailer,
+                name: state.active_retailer?.retailer,
+                image: state.active_retailer?.image,
+              }}
+              showValidationButtons={canShowValidationButtons()}
+              showApproveRejectAll={canShowValidationButtons()}
+              servicesData={state.services_data ? state.services_data : null}
+              approveAll={handleOnApproveAll}
+              rejectAll={handleOnRejectAll}
+              approve={() => handleOnSendEvaluation("A")}
+              reject={handleOnReject}
+              setActiveRetailer={handleOnChangeActiveRetailer}
             />
-            <ImageDataTable
-              lists={state.images_values || []}
-              activeImage={
-                state.images_values?.values
-                  ? state.images_values?.values[state.current_image]
-                  : {}
-              }
-              assignationsImages={assig}
-              retailerSelected={state.active_retailer?.id_retailer}
-              imagesStatus={state.product?.images_status || "-"}
+            <FullTabsMenu
+              tabsSections={tabsSections}
+              status={getStatusByCurrentServiceAndRetailer()}
+              activeTab={state.active_tab}
+              user={user}
               isRetailer={isRetailer}
-              setShowVersionSelector={setShowVersionSelector}
+              assig={assig}
               version={state.product.version}
-              setImages={handleOnChangeCurrentImage}
-              onClickSave={handleOnClickSaveImages}
-              setAssignation={handleOnChangeAssignations} // No se usa?
+              updatedDescriptions={state.updated_descriptions_inputs}
+              updatedDatasheets={state.updated_datasheets_inputs}
+              updatedImages={state.updated_images_values}
+              images={state.services.images}
+              // actions
+              downloadImages={handleOnDownloadImages}
+              askToDeleteImages={handleOnAskToDeleteImages}
+              showSaveButton={canShowSaveButton(state.product.version_status)}
+              onClickSave={handleOnClickSave}
+              // setters
+              setActiveTab={handleOnChangeActiveTab}
+              setImageLayout={handleOnSetImageLayout}
+              setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+              setUpdatedDatasheets={handleOnSetUpdatedDatasheets}
+              setAssignation={handleOnSetAssignation} // No se usa?
+              setImages={handleOnSetImages} // No se usa?
+              // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
+              setShowVersionSelector={setShowVersionSelector}
             />
-          </div>
-          <div className="product-information">
-            <div className="product-information">
-              <FullProductNameHeader
-                headerData={state.product}
-                percent={state.active_percentage.percentagesGeneral.required}
-                activeRetailer={{
-                  id: state.active_retailer?.id_retailer,
-                  name: state.active_retailer?.retailer,
-                  image: state.active_retailer?.image,
-                }}
-                showValidationButtons={canShowValidationButtons()}
-                showApproveRejectAll={canShowValidationButtons()}
-                servicesData={state.services_data ? state.services_data : null}
-                approveAll={handleOnApproveAll}
-                rejectAll={handleOnRejectAll}
-                approve={() => handleOnSendEvaluation("A")}
-                reject={handleOnReject}
-                setActiveRetailer={handleOnChangeActiveRetailer}
-              />
-              <FullTabsMenu
-                tabsSections={tabsSections}
-                status={getStatusByCurrentServiceAndRetailer()}
-                activeTab={state.active_tab}
-                user={user}
-                isRetailer={isRetailer}
-                assig={assig}
-                version={state.product.version}
-                updatedDescriptions={state.updated_descriptions_inputs}
-                updatedDatasheets={state.updated_datasheets_inputs}
-                updatedImages={state.updated_images_values}
-                images={state.services.images}
-                // actions
-                downloadImages={handleOnDownloadImages}
-                askToDeleteImages={handleOnAskToDeleteImages}
-                showSaveButton={canShowSaveButton(state.product.version_status)}
-                onClickSave={handleOnClickSave}
-                // setters
-                setActiveTab={handleOnChangeActiveTab}
-                setImageLayout={handleOnSetImageLayout}
-                setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
-                setUpdatedDatasheets={handleOnSetUpdatedDatasheets}
-                setAssignation={handleOnSetAssignation} // No se usa?
-                setImages={handleOnSetImages} // No se usa?
-                // setSelectedImages={handleOnSetSelectedImages} // Se pasa hasta TabsMenu, pero no se usa
-                setShowVersionSelector={setShowVersionSelector}
-              />
-              <div
-                className={
-                  "services-information-container " +
-                  (imageLayout && state.active_tab === "Imágenes"
-                    ? "image-services"
-                    : "")
-                }
-              >
-                {state.saving ? (
-                  <Loading />
-                ) : (
-                  <>
-                    {state.active_tab === "Descripción" &&
-                      (state.product?.description_status !== "NS" ? (
-                        <InputGroup
-                          activeSection={state.active_tab}
-                          inputGroup={state.descriptions_inputs[0]}
-                          updatedDescriptions={
-                            state.updated_descriptions_inputs
-                          }
-                          articleId={state.product?.id_article}
-                          version={state.product.version}
-                          isShowbox={false}
-                          dinamicHeight={true}
-                          setUpdatedDescriptions={
-                            handleOnSetUpdatedDescriptions
-                          }
-                          updateApprovedInputs={handleOnUpdateApprovedInputs} // No se usa?
-                        />
-                      ) : (
-                        <ScreenHeader
-                          text={"No cuentas con este servicio"}
-                          headerType={"input-name-header"}
-                        />
-                      ))}
-
-                    {state.active_tab === "Ficha técnica" &&
-                      (state.product?.datasheet_status !== "NS" ? (
-                        <>
-                          {state.datasheets_inputs[0]?.data?.map(
-                            (dataGroup, index) => (
-                              <InputGroup
-                                index={index}
-                                key={
-                                  index + "-" + state.active_retailer.retailer
-                                }
-                                articleId={state.product.id_article}
-                                version={state.version}
-                                activeSection={state.active_tab}
-                                inputGroup={dataGroup}
-                                dataInputs={state.datasheets_inputs[1] ?? []}
-                                activeRetailer={
-                                  state.services.datasheets[
-                                    state.active_retailer.id_retailer
-                                  ]
-                                }
-                                groupData={
-                                  state.services.datasheets[
-                                    state.active_retailer.id_retailer
-                                  ].data
-                                }
-                                updatedDatasheets={
-                                  state.updated_datasheets_inputs
-                                }
-                                setUpdatedDatasheets={
-                                  handleOnSetUpdatedDatasheets
-                                }
-                                isShowbox={true}
-                                setUpdatedBoxData={(e) => {
-                                  setBoxData(e);
-                                }}
-                                updateApprovedInputs={
-                                  handleOnUpdateApprovedInputs // No se usa?
-                                }
-                              />
-                            ),
-                          )}
-                        </>
-                      ) : (
-                        <ScreenHeader
-                          text={"No cuentas con este servicio"}
-                          headerType={"input-name-header"}
-                        />
-                      ))}
-
-                    {state.active_tab === "Imágenes" &&
-                      (state.product?.images_status !== "NS" ? (
-                        <>
-                          {!imageLayout && (
-                            <GalleryHeader
-                              checkAll={state.all_image_checked} // Determina si el checkbox "Seleccionar todo" está marcado
-                              setCheckAll={handleOnSetCheckAll} // Toggler de true o false para el checkbox "Seleccionar todo"
-                              setSelectedImages={handleOnSetSelectedImages}
+            <div
+              className={
+                "services-information-container " +
+                (imageLayout && state.active_tab === "Imágenes"
+                  ? "image-services"
+                  : "")
+              }
+            >
+              {state.saving ? (
+                <Loading />
+              ) : (
+                <>
+                  {state.active_tab === "Descripción" &&
+                    (state.product?.description_status !== "NS" ? (
+                      <InputGroup
+                        activeSection={state.active_tab}
+                        inputGroup={state.descriptions_inputs[0]}
+                        updatedDescriptions={state.updated_descriptions_inputs}
+                        articleId={state.product?.id_article}
+                        version={state.product.version}
+                        isShowbox={false}
+                        dinamicHeight={true}
+                        setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+                        updateApprovedInputs={handleOnUpdateApprovedInputs} // No se usa?
+                      />
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+
+                  {state.active_tab === "Ficha técnica" &&
+                    (state.product?.datasheet_status !== "NS" ? (
+                      <>
+                        {state.datasheets_inputs[0].data?.map(
+                          (dataGroup, index) => (
+                            <InputGroup
+                              index={index}
+                              key={index + "-" + state.active_retailer.retailer}
+                              articleId={state.product.id_article}
+                              version={state.version}
+                              activeSection={state.active_tab}
+                              inputGroup={dataGroup}
+                              dataInputs={state.datasheets_inputs[1] ?? []}
+                              activeRetailer={
+                                state.services.datasheets[
+                                  state.active_retailer.id_retailer
+                                ]
+                              }
+                              groupData={
+                                state.services.datasheets[
+                                  state.active_retailer.id_retailer
+                                ].data
+                              }
+                              updatedDatasheets={
+                                state.updated_datasheets_inputs
+                              }
+                              setUpdatedDatasheets={
+                                handleOnSetUpdatedDatasheets
+                              }
+                              isShowbox={true}
+                              setUpdatedBoxData={(e) => {
+                                setBoxData(e);
+                              }}
+                              updateApprovedInputs={
+                                handleOnUpdateApprovedInputs // No se usa?
+                              }
                             />
-                          )}
-                          <section
-                            className="container"
-                            style={{ position: "relative" }}
+                          ),
+                        )}
+                      </>
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+
+                  {state.active_tab === "Imágenes" &&
+                    (state.product?.images_status !== "NS" ? (
+                      <>
+                        {!imageLayout && (
+                          <GalleryHeader
+                            checkAll={state.all_image_checked} // Determina si el checkbox "Seleccionar todo" está marcado
+                            setCheckAll={handleOnSetCheckAll} // Toggler de true o false para el checkbox "Seleccionar todo"
+                            setSelectedImages={handleOnSetSelectedImages}
+                          />
+                        )}
+                        <section
+                          className="container"
+                          style={{ position: "relative" }}
+                        >
+                          <div
+                            {...getRootProps({
+                              className: `dropzone ${
+                                isDragActive ? "drag-active" : ""
+                              }`,
+                            })}
                           >
+                            <input {...getInputProps()} />
+                            {isDragActive && (
+                              <div className="drag-overlay">
+                                <p>Suelta las imágenes aquí</p>
+                              </div>
+                            )}
+                            <aside>{thumbs()}</aside>
+                          </div>
+                          {state.images_values?.values.length === 0 && (
                             <div
-                              {...getRootProps({
-                                className: `dropzone ${
-                                  isDragActive ? "drag-active" : ""
-                                }`,
-                              })}
+                              style={{
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                textAlign: "center",
+                                padding: "40px",
+                                width: "80%",
+                                maxWidth: "500px",
+                                fontFamily: "Arial, sans-serif",
+                              }}
                             >
-                              <input {...getInputProps()} />
-                              {isDragActive && (
-                                <div className="drag-overlay">
-                                  <p>Suelta las imágenes aquí</p>
-                                </div>
-                              )}
-                              <aside>{thumbs()}</aside>
-                            </div>
-                            {state.images_values?.values.length === 0 && (
-                              <div
+                              <p
                                 style={{
-                                  position: "absolute",
-                                  top: "50%",
-                                  left: "50%",
-                                  transform: "translate(-50%, -50%)",
-                                  textAlign: "center",
-                                  padding: "40px",
-                                  width: "80%",
-                                  maxWidth: "500px",
-                                  fontFamily: "Arial, sans-serif",
+                                  fontSize: "18px",
+                                  color: "#666",
+                                  marginBottom: "16px",
                                 }}
                               >
-                                <p
-                                  style={{
-                                    fontSize: "18px",
-                                    color: "#666",
-                                    marginBottom: "16px",
-                                  }}
-                                >
-                                  Este producto no tiene imágenes
-                                </p>
-                                <p
+                                Este producto no tiene imágenes
+                              </p>
+                              <p
+                                style={{
+                                  fontSize: "14px",
+                                  color: "#999",
+                                  marginBottom: "20px",
+                                }}
+                              >
+                                Arrastra las imágenes aquí o{" "}
+                                <span
+                                  onClick={open}
                                   style={{
-                                    fontSize: "14px",
-                                    color: "#999",
-                                    marginBottom: "20px",
+                                    color: "#007bff",
+                                    cursor: "pointer",
+                                    textDecoration: "underline",
                                   }}
                                 >
-                                  Arrastra las imágenes aquí o{" "}
-                                  <span
-                                    onClick={open}
-                                    style={{
-                                      color: "#007bff",
-                                      cursor: "pointer",
-                                      textDecoration: "underline",
-                                    }}
-                                  >
-                                    haz clic para abrir el explorador de
-                                    archivos
-                                  </span>
-                                </p>
-                              </div>
-                            )}
-                          </section>
-                        </>
-                      ) : (
-                        <ScreenHeader
-                          text={"No cuentas con este servicio"}
-                          headerType={"input-name-header"}
-                        />
-                      ))}
-                  </>
-                )}
-              </div>
+                                  haz clic para abrir el explorador de archivos
+                                </span>
+                              </p>
+                            </div>
+                          )}
+                        </section>
+                      </>
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+                </>
+              )}
             </div>
           </div>
         </div>
-      </Container>
-    </AiProductEditionProvider>
+      </div>
+    </Container>
   );
 };