contentoh-components-library 21.6.27 → 21.6.28

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

@@ -9,7 +9,11 @@ import {
   useProviderProductEdition,
 } from "./context/provider-product-edition.context";
 import { normalizeProduct, getConceptByTab } from "./utils";
-import { getMinorStatus, getMinorStatusFromRetailerMap, STATUS_DICTIONARY } from "../../../global-files/statusDictionary";
+import {
+  getMinorStatus,
+  getMinorStatusFromRetailerMap,
+  STATUS_DICTIONARY,
+} from "../../../global-files/statusDictionary";
 
 import {
   getPercentage,
@@ -35,6 +39,7 @@ import { ImageDataTable } from "../../organisms/ImageDataTable";
 import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
 import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
@@ -79,6 +84,8 @@ const ProviderProductEditionView = ({
   const [family, setFamily] = useState(null);
   const [showFamily, setShowFamily] = useState(false);
   const [loadingVariant, setLoadingVariant] = useState(null);
+  const [pendingPropagation, setPendingPropagation] = useState(null);
+  const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [assig, setAssig] = useState({});
@@ -233,7 +240,7 @@ const ProviderProductEditionView = ({
             id_category,
             version,
             token,
-            id_retailer,
+            id_retailer
           ),
           getPercentage({ data, headers }),
           getServicesData({
@@ -245,11 +252,10 @@ const ProviderProductEditionView = ({
         ]);
 
         const percentageRaw = percentageRes?.[0];
-        const percentages = (
-          Array.isArray(percentageRaw)
+        const percentages =
+          (Array.isArray(percentageRaw)
             ? percentageRaw[0]?.relations
-            : JSON.parse(percentageRaw?.body ?? "null")?.[0]?.relations
-        ) ?? [];
+            : JSON.parse(percentageRaw?.body ?? "null")?.[0]?.relations) ?? [];
 
         const orderMap =
           services[2].inputsByRetailer ??
@@ -277,12 +283,16 @@ const ProviderProductEditionView = ({
 
             return acc;
           },
-          {},
+          {}
         );
 
         const getServiceMinorStatus = (serviceName) => {
-          const records = servicesDataRes.filter((s) => s.service === serviceName);
-          return records.length > 0 ? getMinorStatus(records.map((s) => s.status)) : undefined;
+          const records = servicesDataRes.filter(
+            (s) => s.service === serviceName
+          );
+          return records.length > 0
+            ? getMinorStatus(records.map((s) => s.status))
+            : undefined;
         };
 
         const imagesMinorStatus = getServiceMinorStatus("images");
@@ -295,9 +305,15 @@ const ProviderProductEditionView = ({
             ...state.product,
             statusByRetailer: updatedStatusByRetailer,
             status: getMinorStatusFromRetailerMap(updatedStatusByRetailer),
-            ...(imagesMinorStatus !== undefined && { images_status: imagesMinorStatus }),
-            ...(descriptionMinorStatus !== undefined && { description_status: descriptionMinorStatus }),
-            ...(datasheetMinorStatus !== undefined && { datasheet_status: datasheetMinorStatus }),
+            ...(imagesMinorStatus !== undefined && {
+              images_status: imagesMinorStatus,
+            }),
+            ...(descriptionMinorStatus !== undefined && {
+              description_status: descriptionMinorStatus,
+            }),
+            ...(datasheetMinorStatus !== undefined && {
+              datasheet_status: datasheetMinorStatus,
+            }),
           },
         });
 
@@ -320,7 +336,7 @@ const ProviderProductEditionView = ({
         const activePercentage =
           percentages.find(({ id_retailer: rId }) => rId === id_retailer) ||
           state.product.percentages?.find(
-            ({ id_retailer: rId }) => rId === id_retailer,
+            ({ id_retailer: rId }) => rId === id_retailer
           );
 
         dispatch({
@@ -364,7 +380,10 @@ const ProviderProductEditionView = ({
           };
           dispatch({
             type: "SET_DATASHEETS_INPUTS",
-            payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
+            payload: [
+              datasheetsActiveRetailer,
+              state.services.datasheets.inputs,
+            ],
           });
         } else {
           dispatch({ type: "SET_DATASHEETS_INPUTS", payload: [] });
@@ -373,7 +392,7 @@ const ProviderProductEditionView = ({
 
       if (state.services.descriptions) {
         const descriptionsActiveRetailer = state.services.descriptions.filter(
-          (item) => item.id === state.active_retailer.id_retailer,
+          (item) => item.id === state.active_retailer.id_retailer
         );
 
         dispatch({
@@ -388,8 +407,8 @@ const ProviderProductEditionView = ({
             retailerInput.some(
               (input) =>
                 input.id_retailer === state.active_retailer.id_retailer &&
-                input.id_image === value.image_id,
-            ),
+                input.id_image === value.image_id
+            )
           );
         });
 
@@ -419,7 +438,7 @@ const ProviderProductEditionView = ({
       const { status: currentStatus } = state.services_data.find(
         (service) =>
           service.service === currentService &&
-          service.id_retailer === currentRetailer,
+          service.id_retailer === currentRetailer
       );
 
       const originTab = origin[state.active_tab];
@@ -488,7 +507,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) => ({
@@ -499,7 +518,7 @@ const ProviderProductEditionView = ({
       (e) => ({
         value: e?.id,
         name: e?.name,
-      }),
+      })
     );
 
     return state.images_values?.values?.map((image, index) => (
@@ -658,15 +677,56 @@ const ProviderProductEditionView = ({
     });
   };
 
+  /*
+    Los atributos que se acaban de tocar, con el nombre que ve el usuario.
+
+    `updated_datasheets_inputs` trae { attributeId, value } y nada más, así que el
+    nombre se busca en los inputs de la cadena activa: un diálogo que preguntara
+    por "el atributo 1023" no serviría para decidir nada.
+  */
+  const cambiosDeFichaTecnica = () => {
+    const retailerId = state.active_retailer?.id_retailer;
+    const inputs = state.services?.datasheets?.inputs ?? {};
+
+    return (state.updated_datasheets_inputs ?? []).map((item) => {
+      const input = inputs[`${item.attributeId}_${retailerId}`];
+      return {
+        id: Number(item.attributeId),
+        name: input?.name ?? `Atributo ${item.attributeId}`,
+        value: item.value,
+      };
+    });
+  };
+
   const handleOnClickSave = () => {
-    if (state.saving) return;
+    // `preparandoPropagacion` cubre la ventana entre el clic y la apertura del
+    // diálogo: sin esto, dos clics seguidos lanzan dos consultas de familia.
+    if (state.saving || preparandoPropagacion) return;
     switch (state.active_tab) {
       case "Descripción":
         saveDescriptions(token);
         break;
-      case "Ficha técnica":
+      case "Ficha técnica": {
+        // Guardar un padre con variantes abre la decisión de propagar. Sin este
+        // paso el cambio se queda solo en el padre y las variantes se van
+        // separando de él sin que nadie lo note.
+        const esPadre = state.product?.variantsCount > 0;
+        const cambios = cambiosDeFichaTecnica();
+
+        if (esPadre && cambios.length > 0) {
+          // Se espera a tener la familia antes de abrir: si no, el diálogo
+          // aparece diciendo "0 variantes" hasta que llega la respuesta, que es
+          // justo lo contrario de lo que va a preguntar.
+          setPreparandoPropagacion(true);
+          loadFamily()
+            .then(() => setPendingPropagation({ cambios }))
+            .finally(() => setPreparandoPropagacion(false));
+          return;
+        }
+
         saveDatasheets(token);
         break;
+      }
       case "Imágenes":
         updateImages(token);
         break;
@@ -709,7 +769,7 @@ const ProviderProductEditionView = ({
     peso que paga todo el mundo por el caso de unos pocos.
   */
   const loadFamily = async () => {
-    if (family) return;
+    if (family) return family;
     try {
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/family`,
@@ -853,7 +913,10 @@ const ProviderProductEditionView = ({
     try {
       const res = await axios.post(
         `${process.env.REACT_APP_VARIANTS_ENDPOINT}/restore`,
-        { articleId: state.product.id_article, attributes: [Number(attributeId)] },
+        {
+          articleId: state.product.id_article,
+          attributes: [Number(attributeId)],
+        },
         { headers: { Authorization: token } }
       );
 
@@ -929,7 +992,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          },
+          }
         );
 
         const newStatuses = JSON.parse(res.data.body);
@@ -1180,10 +1243,13 @@ const ProviderProductEditionView = ({
       const isProvider = !user.is_retailer;
       state.services_data?.forEach((ret) => {
         const { service, id_retailer } = ret;
-        const currentEvalStatus = state.product.statusByRetailer[id_retailer]?.[service];
+        const currentEvalStatus =
+          state.product.statusByRetailer[id_retailer]?.[service];
 
-        if (isProvider && currentEvalStatus !== STATUS_DICTIONARY.AA.status) return;
-        if (!isProvider && currentEvalStatus !== STATUS_DICTIONARY.AP.status) return;
+        if (isProvider && currentEvalStatus !== STATUS_DICTIONARY.AA.status)
+          return;
+        if (!isProvider && currentEvalStatus !== STATUS_DICTIONARY.AP.status)
+          return;
 
         const data = {
           ...dataGeneral,
@@ -1196,7 +1262,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          }),
+          })
         );
       });
 
@@ -1244,7 +1310,7 @@ const ProviderProductEditionView = ({
           ArticleId: updatedProduct.id_article,
           idCategory: updatedProduct.id_category,
           product: updatedProduct,
-        }),
+        })
       );
 
       // Mostrar modal de éxito
@@ -1323,6 +1389,18 @@ const ProviderProductEditionView = ({
             jwt={token}
           />
         )}
+        {pendingPropagation && (
+          <PropagateChangesModal
+            changedAttributes={pendingPropagation.cambios}
+            variants={(family?.variants ?? []).filter((v) => !v.isCurrent)}
+            saving={state.saving}
+            onCancel={() => setPendingPropagation(null)}
+            onConfirm={(propagation) => {
+              setPendingPropagation(null);
+              saveDatasheets(token, propagation ?? undefined);
+            }}
+          />
+        )}
         {showLinkVariants && (
           <LinkVariantsModal
             articleId={state.product?.id_article}
@@ -1418,7 +1496,7 @@ const ProviderProductEditionView = ({
                 size={12}
                 onClick={async () => {
                   const elements = document.querySelectorAll(
-                    "#modal-message-box .ql-container .ql-editor > p",
+                    "#modal-message-box .ql-container .ql-editor > p"
                   );
 
                   if (!elements || elements.length === 0) {
@@ -1435,7 +1513,7 @@ const ProviderProductEditionView = ({
 
                   if (isMessageEmpty) {
                     const container = document.querySelector(
-                      ".container-customComponent",
+                      ".container-customComponent"
                     );
                     const existingAlert =
                       container.querySelector(".alert-error");
@@ -1601,7 +1679,9 @@ const ProviderProductEditionView = ({
                     <button
                       key={variant.articleId}
                       type="button"
-                      className={`family-row${variant.isCurrent ? " current" : ""}`}
+                      className={`family-row${
+                        variant.isCurrent ? " current" : ""
+                      }`}
                       disabled={variant.isCurrent || loadingVariant !== null}
                       onClick={() => openVariant(variant.articleId)}
                     >
@@ -1754,7 +1834,7 @@ const ProviderProductEditionView = ({
                                     handleOnUpdateApprovedInputs
                                   }
                                 />
-                              ),
+                              )
                             )
                           ) : (
                             <ScreenHeader

package/src/index.js

@@ -88,6 +88,7 @@ export * from "./components/organisms/ImagePreviewer/index";
 export * from "./components/organisms/ImagesGroup/index";
 export * from "./components/organisms/InputGroup/index";
 export * from "./components/organisms/LinkVariantsModal/index";
+export * from "./components/organisms/PropagateChangesModal/index";
 export * from "./components/organisms/ProductImageModal/index";
 export * from "./components/organisms/Chat/index";
 export * from "./components/organisms/Modal/index";