contentoh-components-library 21.6.57 → 21.6.59

package/src/components/pages/CreatorsProductEdition/CreatorsProductEditionView.jsx

@@ -0,0 +1,777 @@
+/**
+ * Vista de la edición de producto de Creators.
+ *
+ * El JSX parte de `RetailerProductEdition/index.js` (commit ff06fba) y la
+ * lógica vive en `hooks/useCreatorsProductEdition.js`. Mismos props que
+ * RetailerProductEdition. Lo que cambia es el layout: responsivo en celular,
+ * tablet y desktop (ver `styles.js`).
+ */
+import {
+  Skeleton,
+  Box,
+  Stack,
+  Typography,
+  CircularProgress,
+  Button as MuiButton,
+} from "@mui/material";
+
+import { getConceptByTab } from "../RetailerProductEdition/utils";
+import { countUnsavedAssets } from "../../../global-files/digital-assets/assets.reducer";
+
+
+import { TRAYS } from "../../molecules/GalleryTrayTabs";
+import { HeaderTop } from "../../molecules/HeaderTop";
+
+import { InputGroup } from "../../organisms/InputGroup";
+import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
+import { VariantGroupModal } from "../../organisms/VariantGroupModal";
+import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
+import ChangeStatusModal from "../../organisms/ChangeStatusModal";
+
+import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
+
+import errorIcon from "../../../assets/images/genericModal/errorModal.svg";
+
+import { useCreatorsProductEdition } from "./hooks/useCreatorsProductEdition";
+import { allowedAccountsToViewChangeStatus } from "./constants";
+import { Container, ReusedModalsStyles } from "./styles";
+import { ProductHeader } from "./sections/ProductHeader";
+import { TabsBar } from "./sections/TabsBar";
+import { ImagePanel } from "./sections/ImagePanel";
+import { ImagesSection } from "./sections/ImagesSection";
+import { VariantsPanel } from "./sections/VariantsPanel";
+import { CommentBox } from "./sections/CommentBox";
+import { NoticeDialog } from "./sections/NoticeDialog";
+import { RejectDialog } from "./sections/RejectDialog";
+import { ImageGallery } from "./sections/ImageGallery";
+import { VersionDrawer } from "./sections/VersionDrawer";
+import { COLORS, FONTS } from "./sections/tokens";
+
+// Aviso cuando el producto no tiene contratado el servicio de la pestaña.
+const NoService = () => (
+  <Typography sx={{ fontFamily: FONTS.Raleway, fontSize: 14, color: COLORS.s5, py: 1 }}>
+    No cuentas con este servicio
+  </Typography>
+);
+
+export const CreatorsProductEditionView = ({
+  tabsSections,
+  productSelected = {},
+  user = {},
+  token,
+  location,
+  enableDigitalAssets = false,
+}) => {
+  const {
+    isRetailer,
+    digitalAssets,
+    currentTray,
+    assetsLoadedFor,
+    handleOnSetSelectedAssets,
+    handleOnSetAllAssetsChecked,
+    initializeProduct,
+    loadAuditableData,
+    loadData,
+    handleOnChangeCurrentImage,
+    handleOnShowModalGallery,
+    handleOnChangeActiveRetailer,
+    handleOnChangeActiveTab,
+    handleOnToggleImageLayout,
+    handleOnToggleObservation,
+    handleOnHideObservation,
+    isAuditorAssigned,
+    isAssignedAs,
+    isUserAssignedToService,
+    canShowSingleEvaluationButtons,
+    canShowBulkEvaluationButtons,
+    getStatusByCurrentServiceAndRetailer,
+    handleOnSaveAssets,
+    handleOnClickSaveImages,
+    loadFamily,
+    hijosDelProducto,
+    esHijoDeOtro,
+    puedeAgruparse,
+    handleOnUnlinked,
+    loadVariantGroup,
+    handleOnLeaveGroup,
+    openFamilyMember,
+    handleOnLinkedVariants,
+    handleOnRestoreInheritance,
+    cambiosDeFichaTecnica,
+    cambiosDeDescripciones,
+    handleOnClickSave,
+    handleOnSetUpdatedDescriptions,
+    handleOnSetUpdatedDatasheets,
+    handleOnDownloadAssets,
+    handleOnAskToDeleteAssets,
+    handleOnAskToDeleteImages,
+    handleOnApproveSingleService,
+    handleOnRejectSingleService,
+    sendSingleEvaluation,
+    handleOnApproveAllServices,
+    handleOnRejectAllServices,
+    sendBulkEvaluation,
+    handleOnChangeAssignations,
+    handleOnSetAssignation,
+    handleOnSetImages,
+    handleOnSetCheckAll,
+    handleOnSetSelectedImages,
+    handleOnSubmitComment,
+    handleOnSendEvaluationToFacilitator,
+    isEvaluationFinished,
+    handleOnChangeProductVersion,
+    handleRetryLoad,
+    showVersionSelector,
+    setShowVersionSelector,
+    auditableVersion,
+    setAuditableVersion,
+    headerTop,
+    setHeaderTop,
+    shotThd,
+    setShotThd,
+    observation,
+    setObservation,
+    showRejectModal,
+    setShowRejectModal,
+    isObservationVisible,
+    setObservationVisible,
+    imageLayout,
+    setImageLayout,
+    crossComment,
+    setCrossComment,
+    statusArray,
+    setStatusArray,
+    rejectAll,
+    setRejectAll,
+    showLinkVariants,
+    setShowLinkVariants,
+    family,
+    setFamily,
+    showFamily,
+    setShowFamily,
+    loadingVariant,
+    setLoadingVariant,
+    variantGroup,
+    setVariantGroup,
+    showGroup,
+    setShowGroup,
+    showGroupModal,
+    setShowGroupModal,
+    porDesvincular,
+    setPorDesvincular,
+    avisoFamilia,
+    setAvisoFamilia,
+    pendingPropagation,
+    setPendingPropagation,
+    preparandoPropagacion,
+    setPreparandoPropagacion,
+    auditServices,
+    setAuditServices,
+    auditDatasheets,
+    setAuditDatasheets,
+    auditDescriptions,
+    setAuditDescriptions,
+    showModal,
+    setShowModal,
+    compare,
+    setCompare,
+    openChangeStatusModal,
+    setOpenChangeStatusModal,
+    assetNotices,
+    setAssetNotices,
+    activeTray,
+    setActiveTray,
+    state,
+    dispatch,
+    saveDatasheets,
+    saveDescriptions,
+    updateImages,
+    deleteImages,
+    saveAssets,
+    registerUploadedAssets,
+    handleOnDownloadImages,
+    createComment,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open,
+  } = useCreatorsProductEdition({
+    tabsSections,
+    productSelected,
+    user,
+    token,
+    location,
+    enableDigitalAssets,
+  });
+
+  const ProductEditionSkeleton = () => {
+    return (
+      <Container headerTop={0}>
+        <Box
+          px={1.5}
+          py={1}
+          pb={0}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Skeleton variant="text" width="min(300px, 60%)" height={40} />
+          <Stack direction="row" spacing={2}>
+            <Skeleton variant="circular" width={32} height={32} />
+          </Stack>
+        </Box>
+
+        <div className="data-container">
+          <div
+            className="image-data-panel"
+            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
+          >
+            <Skeleton variant="rounded" width="100%" height={320} />
+
+            <Stack direction="row" spacing={2} justifyContent="center">
+              {[1, 2, 3, 4].map((item) => (
+                <Skeleton key={item} variant="rounded" width={60} height={80} />
+              ))}
+            </Stack>
+
+            <Box mt={2}>
+              {[1, 2, 3, 4].map((item) => (
+                <Box
+                  key={item}
+                  display="flex"
+                  justifyContent="space-between"
+                  py={1}
+                  borderBottom="1px solid #f0f0f0"
+                >
+                  <Skeleton variant="text" width="40%" />
+                  <Skeleton variant="text" width="20%" />
+                </Box>
+              ))}
+            </Box>
+          </div>
+
+          <div
+            className="product-information"
+            style={{
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: "14px",
+            }}
+          >
+            <Box>
+              <Skeleton variant="text" width="80%" height={50} />
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Skeleton variant="rounded" width="30%" height={24} />
+                <Skeleton variant="rounded" width="45%" height={24} />
+              </Stack>
+            </Box>
+
+            <Box display="flex" gap={4} pb={1}>
+              <Skeleton variant="text" width="28%" height={45} />
+              <Skeleton variant="text" width="28%" height={45} />
+              <Skeleton variant="text" width="28%" height={45} />
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap={4}>
+              {[1, 2, 3].map((item) => (
+                <Box key={item}>
+                  <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    mb={1}
+                  >
+                    <Skeleton variant="text" width="30%" height={24} />
+                    <Skeleton
+                      variant="rounded"
+                      width="min(175px, 35%)"
+                      height={25}
+                      sx={{ borderRadius: "7.5px" }}
+                    />
+                  </Box>
+                  <Skeleton variant="rounded" width="100%" height={70} />
+                  <Box display="flex" justifyContent="flex-end" mt={0.5}>
+                    <Skeleton variant="text" width={60} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+
+            <Box mt="auto" pt={4}>
+              <Skeleton variant="rounded" width="100%" height={120} />
+              <Box display="flex" justifyContent="flex-end" gap={2} mt={2}>
+                <Skeleton
+                  variant="rounded"
+                  width="min(180px, 45%)"
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+                <Skeleton
+                  variant="rounded"
+                  width="min(180px, 45%)"
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+              </Box>
+            </Box>
+          </div>
+        </div>
+      </Container>
+    );
+  };
+
+  // Si la carga falló y no tenemos servicios, mostramos un estado de error con
+  // opción de reintentar en vez de quedarnos colgados en el skeleton.
+  if (!state.loading && state.errors?.length > 0 && !state.services)
+    return (
+      <Container headerTop={0}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          gap={2}
+          sx={{ minHeight: "60vh", textAlign: "center", padding: "40px" }}
+        >
+          <img src={errorIcon} alt="error" width={64} height={64} />
+          <Typography sx={{ fontFamily: FONTS.Raleway, fontSize: 16, color: COLORS.s5 }}>
+            No pudimos cargar el producto
+          </Typography>
+          <Typography sx={{ color: "#666", maxWidth: 420, fontSize: 14 }}>
+            {state.errors[0] ||
+              "Ocurrió un error al cargar la información del producto."}
+          </Typography>
+          <MuiButton
+            variant="contained"
+            disableElevation
+            onClick={handleRetryLoad}
+            sx={{
+              textTransform: "none",
+              borderRadius: "20px",
+              px: 4,
+              bgcolor: COLORS.magenta_s2,
+              "&:hover": { bgcolor: COLORS.secondary_magenta },
+            }}
+          >
+            Reintentar
+          </MuiButton>
+        </Box>
+      </Container>
+    );
+
+  /*
+    `images_values` entra al guard junto a `services` y `product`.
+
+    React 17 no agrupa los dispatch que van después de un `await`: cada uno
+    re-renderiza al instante. En `loadData` el orden es SET_SERVICES →
+    …_INPUTS → SET_IMAGES_VALUES, así que había renders intermedios con
+    `services` ya puesto —el guard los dejaba pasar— y el resto todavía en null.
+    El cuerpo de abajo lee `datasheets_inputs[1]`, `descriptions_inputs[0]` y
+    `images_values.values` sin protección, y tumbaba la pantalla entera.
+
+    Se comprueba `images_values` y no cada uno: es el ÚLTIMO que `loadData`
+    despacha, así que si ya está, los anteriores también.
+  */
+  if (
+    state.loading ||
+    !state.services ||
+    !state.product ||
+    !state.images_values
+  )
+    return (
+      <>
+        <ProductEditionSkeleton />
+      </>
+    );
+
+  return (
+    <AiProductEditionProvider
+      isCreatorsEdition={true}
+      user={user}
+      token={token}
+      state={state}
+    >
+      <Container headerTop={headerTop}>
+        {pendingPropagation && (
+          <PropagateChangesModal
+            changedAttributes={pendingPropagation.cambios}
+            kind={pendingPropagation.kind ?? "datasheet"}
+            variants={
+              esHijoDeOtro
+                ? []
+                : (family?.variants ?? []).filter((v) => !v.isCurrent)
+            }
+            groupMembers={(variantGroup?.members ?? []).filter(
+              (m) => !m.isCurrent,
+            )}
+            groupCode={variantGroup?.group ?? null}
+            saving={state.saving}
+            onCancel={() => setPendingPropagation(null)}
+            onConfirm={(propagation) => {
+              const esDescripcion = pendingPropagation.kind === "description";
+              setPendingPropagation(null);
+
+              if (!propagation) {
+                if (esDescripcion) saveDescriptions(token);
+                else saveDatasheets(token);
+                return;
+              }
+
+              /*
+                El diálogo habla de «atributos» porque es el mismo componente
+                para las dos pestañas. Al guardar hay que ponerlo en la lista
+                que corresponde: el servidor recibe `attributes` o
+                `descriptions`, nunca una por la otra.
+              */
+              const { attributes, ...destinos } = propagation;
+
+              if (esDescripcion) {
+                saveDescriptions(token, { ...destinos, descriptions: attributes });
+              } else {
+                saveDatasheets(token, propagation);
+              }
+            }}
+          />
+        )}
+        {showLinkVariants && (
+          <LinkVariantsModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            activeRetailerId={state.active_retailer?.id_retailer}
+            token={token}
+            onClose={() => setShowLinkVariants(false)}
+            onLinked={handleOnLinkedVariants}
+          />
+        )}
+        {showGroupModal && (
+          <VariantGroupModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            currentGroup={variantGroup?.group ?? null}
+            token={token}
+            onClose={() => setShowGroupModal(false)}
+            onSaved={(result) => {
+              setVariantGroup(result);
+              setShowGroup(true);
+            }}
+          />
+        )}
+        {porDesvincular && (
+          <UnlinkVariantModal
+            {...porDesvincular}
+            token={token}
+            onClose={() => setPorDesvincular(null)}
+            onUnlinked={handleOnUnlinked}
+          />
+        )}
+        <RejectDialog
+          open={showRejectModal}
+          rejectAll={rejectAll}
+          onCancel={() => setShowRejectModal(false)}
+          onConfirm={async (message) => {
+            await createComment(message, token);
+            rejectAll ? sendBulkEvaluation("R") : sendSingleEvaluation("R");
+            setShowRejectModal(false);
+          }}
+        />
+        <NoticeDialog
+          modal={state.modal}
+          onClose={() =>
+            dispatch({
+              type: "SET_MODAL",
+              payload: { show: false, title: "", message: "", image: null },
+            })
+          }
+        />
+        {showModal && (
+          <ImageGallery
+            images={state.images_values}
+            initialIndex={state.current_image}
+            setShowModal={setShowModal}
+            approveRejectButtons={canShowSingleEvaluationButtons()}
+            sendToFacilitator={handleOnSendEvaluationToFacilitator}
+          />
+        )}
+        <VersionDrawer
+          open={showVersionSelector}
+          modalId={"version-selector"}
+          articleId={state.product.id_article}
+          setVersion={handleOnChangeProductVersion}
+          companyName={state.product.company}
+          currentVersion={state.product.version}
+          setShowVersionSelector={setShowVersionSelector}
+          jwt={token}
+        />
+        <HeaderTop
+          setHeaderTop={setHeaderTop}
+          auditableVersion={auditableVersion}
+          setCompare={setCompare}
+          isAuditor={[1, 6].includes(user.id_role)}
+          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">
+            <ImagePanel
+              /*
+                `images_values` puede ser null en pleno render: React 17 no
+                agrupa los dispatch que van después de un `await` y hay un render
+                con `services` puesto y las imágenes todavía no (ver el guard de
+                arriba). Por eso las interrogaciones.
+              */
+              imagesArray={state.images_values || []}
+              activeImage={state.images_values?.values?.[state.current_image] ?? {}}
+              currentIndex={state.current_image}
+              setActiveImage={handleOnChangeCurrentImage}
+              setShowModal={handleOnShowModalGallery}
+              // datos de la imagen
+              lists={state.images_values || []}
+              assignationsImages={state.collaborator_assignations["Imágenes"]}
+              imagesStatus={state.product?.images_status || "-"}
+              retailerSelected={state.active_retailer?.id_retailer}
+              isRetailer={isRetailer}
+              version={state.product.version}
+              shotThd={shotThd}
+              setShowVersionSelector={setShowVersionSelector}
+              setImages={handleOnChangeCurrentImage}
+              setAssignation={handleOnChangeAssignations}
+              onClickSave={handleOnClickSaveImages}
+              showSaveButton={isAuditorAssigned() || isUserAssignedToService()}
+            />
+          </div>
+
+          <div className="product-information">
+            <VariantsPanel
+              product={state.product}
+              esHijoDeOtro={esHijoDeOtro}
+              hijosDelProducto={hijosDelProducto}
+              family={family}
+              showFamily={showFamily}
+              setShowFamily={setShowFamily}
+              loadFamily={loadFamily}
+              loadingVariant={loadingVariant}
+              avisoFamilia={avisoFamilia}
+              openFamilyMember={openFamilyMember}
+              setPorDesvincular={setPorDesvincular}
+              setShowLinkVariants={setShowLinkVariants}
+              puedeAgruparse={puedeAgruparse}
+              variantGroup={variantGroup}
+              showGroup={showGroup}
+              setShowGroup={setShowGroup}
+              setShowGroupModal={setShowGroupModal}
+              handleOnLeaveGroup={handleOnLeaveGroup}
+            />
+
+            <ProductHeader
+              // states
+              headerData={state.product}
+              productObservation={observation}
+              percent={
+                state.active_percentage?.percentagesGeneral?.required ?? 0
+              }
+              activeRetailer={{
+                id: state.active_retailer?.id_retailer,
+                name: state.active_retailer?.retailer,
+                image: state.active_retailer?.image,
+              }}
+              servicesData={state.services_data ? state.services_data : null}
+              isObservationVisible={isObservationVisible}
+              // actions
+              setActiveRetailer={handleOnChangeActiveRetailer}
+              approve={handleOnApproveSingleService}
+              approveAll={handleOnApproveAllServices}
+              reject={handleOnRejectSingleService}
+              rejectAll={handleOnRejectAllServices}
+              toggleObservation={handleOnToggleObservation}
+              hideObservation={handleOnHideObservation}
+              // sendToFacilitator={handleOnSendEvaluationToFacilitator} // No se usa?
+              // validations
+              showApproveRejectAll={
+                canShowBulkEvaluationButtons() ||
+                isAuditorAssigned() ||
+                isUserAssignedToService()
+              }
+              showValidationButtons={
+                canShowSingleEvaluationButtons() &&
+                (isAuditorAssigned() || isUserAssignedToService())
+              }
+            />
+            <TabsBar
+              tabsSections={tabsSections}
+              imageLayout={imageLayout}
+              status={getStatusByCurrentServiceAndRetailer()}
+              activeTab={state.active_tab}
+              isRetailer={isRetailer}
+              assig={state.collaborator_assignations[state.active_tab]}
+              version={state.product.version}
+              updatedDescriptions={state.updated_descriptions_inputs}
+              updatedDatasheets={state.updated_datasheets_inputs}
+              updatedImages={state.updated_images_values}
+              images={state.services.images}
+              // setters
+              setActiveTab={handleOnChangeActiveTab}
+              setImageLayout={handleOnToggleImageLayout}
+              setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+              setUpdatedDatasheets={handleOnSetUpdatedDatasheets}
+              setAssignation={handleOnSetAssignation} // No se usa?
+              setImages={handleOnSetImages} // No se usa?
+              setShowVersionSelector={setShowVersionSelector}
+              // actions
+              // El botón actúa sobre la bandeja visible: en activos descargaba
+              // las imágenes del producto, que no es lo que el usuario pidió.
+              downloadImages={
+                currentTray === TRAYS.ASSETS
+                  ? handleOnDownloadAssets
+                  : handleOnDownloadImages
+              }
+              askToDeleteImages={handleOnAskToDeleteImages}
+              showSaveButton={isAuditorAssigned() || isUserAssignedToService()}
+              onClickSave={handleOnClickSave}
+              // validations
+              canAssign={![7, 8].includes(user.id_role)}
+            />
+            <div
+              className="services-information-container"
+              id="services-information-container"
+            >
+              {state.saving ? (
+                <Stack alignItems="center" justifyContent="center" sx={{ py: 6 }}>
+                  <CircularProgress size={32} sx={{ color: COLORS.magenta_s2 }} />
+                </Stack>
+              ) : (
+                <>
+                  {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}
+                        /* El parentesco es del producto, no del servicio: los
+                           dos endpoints lo devuelven igual. */
+                        variant={state.services?.datasheets?.variant}
+                        onRestoreInheritance={handleOnRestoreInheritance}
+                        articleId={state.product?.id_article}
+                        version={state.product.version}
+                        auditInputGroup={auditDescriptions[0]}
+                        setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+                        dinamicHeight={true}
+                        compare={compare}
+                      />
+                    ) : (
+                      <NoService />
+                    ))}
+                  {state.active_tab === "Ficha técnica" &&
+                    (state.product?.datasheet_status !== "NS" ? (
+                      <>
+                        {state.datasheets_inputs[0]?.data?.map(
+                          (dataGroup, index) => (
+                            <InputGroup
+                              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]}
+                              variant={state.services?.datasheets?.variant}
+                              onRestoreInheritance={handleOnRestoreInheritance}
+                              auditInputs={auditDatasheets[1]}
+                              updatedDatasheets={
+                                state.updated_datasheets_inputs
+                              }
+                              setUpdatedDatasheets={
+                                handleOnSetUpdatedDatasheets
+                              }
+                              compare={compare}
+                            />
+                          ),
+                        )}
+                      </>
+                    ) : (
+                      <NoService />
+                    ))}
+                  {state.active_tab === "Imágenes" &&
+                    (state.product?.images_status !== "NS" ? (
+                      <ImagesSection
+                        imagesValues={state.images_values}
+                        selectedImages={state.selected_images}
+                        imageLayout={imageLayout}
+                        enableDigitalAssets={enableDigitalAssets}
+                        currentTray={currentTray}
+                        setActiveTray={setActiveTray}
+                        digitalAssets={digitalAssets}
+                        unsavedAssets={countUnsavedAssets(state)}
+                        selectedAssets={state.selected_assets}
+                        setSelectedAssets={handleOnSetSelectedAssets}
+                        setAllAssetsChecked={handleOnSetAllAssetsChecked}
+                        canEdit={isAuditorAssigned() || isUserAssignedToService()}
+                        setCheckAll={handleOnSetCheckAll}
+                        setSelectedImages={handleOnSetSelectedImages}
+                        onChangeCurrentImage={handleOnChangeCurrentImage}
+                        onUpdateImage={(item) =>
+                          dispatch({ type: "UPDATE_IMAGE_VALUE", payload: item })
+                        }
+                        onSelectImage={(item) =>
+                          dispatch({ type: "SET_SELECTED_IMAGE", payload: item })
+                        }
+                        getRootProps={getRootProps}
+                        getInputProps={getInputProps}
+                        isDragActive={isDragActive}
+                        openFilePicker={open}
+                      />
+                    ) : (
+                      <NoService />
+                    ))}
+                </>
+              )}
+            </div>
+            {(isUserAssignedToService(state.active_tab) ||
+              isAuditorAssigned()) &&
+              state.product[`${getConceptByTab(state.active_tab)}_status`] !==
+                "NS" && (
+                <CommentBox
+                  comment={state.comment}
+                  crossComment={crossComment}
+                  createComment={createComment}
+                  token={token}
+                  dispatch={dispatch}
+                  showChangeStatus={allowedAccountsToViewChangeStatus.includes(user?.email)}
+                  onOpenChangeStatus={() => setOpenChangeStatusModal(true)}
+                  showSendEvaluation={[7, 8].includes(user.id_role)}
+                  // Solo para los roles 7 y 8, como en la vista original: para
+                  // el rol 6, `isEvaluationFinished` usa un `srv` que no existe
+                  // (defecto heredado) y tumbaría la pantalla.
+                  canSendEvaluation={
+                    [7, 8].includes(user.id_role) &&
+                    isEvaluationFinished(user.id_role, state.active_tab, statusArray) &&
+                    state.missing_required_fields[state.active_tab] === 0
+                  }
+                  onSendEvaluation={handleOnSendEvaluationToFacilitator}
+                />
+              )}
+          </div>
+        </div>
+      </Container>
+
+      <ReusedModalsStyles />
+      <ChangeStatusModal
+        state={state}
+        open={openChangeStatusModal}
+        onClose={() => {
+          setOpenChangeStatusModal(false);
+        }}
+        reloadData={loadData}
+        token={token}
+      />
+    </AiProductEditionProvider>
+  );
+};