# Integración en WebViews

## Descripción general

La integración de **menta tech** dentro de una aplicación móvil se realiza mediante la incorporación de **WebViews** que cargan las URLs provistas por menta tech.

Este documento describe los pasos necesarios para implementar la integración correctamente y garantizar una experiencia fluida para los usuarios.

{% callout type="info" title="Requisito previo" %}
Antes de integrar WebViews, asegurate de tener configurada la [Autenticación de usuarios](/es/guides/auth) para que los flujos de compra y venta funcionen correctamente dentro del WebView.
{% /callout %}

---

## Configuración del WebView

Las URLs de menta tech deben cargarse directamente en el WebView de la aplicación. Para optimizar la experiencia visual e integrarla con el entorno nativo, se debe agregar el parámetro `disableLayout=true` a todas las URLs de menta tech.

Este parámetro oculta el *header* y el *footer* de la interfaz web, de modo que el contenido se adapte perfectamente al *layout* de la aplicación nativa.

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

### Parámetro

| Parámetro | Valor | Descripción |
|-----------|-------|-------------|
| `disableLayout` | `true` | Oculta header y footer de menta tech para una integración nativa |

{% /column %}

{% column width="0.5" valign="center" %}

### Ejemplo de URL

```
https://example.menta.com/endpoint?disableLayout=true
```

{% callout type="warning" title="Importante" %}
Este parámetro debe incluirse en **todas** las URLs de menta tech que se carguen dentro de un WebView. De lo contrario, se mostrará la navegación web estándar que no corresponde a una experiencia nativa.
{% /callout %}

{% /column %}

{% /columns %}

---

## Comunicación entre la App y el WebView

Para mejorar la navegación y la experiencia de usuario, se debe habilitar la comunicación bidireccional entre la aplicación y menta tech mediante el uso de `postMessage`.

Esto permite enviar y recibir eventos entre ambos entornos, como acciones de navegación o actualizaciones de estado.

{% callout type="info" title="postMessage API" %}
La API de `postMessage` es el estándar de comunicación entre el WebView y la aplicación nativa. Permite enviar mensajes estructurados en formato JSON entre ambos contextos de forma segura.
{% /callout %}

{% conditionaltabs id="tabs-webview-communication" %}
{% tab label="Acción: Ir Atrás (GoBack)" %}

### Acción: Ir Atrás (GoBack)

Para implementar la funcionalidad de "volver al paso anterior", la aplicación debe enviar un mensaje `GoBack` hacia menta tech.

Al recibir este mensaje, menta tech retrocede un paso dentro del flujo correspondiente.

#### Mensaje desde la App hacia menta tech

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

```javascript
webViewRef.current.postMessage(
  JSON.stringify({
    type: "NAVIGATION",
    payload: "goBackStep"
  })
);
```

{% /column %}

{% column width="0.5" valign="center" %}

| Campo | Tipo | Descripción |
|-------|------|-------------|
| `type` | `string` | Tipo de mensaje. Debe ser `"NAVIGATION"` |
| `payload` | `string` | Acción a ejecutar. Debe ser `"goBackStep"` |

{% callout type="check" title="Resultado" %}
menta tech retrocede un paso en el flujo activo del WebView.
{% /callout %}

{% /column %}

{% /columns %}

#### Cuándo usarlo

- Cuando tu aplicación tiene un botón de "Atrás" nativo y querés que también controle la navegación dentro de menta tech.
- Para ofrecer una experiencia de navegación coherente entre la app y el contenido del WebView.

{% /tab %}

{% tab label="Comunicación de Step Activo" %}

### Comunicación de Step Activo

Durante todo el flujo, menta tech enviará mensajes hacia la aplicación indicando en qué paso se encuentra el usuario.

Esto permite actualizar el estado o la UI de la aplicación en tiempo real.

#### Mensaje desde menta tech hacia la App

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

```javascript
// menta tech envía este mensaje al WebView:
window.ReactNativeWebView.postMessage(
  JSON.stringify({ step })
);
```

{% /column %}

{% column width="0.5" valign="center" %}

| Campo | Tipo | Descripción |
|-------|------|-------------|
| `step` | `string` | Identificador del paso actual en el flujo de menta tech |

{% callout type="info" title="Uso recomendado" %}
Escuchá estos mensajes para actualizar la UI nativa (por ejemplo: indicadores de progreso, títulos de pantalla o lógica condicional).
{% /callout %}

{% /column %}

{% /columns %}

#### Cómo escuchar mensajes en React Native

```javascript
<WebView
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log("Step actual:", data.step);
    // Actualizar UI nativa según el step
  }}
/>
```

{% /tab %}

{% /conditionaltabs %}

---

## Finalización del Flujo

Cuando el flujo en menta tech finaliza correctamente, la URL cargada en el WebView incluirá el parámetro `success`.

La aplicación debe monitorear los cambios en la URL del WebView para detectar este evento y cerrar el componente, regresando al contexto principal de la aplicación.

### Detección de finalización

{% columns gap="2rem" align="center" %}

{% column width="0.5" valign="center" %}

#### URL de finalización

```
https://example.menta.com/success
```

Al detectar la URL con el parámetro `success`, la aplicación debe cerrar automáticamente el WebView y restablecer la vista principal.

{% /column %}

{% column width="0.5" valign="center" %}

#### Ejemplo en React Native

```javascript
<WebView
  onNavigationStateChange={(navState) => {
    if (navState.url.includes("/success")) {
      // Cerrar el WebView
      navigation.goBack();
      // Opcionalmente, refrescar datos
    }
  }}
/>
```

{% /column %}

{% /columns %}

{% callout type="warning" title="Importante" %}
La detección de la URL de `success` es la única forma de saber que el flujo finalizó correctamente. Asegurate de implementar esta verificación para evitar que el usuario quede atrapado en el WebView después de completar la operación.
{% /callout %}

---

## Resumen de la integración

{% table highlight-first=true %}
| Paso | Acción | Detalle |
|------|--------|---------|
| 1. Configurar WebView | Agregar `disableLayout=true` | Oculta header/footer de menta tech para una experiencia nativa |
| 2. Comunicación App → menta | Implementar `postMessage` con tipo `NAVIGATION` | Permite controlar la navegación interna (GoBack) |
| 3. Comunicación menta → App | Escuchar mensajes de `step` | Permite actualizar la UI nativa según el progreso del flujo |
| 4. Finalización | Detectar URL con `success` | Cerrar el WebView y volver al contexto principal de la app |
{% /table %}