contentoh-components-library 21.6.27 → 21.6.29

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`,
@@ -738,6 +798,40 @@ const ProviderProductEditionView = ({
     Es un rodeo, y lo es porque el origen del dato está mal puesto. Arreglarlo de
     raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
   */
+  /*
+    Abre la edición múltiple con las variantes de la familia ya cargadas.
+
+    Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
+    listado al pulsar "editar varios"— y de cada producto solo usa id_article y
+    version. Se reproduce esa forma en vez de inventar otra vía de entrada.
+
+    Va SIN el producto padre a propósito, aunque estemos parados en su ficha: en
+    la edición múltiple no existe el diálogo de propagación, así que incluirlo
+    abriría un camino para cambiar el padre sin decidir si eso baja a los hijos
+    —justo la decisión que la ficha obliga a tomar—. Para editar el padre está su
+    propia pantalla.
+  */
+  const openMultipleEdition = () => {
+    const variantes = (family?.variants ?? []).map((variant) => ({
+      id_article: variant.articleId,
+      version: variant.version ?? 1,
+    }));
+
+    if (!variantes.length) return;
+
+    try {
+      sessionStorage.setItem(
+        "multipleEditionList",
+        JSON.stringify(
+          variantes.sort((a, b) => a.id_article - b.id_article)
+        )
+      );
+      window.location.assign("/products/multipleEdition");
+    } catch (error) {
+      console.error("openMultipleEdition: ", error);
+    }
+  };
+
   const openVariant = async (articleId) => {
     setLoadingVariant(articleId);
     try {
@@ -853,7 +947,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 +1026,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          },
+          }
         );
 
         const newStatuses = JSON.parse(res.data.body);
@@ -1180,10 +1277,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 +1296,7 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          }),
+          })
         );
       });
 
@@ -1244,7 +1344,7 @@ const ProviderProductEditionView = ({
           ArticleId: updatedProduct.id_article,
           idCategory: updatedProduct.id_category,
           product: updatedProduct,
-        }),
+        })
       );
 
       // Mostrar modal de éxito
@@ -1323,6 +1423,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 +1530,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 +1547,7 @@ const ProviderProductEditionView = ({
 
                   if (isMessageEmpty) {
                     const container = document.querySelector(
-                      ".container-customComponent",
+                      ".container-customComponent"
                     );
                     const existingAlert =
                       container.querySelector(".alert-error");
@@ -1601,7 +1713,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)}
                     >
@@ -1620,6 +1734,18 @@ const ProviderProductEditionView = ({
                   {family && !family.error && !family.variants?.length && (
                     <p className="loading">Este producto no tiene variantes.</p>
                   )}
+
+                  {/* Editarlas juntas evita abrir seis fichas para llenar lo
+                      mismo seis veces, que es el caso real de una familia. */}
+                  {family?.variants?.length > 1 && (
+                    <button
+                      type="button"
+                      className="editar-juntas"
+                      onClick={openMultipleEdition}
+                    >
+                      Editar las {family.variants.length} variantes juntas
+                    </button>
+                  )}
                 </div>
               )}
               <FullProductNameHeader
@@ -1754,7 +1880,7 @@ const ProviderProductEditionView = ({
                                     handleOnUpdateApprovedInputs
                                   }
                                 />
-                              ),
+                              )
                             )
                           ) : (
                             <ScreenHeader

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

@@ -253,5 +253,18 @@ export const Container = styled.div`
       font-size: 11px;
       color: ${GlobalColors.gray};
     }
+
+    .editar-juntas {
+      align-self: flex-start;
+      margin-top: 4px;
+      border: 1px solid ${PINK};
+      border-radius: 6px;
+      background: none;
+      padding: 6px 12px;
+      cursor: pointer;
+      font-family: ${FontFamily.Raleway_600};
+      font-size: 11px;
+      color: ${PINK};
+    }
   }
 `;

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";