Responder a acciones de flow - Capacitor

Si estás desarrollando flows o paywalls con el Flow Builder o el Paywall Builder de Adapty, es fundamental configurar los botones correctamente:

1. Añade un botón en el builder y asígnale una acción existente o crea un ID de acción personalizado.
2. Escribe el código en tu app para gestionar cada acción que hayas asignado.

Esta guía explica cómo gestionar acciones personalizadas y acciones existentes en tu código.

Cerrar flows y paywalls

Para añadir un botón que cierre tu flow o paywall:

1. En el builder, añade un botón y asígnale la acción Close.
2. En el código de tu app, implementa un handler para la acción close que cierre el flow o paywall.

const view = await createFlowView(flow);

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

En Android, el botón Back del sistema y el gesto de retroceso activan un evento onAndroidSystemBack independiente. En el SDK v4, ya no cierra el flow por defecto. Devuelve true desde el handler si quieres que el botón Back cierre el flow:

const unsubscribe = await view.setEventHandlers({
  onAndroidSystemBack() {
    return true; // close the flow when the Back button is pressed
  },
});

Abrir URLs desde flows y paywalls

Para añadir un botón que abra un enlace desde tu flow o paywall (por ejemplo, Terms of use o Privacy policy):

1. En el builder, añade un botón, asígnale la acción Open URL e introduce la URL que quieres abrir.
2. Si es necesario, en el código de tu app, implementa un handler para la acción openUrl que abra la URL recibida a tu manera.

const unsubscribe = await view.setEventHandlers({
  onUrlPress(url) {
    // Open the URL your own way, e.g. with the Capacitor Browser plugin
    Browser.open({ url });
    return false; // keep the flow open
  },
});

Gestionar acciones personalizadas

Para añadir un botón que gestione cualquier otra acción:

1. En el builder, añade un botón, asígnale la acción Custom y dale un ID.
2. En el código de tu app, implementa un handler para el ID de acción que has creado.

Por ejemplo, si tienes otro conjunto de ofertas de suscripción o compras únicas, puedes añadir un botón que muestre otro flow o paywall:

const unsubscribe = await view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  },
});

Si estás creando paywalls con el Paywall Builder de Adapty, es fundamental configurar los botones correctamente:

1. Añade un botón en el Paywall Builder y asígnale una acción existente o crea un ID de acción personalizado.
2. Escribe código en tu app para gestionar cada acción que hayas asignado.

Esta guía muestra cómo gestionar acciones personalizadas y predefinidas en tu código.

Cerrar paywalls

Para añadir un botón que cierre tu paywall:

1. En el Paywall Builder, añade un botón y asígnale la acción Close.
2. En el código de tu app, implementa un manejador para la acción close que descarte el paywall.

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    console.log('User closed paywall');
    return true; // Allow the paywall to close
  }
});

Abrir URLs desde paywalls

Para añadir un botón que abra un enlace desde tu paywall (por ejemplo, Terms of use o Privacy policy):

1. En el Paywall Builder, añade un botón, asígnale la acción Open URL e introduce la URL que quieres abrir.
2. En el código de tu app, implementa un handler para la acción openUrl que abra la URL recibida en un navegador.

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; // Don't close the paywall
  },
});

Iniciar sesión en la aplicación

Para añadir un botón que permita a los usuarios iniciar sesión en tu aplicación:

1. En el paywall builder, añade un botón y asígnale la acción Login.
2. En el código de tu aplicación, implementa un manejador para la acción login que identifique a tu usuario.

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'login') {
      // Navigate to login screen
      console.log('User requested login');
    }
  }
});

Gestiona acciones personalizadas

Para añadir un botón que gestione cualquier otra acción:

1. En el Paywall Builder, añade un botón, asígnale la acción Custom y dale un ID.
2. En el código de tu app, implementa un manejador para el ID de acción que hayas creado.

Por ejemplo, si tienes otro conjunto de ofertas de suscripción o compras únicas, puedes añadir un botón que muestre otro paywall:

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  },
});