contentoh-components-library 21.6.58 → 21.6.60

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

@@ -0,0 +1,178 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { Footer as PropagateFooter } from "../../organisms/PropagateChangesModal/styles";
+import { Footer as GroupFooter } from "../../organisms/VariantGroupModal/styles";
+import { Footer as LinkFooter } from "../../organisms/LinkVariantsModal/styles";
+import { Footer as UnlinkFooter } from "../../organisms/UnlinkVariantModal/styles";
+import {
+  StyledDialog as ChangeStatusDialog,
+  ScopeButtonGroup,
+  FooterActions as ChangeStatusFooter,
+} from "../../organisms/ChangeStatusModal/styles";
+
+/*
+  Estilos de la edición de producto de Creators.
+
+  Parte de `RetailerProductEdition/styles.js` (mismo diseño) y agrega lo que la
+  hace responsiva. Tres tamaños, los mismos que usa MUI por omisión:
+
+    - celular  (< 600px): una columna, un solo scroll para toda la pantalla.
+    - tablet   (600-899px): igual, con más aire.
+    - desktop  (>= 900px): las dos columnas de siempre, cada una con su scroll.
+
+  Varios hijos (ImagePreviewer, ImageDataTable, InputGroup...) traen anchos fijos
+  y la regla es no tocarlos. Donde estorban se ajustan DESDE AQUÍ, con selectores
+  acotados a esta página. Las fases siguientes los van reemplazando por MUI y
+  estos ajustes desaparecen con ellos.
+*/
+
+export const BREAKPOINTS = {
+  tablet: 600,
+  desktop: 900,
+};
+
+const mobile = `@media (max-width: ${BREAKPOINTS.tablet - 1}px)`;
+const belowDesktop = `@media (max-width: ${BREAKPOINTS.desktop - 1}px)`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  box-sizing: border-box;
+
+  /* El scroll lo lleva SIEMPRE este contenedor, como en la vista original: en
+     la app la pantalla vive dentro de un layout de altura fija, y si se dejara
+     al documento, en celular no habría nada que desplazar. */
+  ${belowDesktop} {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* Sin overscroll-behavior: contain. Al llegar al final, el scroll tiene
+       que poder pasar al contenedor de afuera (el lienzo de Storybook, o la
+       página si la app la mete en algo que se desplaza); con contain se queda
+       atorado y no hay forma de ver lo que está debajo. */
+  }
+
+  .data-container {
+    display: flex;
+    flex: 0%;
+    gap: 16px;
+    min-width: 0;
+    height: calc(100% - ${({ headerTop }) => headerTop}px);
+    padding: 0 12px 12px;
+    box-sizing: border-box;
+
+    ${belowDesktop} {
+      flex-direction: column;
+      flex: none;
+      height: auto;
+    }
+
+    ${mobile} {
+      padding: 0 8px 12px;
+      gap: 12px;
+    }
+
+    .image-data-panel {
+      flex: 0 0 clamp(280px, 30%, 360px);
+      min-width: 0;
+
+      ${belowDesktop} {
+        flex: 0 0 auto;
+        width: 100%;
+      }
+
+      ${mobile} {
+        max-width: 480px;
+        align-self: center;
+      }
+    }
+
+    .product-information {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      ${belowDesktop} {
+        height: auto;
+      }
+
+      /* Cabecera, pestañas y grupos de inputs: que puedan encogerse en vez de
+         empujar la página hacia los lados. */
+      & > * {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      .services-information-container {
+        height: 100%;
+        min-width: 0;
+        overflow: auto;
+
+        ${belowDesktop} {
+          height: auto;
+          overflow: visible;
+        }
+      }
+
+    }
+  }
+
+  /* Modales de variantes (se reutilizan tal cual). Su pie pone el resumen y
+     tres botones en una sola fila; en celular no cabe y el botón principal se
+     sale del panel. Aquí el resumen va en su propia fila y los botones se
+     reparten el ancho. */
+  ${mobile} {
+    ${PropagateFooter}, ${GroupFooter}, ${LinkFooter}, ${UnlinkFooter} {
+      flex-wrap: wrap;
+      padding: 12px 16px;
+
+      .resumen,
+      .summary {
+        flex: 1 1 100%;
+      }
+
+      .actions {
+        flex: 1 1 100%;
+        margin-left: 0;
+      }
+
+      button {
+        flex: 1 1 0;
+        min-width: 0;
+        height: auto;
+        min-height: 38px;
+        padding: 6px 10px;
+      }
+    }
+  }
+`;
+
+/*
+  Ajustes en celular para `ChangeStatusModal`, que se reutiliza tal cual. Es un
+  Dialog de MUI y se pinta en un portal, fuera de `Container`, así que no lo
+  alcanzan los selectores de arriba: va como estilo global, que solo existe
+  mientras esta pantalla está montada. Los tres botones de «Alcance del cambio»
+  no caben en una fila y se encimaban.
+*/
+export const ReusedModalsStyles = createGlobalStyle`
+  ${mobile} {
+    ${ChangeStatusDialog} .MuiDialog-paper {
+      margin: 16px;
+      max-height: calc(100% - 32px);
+    }
+
+    ${ChangeStatusDialog} ${ScopeButtonGroup} {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    ${ChangeStatusDialog} ${ChangeStatusFooter} {
+      padding: 12px 16px;
+    }
+  }
+`;

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx

@@ -261,8 +261,12 @@ export const ProviderProductEditionProvider = ({ children }) => {
   const updateImages = async (token) => {
     // Imágenes/videos recién agregados a la galería (aún sin id en BD).
     const newImages = state.images_values?.values?.filter((e) => !e.id) || [];
-    // Salir solo si no hay nada que crear ni que actualizar.
-    if (state.updated_images_values.length === 0 && newImages.length === 0)
+    // Salir solo si no hay nada que crear, actualizar, ni atributos de imagen pendientes.
+    if (
+      state.updated_images_values.length === 0 &&
+      newImages.length === 0 &&
+      state.updated_attr_for_imgs.length === 0
+    )
       return;
     const updatedImages = state.updated_images_values;
 

package/src/index.js

@@ -115,6 +115,7 @@ export * from "./components/pages/OnboardPlan";
 export * from "./components/pages/RegistrationLoginSecondStep";
 export * from "./components/pages/RegistrationLoginThirdStep";
 export * from "./components/pages/RetailerProductEdition";
+export * from "./components/pages/CreatorsProductEdition";
 export * from "./components/pages/ProviderProductEdition";
 export * from "./components/pages/VerificationCodeResetPassword";
 export * from "./components/pages/MultipleEdition";