@deuna/react-native-sdk 1.0.0 → 1.0.2

package/src/components/DeunaWebView.tsx

@@ -8,6 +8,7 @@ interface DeunaWebViewProps {
   onMessage?: (event: any) => void;
   onLoad?: () => void;
   onError?: (error: any) => void;
+  onShouldStartLoadWithRequest?: (request: any) => boolean;
 }
 
 export const DeunaWebView = (props: DeunaWebViewProps) => {
@@ -30,6 +31,7 @@ export const DeunaWebView = (props: DeunaWebViewProps) => {
         onError={props.onError}
         setSupportMultipleWindows={false}
         javaScriptCanOpenWindowsAutomatically={false}
+        onShouldStartLoadWithRequest={props.onShouldStartLoadWithRequest}
       />
     </View>
   );

package/src/components/DeunaWidget.tsx

@@ -6,6 +6,7 @@ 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;
@@ -67,6 +68,10 @@ export const DeunaWidget = (props: DeunaWidgetProps) => {
                 onMessage={instanceRef.current.webViewController?.onMessage}
                 onLoad={instanceRef.current.webViewController?.onLoad}
                 onError={instanceRef.current.webViewController?.onError}
+                onShouldStartLoadWithRequest={
+                  instanceRef.current.webViewController
+                    ?.onShouldStartLoadWithRequest
+                }
               />
               <NewTabWebView instance={instanceRef.current} />
             </View>
@@ -83,8 +88,12 @@ export const DeunaWidget = (props: DeunaWidgetProps) => {
           onMessage={instanceRef.current.webViewController?.onMessage}
           onLoad={instanceRef.current.webViewController?.onLoad}
           onError={instanceRef.current.webViewController?.onError}
+          onShouldStartLoadWithRequest={
+            instanceRef.current.webViewController?.onShouldStartLoadWithRequest
+          }
         />
       )}
+      <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/components/NewTabWebView.tsx

@@ -51,6 +51,9 @@ export const NewTabWebView = (props: NewTabWebViewProps) => {
             onMessage={newTabController?.onMessage}
             onLoad={newTabController?.onLoad}
             onError={newTabController?.onError}
+            onShouldStartLoadWithRequest={
+              newTabController?.onShouldStartLoadWithRequest
+            }
           />
         </SafeAreaView>
       )}

package/src/controllers/BaseWebViewController.ts

@@ -9,11 +9,15 @@ import {
   SubmitResult,
 } from '../types';
 import { submitError } from '../interfaces';
+import { Platform } from 'react-native';
+import { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
 
 export interface WebViewDelegate {
   onOpenInNewTab?: (url: string) => void;
   onCloseButtonPressed?: () => void;
   onCloseSubWebView?: () => void;
+  onFileDownload?: (url: string) => void;
+  onNewTabWindowClose?: () => void;
 }
 
 export enum WebViewEventType {
@@ -22,15 +26,26 @@ export enum WebViewEventType {
   jsExecutor = 'jsExecutor',
   openInNewTab = 'openInNewTab',
   redirect = 'redirect',
+  newTabWindowClose = 'newTabWindowClose',
 }
 
+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;
 
   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;
 
   /**
@@ -43,6 +58,52 @@ export abstract class BaseWebViewController {
    */
   abstract onError: (event: any) => void;
 
+  /**
+   * Called when the web view should load a URL in the same web view
+   */
+  abstract urlMustBeLoadedInTheSameWebView: (url: string) => boolean;
+
+  /**
+   * Checks if the URL is a download URL
+   * @param url - The URL to check
+   * @returns True if the URL is a download URL, false otherwise
+   */
+  isDownloadUrl = (url: string) => {
+    return DOWNLOAD_FILE_REGEX.test(url);
+  };
+
+  /**
+   * Determines if a URL should be loaded in the current WebView or opened in a new tab
+   * @param request The navigation request details
+   * @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;
+    }
+
+    const isNewNavigation = request.isTopFrame && request.url !== this.url;
+    const isClickNavigation = request.navigationType === 'click';
+    const shouldHandleInNewTab = !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);
+      return false;
+    }
+
+    return true;
+  };
+
   /**
    * Release the web view resources
    */
@@ -56,19 +117,22 @@ 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;
 
-  setWebView = (webView: WebView) => {
-    this.webView = webView;
-    this.jsExecutor.webView = webView;
-  };
-
   onLoad = () => {
     this.setXprops();
   };
 
+  urlMustBeLoadedInTheSameWebView = (url: string) => {
+    if (this.isDownloadUrl(url)) {
+      this.delegate?.onFileDownload?.(url);
+    } else {
+      this.redirectUrl = url;
+    }
+    return false;
+  };
+
   onMessage = (event: WebViewMessageEvent) => {
     const eventData = JSON.parse(event.nativeEvent.data);
 
@@ -100,6 +164,9 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
         this.redirectUrl = eventData.url;
         this.delegate?.onOpenInNewTab?.(eventData.url);
       },
+      [WebViewEventType.newTabWindowClose]: () => {
+        this.delegate?.onNewTabWindowClose?.();
+      },
     };
 
     mapper[eventData.type as WebViewEventType]?.();
@@ -108,19 +175,9 @@ export abstract class DeunaWebViewController extends BaseWebViewController {
   setXprops = () => {
     this.webView?.injectJavaScript(
       `
-    document.addEventListener('click', function(event) {
-        if (event.target.tagName === 'A' && event.target.href) {
-          window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.redirect}', url: event.target.href }));
-          event.preventDefault(); // Prevent default navigation
-          event.stopPropagation(); 
-        }
-    });
     console.log = function(message) {
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.consoleLog}', message }));
     };
-    window.open = function(url, target, features) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.openInNewTab}', url }));
-    };
     window.xprops = {
       hidePayButton: ${this.hidePayButton},
       onEventDispatch: function (event) {
@@ -166,8 +223,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/OpenInNewTabController.ts

@@ -1,5 +1,8 @@
-import WebView, { WebViewMessageEvent } from 'react-native-webview';
-import { BaseWebViewController } from './BaseWebViewController';
+import { WebViewMessageEvent } from 'react-native-webview';
+import {
+  BaseWebViewController,
+  WebViewEventType,
+} from './BaseWebViewController';
 import { DeunaLogs } from '../DeunaLogs';
 
 export class OpenInNewTabController extends BaseWebViewController {
@@ -8,10 +11,6 @@ export class OpenInNewTabController extends BaseWebViewController {
     this.url = url;
   }
 
-  setWebView = (webView: WebView) => {
-    this.webView = webView;
-  };
-
   onLoad = () => {
     this.setXprops();
   };
@@ -20,6 +19,14 @@ export class OpenInNewTabController extends BaseWebViewController {
     console.warn(event);
   };
 
+  urlMustBeLoadedInTheSameWebView = (url: string) => {
+    if (this.isDownloadUrl(url)) {
+      this.delegate?.onFileDownload?.(url);
+      return false;
+    }
+    return true;
+  };
+
   onMessage = (event: WebViewMessageEvent) => {
     const eventData = JSON.parse(event.nativeEvent.data);
     if (eventData.type === 'console_log') {
@@ -28,12 +35,22 @@ export class OpenInNewTabController extends BaseWebViewController {
   };
 
   setXprops = () => {
-    this.webView?.injectJavaScript(
-      `
-        console.log = function(message) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'console_log', message }));
-        };
-      `
-    );
+    // 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: '' }));
+      };
+      (function() {
+           setTimeout(function() {
+               var button = document.getElementById("cash_efecty_button_print");
+               if (button) {
+                   button.style.display = "none";
+               }
+           }, 500); // time out 500 ms
+      })();
+    `);
   };
 }

package/src/interfaces/constants.ts

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

package/src/types/helpers/buildElementsLink.ts

@@ -2,86 +2,119 @@ import { Environment } from "../base";
 import { hasKey } from "../utils/hasKey";
 import { getIntegrationType, UrlConfig } from "./urlConfig";
 
-const urls: Record<Environment, string> = {
+const ELEMENTS_URLS: Record<Environment, string> = {
   production: "https://elements.deuna.io",
   sandbox: "https://elements.sandbox.deuna.io",
   staging: "https://elements.stg.deuna.io",
   develop: "https://elements.dev.deuna.io",
-};
+} as const;
 
-const pathsMapper = {
+const WIDGET_PATHS = {
   click_to_pay: "/click_to_pay",
   vault: "/vault",
+} as const;
+
+type WidgetPath = keyof typeof WIDGET_PATHS;
+
+interface SearchParams {
+  publicApiKey: string;
+  orderToken: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  int: string;
+  language: string;
+  cssFile?: string;
+  userToken?: string;
+  showSavedCardsFlow?: string;
+  showDefaultCardFlow?: string;
+}
+
+/**
+ * Builds the base URL for the Elements widget based on environment and domain configuration
+ */
+const buildBaseUrl = (config: UrlConfig): string => {
+  if (config.domain) {
+    return config.domain;
+  }
+  return config.env ? ELEMENTS_URLS[config.env] : ELEMENTS_URLS.production;
 };
 
-export const buildElementsLink = (config: UrlConfig): string => {
-  const { env, orderToken, userInfo, userToken, widgetExperience, types } =
+/**
+ * Builds the search parameters for the Elements widget URL
+ */
+const buildSearchParams = (config: UrlConfig): URLSearchParams => {
+  const { userInfo, userToken, widgetExperience, styleFile, mode, language } =
     config;
 
-  let baseUrl = urls.production;
+  const searchParams: SearchParams = {
+    publicApiKey: config.publicApiKey,
+    orderToken: config.orderToken,
+    email: userInfo?.email || "",
+    firstName: userInfo?.firstName || "",
+    lastName: userInfo?.lastName || "",
+    int: getIntegrationType(mode),
+    language,
+  };
 
-  if (env) {
-    baseUrl = urls[env];
+  if (styleFile) {
+    searchParams.cssFile = styleFile;
   }
 
-  if (config.domain) {
-    baseUrl = config.domain;
+  if (userToken) {
+    searchParams.userToken = userToken;
   }
 
-  const url = new URL(baseUrl);
-
-  const publicApiKey = config.publicApiKey;
-  const firstName = userInfo?.firstName || "";
-  const lastName = userInfo?.lastName || "";
-  const email = userInfo?.email || "";
-
-  const searchParams = new URLSearchParams({
-    publicApiKey,
-    orderToken,
-    email,
-    firstName,
-    lastName,
-    ...(config.styleFile ? { cssFile: config.styleFile } : {}),
-    int: getIntegrationType(config.mode),
-    ...(userToken ? { userToken } : {}),
-    ...(widgetExperience?.userExperience?.showSavedCardsFlow
-      ? {
-          showSavedCardsFlow: String(
-            widgetExperience?.userExperience?.showSavedCardsFlow
-          ),
-        }
-      : {}),
-    ...(widgetExperience?.userExperience?.defaultCardFlow
-      ? {
-          showDefaultCardFlow: String(
-            widgetExperience?.userExperience?.defaultCardFlow
-          ),
-        }
-      : {}),
-    language: config.language,
-  });
+  if (widgetExperience?.userExperience?.showSavedCardsFlow) {
+    searchParams.showSavedCardsFlow = String(
+      widgetExperience.userExperience.showSavedCardsFlow
+    );
+  }
 
-  const xpropsB64 = {
-    id: config.id,
-    behavior: config.behavior || {},
-  };
+  if (widgetExperience?.userExperience?.defaultCardFlow) {
+    searchParams.showDefaultCardFlow = String(
+      widgetExperience.userExperience.defaultCardFlow
+    );
+  }
+
+  return new URLSearchParams(searchParams as unknown as Record<string, string>);
+};
 
-  const getWidgetPath = () => {
-    if (types && types.length > 0) {
-      const firstPath = types[0]!.name;
+/**
+ * Determines the widget path based on the provided types
+ */
+const getWidgetPath = (types?: Array<{ name: string }>): string => {
+  if (types && types.length > 0) {
+    const firstPath = types[0]?.name as WidgetPath;
+    return hasKey(WIDGET_PATHS, firstPath)
+      ? WIDGET_PATHS[firstPath]
+      : WIDGET_PATHS.vault;
+  }
+  return WIDGET_PATHS.vault;
+};
 
-      if (hasKey(pathsMapper, firstPath)) {
-        return pathsMapper[firstPath];
-      }
-    }
+/**
+ * Builds a complete Elements widget URL with all necessary parameters
+ * @param config - Configuration object for building the Elements URL
+ * @returns The complete Elements widget URL as a string
+ */
+export const buildElementsLink = (config: UrlConfig): string => {
+  const baseUrl = buildBaseUrl(config);
+  const searchParams = buildSearchParams(config);
 
-    return pathsMapper.vault;
+  const xpropsB64 = {
+    id: config.id,
+    behavior: config.behavior || {},
   };
 
   searchParams.append("xpropsB64", btoa(JSON.stringify(xpropsB64)));
 
-  url.pathname = getWidgetPath();
-  url.search = searchParams.toString();
+  const widgetPath = getWidgetPath(config.types);
+  const normalizedPath = widgetPath.startsWith("/")
+    ? widgetPath
+    : `/${widgetPath}`;
+
+  const url = new URL(`${baseUrl}${normalizedPath}?${searchParams.toString()}`);
 
   return url.toString();
 };

package/src/types/helpers/buildNextActionLink.ts

@@ -21,22 +21,26 @@ export const buildNextActionLink = (config: UrlConfig): string => {
     baseUrl = urls[env];
   }
 
+  const xpropsB64 = {
+    id: config.id
+  };
+
   const searchParams = new URLSearchParams({
     mode: "widget",
     int: getIntegrationType(config.mode),
     language: config.language,
   });
 
+  //encode to base64
+  searchParams.append("xpropsB64", btoa(JSON.stringify(xpropsB64)));
+
   configToQueryParams(config, searchParams);
 
   if (config.domain) {
     baseUrl = config.domain;
   }
 
-  const url = new URL(baseUrl);
-
-  url.pathname = `/next-action-purchase/${orderToken}`;
-  url.search = searchParams.toString();
+  const url = new URL(`${baseUrl}/next-action-purchase/${orderToken}?${searchParams.toString()}`);
 
   return url.toString();
 };

package/src/types/helpers/buildPaymentLink.ts

@@ -54,10 +54,7 @@ export const buildPaymentLink = (config: UrlConfig): string => {
   //encode to base64
   searchParams.append("xpropsB64", btoa(JSON.stringify(xpropsB64)));
 
-  const url = new URL(baseUrl);
-
-  url.pathname = `/now/${orderToken}`;
-  url.search = searchParams.toString();
+  const url = new URL(`${baseUrl}/now/${orderToken}?${searchParams.toString()}`);
 
   return url.toString();
 };

package/src/types/helpers/buildVoucherLink.ts

@@ -44,10 +44,7 @@ export const buildVoucherLink = (config: UrlConfig): string => {
   //encode to base64
   searchParams.append("xpropsB64", btoa(JSON.stringify(xpropsB64)));
 
-  const url = new URL(baseUrl);
-
-  url.pathname = `/voucher`;
-  url.search = searchParams.toString();
+  const url = new URL(`${baseUrl}/voucher?${searchParams.toString()}`);
 
   return url.toString();
 };