contentoh-components-library 21.5.92 → 21.5.94

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,
@@ -149,14 +148,42 @@ const ProviderProductEditionView = ({
 
         const productNormalized = normalizeProduct(product);
 
+        console.log({ productNormalized });
+
         dispatch({
           type: "SET_PRODUCT",
           payload: productNormalized,
         });
-        dispatch({
-          type: "SET_ACTIVE_RETAILER",
-          payload: productNormalized.categoryRetailer[0],
-        });
+
+        if (
+          productNormalized.categoryRetailerInOrder.length > 0 &&
+          productNormalized.statusByRetailer
+        ) {
+          dispatch({
+            type: "SET_ACTIVE_RETAILER",
+            payload: productNormalized.categoryRetailerInOrder[0],
+          });
+          const firstRetailerStatus =
+            productNormalized.statusByRetailer[
+              productNormalized.categoryRetailerInOrder[0].id_retailer
+            ];
+          const initialTab = firstRetailerStatus.description
+            ? "Descripción"
+            : firstRetailerStatus.datasheet
+            ? "Ficha técnica"
+            : firstRetailerStatus.images
+            ? "Imágenes"
+            : "Imágenes";
+          dispatch({
+            type: "SET_ACTIVE_TAB",
+            payload: initialTab,
+          });
+        } else {
+          dispatch({
+            type: "SET_ACTIVE_RETAILER",
+            payload: productNormalized.categoryRetailer[0],
+          });
+        }
       } catch (error) {
         console.log("Error setting product data: ", error);
       }
@@ -200,7 +227,7 @@ const ProviderProductEditionView = ({
             id_category,
             version,
             token,
-            id_retailer
+            id_retailer,
           ),
           getPercentage({ data, headers }),
           getServicesData({
@@ -214,14 +241,14 @@ const ProviderProductEditionView = ({
         const percentages =
           JSON.parse(percentageRes?.[0]?.body)?.[0]?.relations ?? [];
 
-        const orderMap = services[2].inputsByRetailer
-          .flat()
-          .reduce((acc, item) => {
+        const orderMap =
+          services[2].inputsByRetailer ??
+          [].flat().reduce((acc, item) => {
             acc[item.id_image] = item.order;
             return acc;
           }, {});
 
-        const orderedValues = [...services[2].values].sort((a, b) => {
+        const orderedValues = [...(services[2].values ?? [])].sort((a, b) => {
           const orderA = orderMap[a.image_id] ?? Number.MAX_SAFE_INTEGER;
           const orderB = orderMap[b.image_id] ?? Number.MAX_SAFE_INTEGER;
 
@@ -247,7 +274,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) {
@@ -267,46 +294,51 @@ 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 retailerDatasheets =
-        state.services.datasheets[state.active_retailer.id_retailer];
-
-      const datasheetsActiveRetailer = {
-        ...retailerDatasheets,
-        data: Object.values(retailerDatasheets.data),
-      };
+        const datasheetsActiveRetailer = {
+          ...retailerDatasheets,
+          data: Object.values(retailerDatasheets.data),
+        };
 
-      const descriptionsActiveRetailer = state.services.descriptions.filter(
-        (item) => item.id === state.active_retailer.id_retailer
-      );
+        dispatch({
+          type: "SET_DATASHEETS_INPUTS",
+          payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
+        });
+      }
 
-      const filteredValues = state.services.images.values.filter((value) => {
-        return state.services.images.inputsByRetailer.some((retailerInput) =>
-          retailerInput.some(
-            (input) =>
-              input.id_retailer === state.active_retailer.id_retailer &&
-              input.id_image === value.image_id
-          )
+      if (state.services.descriptions) {
+        const descriptionsActiveRetailer = state.services.descriptions.filter(
+          (item) => item.id === state.active_retailer.id_retailer,
         );
-      });
 
-      dispatch({
-        type: "SET_DATASHEETS_INPUTS",
-        payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
-      });
+        dispatch({
+          type: "SET_DESCRIPTIONS_INPUTS",
+          payload: descriptionsActiveRetailer,
+        });
+      }
 
-      dispatch({
-        type: "SET_DESCRIPTIONS_INPUTS",
-        payload: descriptionsActiveRetailer,
-      });
+      if (state.services.images) {
+        const filteredValues = state.services.images.values.filter((value) => {
+          return state.services.images.inputsByRetailer.some((retailerInput) =>
+            retailerInput.some(
+              (input) =>
+                input.id_retailer === state.active_retailer.id_retailer &&
+                input.id_image === value.image_id,
+            ),
+          );
+        });
 
-      dispatch({
-        type: "SET_IMAGES_VALUES",
-        payload: {
-          ...state.services.images,
-          values: filteredValues,
-        },
-      });
+        dispatch({
+          type: "SET_IMAGES_VALUES",
+          payload: {
+            ...state.services.images,
+            values: filteredValues,
+          },
+        });
+      }
     };
 
     updateInputsActiveRetailer();
@@ -340,23 +372,13 @@ const ProviderProductEditionView = ({
     // No retailer
     const hasNoOrder = !state.product.id_order && !state.product.orderId;
 
-    console.log({
-      originTab,
-      currentStatus,
-      hasNoOrder
-    })
-
-    const condition =
-      (
-        originTab === "RequestWithoutContentoh" && (
-          ["R", "CA"].includes(currentStatus) || (currentStatus === "RCA" && hasNoOrder)
-        )
-      ) ||
-      (
-        ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA"
-      )
-
-    return condition;
+    return (
+      (originTab === "RequestWithoutContentoh" &&
+        (["R", "CA"].includes(currentStatus) ||
+          (currentStatus === "RCA" && hasNoOrder))) ||
+      (["RequestWithContentoh", "Contentoh"].includes(originTab) &&
+        currentStatus === "AA")
+    );
   };
 
   const canShowSaveButton = (version_status) => {
@@ -388,7 +410,7 @@ const ProviderProductEditionView = ({
       name: e?.name,
       required: e?.required,
       active: state.images_values?.values?.some(
-        (value) => value?.image_id === e?.id
+        (value) => value?.image_id === e?.id,
       ),
     }));
     const imageType = state.images_values?.imageType?.map((e) => ({
@@ -399,7 +421,7 @@ const ProviderProductEditionView = ({
       (e) => ({
         value: e?.id,
         name: e?.name,
-      })
+      }),
     );
 
     return state.images_values?.values?.map((image, index) => (
@@ -640,7 +662,6 @@ const ProviderProductEditionView = ({
       state.product[sectionStatusKey] || state.product?.version_status;
 
     let data = { articleId, orderId, concept, evalStatus };
-
     const retailerId = state.active_retailer?.id_retailer;
 
     try {
@@ -655,15 +676,13 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          }
+          },
         );
 
         const newStatuses = JSON.parse(res.data.body);
         const serviceStatus =
           newStatuses.newServiceStatus[articleId][`${concept}Status`];
 
-        console.log({product: state.product, newStatuses, serviceStatus, servicesData: state.services_data});
-
         // Actualizar el producto con los nuevos estados
         const updatedProduct = {
           ...state.product,
@@ -671,17 +690,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
-        }));
-
-        // console.log({ updatedProduct });
+        console.log({ updatedProduct });
 
         dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
 
@@ -910,7 +924,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          })
+          }),
         );
       });
 
@@ -955,7 +969,7 @@ const ProviderProductEditionView = ({
           ArticleId: updatedProduct.id_article,
           idCategory: updatedProduct.id_category,
           product: updatedProduct,
-        })
+        }),
       );
 
       // Mostrar modal de éxito
@@ -1021,422 +1035,418 @@ 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>
   );
 };
 
 export const ProviderProductEdition = (props) => {
   return (
     <ProviderProductEditionProvider>
-        <ProviderProductEditionView {...props} />
+      <ProviderProductEditionView {...props} />
     </ProviderProductEditionProvider>
   );
 };