@deuna/react-native-sdk 1.0.2 → 1.0.4

package/src/controllers/BaseWebViewController.ts

@@ -8,25 +8,24 @@ import {
   State,
   SubmitResult,
 } from '../types';
-import { submitError } from '../interfaces';
+import { submitError, WidgetConfig } from '../interfaces';
 import { Platform } from 'react-native';
 import { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
 
 export interface WebViewDelegate {
-  onOpenInNewTab?: (url: string) => void;
+  onOpenExternalUrl?: (url: string) => void;
   onCloseButtonPressed?: () => void;
-  onCloseSubWebView?: () => void;
   onFileDownload?: (url: string) => void;
-  onNewTabWindowClose?: () => void;
+  onCloseExternalUrl?: () => void;
 }
 
 export enum WebViewEventType {
   consoleLog = 'consoleLog',
   eventDispatch = 'eventDispatch',
   jsExecutor = 'jsExecutor',
-  openInNewTab = 'openInNewTab',
+  openExternalUrl = 'openExternalUrl',
   redirect = 'redirect',
-  newTabWindowClose = 'newTabWindowClose',
+  closeExternalUrl = 'closeExternalUrl',
 }
 
 const DOWNLOAD_FILE_REGEX =
@@ -34,7 +33,6 @@ const DOWNLOAD_FILE_REGEX =
 
 export abstract class BaseWebViewController {
   initialized = false;
-  redirectUrl: string | null = null;
   webView: WebView | null = null;
   url: string | null = null;
 
@@ -78,26 +76,22 @@ export abstract class BaseWebViewController {
    * @returns boolean indicating if the URL should be loaded in current WebView
    */
   onShouldStartLoadWithRequest = (request: ShouldStartLoadRequest) => {
-    // Prevent loading if it's the redirect URL
-    if (this.redirectUrl === request.url) {
-      return false;
+    if (this.url === request.url) {
+      return true;
     }
 
-    const isNewNavigation = request.isTopFrame && request.url !== this.url;
-    const isClickNavigation = request.navigationType === 'click';
-    const shouldHandleInNewTab = !this.urlMustBeLoadedInTheSameWebView(
+    const isAndroid = Platform.OS === 'android';
+
+    const isNewNavigation = isAndroid
+      ? request.url.startsWith('https://')
+      : request.navigationType === 'click';
+
+    const shouldOpenExternally = !this.urlMustBeLoadedInTheSameWebView(
       request.url
     );
 
-    // For iOS, check both click navigation and new navigation
-    // For Android, only check new navigation
-    const shouldOpenInNewTab =
-      Platform.OS === 'ios'
-        ? (isClickNavigation || isNewNavigation) && shouldHandleInNewTab
-        : isNewNavigation && shouldHandleInNewTab;
-
-    if (shouldOpenInNewTab) {
-      this.delegate?.onOpenInNewTab?.(request.url);
+    if (isNewNavigation && shouldOpenExternally) {
+      this.delegate?.onOpenExternalUrl?.(request.url);
       return false;
     }
 
@@ -118,6 +112,10 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   redirectUrl: string | null = null;
   closedAction: ClosedAction = 'systemAction';
 
+  constructor(readonly widgetConfig: WidgetConfig) {
+    super();
+  }
+
   abstract onEventDispatch: (event: Record<string, any>) => void;
 
   onLoad = () => {
@@ -154,18 +152,18 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
         this.jsExecutor.requests.get(requestId)?.(data);
         this.jsExecutor.requests.delete(requestId);
       },
-      [WebViewEventType.openInNewTab]: () => {
-        this.delegate?.onOpenInNewTab?.(eventData.url);
+      [WebViewEventType.openExternalUrl]: () => {
+        this.delegate?.onOpenExternalUrl?.(eventData.url);
       },
       [WebViewEventType.redirect]: () => {
         if (this.redirectUrl) {
           return;
         }
         this.redirectUrl = eventData.url;
-        this.delegate?.onOpenInNewTab?.(eventData.url);
+        this.delegate?.onOpenExternalUrl?.(eventData.url);
       },
-      [WebViewEventType.newTabWindowClose]: () => {
-        this.delegate?.onNewTabWindowClose?.();
+      [WebViewEventType.closeExternalUrl]: () => {
+        this.delegate?.onCloseExternalUrl?.();
       },
     };
 
@@ -175,6 +173,9 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   setXprops = () => {
     this.webView?.injectJavaScript(
       `
+    window.open = function(url, target, features) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.openExternalUrl}', url }));
+    };
     console.log = function(message) {
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
     };

package/src/controllers/ElementsWidgetController.ts

@@ -4,11 +4,14 @@ import {
   ElementsEventType,
 } from '../interfaces/events/elements';
 import { ElementsWidgetCallbacks } from '../types';
-import { ElementsErrorType } from '../interfaces';
+import { ElementsErrorType, WidgetConfig } from '../interfaces';
 
 export class ElementsWidgetController extends DeunaWebViewController {
-  constructor(readonly callbacks: ElementsWidgetCallbacks) {
-    super();
+  constructor(
+    readonly callbacks: ElementsWidgetCallbacks,
+    readonly widgetConfig: WidgetConfig
+  ) {
+    super(widgetConfig);
   }
 
   onError = (event: any) => {
@@ -34,12 +37,11 @@ export class ElementsWidgetController extends DeunaWebViewController {
         this.delegate?.onCloseButtonPressed?.();
       },
       [ElementsEventType.vaultSaveSuccess]: () => {
-        this.delegate?.onCloseSubWebView?.();
+        this.delegate?.onCloseExternalUrl?.();
         this.callbacks.onSuccess?.(event.data);
       },
       [ElementsEventType.vaultSaveError]: () => {
-        this.delegate?.onCloseSubWebView?.();
-        this.delegate?.onCloseSubWebView?.();
+        this.delegate?.onCloseExternalUrl?.();
         const { metadata } = elementsEvent.data;
 
         if (metadata) {

package/src/controllers/{OpenInNewTabController.ts → ExternalUrlController.ts}

@@ -5,7 +5,7 @@ import {
 } from './BaseWebViewController';
 import { DeunaLogs } from '../DeunaLogs';
 
-export class OpenInNewTabController extends BaseWebViewController {
+export class ExternalUrlController extends BaseWebViewController {
   constructor(readonly url: string) {
     super();
     this.url = url;
@@ -16,7 +16,7 @@ export class OpenInNewTabController extends BaseWebViewController {
   };
 
   onError = (event: any) => {
-    console.warn(event);
+    DeunaLogs.error(`EXTERNAL URL ERROR`, event);
   };
 
   urlMustBeLoadedInTheSameWebView = (url: string) => {
@@ -41,7 +41,7 @@ export class OpenInNewTabController extends BaseWebViewController {
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
       };
       window.close = function() {
-        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.newTabWindowClose}', data: '' }));
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.closeExternalUrl}', data: '' }));
       };
       (function() {
            setTimeout(function() {

package/src/controllers/PaymentWidgetController.ts

@@ -4,7 +4,11 @@ import {
   PaymentErrorType,
 } from '../interfaces';
 import { constants } from '../interfaces/constants';
-import { DownloadType, OnDownloadFile } from '../interfaces/types';
+import {
+  DownloadType,
+  OnDownloadFile,
+  WidgetConfig,
+} from '../interfaces/types';
 import {
   PaymentWidgetCallbacks,
   NextActionWidgetCallbacks,
@@ -18,8 +22,11 @@ type Callbacks = PaymentWidgetCallbacks &
   OnDownloadFile;
 
 export class PaymentWidgetController extends DeunaWebViewController {
-  constructor(readonly callbacks: Callbacks) {
-    super();
+  constructor(
+    readonly callbacks: Callbacks,
+    readonly widgetConfig: WidgetConfig
+  ) {
+    super(widgetConfig);
   }
 
   onError = (event: any) => {
@@ -78,11 +85,11 @@ export class PaymentWidgetController extends DeunaWebViewController {
         this.callbacks.onPaymentProcessing?.();
       },
       [CheckoutEventType.purchase]: () => {
-        this.delegate?.onCloseSubWebView?.();
+        this.delegate?.onCloseExternalUrl?.();
         this.callbacks.onSuccess?.(checkoutEvent.data.order);
       },
       [CheckoutEventType.purchaseError]: () => {
-        this.delegate?.onCloseSubWebView?.();
+        this.delegate?.onCloseExternalUrl?.();
         const { metadata } = checkoutEvent.data;
 
         if (metadata) {

package/src/helpers/Completer.ts

@@ -17,14 +17,14 @@ export class Completer<T> {
 
   complete(value: T): void {
     if (this.completed) return;
-    this.completed = true;
     this.resolvePromise?.(value);
+    this.completed = true;
   }
 
   completeError(error: any): void {
     if (this.completed) return;
-    this.completed = true;
     this.rejectPromise?.(error);
+    this.completed = true;
   }
 
   isCompleted(): boolean {

package/src/helpers/CrossPlatformBrowser.ts

@@ -0,0 +1,49 @@
+import * as WebBrowser from 'expo-web-browser';
+import { Platform } from 'react-native';
+
+/**
+ * This class is used to open a browser in a SafariView Controller (iOS) or
+ * a Chrome Custom Tab (Android) depending on the platform.
+ *
+ * It is used to open the external URLs in the DEUNA widget.
+ */
+class CrossPlatformBrowser {
+  private initialized = false;
+  /**
+   * Initialize the browser
+   */
+  async initialize() {
+    if (this.initialized) return;
+    await WebBrowser.maybeCompleteAuthSession();
+    this.initialized = true;
+  }
+
+  /**
+   * Open an URL in a SafariView Controller (iOS) or a Chrome Custom Tab (Android) depending on the platform
+   * @param url - The URL to open
+   */
+  async openBrowser(url: string) {
+    try {
+      await this.initialize();
+      await WebBrowser.openBrowserAsync(url);
+    } catch (error) {
+      console.error('Error opening browser', error);
+    }
+  }
+
+  /**
+   * Close the browser
+   */
+  async closeBrowser() {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    try {
+      await WebBrowser.dismissBrowser();
+    } catch (error) {
+      console.error('Error closing browser', error);
+    }
+  }
+}
+
+export const crossPlatformBrowser = new CrossPlatformBrowser();

package/src/helpers/ExternalUrlHelper.ts

@@ -0,0 +1,118 @@
+import { AppState, Platform } from 'react-native';
+import { WebViewDelegate } from '../controllers/BaseWebViewController';
+import { ExternalUrlController } from '../controllers/ExternalUrlController';
+import { Completer } from './Completer';
+import { crossPlatformBrowser } from './CrossPlatformBrowser';
+
+export enum ExternalUrlBrowser {
+  WEB_VIEW = 'web_view',
+  CROSS_PLATFORM_BROWSER = 'cross_platform_browser',
+}
+
+interface OpenUrlParams {
+  url: string;
+  browser: ExternalUrlBrowser;
+  delegate: WebViewDelegate;
+}
+
+interface ExternalUrlManager<T extends ExternalUrlBrowser> {
+  type: T;
+}
+
+export interface WebViewManager
+  extends ExternalUrlManager<ExternalUrlBrowser.WEB_VIEW> {
+  controller: ExternalUrlController;
+}
+
+export interface CrossPlatformBrowserManager
+  extends ExternalUrlManager<ExternalUrlBrowser.CROSS_PLATFORM_BROWSER> {
+  type: ExternalUrlBrowser.CROSS_PLATFORM_BROWSER;
+}
+
+export class ExternalUrlHelper {
+  private manager: ExternalUrlManager<ExternalUrlBrowser> | null = null;
+  private completer: Completer<void> | null = null;
+
+  constructor() {
+    this.startCloseChecker();
+  }
+
+  get externalUrlWebViewController() {
+    if (this.manager?.type === ExternalUrlBrowser.WEB_VIEW) {
+      return (this.manager as WebViewManager).controller;
+    }
+    return null;
+  }
+
+  /**
+   * Wait until the webview or cross platform browser is closed
+   */
+  async waitForClose() {
+    if (this.completer) {
+      await this.completer.wait;
+      this.completer = null;
+    }
+  }
+
+  /**
+   * Listen when the app is brought back to the foreground
+   */
+  private startCloseChecker() {
+    AppState.addEventListener('change', (state) => {
+      if (
+        state === 'active' &&
+        this.manager?.type === ExternalUrlBrowser.CROSS_PLATFORM_BROWSER
+      ) {
+        this.manager = null;
+        this.completeClose();
+      }
+    });
+  }
+
+  /**
+   * Opens the webview or cross platform browser
+   */
+  async openUrl(params: OpenUrlParams) {
+    const { url, browser, delegate } = params;
+
+    const mapper = {
+      [ExternalUrlBrowser.WEB_VIEW]: async () => {
+        const controller = new ExternalUrlController(url);
+        controller.delegate = delegate;
+        this.manager = {
+          type: ExternalUrlBrowser.WEB_VIEW,
+          controller,
+        } as WebViewManager;
+      },
+      [ExternalUrlBrowser.CROSS_PLATFORM_BROWSER]: async () => {
+        this.completer = new Completer<void>();
+        this.manager = {
+          type: ExternalUrlBrowser.CROSS_PLATFORM_BROWSER,
+        };
+
+        await crossPlatformBrowser.openBrowser(url);
+        if (Platform.OS === 'ios') {
+          this.completer?.complete();
+        }
+      },
+    };
+    await mapper[browser]();
+  }
+
+  /**
+   * Notify that the browser has been closed
+   */
+  private completeClose() {
+    this.completer?.complete();
+  }
+
+  /**
+   * Closes the web view
+   */
+  async closeWebView() {
+    if (this.manager?.type === ExternalUrlBrowser.WEB_VIEW) {
+      (this.manager as WebViewManager).controller?.dispose();
+      this.manager = null;
+    }
+  }
+}

package/src/helpers/SubmitStrategy.ts

@@ -0,0 +1,67 @@
+import { DeunaSDK } from '../DeunaSDK';
+import { Mode } from '../interfaces';
+import { Environment, SubmitResult } from '../types';
+
+export type SubmitStrategyType = 'PayPal';
+
+export type SubmitStrategyConfig = {
+  publicApiKey: string;
+  environment: Environment;
+  orderToken?: string;
+  userToken?: string;
+};
+
+export abstract class SubmitStrategy {
+  abstract deunaSDK: DeunaSDK;
+  constructor(
+    readonly config: SubmitStrategyConfig,
+    readonly type: SubmitStrategyType
+  ) {}
+
+  abstract submit(): Promise<SubmitResult>;
+}
+
+export class PayPalSubmitStrategy extends SubmitStrategy {
+  deunaSDK: DeunaSDK;
+
+  constructor(
+    config: SubmitStrategyConfig,
+    readonly onDestroyed: () => void
+  ) {
+    super(config, 'PayPal');
+    this.deunaSDK = new DeunaSDK(
+      {
+        publicApiKey: this.config.publicApiKey,
+        environment: this.config.environment,
+      },
+      this.onDestroyed
+    );
+  }
+
+  async submit(): Promise<SubmitResult> {
+    await this.deunaSDK.initPaymentWidget({
+      mode: Mode.MODAL,
+      orderToken: this.config.orderToken ?? '',
+      userToken: this.config.userToken,
+      paymentMethods: [
+        {
+          paymentMethod: 'wallet',
+          processors: ['paypal_wallet'],
+          configuration: {
+            express: true,
+            flowType: {
+              type: 'twoStep',
+            },
+          },
+        },
+      ],
+      callbacks: {},
+    });
+
+    return {
+      status: 'success',
+      code: 'success',
+      message: 'Payment submitted successfully',
+    };
+  }
+}

package/src/helpers/ViewManager.ts

@@ -0,0 +1,45 @@
+import {
+  BaseWebViewController,
+  WebViewDelegate,
+} from '../controllers/BaseWebViewController';
+import { Mode } from '../interfaces';
+
+export class WebViewManager<
+  T extends BaseWebViewController = BaseWebViewController,
+> {
+  private _controller: T | null = null;
+  private _mode: Mode | null = null;
+
+  initialize = (params: {
+    controller: T;
+    delegate: WebViewDelegate;
+    mode: Mode;
+  }): void => {
+    this._controller = params.controller;
+    this._controller.delegate = params.delegate;
+    this._mode = params.mode;
+  };
+
+  get isInitialized(): boolean {
+    return !!this._controller;
+  }
+
+  get mode(): Mode | null {
+    return this._mode;
+  }
+
+  get controller(): T {
+    if (!this._controller) {
+      throw new Error('WebView not initialized');
+    }
+    return this._controller;
+  }
+
+  /**
+   * Destroy the webview and the modal (if it exists)
+   */
+  destroy = () => {
+    this._controller?.dispose();
+    this._controller = null;
+  };
+}

package/src/helpers/{getController.ts → buildDeunaWidgetController.ts}

@@ -34,7 +34,7 @@ type ControllerProps =
   | VoucherWidgetControllerProps
   | ElementsWidgetControllerProps;
 
-export const getWidgetController = (
+export const buildDeunaWidgetController = (
   config: InitializeParams,
   props: ControllerProps & { mode?: Mode; sessionId?: string }
 ): DeunaWebViewController => {
@@ -47,7 +47,8 @@ export const getWidgetController = (
     userToken: rest.userToken ?? '',
     language: rest.language ?? 'es',
     sessionId: rest.sessionId ?? '',
-    mode: mode ?? Mode.MODAL,
+    mode: mode === Mode.MODAL ? 'modal' : 'target',
+    ...(rest.domain && { domain: rest.domain }),
   };
 
   const widgetMappers = {
@@ -69,10 +70,16 @@ export const getWidgetController = (
     voucher: () => baseParams,
   };
 
+  const widgetConfig = {
+    orderToken: rest.orderToken,
+    behavior: rest.behavior,
+    userToken: rest.userToken,
+  };
+
   const controller =
     widget === 'elements'
-      ? new ElementsWidgetController(callbacks)
-      : new PaymentWidgetController(callbacks);
+      ? new ElementsWidgetController(callbacks, widgetConfig)
+      : new PaymentWidgetController(callbacks, widgetConfig);
 
   controller.url = linkBuilders[widget](widgetMappers[widget]());
   controller.hidePayButton = rest.hidePayButton ?? false;

package/src/helpers/getSubmitStrategy.ts

@@ -0,0 +1,42 @@
+import { DeunaSDK } from '../DeunaSDK';
+import { TWO_STEP_FLOW } from '../interfaces/constants';
+import { PayPalSubmitStrategy, SubmitStrategy } from './SubmitStrategy';
+
+export const getSubmitStrategy = async (
+  deunaSDK: DeunaSDK
+): Promise<SubmitStrategy | null> => {
+  const selectedPaymentMethod = await deunaSDK.getSelectedPaymentMethod();
+  if (!selectedPaymentMethod) {
+    return null;
+  }
+
+  const { widgetConfig } = deunaSDK.deunaWidgetManager.controller;
+
+  const processorName = selectedPaymentMethod.processor_name as string;
+
+  const configFlowType = selectedPaymentMethod.configuration?.flowType?.type;
+  const behaviorFlowType =
+    widgetConfig.behavior?.paymentMethods?.flowType?.type;
+
+  const isTwoStepFlow =
+    configFlowType === TWO_STEP_FLOW ||
+    (!configFlowType && behaviorFlowType === TWO_STEP_FLOW);
+
+  if (isTwoStepFlow && processorName === 'paypal_wallet') {
+    return new PayPalSubmitStrategy(
+      {
+        publicApiKey: deunaSDK.config.publicApiKey,
+        environment: deunaSDK.config.environment ?? 'production',
+        orderToken: widgetConfig.orderToken,
+        userToken: widgetConfig.userToken,
+      },
+      () => {
+        if (deunaSDK.submitStrategy) {
+          deunaSDK.submitStrategy = null;
+          deunaSDK.notifyListeners();
+        }
+      }
+    );
+  }
+  return null;
+};

package/src/interfaces/constants.ts

@@ -4,5 +4,9 @@ export const constants = {
   voucherPdfDownloadUrl: 'voucherPdfDownloadUrl',
 };
 
+export const DEVICE_FINGERPRINT_URL =
+  'https://cdn.stg.deuna.io/mobile-sdks/get_fraud_id.html';
 
-export const DEVICE_FINGERPRINT_URL = 'https://cdn.stg.deuna.io/mobile-sdks/get_fraud_id.html';
+export const TWO_STEP_FLOW = 'twoStep';
+
+export const DOMAINS_MUST_BE_USE_CROSS_PLATFORM_BROWSER = ['mercadopago.com'];

package/src/interfaces/types.ts

@@ -1,3 +1,11 @@
+import { BehaviorWidget } from '../types';
+
+export interface WidgetConfig {
+  behavior?: BehaviorWidget;
+  orderToken?: string;
+  userToken?: string;
+}
+
 export enum Mode {
   MODAL = 'modal',
   EMBEDDED = 'embedded',

package/src/types/helpers/buildElementsLink.ts

@@ -1,9 +1,10 @@
 import { Environment } from "../base";
 import { hasKey } from "../utils/hasKey";
 import { getIntegrationType, UrlConfig } from "./urlConfig";
+import { PLATFORM_DEFAULT } from "./constants";
 
 const ELEMENTS_URLS: Record<Environment, string> = {
-  production: "https://elements.deuna.io",
+  production: "https://elements.deuna.com",
   sandbox: "https://elements.sandbox.deuna.io",
   staging: "https://elements.stg.deuna.io",
   develop: "https://elements.dev.deuna.io",
@@ -28,6 +29,7 @@ interface SearchParams {
   userToken?: string;
   showSavedCardsFlow?: string;
   showDefaultCardFlow?: string;
+  platform?: string;
 }
 
 /**
@@ -50,6 +52,7 @@ const buildSearchParams = (config: UrlConfig): URLSearchParams => {
   const searchParams: SearchParams = {
     publicApiKey: config.publicApiKey,
     orderToken: config.orderToken,
+    platform: config.platform || PLATFORM_DEFAULT,
     email: userInfo?.email || "",
     firstName: userInfo?.firstName || "",
     lastName: userInfo?.lastName || "",

package/src/types/helpers/buildPaymentLink.ts

@@ -10,6 +10,7 @@ import {
   getIntegrationType,
   UrlConfig,
 } from "./urlConfig";
+import { PLATFORM_DEFAULT } from "./constants";
 
 const urls: Record<Environment, string> = {
   production: "https://pay.deuna.io",
@@ -31,6 +32,7 @@ export const buildPaymentLink = (config: UrlConfig): string => {
     mode: "widget",
     int: getIntegrationType(config.mode),
     language: config.language,
+    platform: config.platform || PLATFORM_DEFAULT,
   });
 
   // config.

package/src/types/helpers/buildVoucherLink.ts

@@ -5,6 +5,7 @@
  */
 
 import { Environment } from "../base";
+import { PLATFORM_DEFAULT } from "./constants";
 import { getIntegrationType, UrlConfig } from "./urlConfig";
 
 const urls: Record<Environment, string> = {
@@ -28,6 +29,7 @@ export const buildVoucherLink = (config: UrlConfig): string => {
     int: getIntegrationType(config.mode),
     language: config.language,
     orderToken,
+    platform: config.platform || PLATFORM_DEFAULT,
   });
 
   const xpropsB64 = {