contentoh-components-library 21.5.94 → 21.5.96

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

@@ -42,6 +42,7 @@ 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,
@@ -142,48 +143,36 @@ const ProviderProductEditionView = ({
   useEffect(() => {
     const setProductData = () => {
       try {
-        const product = JSON.parse(sessionStorage.getItem("productSelected"))
-          ? JSON.parse(sessionStorage.getItem("productSelected"))
-          : productSelected;
+        const product = productSelected
+          ? productSelected
+          : JSON.parse(sessionStorage.getItem("productSelected"));
 
         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],
-          });
-        }
+        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,
+        });
       } catch (error) {
         console.log("Error setting product data: ", error);
       }
@@ -227,7 +216,7 @@ const ProviderProductEditionView = ({
             id_category,
             version,
             token,
-            id_retailer,
+            id_retailer
           ),
           getPercentage({ data, headers }),
           getServicesData({
@@ -241,20 +230,43 @@ 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;
 
           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: {
@@ -274,7 +286,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) {
@@ -286,7 +298,16 @@ const ProviderProductEditionView = ({
     };
 
     fetchData();
-  }, [state.product, state.active_retailer, token]);
+  }, [
+    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
+  ]);
 
   // Actualizador de campos del ui para que coincidan con el retailer activo
   useEffect(() => {
@@ -294,15 +315,14 @@ 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],
@@ -349,7 +369,16 @@ const ProviderProductEditionView = ({
     if (!state.product?.statusByRetailer) return false;
 
     const currentService = getConceptByTab(state.active_tab);
-    const currentStatus = state.product[`${currentService}_status`];
+    // 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;
 
@@ -372,13 +401,17 @@ const ProviderProductEditionView = ({
     // No retailer
     const hasNoOrder = !state.product.id_order && !state.product.orderId;
 
-    return (
-      (originTab === "RequestWithoutContentoh" &&
-        (["R", "CA"].includes(currentStatus) ||
-          (currentStatus === "RCA" && hasNoOrder))) ||
-      (["RequestWithContentoh", "Contentoh"].includes(originTab) &&
-        currentStatus === "AA")
-    );
+    const condition =
+      (
+        originTab === "RequestWithoutContentoh" && (
+          ["R", "CA"].includes(currentStatus) || (currentStatus === "RCA" && hasNoOrder)
+        )
+      ) ||
+      (
+        ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA"
+      )
+
+    return condition;
   };
 
   const canShowSaveButton = (version_status) => {
@@ -399,6 +432,7 @@ const ProviderProductEditionView = ({
 
     const currentService = getConceptByTab(state.active_tab);
     const currentRetailer = state.active_retailer.id_retailer;
+
     const currentStatus =
       statusByRetailer[currentRetailer][currentService] || "ERR";
     return currentStatus;
@@ -410,7 +444,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) => ({
@@ -421,7 +455,7 @@ const ProviderProductEditionView = ({
       (e) => ({
         value: e?.id,
         name: e?.name,
-      }),
+      })
     );
 
     return state.images_values?.values?.map((image, index) => (
@@ -662,6 +696,7 @@ const ProviderProductEditionView = ({
       state.product[sectionStatusKey] || state.product?.version_status;
 
     let data = { articleId, orderId, concept, evalStatus };
+
     const retailerId = state.active_retailer?.id_retailer;
 
     try {
@@ -676,13 +711,15 @@ 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,
@@ -690,12 +727,19 @@ const ProviderProductEditionView = ({
             ...state.product.statusByRetailer,
             [retailerId]: {
               ...state.product.statusByRetailer[retailerId],
-              [concept]: serviceStatus,
+              [concept]: newStatuses?.newStatus ?? serviceStatus,
             },
           },
         };
 
-        console.log({ updatedProduct });
+        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 });
 
         dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
 
@@ -924,7 +968,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          }),
+          })
         );
       });
 
@@ -969,7 +1013,7 @@ const ProviderProductEditionView = ({
           ArticleId: updatedProduct.id_article,
           idCategory: updatedProduct.id_category,
           product: updatedProduct,
-        }),
+        })
       );
 
       // Mostrar modal de éxito
@@ -1035,411 +1079,427 @@ const ProviderProductEditionView = ({
   if (state.loading || !state.services || !state.product) return <Loading />;
 
   return (
-    <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"}
-              />
-            ),
-            state.modal.message && (
-              <ScreenHeader
-                key="3"
-                headerType={"retailer-name-header"}
-                text={state.modal.message}
+    <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}
                 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;
-                }
+            }
+            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",
+                  );
 
-                const isMessageEmpty = Array.from(elements).every((el) => {
-                  const body = el.innerHTML;
-                  return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
-                });
+                  if (!elements || elements.length === 0) {
+                    console.error("Elemento no encontrado");
+                    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);
+                  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;
                   }
-                  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);
+                  await createComment(fullMessage, token);
 
-                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,
-        }}
-      />
-      <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}
+                  rejectAll
+                    ? handleOnEvaluateAll("R")
+                    : handleOnSendEvaluation("R");
+                  setShowRejectModal(false);
+                }}
+              />,
+            ]}
           />
-          <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}
+        )}
+        <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}
             />
-            <FullTabsMenu
-              tabsSections={tabsSections}
-              status={getStatusByCurrentServiceAndRetailer()}
-              activeTab={state.active_tab}
-              user={user}
+            <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}
-              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}
+              version={state.product.version}
+              setImages={handleOnChangeCurrentImage}
+              onClickSave={handleOnClickSaveImages}
+              setAssignation={handleOnChangeAssignations} // No se usa?
             />
-            <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?
-                              }
+          </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}
                             />
-                          ),
-                        )}
-                      </>
-                    ) : (
-                      <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" : ""
-                              }`,
-                            })}
+                          )}
+                          <section
+                            className="container"
+                            style={{ position: "relative" }}
                           >
-                            <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
-                              style={{
-                                position: "absolute",
-                                top: "50%",
-                                left: "50%",
-                                transform: "translate(-50%, -50%)",
-                                textAlign: "center",
-                                padding: "40px",
-                                width: "80%",
-                                maxWidth: "500px",
-                                fontFamily: "Arial, sans-serif",
-                              }}
+                              {...getRootProps({
+                                className: `dropzone ${
+                                  isDragActive ? "drag-active" : ""
+                                }`,
+                              })}
                             >
-                              <p
-                                style={{
-                                  fontSize: "18px",
-                                  color: "#666",
-                                  marginBottom: "16px",
-                                }}
-                              >
-                                Este producto no tiene imágenes
-                              </p>
-                              <p
+                              <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
                                 style={{
-                                  fontSize: "14px",
-                                  color: "#999",
-                                  marginBottom: "20px",
+                                  position: "absolute",
+                                  top: "50%",
+                                  left: "50%",
+                                  transform: "translate(-50%, -50%)",
+                                  textAlign: "center",
+                                  padding: "40px",
+                                  width: "80%",
+                                  maxWidth: "500px",
+                                  fontFamily: "Arial, sans-serif",
                                 }}
                               >
-                                Arrastra las imágenes aquí o{" "}
-                                <span
-                                  onClick={open}
+                                <p
                                   style={{
-                                    color: "#007bff",
-                                    cursor: "pointer",
-                                    textDecoration: "underline",
+                                    fontSize: "18px",
+                                    color: "#666",
+                                    marginBottom: "16px",
                                   }}
                                 >
-                                  haz clic para abrir el explorador de archivos
-                                </span>
-                              </p>
-                            </div>
-                          )}
-                        </section>
-                      </>
-                    ) : (
-                      <ScreenHeader
-                        text={"No cuentas con este servicio"}
-                        headerType={"input-name-header"}
-                      />
-                    ))}
-                </>
-              )}
+                                  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={{
+                                      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>
             </div>
           </div>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </AiProductEditionProvider>
   );
 };