@deuna/react-native-sdk 1.0.3 → 1.0.6

package/src/components/DeunaWidget.tsx

@@ -3,10 +3,9 @@ import { useEffect, useRef, useState } from 'react';
 
 import { DeunaSDK } from '../DeunaSDK';
 import { DeunaWebView } from './DeunaWebView';
-import { NewTabWebView } from './NewTabWebView';
-import { DeunaWebViewController } from '../controllers/BaseWebViewController';
 import { Mode } from '../interfaces/types';
 import { DeviceFingerprintWebView } from './DeviceFingerprintWebView';
+import { ExternalUrlWebView } from './ExternalUrlWebView';
 
 interface DeunaWidgetProps {
   instance: DeunaSDK;
@@ -52,7 +51,9 @@ export const DeunaWidget = (props: DeunaWidgetProps) => {
 const DeunaWidgetContainer = (props: DeunaWidgetProps) => {
   const { instance } = props;
   const instanceRef = useRef(instance);
-  const [mode, setMode] = useState<Mode | null>(instance.mode);
+  const [isVisible, setIsVisible] = useState(
+    instanceRef.current.deunaWidgetManager.isInitialized
+  );
 
   useEffect(() => {
     instanceRef.current = instance;
@@ -62,74 +63,76 @@ const DeunaWidgetContainer = (props: DeunaWidgetProps) => {
   // has changed
   useEffect(() => {
     const listener = () => {
-      setMode(instanceRef.current.mode);
+      setIsVisible(instanceRef.current.deunaWidgetManager.isInitialized);
     };
 
     instanceRef.current.addListener(listener);
 
     return () => {
       instanceRef.current.removeListener(listener);
-      instanceRef.current.webViewController?.dispose();
+      if (instanceRef.current.deunaWidgetManager.isInitialized) {
+        instanceRef.current.deunaWidgetManager.controller?.dispose();
+      }
     };
   }, []);
 
-  const isModal = mode === Mode.MODAL;
-  const isEmbedded = mode === Mode.EMBEDDED;
-
   /**
    * This function is used to close the widget
    */
   const onClose = () => {
-    const controller = instanceRef.current
-      .webViewController as DeunaWebViewController;
+    const controller = instanceRef.current.deunaWidgetManager.controller;
     controller.closedAction = 'userAction';
     instanceRef.current.close();
   };
 
   // render the widget if mode is not null
+  const viewManager = instanceRef.current.deunaWidgetManager;
+  const controller = viewManager.isInitialized ? viewManager.controller : null;
+
+  const isModal = isVisible && viewManager.mode === Mode.MODAL;
+  const isEmbedded = isVisible && viewManager.mode === Mode.EMBEDDED;
+
   return (
     <>
-      <Modal
-        presentationStyle="pageSheet"
-        animationType="slide"
-        onRequestClose={onClose}
-        onDismiss={instanceRef.current.onModalDismissed}
-        visible={isModal}
-      >
-        {isModal && (
+      {isModal && (
+        <Modal
+          presentationStyle="pageSheet"
+          animationType="slide"
+          onRequestClose={onClose}
+        >
           <SafeAreaView style={styles.container}>
             <View style={styles.container}>
               <DeunaWebView
-                url={instanceRef.current.webViewController?.url ?? ''}
-                onWebView={instanceRef.current.webViewController?.setWebView}
-                onMessage={instanceRef.current.webViewController?.onMessage}
-                onLoad={instanceRef.current.webViewController?.onLoad}
-                onError={instanceRef.current.webViewController?.onError}
+                url={controller?.url ?? ''}
+                onWebView={controller?.setWebView}
+                onMessage={controller?.onMessage}
+                onLoad={controller?.onLoad}
+                onError={controller?.onError}
                 onShouldStartLoadWithRequest={
-                  instanceRef.current.webViewController
-                    ?.onShouldStartLoadWithRequest
+                  controller?.onShouldStartLoadWithRequest
                 }
               />
-              <NewTabWebView instance={instanceRef.current} />
+              <ExternalUrlWebView instance={instanceRef.current} />
             </View>
           </SafeAreaView>
-        )}
-      </Modal>
+        </Modal>
+      )}
 
-      {isEmbedded && <NewTabWebView instance={instanceRef.current} />}
+      {isEmbedded && <ExternalUrlWebView instance={instanceRef.current} />}
 
       {isEmbedded && (
         <DeunaWebView
-          url={instanceRef.current.webViewController?.url ?? ''}
-          onWebView={instanceRef.current.webViewController?.setWebView}
-          onMessage={instanceRef.current.webViewController?.onMessage}
-          onLoad={instanceRef.current.webViewController?.onLoad}
-          onError={instanceRef.current.webViewController?.onError}
+          url={controller?.url ?? ''}
+          onWebView={controller?.setWebView}
+          onMessage={controller?.onMessage}
+          onLoad={controller?.onLoad}
+          onError={controller?.onError}
           onShouldStartLoadWithRequest={
-            instanceRef.current.webViewController?.onShouldStartLoadWithRequest
+            controller?.onShouldStartLoadWithRequest
           }
         />
       )}
+
       <DeviceFingerprintWebView instance={instanceRef.current} />
     </>
   );

package/src/components/ExternalUrlWebView.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import { DeunaSDK } from '../DeunaSDK';
+import { Modal, SafeAreaView, StyleSheet } from 'react-native';
+import { DeunaWebView } from './DeunaWebView';
+
+interface ExternalUrlWebViewProps {
+  instance: DeunaSDK;
+}
+
+export const ExternalUrlWebView = (props: ExternalUrlWebViewProps) => {
+  const { instance } = props;
+  const instanceRef = useRef<DeunaSDK>(instance);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    instanceRef.current = instance;
+  }, [instance]);
+
+  // Listen when the DeunaSDK instance configuration
+  // has changed
+  useEffect(() => {
+    const ref = instanceRef.current;
+    const listener = () => {
+      const isVisible = !!ref.externalUrlHelper.externalUrlWebViewController;
+      setVisible(isVisible);
+    };
+
+    instanceRef.current.addListener(listener);
+
+    return () => {
+      ref.removeListener(listener);
+      ref.externalUrlHelper.externalUrlWebViewController?.dispose();
+    };
+  }, []);
+
+  const externalUrlWebViewController =
+    instanceRef.current.externalUrlHelper.externalUrlWebViewController;
+
+  return (
+    <>
+      {visible && (
+        <Modal
+          presentationStyle="pageSheet"
+          animationType="slide"
+          onRequestClose={instanceRef.current.onCloseExternalUrl}
+        >
+          <SafeAreaView style={styles.container}>
+            <DeunaWebView
+              url={externalUrlWebViewController?.url ?? ''}
+              onWebView={externalUrlWebViewController?.setWebView}
+              onMessage={externalUrlWebViewController?.onMessage}
+              onLoad={externalUrlWebViewController?.onLoad}
+              onError={externalUrlWebViewController?.onError}
+              onShouldStartLoadWithRequest={
+                externalUrlWebViewController?.onShouldStartLoadWithRequest
+              }
+            />
+          </SafeAreaView>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/controllers/BaseWebViewController.ts

@@ -11,30 +11,29 @@ import {
 import { submitError, WidgetConfig } from '../interfaces';
 import { Platform } from 'react-native';
 import { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
+import { InitFraudProvidersProps } from '../types/fraudProviders';
+import { DeunaSDK } from '../DeunaSDK';
 
 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 =
   /\.(pdf|doc|docx|xls|xlsx|zip|rar|txt|mp3|mp4|jpg|jpeg|png|gif)$/i;
 
 export abstract class BaseWebViewController {
-  initialized = false;
-  redirectUrl: string | null = null;
   webView: WebView | null = null;
   url: string | null = null;
 
@@ -78,26 +77,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,13 +113,51 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   redirectUrl: string | null = null;
   closedAction: ClosedAction = 'systemAction';
 
+  isWebViewInitialized = false;
+
+  fraudId = '';
+
   constructor(readonly widgetConfig: WidgetConfig) {
     super();
+    this.init();
+  }
+
+  private init() {
+    const { fraudCredentials, sdkInstance } = this.widgetConfig;
+    if (!sdkInstance || !fraudCredentials) {
+      return;
+    }
+
+    if (fraudCredentials) {
+      this.generateFraudId({ sdkInstance, fraudCredentials });
+    }
+  }
+
+  private async generateFraudId({
+    sdkInstance,
+    fraudCredentials,
+  }: {
+    sdkInstance: DeunaSDK;
+    fraudCredentials: Partial<InitFraudProvidersProps>;
+  }) {
+    try {
+      this.fraudId = await sdkInstance.getSessionId(fraudCredentials);
+      if (this.isWebViewInitialized) {
+        this.jsExecutor.execute(this.getFraudIdFnString());
+      }
+    } catch (e) {
+      console.log('❌ fraudId', e);
+    }
+  }
+
+  private getFraudIdFnString() {
+    return `window.getFraudId = function(){ return '${this.fraudId}';}`;
   }
 
   abstract onEventDispatch: (event: Record<string, any>) => void;
 
   onLoad = () => {
+    this.isWebViewInitialized = true;
     this.setXprops();
   };
 
@@ -158,18 +191,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?.();
       },
     };
 
@@ -180,7 +213,7 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
     this.webView?.injectJavaScript(
       `
     window.open = function(url, target, features) {
-      window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.openInNewTab}', url }));
+      window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.openExternalUrl}', url }));
     };
     console.log = function(message) {
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
@@ -205,7 +238,15 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
       onSubmit: function (fn) {
         window.submit = fn;
       },
-    }
+      getFraudId: function(){
+        if(typeof window.getFraudId === 'function'){
+          return window.getFraudId();
+        }
+        return "";
+      }
+    };
+
+    ${this.fraudId.length > 0 ? this.getFraudIdFnString() : ''}
      `
     );
   };

package/src/controllers/ElementsWidgetController.ts

@@ -37,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

@@ -85,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/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;
+  };
+}