01Por dónde se entra, que ya existe
mas.tsx · create-sheet.tsx · create-items.ts (MF-03)Las puertas ya están cableadas desde MF-03 y apuntan a placeholders «Muy pronto» con owner="MF-12". Esta mega-fase no las toca, solo reemplaza lo que hay detrás. Catálogo y Sedes Mogos están en Más › Accesos. Calcular costo está en Crear › Otros, igual que en la web móvil. Tutoriales no tiene puerta: la web la quitó de Más (2026-08-09) y del menú de ayuda (2026-08-13, 26bf55375) porque no hay tutoriales publicados, y el test de Más de la app ya exige que no esté.
Cuenta
Accesos
Preferencias
Otras entradas: la notificación NEW_CATALOG trae actionUrl: /catalog/{id}, y web-route-map.ts suma /catalog/[id] → detalle para cuando MF-10 cablee los deep links. «Solicitar cotización» y «Hacer envío» de la calculadora llevan a MF-08 y MF-05, que ya existen.
02La calculadora, con el precio siempre a la vista
components/landing/calculator.tsx · box-input-row.tsx · reception-location-combobox.tsx · shipping-price.ts/calculator es la misma <Calculator/> que usan la app web y la landing, con el mismo motor (@mogos/shared shipping-price.ts + shipping-regions.ts) y los mismos tramos (GET /shipping-pricing?corridorCode=). Por eso da el mismo número al centavo. No hay botón «Calcular»: el resultado se recalcula solo. En la web, las dos cards van lado a lado. En el teléfono el formulario va en una columna y la tarifa vive en una barra fija con el mogos-day-band que abre la card de la web. «Ver detalle» sube la card completa en una hoja.
La barra es la cabeza de la card
Tiene el mismo degradado celeste → lima y la misma cifra en display que el hero de «Estimación del envío», más una línea con método y destino. Se actualiza en vivo: cada cambio que da un resultado válido hace entrar el número nuevo desde abajo, en 260 ms.
El formulario, campo a campo
Ruta:
CorridorTabscon bandera y el pie de unidades. Lugar de recepción: 24 estados, con Distrito Capital por defecto. Tipo de envío: tabs con subrayado de marca, Aéreo por defecto. Por caja: el modo (Dimensiones o Kg/Lb/CBM/Ft³ según la ruta y el modo), ancho, largo, alto, peso y número de cajas (1–10), conUnitBadgedel color del corredor. Los valores al entrar son los de la web: 50×60×40, 25 kg, 2 cajas.Tres columnas, no una
En móvil la web pone los cinco campos en una sola columna. Aquí van ancho, largo y alto en fila, y peso, cajas y la papelera debajo, así se ve la caja entera sin scroll. En 110 px no cabe «Ingresa el ancho», así que el placeholder pasa a
0. El label y elaccessibilityLabelya dicen qué va en cada campo.Teclado numérico y sin validar
keyboardType="decimal-pad"con coma o punto según el idioma, normalizado antes del motor. Como en la web, no hay mensajes de error: si una entrada es inválida o incompleta, la barra muestra «Completa los campos del formulario para ver tu estimación».Eventos quote_* portados
quote_started {entry_point}al montar. Desde Crear vacalculator; desde un deep link con?ref=se usa ese valor.quote_form_started_fillingse dispara en el primer toque,quote_form_completeden los CTA yquote_form_abandonedal desmontar o cuando la app pasa a segundo plano (elpagehidede la web). Todo va con laplatformde MF-00.
Esta es una estimación referencial. Para obtener una cotización oficial, haz clic en el botón de "Solicitar cotización".
Solicita cotización si necesitas ayuda buscando productos. Haz envío si ya los tienes y quieres coordinar el traslado.
Esta es una estimación referencial. Para obtener una cotización oficial, haz clic en el botón de "Solicitar cotización".
Solicita cotización si necesitas ayuda buscando productos. Haz envío si ya los tienes y quieres coordinar el traslado.
Cargando: el skeleton reemplaza la cifra y el botón. Error: «No se pudieron cargar las tarifas.» + Reintentar. En la web, Reintentar recarga la página; aquí hace refetch.
Cuentas de las maquetas (tramos del seed, factor VOLUMETRIC_KG_PER_M3 ≈ 199.136): (a) 2 × 50×60×40 = 0.24 m³ → 47.8 kg volumétricos; se cobran los 50 kg reales × $12 = $600.00. (b) 3 × 60×50×40 = 0.36 m³ → 71.7 kg volumétricos contra 24 kg reales; 71.69 × $14 = $1,003.65. (c) Marítimo, 1.5 CBM en el tramo 0.6–1.99 de occidente × $1,010 = $1,515.00. La web pinta ${totalPrice} en crudo («$600»); la app formatea el mismo número con en-US y 2 decimales.
03El catálogo: rieles arriba, meses abajo
catalog/page.tsx · catalog-card.tsx · catalog/[id]/catalog-detail-content.tsxLa web tiene una sola página con cuatro bloques: el banner, Destacados (con el badge «Recomendados»), Catálogos recientes (últimos 30 días, máximo 6, en una card de marca) y Todos los catálogos, agrupados por mes del más nuevo al más viejo. No hay búsqueda, filtros ni categorías, porque el modelo no los tiene. Cada catálogo es un PDF o un enlace externo, con una miniatura y un tamaño opcional. El brief hablaba de archivos, galería y compartir, pero la web no tiene nada de eso, así que la app tampoco.
Electrónica de consumo · Shenzhen
Audífonos, cargadores, relojes inteligentes y accesorios de los proveedores mejor calificados de la temporada.
Hogar y cocina · Yiwu
Organizadores, utensilios y textiles con pedido mínimo bajo, listos para consolidar.
Los catálogos más recientes agregados en los últimos 30 días
Moda y calzado · Guangzhou
La colección otoño-invierno de las fábricas del distrito Baiyun, en el sitio del proveedor.
Electrónica de consumo · Shenzhen
Audífonos, cargadores, relojes inteligentes y accesorios de los proveedores mejor calificados de la temporada.
Los mismos bloques, con otra forma
En la web los bloques son grillas y en móvil caen a una columna. Destacados y Recientes repiten cards que también salen en Todos, así que una columna mostraría la misma card tres veces seguidas. Por eso aquí Destacados y Recientes son rieles horizontales de cards de 264 px, y Todos es un índice por mes de filas compactas (§ siguiente). Los datos, el orden y las reglas son los de la web.
La card, verbatim
Tiene la miniatura con el velo inferior, «Nuevo» (brand-500) si tiene 30 días o menos, las pastillas PDF/Link y el tamaño, el título y la descripción a 2 líneas, la fecha larga y «Ver detalles». Un cambio de forma: toda la card es tocable, no solo el botón, porque en la web el resto de la card no hace nada y en el teléfono es el área natural.
El badge ámbar
La web usa
bg-amber-500de Tailwind, fuera de los tokens. La app usawarning-500del producto, del mismo tono. Queda anotado como deuda de la web.El banner es un asset
CatalogBanner-1200w.webpviaja en el bundle conexpo-imagey el mismo encuadre (center 35%). En la maqueta, una composición del sistema ocupa su lugar para no meter fotos en la pieza.Una sola llamada
GET /catalogs/activees público, sin paginar y ordenado por fecha, constaleTimeestático. «Nuevo», Recientes y los meses se calculan en el cliente condate-fnsen el idioma del usuario. No hay eventos: la web no manda ninguno.
Los catálogos más recientes agregados en los últimos 30 días
Moda y calzado · Guangzhou
La colección otoño-invierno de las fábricas del distrito Baiyun, en el sitio del proveedor.
Electrónica de consumo · Shenzhen
Audífonos, cargadores, relojes inteligentes y accesorios de los proveedores mejor calificados de la temporada.
Electrónica de consumo · Shenzhen
15 de septiembre de 2026PDF · 12 MBHogar y cocina · Yiwu
9 de septiembre de 2026PDF · 8.4 MBModa y calzado · Guangzhou
2 de septiembre de 2026LinkRepuestos automotrices
21 de agosto de 2026PDF · 15 MBJuguetes · temporada navideña
12 de agosto de 2026PDF · 9.1 MBDescripción
Audífonos, cargadores, relojes inteligentes y accesorios de los proveedores mejor calificados de la temporada.
Descripción
La colección otoño-invierno de las fábricas del distrito Baiyun, en el sitio del proveedor.
«Descargar PDF» abre el PdfViewer nativo de MF-04: descarga el archivo, lo pinta y comparte con la hoja del sistema, donde se guarda en Archivos. Es lo que en la web hace window.open. «Ver catálogo externo» usa expo-web-browser. En el detalle, la descripción aparece una sola vez: la web la repite en el encabezado y en la card. Vacío: «No hay catálogos disponibles en este momento.» Error: «Error al cargar los catálogos. Por favor, intenta de nuevo.» + Reintentar (refetch, no recarga).
04Sedes Mogos: todo lo que tu proveedor necesita, a un toque de copiar
locations/page.tsx · location-card.tsx · locations-country-section.tsx · warehouse-type-filter.tsx · shipping-mark-qr-notice.tsxLa web muestra las direcciones a las que tu proveedor manda la carga: por cada sede, dirección, teléfono, receptor y tu Shipping Mark ya resuelta con tu nombre, cada uno con su botón de copiar, y un «Copiar toda la información» que arma el bloque completo para pegarlo en un chat. Arriba va el aviso de la marca con QR. El brief pedía abrir en Maps, WhatsApp y horarios. La web no tiene nada de eso (ni el modelo: no hay horarios ni WhatsApp), así que queda fuera. El DoD pasa a ser copiar la dirección y toda la información de una sede.
Cada orden genera su propia marca con un código QR que nuestro almacén escanea al recibir tus cajas. No tienes que armarla: se crea sola al confirmar la orden y solo la envías a tu proveedor para que la pegue en cada caja.
Ver ejemploChina
2 sedesAlmacén China Marítimo
ActivaMOGOS-MAR-CN Fabrizio Spiotta el código de tu envío China Maritime
El corredor manda
La página no tiene selector propio: lee el corredor global de MF-03 (el chip de la barra superior). Con un corredor elegido, la web muestra una lista plana. Aquí esa lista lleva igual el encabezado del país (bandera + «China» + «2 sedes»), porque en una pantalla de stack el chip del corredor no se ve y sin encabezado no sabrías por qué solo aparece China.
Filtro Marítimo / Aéreo
«Todos · Marítimo · Aéreo», filtrado en el cliente por
warehouseType, fijo bajo el encabezado al hacer scroll. Solo aparece si hay sedes. Va con losStatusChipsdel stack compartido (ley #28) en lugar de las pastillas propias de la web: es el mismo control que en envíos, fletes y cotizaciones.La card, fila a fila
Título (
displayNameo el nombre del almacén), «Activa» y el tipo. Luego Dirección, Teléfono (phoneCountry+ número; sin número, «Consultar con Mogos» y sin botón de copiar), Receptor y Shipping Mark en mono. Cada botón de copiar mide 36 px con 44 de toque, y al copiar cambia a ✓ verde durante 2 s, con hápticaselection.Tu marca, resuelta
resolveShippingMarkTemplatede@mogos/sharedcambia[NOMBRE DEL CLIENTE], teléfono y dirección por tu perfil.[CODIGO DEL CLIENTE]queda como «el código de tu envío», porque aquí no hay orden. Si falta el nombre, se usa el ejemplo ficticio con el badge «Ejemplo».El aviso QR va siempre
Se ve también mientras carga y con error, como en la web. Le cabe en 3 líneas y «Ver ejemplo» sube la etiqueta real (
ShippingMarkLabel) en una hoja (§ siguiente).
China
2 sedesAlmacén China Aéreo
ActivaMOGOS-AIR-CN Fabrizio Spiotta el código de tu envío China Air
Estados Unidos
2 sedesAlmacén Miami Aéreo
ActivaMOGOS-AIR-MIA Fabrizio Spiotta el código de tu envío Miami Air
Cada orden genera su propia marca con un código QR que nuestro almacén escanea al recibir tus cajas. No tienes que armarla: se crea sola al confirmar la orden y solo la envías a tu proveedor para que la pegue en cada caja.
Ver ejemploChina
2 sedesAlmacén China Marítimo
ActivaMOGOS-MAR-CN Fabrizio Spiotta el código de tu envío China Maritime
Cada orden genera su propia marca con un código QR que nuestro almacén escanea al recibir tus cajas. No tienes que armarla: se crea sola al confirmar la orden y solo la envías a tu proveedor para que la pegue en cada caja.
Ver ejemploChina
2 sedesAlmacén China Marítimo
ActivaMOGOS-MAR-CN Fabrizio Spiotta el código de tu envío China Maritime
3
El proveedor pega una etiqueta como esta en cada caja. La descargas o la compartes desde el detalle de tu envío.
Cada orden genera su propia marca con un código QR que nuestro almacén escanea al recibir tus cajas. No tienes que armarla: se crea sola al confirmar la orden y solo la envías a tu proveedor para que la pegue en cada caja.
Ver ejemploCada orden genera su propia marca con un código QR que nuestro almacén escanea al recibir tus cajas. No tienes que armarla: se crea sola al confirmar la orden y solo la envías a tu proveedor para que la pegue en cada caja.
Ver ejemplo«Copiar toda la información» copia el bloque de la web: Sede · Almacén · Dirección · Teléfono · Receptor + Shipping Mark. Usa expo-clipboard y el toast Sileo con la clave de la web, {{label}} copiado al portapapeles, que da «Dirección copiado» (concordancia rota en la web, anotada como deuda para arreglarla en las dos a la vez). Con «Todos», los grupos se ordenan por cantidad de sedes y cada encabezado queda fijo. Sin sedes: «No hay sedes disponibles» / «Las sedes de Mogos aparecerán aquí próximamente». GET shipping-locations?active=true&perPage=100[&corridorId] pide sesión. No hay eventos.
05Tutoriales, listos y sin puerta
tutorials/page.tsx · tutorials/[id]/tutorial-detail-content.tsx · video-player.tsx · landing/video-card.tsxFabrizio decidió diseñarlos y construirlos, pero sin entrada. La web los escondió de todos lados (el menú de ayuda en 26bf55375: «no hay tutoriales publicados todavía») y deja la ruta viva. La app hace lo mismo: /(app)/tutorials y [id] existen y se abren por deep link, pero no hay fila en Más ni menú de ayuda (ese menú llega en MF-13). El día que la web reponga la entrada, la app la repone con una línea. DECISIONS #12 queda corregida: «solo desde ayuda» pasa a «sin entrada, como la web».
Haz envíos sin complicaciones.
Tutoriales y guías rápidas para que entiendas todo sobre el proceso puerta a puerta, desde China hasta tu destino.
Cómo crear tu primer envío
Del proveedor a tu puerta: qué datos pedir, cómo cargar tus facturas y qué pasa después.
Qué es la consolidación y cuándo conviene
Junta compras de varios proveedores en una sola carga y paga un solo flete.
Academia, como la miga de la web
El título largo de la web («Haz envíos sin complicaciones.») no cabe en un StackHeader de 24 px. Por eso el encabezado dice Academia, que es el breadcrumb de la web, y el título largo pasa a un lead de marca con la descripción debajo.
Una columna, no un riel
La web pone las cards en un riel horizontal de 242 px. Sin el bloque de sesiones, el riel sería lo único en pantalla, así que aquí va una columna de cards a lo ancho con la miniatura en 16:9. La card es la de la web: miniatura, duración en la esquina, título a 2 líneas y descripción. No hay categoría ni progreso, porque el modelo no los tiene.
Fuera el calendario de sesiones 1:1
En la web está roto: el mes está fijo en mayo de 2025 y tocar un día no hace nada (
// TODO: Implement learning session booking). También salen «¿Aún tienes dudas?» y «¿Primera vez?», que solo tienen sentido con él.learning-sessionsno se porta.10 de golpe, sin borradores
La web pide
GET /tutorialssin parámetros: le llegan 10 (perPagepor defecto), incluidos los DRAFT. La app pidestatus=PUBLISHEDy pagina conInfiniteList*. Es una mejora con motivo y queda anotada como deuda de la web.
Cómo crear tu primer envío
Del proveedor a tu puerta: qué datos pedir, cómo cargar tus facturas y qué pasa después.
Más información
Antes de empezar
Ten a mano la factura comercial de tu proveedor y la lista de empaque. Si no la tienes, pídela antes de que despache.
- Elige la ruta y el tipo de envío.
- Carga tus facturas: Mogui las lee por ti.
- Revisa las cajas y confirma.
Qué es la consolidación y cuándo conviene
Junta compras de varios proveedores en una sola carga y paga un solo flete.
Más información
La consolidación agrupa en el almacén de origen las cajas de varios proveedores y las manda juntas.
Haz envíos sin complicaciones.
Tutoriales y guías rápidas para que entiendas todo sobre el proceso puerta a puerta, desde China hasta tu destino.
YouTube con react-native-youtube-iframe (mismo regex de 11 caracteres, rel=0, sin autoplay). Vimeo en un WebView con player.vimeo.com/video/{id}. .mp4/.webm/.ogg con expo-video y la miniatura como póster. El póster con el botón blanco es el de la web. Al tocar, el iframe pinta sus propios controles y pantalla completa. «Ver video en nueva pestaña» no existe en un teléfono, así que pasa a «Abrir el video en el navegador», con clave i18n nueva. El detalle pinta content con el MarkdownViewer que ya usa Mogui. No hay eventos.
06Lo que hay que escribir en Moti
Moti + Reanimated · escala de MF-01 · useReducedMotion| Pieza | Qué anima | Duración · easing | Reduced motion |
|---|---|---|---|
| Tarifa en la barra | la cifra nueva entra desde 8 px abajo con fundido; con debounce de 120 ms al teclear para que no parpadee | 260 ms · ease-out | swap directo |
| Hoja de estimación | sube desde la barra (la barra queda debajo del velo); cierra con swipe o tocando el velo | 420 / 260 ms | fundido 80 ms |
| Agregar / quitar caja | la caja nueva entra con fundido + 12 px; al quitarla se pliega | 260 ms · ease-in-out | aparece / desaparece |
| Cambio de ruta | el UnitBadge cambia de color y texto con fundido; toast Sileo «Los valores se limpiaron…» | 160 · 640 spring | toast directo |
| Rieles del catálogo | snap por card (snapToInterval 276) con la inercia del sistema | sistema | sin cambios |
| Copiar | el ícono pasa de copiar a ✓ con escala .8 → 1; vuelve a los 2 s; toast Sileo + háptica selection | 160 ms · spring | swap directo |
| Acordeón de país | el chevron gira 90°; el grupo se pliega con layout animation | 260 ms · ease-in-out | directo |
| Cards · filas | PressScale de MF-01 al tocar | 80 ms | sin escala |
No hay un momento orquestado: son herramientas y el movimiento solo confirma. La barra de la calculadora es lo único que se mueve seguido, y por eso lleva debounce: el número cambia cuando dejas de teclear, no con cada dígito.
07Lo cerrado y lo que decide Fabrizio
docs/specs/2026-09-23-mobile-herramientas.md · HOLD hasta OK- Cerrada · Fabrizio 2026-09-23
Tutoriales: se construyen, sin entrada
Lista, detalle y reproductor listos, en las rutas
/(app)/tutorialsy[id], que se abren solo por deep link. No hay fila en Más ni en ayuda, como en la web desde26bf55375. Fuera el calendario de sesiones 1:1, que en la web tiene el mes fijo y la reserva sin implementar. DECISIONS #12 se corrige. - Cerrada · Fabrizio 2026-09-23
Sedes: paridad, sin mapas
Ni «Abrir en Maps» ni WhatsApp ni horarios: la web no los tiene y el modelo tampoco. El DoD cambia a «copia la dirección y toda la información de una sede y pégala». Se quedan el filtro Marítimo/Aéreo, los grupos por país, copiar por campo, tu Shipping Mark resuelta y el aviso QR con ejemplo.
- Cerrada · Fabrizio 2026-09-23
Calculadora: barra fija + hoja
El formulario va en una columna y la tarifa en vivo en una barra fija con el band de marca. «Ver detalle» sube la card «Estimación del envío» completa (filas, nota volumétrica, disclaimer, CBM) con «Solicitar cotización» y «Hacer envío». Mismo motor, mismos tramos, mismo número al centavo.
- Cerrada · paridad
El catálogo es PDF o enlace, nada más
Sin galería, archivos múltiples ni compartir, porque el modelo tiene un solo
url. El PDF abre en elPdfViewerde MF-04, que ya comparte y guarda. El enlace externo abre enexpo-web-browser. Sin búsqueda ni categorías. - Cerrada · forma, con motivo
Rieles e índice en el catálogo
Destacados y Recientes van como rieles horizontales y Todos como índice por mes de filas compactas. En una columna, la misma card saldría hasta tres veces seguidas. La card entera es tocable.
- Cerrada · reuso
Lo que ya existe
StackHeader (MF-04),
StatusChipsyInfiniteList*(MF-06, ley #28),PdfViewer(MF-04), toasts Sileo,PressScaley hojas (MF-01), el corredor global ycorridorTheme(MF-03),MarkdownViewer(Mogui), yshipping-price.ts,shipping-regions.tsyresolveShippingMarkTemplatede@mogos/shared. Es nuevo:CatalogCard,LocationCard,ShippingMarkLabelnativo,VideoCardyVideoPlayer. - Corrección del brief
Lo que el inventario desmintió
No hay filtro por tipo de almacén en el sentido del brief (el que hay es Marítimo/Aéreo). No hay mapas, WhatsApp ni horarios. El catálogo no tiene archivos ni compartir. La calculadora no tiene CTA de registro: son «Solicitar cotización» y «Hacer envío». Tutoriales ya no está en la ayuda.
OTHER_CREATE_ITEMSsolo trae «Calcular costo» (el catálogo está en Más). - Deuda anotada
Lo que la web debe y la app no repite
El precio sin formato (
$600).bg-amber-500fuera de tokens. «{{label}} copiado» sin concordancia. Tutoriales sin filtro DRAFT y con 10 fijos. El calendario fijo en mayo de 2025. Los errores sin reintentar. La descripción del catálogo repetida. Las sugerencias de Mogui para el catálogo, que no corresponden («¿Cómo agrego productos a mi catálogo?»). El texto de discovery que aún nombra Tutoriales. - Testing
DoD en iPhone = Fabrizio
Calcular un envío aéreo y uno marítimo y comparar con la web al centavo. Abrir un catálogo PDF y uno externo. Ver las sedes de China y copiar toda la información de una. Abrir un tutorial por deep link y reproducirlo. C9 automática:
expo export --platform web+ visual-qa a 390×844 contra estas 25 maquetas (DECISIONS #4/#24). Los tramos se toman del seed deshipping-pricing-tiers.