@deuna/react-native-sdk 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deuna/react-native-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React Native SDK",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -56,14 +56,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/darwinmorocho-deuna/deuna-sdk-react-native.git"
+    "url": "git+https://github.com/deuna-developers/deuna-sdk-react-native.git"
   },
-  "author": "DEUNA <dmorocho@deuna.com> (https://github.com/darwinmorocho-deuna)",
+  "author": "DEUNA (https://github.com/deuna-developers)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/darwinmorocho-deuna/deuna-sdk-react-native/issues"
+    "url": "https://github.com/deuna-developers/deuna-sdk-react-native/issues"
   },
-  "homepage": "https://github.com/darwinmorocho-deuna/deuna-sdk-react-native#readme",
+  "homepage": "https://github.com/deuna-developers/deuna-sdk-react-native#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/DeunaSDK.ts

@@ -29,9 +29,16 @@ import { Completer } from './helpers/Completer';
 import { ElementsWidgetController } from './controllers/ElementsWidgetController';
 import { DownloadType, Mode, OnDownloadFile } from './interfaces/types';
 import { Platform } from 'react-native';
+import { DeviceFingerprintController } from './controllers/DeviceFingerprintController';
+import { DEVICE_FINGERPRINT_URL } from './interfaces/constants';
+import { SubmitStrategy } from './helpers/SubmitStrategy';
+import { getSubmitStrategy } from './helpers/getSubmitStrategy';
 
 export class DeunaSDK extends BaseDeuna {
-  constructor(private readonly config: InitializeParams) {
+  constructor(
+    readonly config: InitializeParams,
+    readonly onDestroyed?: () => void
+  ) {
     super();
   }
 
@@ -47,11 +54,13 @@ export class DeunaSDK extends BaseDeuna {
   private listeners: Set<() => void> = new Set();
   webViewController: DeunaWebViewController | null = null;
   newTabWebViewController: BaseWebViewController | null = null;
+  deviceFingerprintController: DeviceFingerprintController | null = null;
+  submitStrategy: SubmitStrategy | null = null;
 
   modalDismissPromise: Completer<void> | null = null;
   newTabModalDismissPromise: Completer<void> | null = null;
 
-  private get safeWebViewController(): DeunaWebViewController {
+  get safeWebViewController(): DeunaWebViewController {
     if (!this.webViewController) {
       const errorMessage =
         'A variant of the init method must be called first. Please call initPaymentWidget, initVoucherWidget, or another init method before using this functionality.';
@@ -61,9 +70,28 @@ export class DeunaSDK extends BaseDeuna {
     return this.webViewController;
   }
 
-  getSessionId(): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
+  /**
+   * Generates a device fingerprint, creates a invisible webview to get the device fingerprint
+   * and returns the device fingerprint
+   * @returns The device fingerprint
+   */
+  getSessionId = async (params?: Record<string, any>): Promise<string> => {
+    this.deviceFingerprintController = new DeviceFingerprintController(
+      this.config.publicApiKey,
+      this.config.environment ?? 'production'
+    );
+    this.deviceFingerprintController.url = DEVICE_FINGERPRINT_URL;
+    this.notifyListeners();
+
+    const deviceFingerprint =
+      await this.deviceFingerprintController.generateDeviceFingerprint(
+        params ?? {}
+      );
+    this.deviceFingerprintController?.dispose();
+    this.deviceFingerprintController = null;
+    this.notifyListeners();
+    return deviceFingerprint ?? '';
+  };
 
   static initialize(config: InitializeParams): DeunaSDK {
     return new DeunaSDK(config);
@@ -166,7 +194,16 @@ export class DeunaSDK extends BaseDeuna {
   };
 
   submit = async (): Promise<SubmitResult> => {
-    return this.safeWebViewController.submit();
+    this.getStateFn = () => this.getWidgetState();
+    const submitStrategy = await getSubmitStrategy(this);
+
+    if (!submitStrategy) {
+      return this.safeWebViewController.submit();
+    }
+
+    this.submitStrategy = submitStrategy;
+    this.notifyListeners();
+    return this.submitStrategy.submit();
   };
 
   setCustomStyle = async (style: Partial<CustomStyles>): Promise<void> => {
@@ -203,11 +240,16 @@ export class DeunaSDK extends BaseDeuna {
     this.newTabWebViewController = null;
     this.webViewController = null;
     this.mode = null;
+
+    await this.submitStrategy?.deunaSDK.close();
+    this.submitStrategy = null;
+
     this.notifyListeners();
 
     // if the widget was shown in modal mode, wait for the modal to be dismissed
     await this.modalDismissPromise?.wait;
     this.modalDismissPromise = null;
+    this.onDestroyed?.();
   };
 
   onModalDismissed = () => {

package/src/components/DeunaWidget.tsx

@@ -6,12 +6,50 @@ import { DeunaWebView } from './DeunaWebView';
 import { NewTabWebView } from './NewTabWebView';
 import { DeunaWebViewController } from '../controllers/BaseWebViewController';
 import { Mode } from '../interfaces/types';
+import { DeviceFingerprintWebView } from './DeviceFingerprintWebView';
 
 interface DeunaWidgetProps {
   instance: DeunaSDK;
 }
 
 export const DeunaWidget = (props: DeunaWidgetProps) => {
+  const { instance } = props;
+  const instanceRef = useRef(instance);
+  const [showPaymentStrategy, setShowPaymentStrategy] = useState(false);
+
+  useEffect(() => {
+    instanceRef.current = instance;
+  }, [instance]);
+
+  useEffect(() => {
+    const listener = () => {
+      setShowPaymentStrategy(instanceRef.current.submitStrategy !== null);
+    };
+
+    instanceRef.current.addListener(listener);
+
+    return () => {
+      instanceRef.current.removeListener(listener);
+    };
+  }, []);
+
+  return (
+    <>
+      <DeunaWidgetContainer
+        key="MainDeunaWidget"
+        instance={instanceRef.current}
+      />
+      {showPaymentStrategy && (
+        <DeunaWidgetContainer
+          key="PaymentStrategy"
+          instance={instanceRef.current.submitStrategy!.deunaSDK}
+        />
+      )}
+    </>
+  );
+};
+
+const DeunaWidgetContainer = (props: DeunaWidgetProps) => {
   const { instance } = props;
   const instanceRef = useRef(instance);
   const [mode, setMode] = useState<Mode | null>(instance.mode);
@@ -92,6 +130,7 @@ export const DeunaWidget = (props: DeunaWidgetProps) => {
           }
         />
       )}
+      <DeviceFingerprintWebView instance={instanceRef.current} />
     </>
   );
 };

package/src/components/DeviceFingerprintWebView.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+import { DeunaSDK } from '../DeunaSDK';
+import { DeunaWebView } from './DeunaWebView';
+import { View } from 'react-native';
+
+interface DeviceFingerprintWebViewProps {
+  instance: DeunaSDK;
+}
+
+export const DeviceFingerprintWebView = (
+  props: DeviceFingerprintWebViewProps
+) => {
+  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.deviceFingerprintController;
+      setVisible(isVisible);
+    };
+
+    instanceRef.current.addListener(listener);
+
+    return () => {
+      ref.removeListener(listener);
+    };
+  }, []);
+
+  const deviceFingerprintController =
+    instanceRef.current.deviceFingerprintController;
+
+  return (
+    <>
+      {visible && (
+        <View>
+          <DeunaWebView
+            url={deviceFingerprintController?.url ?? ''}
+            onWebView={deviceFingerprintController?.setWebView}
+            onMessage={deviceFingerprintController?.onMessage}
+            onLoad={deviceFingerprintController?.onLoad}
+            onError={deviceFingerprintController?.onError}
+            onShouldStartLoadWithRequest={
+              deviceFingerprintController?.onShouldStartLoadWithRequest
+            }
+          />
+        </View>
+      )}
+    </>
+  );
+};

package/src/controllers/BaseWebViewController.ts

@@ -8,7 +8,7 @@ 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';
 
@@ -39,8 +39,13 @@ export abstract class BaseWebViewController {
   url: string | null = null;
 
   delegate: WebViewDelegate | null = null;
+  jsExecutor = new JsExecutor();
+
+  setWebView = (webView: WebView) => {
+    this.webView = webView;
+    this.jsExecutor.webView = webView;
+  };
 
-  abstract setWebView: (webView: WebView) => void;
   abstract onMessage: (event: WebViewMessageEvent) => void;
 
   /**
@@ -112,14 +117,12 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   hidePayButton = false;
   redirectUrl: string | null = null;
   closedAction: ClosedAction = 'systemAction';
-  jsExecutor = new JsExecutor();
 
-  abstract onEventDispatch: (event: Record<string, any>) => void;
+  constructor(readonly widgetConfig: WidgetConfig) {
+    super();
+  }
 
-  setWebView = (webView: WebView) => {
-    this.webView = webView;
-    this.jsExecutor.webView = webView;
-  };
+  abstract onEventDispatch: (event: Record<string, any>) => void;
 
   onLoad = () => {
     this.setXprops();
@@ -130,7 +133,6 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
       this.delegate?.onFileDownload?.(url);
     } else {
       this.redirectUrl = url;
-      this.delegate?.onOpenInNewTab?.(url);
     }
     return false;
   };
@@ -175,9 +177,14 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   };
 
   setXprops = () => {
-    // this.detectDownloadsAndRedirects(true);
     this.webView?.injectJavaScript(
       `
+    window.open = function(url, target, features) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.openInNewTab}', url }));
+    };
+    console.log = function(message) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
+    };
     window.xprops = {
       hidePayButton: ${this.hidePayButton},
       onEventDispatch: function (event) {
@@ -223,8 +230,8 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
    * @returns The order data | returns null if the order is not found or an error occurs
    */
   refetchOrder = async (): Promise<Json | null> => {
-    const result = await this.jsExecutor.execute(`
-      if(typeof window.deunaRefetchOrder !== 'function'){
+    const result = await this.jsExecutor
+      .execute(`      if(typeof window.deunaRefetchOrder !== 'function'){
         sendResult({order: null});
         return;
       }

package/src/controllers/DeviceFingerprintController.ts

@@ -0,0 +1,86 @@
+import { WebViewMessageEvent } from 'react-native-webview';
+import {
+  BaseWebViewController,
+  WebViewEventType,
+} from './BaseWebViewController';
+import { Completer } from '../helpers/Completer';
+import { Environment } from '../types';
+import { DeunaLogs } from '../DeunaLogs';
+
+export class DeviceFingerprintController extends BaseWebViewController {
+  constructor(
+    private readonly publicApiKey: string,
+    private readonly environment: Environment
+  ) {
+    super();
+  }
+
+  private completer = new Completer<boolean>();
+
+  onMessage = (event: WebViewMessageEvent) => {
+    const eventData = JSON.parse(event.nativeEvent.data);
+
+    const mapper = {
+      [WebViewEventType.consoleLog]: () => {
+        DeunaLogs.info(
+          `CONSOLE LOG`,
+          JSON.stringify(eventData.message, null, 2)
+        );
+      },
+      [WebViewEventType.jsExecutor]: () => {
+        const { data, requestId } = eventData as {
+          requestId: number;
+          data: Record<string, any> | null;
+        };
+        this.jsExecutor.requests.get(requestId)?.(data);
+        this.jsExecutor.requests.delete(requestId);
+      },
+    };
+    mapper[eventData.type as keyof typeof mapper]?.();
+  };
+
+  onLoad = () => {
+    this.webView?.injectJavaScript(`
+        console.log = function(message) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message:message }));
+        };
+    `);
+    this.completer.complete(true);
+  };
+
+  onError = (_: any) => {
+    this.completer.complete(false);
+  };
+
+  urlMustBeLoadedInTheSameWebView = (_: string) => true;
+
+  generateDeviceFingerprint = async (
+    params: Record<string, any>
+  ): Promise<string | null> => {
+    const isLoaded = await this.completer.wait;
+    if (!isLoaded) {
+      return null;
+    }
+
+    const data = await this.jsExecutor.execute(`
+        if (typeof window.generateFraudId !== 'function') {
+          console.log('❌ window.generateFraudId is not a function');
+          sendResult({fraudId: null});
+          return;
+        }
+
+        window.generateFraudId({
+          publicApiKey: "${this.publicApiKey}",
+          env: "${this.environment}", 
+          params: ${JSON.stringify(params)}
+        })
+        .then((fraudId) => {
+          sendResult({ fraudId: fraudId });
+        })
+        .catch((error) => {
+          sendResult({ fraudId: null });
+        });
+      `);
+    return data?.fraudId ?? null;
+  };
+}

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) => {

package/src/controllers/OpenInNewTabController.ts

@@ -1,4 +1,4 @@
-import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import { WebViewMessageEvent } from 'react-native-webview';
 import {
   BaseWebViewController,
   WebViewEventType,
@@ -11,10 +11,6 @@ export class OpenInNewTabController extends BaseWebViewController {
     this.url = url;
   }
 
-  setWebView = (webView: WebView) => {
-    this.webView = webView;
-  };
-
   onLoad = () => {
     this.setXprops();
   };
@@ -41,6 +37,9 @@ export class OpenInNewTabController extends BaseWebViewController {
   setXprops = () => {
     // Hide the print button on the Efecty page
     this.webView?.injectJavaScript(`
+      console.log = function(message) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
+      };
       window.close = function() {
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.newTabWindowClose}', data: '' }));
       };

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) => {

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/getController.ts

@@ -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.safeWebViewController;
+
+  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

@@ -3,3 +3,8 @@ export const constants = {
   metadata: 'metadata',
   voucherPdfDownloadUrl: 'voucherPdfDownloadUrl',
 };
+
+export const DEVICE_FINGERPRINT_URL =
+  'https://cdn.stg.deuna.io/mobile-sdks/get_fraud_id.html';
+
+export const TWO_STEP_FLOW = 'twoStep';

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',