@deuna/react-native-sdk 1.0.0

package/src/controllers/BaseWebViewController.ts

@@ -0,0 +1,289 @@
+import type WebView from 'react-native-webview';
+import { DeunaLogs } from '../DeunaLogs';
+import { WebViewMessageEvent } from 'react-native-webview';
+import {
+  ClosedAction,
+  CustomStyles,
+  Json,
+  State,
+  SubmitResult,
+} from '../types';
+import { submitError } from '../interfaces';
+
+export interface WebViewDelegate {
+  onOpenInNewTab?: (url: string) => void;
+  onCloseButtonPressed?: () => void;
+  onCloseSubWebView?: () => void;
+}
+
+export enum WebViewEventType {
+  consoleLog = 'consoleLog',
+  eventDispatch = 'eventDispatch',
+  jsExecutor = 'jsExecutor',
+  openInNewTab = 'openInNewTab',
+  redirect = 'redirect',
+}
+
+export abstract class BaseWebViewController {
+  webView: WebView | null = null;
+  url: string | null = null;
+
+  delegate: WebViewDelegate | null = null;
+
+  abstract setWebView: (webView: WebView) => void;
+  abstract onMessage: (event: WebViewMessageEvent) => void;
+
+  /**
+   * Called when the web view url is loaded successfully
+   */
+  abstract onLoad: () => void;
+
+  /**
+   * Called when the web view fails to load a URL
+   */
+  abstract onError: (event: any) => void;
+
+  /**
+   * Release the web view resources
+   */
+  dispose() {
+    this.webView?.stopLoading();
+    this.webView = null;
+  }
+}
+
+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();
+  };
+
+  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.eventDispatch]: () => {
+        this.onEventDispatch(eventData.event);
+      },
+      [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);
+      },
+      [WebViewEventType.openInNewTab]: () => {
+        this.delegate?.onOpenInNewTab?.(eventData.url);
+      },
+      [WebViewEventType.redirect]: () => {
+        if (this.redirectUrl) {
+          return;
+        }
+        this.redirectUrl = eventData.url;
+        this.delegate?.onOpenInNewTab?.(eventData.url);
+      },
+    };
+
+    mapper[eventData.type as WebViewEventType]?.();
+  };
+
+  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) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.eventDispatch}', event }));
+      },  
+      onCustomStyleSubscribe: function (fn)  {
+        window.setCustomStyle = fn;
+      },
+      onRefetchOrderSubscribe: function (fn) {
+        window.deunaRefetchOrder = fn;
+      },
+      onGetStateSubscribe: function (state){
+        window.deunaWidgetState = state;
+      },
+      isValid: function(fn){
+        window.isValid = fn;
+      },
+      onSubmit: function (fn) {
+        window.submit = fn;
+      },
+    }
+     `
+    );
+  };
+
+  /**
+   * Gets the current widget state
+   * @returns The widget state
+   */
+  getWidgetState = async (): Promise<State> => {
+    const result = await this.jsExecutor.execute(`
+      if(!window.deunaWidgetState){
+        sendResult({ deunaWidgetState: null });
+        return;
+      }
+      sendResult({ deunaWidgetState: window.deunaWidgetState });
+    `);
+    return result?.deunaWidgetState;
+  };
+
+  /**
+   * Refetches the order
+   * @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'){
+        sendResult({order: null});
+        return;
+      }
+      window.deunaRefetchOrder()
+        .then((order) => {
+          sendResult({order});
+        })
+        .catch(() => {
+          sendResult({data: null});
+        });
+    `);
+    return result?.order ?? null;
+  };
+
+  /**
+   * Sets the custom style for the widget
+   * @param style - The custom style to set
+   */
+  setCustomStyle = async (style: Partial<CustomStyles>): Promise<void> => {
+    await this.jsExecutor.execute(`
+      window.setCustomStyle(${JSON.stringify(style)});
+    `);
+  };
+
+  /**
+   * Checks if the widget form data is valid
+   */
+  isValid = async (): Promise<boolean> => {
+    const data = await this.jsExecutor.execute(`
+      if(typeof window.isValid !== 'function'){
+        console.log('❌ window.isValid is not a function');
+        sendResult({isValid:false});
+        return;
+      }
+      sendResult( {isValid: window.isValid() });
+    `);
+    return data?.isValid ?? false;
+  };
+
+  /**
+   * Submits the form data to the server
+   * @returns The result of the submission
+   */
+  submit = async (): Promise<SubmitResult> => {
+    const data = await this.jsExecutor.execute(`
+      if(typeof window.submit !== 'function'){
+        console.log('❌ window.submit is not a function');
+        sendResult({status:"${submitError.status}", code:"${submitError.code}", message:"${submitError.message}" });
+        return;
+      }
+      window.submit()
+        .then((data) => {
+          sendResult(data);
+        })
+        .catch((error) => {
+          sendResult({status:"${submitError.status}", code:"${submitError.code}", message: error.message ?? "${submitError.message}" });
+        });
+    `);
+    return data as SubmitResult;
+  };
+
+  takeScreenshot = async (): Promise<string> => {
+    const data = await this.jsExecutor.execute(`
+       function takeScreenshot() {
+         html2canvas(document.body, { allowTaint: true, useCORS: true })
+           .then((canvas) => {
+             // Convert the canvas to a base64 image
+             var imgData = canvas.toDataURL("image/png");
+             sendResult({imgData: imgData});
+           })
+           .catch((error) => {
+             sendResult({imgData: null});
+           });
+       }
+
+       // If html2canvas is not added
+       if (typeof html2canvas === "undefined") {
+         var script = document.createElement("script");
+         script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
+         script.onload = function() {
+           takeScreenshot();
+         };
+         document.head.appendChild(script);
+       } else {
+         takeScreenshot();
+       }
+    `);
+    return data?.imgData ?? null;
+  };
+}
+
+class JsExecutor {
+  requestId = 0;
+  webView: WebView | null = null;
+  requests: Map<number, (data: Record<string, any> | null) => void> = new Map();
+
+  /**
+   * Executes javascript code in the web view
+   * @param jsCode - The javascript code to execute
+   * @returns The result of the javascript code
+   */
+
+  execute = (jsCode: string): Promise<Record<string, any> | null> => {
+    this.requestId++;
+    this.webView?.injectJavaScript(
+      `
+       (function() {
+          function sendResult(data){
+            window.ReactNativeWebView.postMessage(JSON.stringify({ type: '${WebViewEventType.jsExecutor}', data: data, requestId: ${this.requestId} }));
+          }
+          ${jsCode}
+       })();
+      `
+    );
+    return new Promise((resolve) => {
+      this.requests.set(this.requestId, resolve);
+    });
+  };
+}

package/src/controllers/ElementsWidgetController.ts

@@ -0,0 +1,78 @@
+import { DeunaWebViewController } from './BaseWebViewController';
+import {
+  ElementsEvent,
+  ElementsEventType,
+} from '../interfaces/events/elements';
+import { ElementsWidgetCallbacks } from '../types';
+import { ElementsErrorType } from '../interfaces';
+
+export class ElementsWidgetController extends DeunaWebViewController {
+  constructor(readonly callbacks: ElementsWidgetCallbacks) {
+    super();
+  }
+
+  onError = (event: any) => {
+    this.callbacks.onError?.({
+      type: ElementsErrorType.errorWhileLoadingTheURL,
+      metadata: {
+        code: ElementsErrorType.errorWhileLoadingTheURL,
+        message: event.message ?? 'Error while loading the URL',
+      },
+    });
+  };
+
+  onEventDispatch = (event: Record<string, any>) => {
+    const elementsEvent = event as ElementsEvent;
+
+    if (this.callbacks.onEventDispatch) {
+      this.callbacks.onEventDispatch(elementsEvent.type, elementsEvent.data);
+    }
+
+    const mapper: Partial<Record<ElementsEventType, () => void>> = {
+      [ElementsEventType.vaultClosed]: () => {
+        this.closedAction = 'userAction';
+        this.delegate?.onCloseButtonPressed?.();
+      },
+      [ElementsEventType.vaultSaveSuccess]: () => {
+        this.delegate?.onCloseSubWebView?.();
+        this.callbacks.onSuccess?.(event.data);
+      },
+      [ElementsEventType.vaultSaveError]: () => {
+        this.delegate?.onCloseSubWebView?.();
+        this.delegate?.onCloseSubWebView?.();
+        const { metadata } = elementsEvent.data;
+
+        if (metadata) {
+          const errorCode =
+            metadata.code ??
+            metadata.errorCode ??
+            ElementsErrorType.unknownError;
+
+          const errorMessage =
+            metadata.message ??
+            metadata.errorMessage ??
+            metadata.reason ??
+            'unknown error';
+
+          this.callbacks.onError?.({
+            type: ElementsErrorType.vaultSaveError,
+            metadata: {
+              code: errorCode,
+              message: errorMessage,
+            },
+          });
+        } else {
+          this.callbacks.onError?.({
+            type: ElementsErrorType.unknownError,
+            metadata: {
+              code: ElementsErrorType.unknownError,
+              message: 'unknown error',
+            },
+          });
+        }
+      },
+    };
+
+    mapper[elementsEvent.type]?.();
+  };
+}

package/src/controllers/OpenInNewTabController.ts

@@ -0,0 +1,39 @@
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import { BaseWebViewController } from './BaseWebViewController';
+import { DeunaLogs } from '../DeunaLogs';
+
+export class OpenInNewTabController extends BaseWebViewController {
+  constructor(readonly url: string) {
+    super();
+    this.url = url;
+  }
+
+  setWebView = (webView: WebView) => {
+    this.webView = webView;
+  };
+
+  onLoad = () => {
+    this.setXprops();
+  };
+
+  onError = (event: any) => {
+    console.warn(event);
+  };
+
+  onMessage = (event: WebViewMessageEvent) => {
+    const eventData = JSON.parse(event.nativeEvent.data);
+    if (eventData.type === 'console_log') {
+      DeunaLogs.info(`CONSOLE LOG`, eventData.message);
+    }
+  };
+
+  setXprops = () => {
+    this.webView?.injectJavaScript(
+      `
+        console.log = function(message) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'console_log', message }));
+        };
+      `
+    );
+  };
+}

package/src/controllers/PaymentWidgetController.ts

@@ -0,0 +1,118 @@
+import {
+  CheckoutEvent,
+  CheckoutEventType,
+  PaymentErrorType,
+} from '../interfaces';
+import { constants } from '../interfaces/constants';
+import { DownloadType, OnDownloadFile } from '../interfaces/types';
+import {
+  PaymentWidgetCallbacks,
+  NextActionWidgetCallbacks,
+  VoucherWidgetCallbacks,
+} from '../types';
+import { DeunaWebViewController } from './BaseWebViewController';
+
+type Callbacks = PaymentWidgetCallbacks &
+  NextActionWidgetCallbacks &
+  VoucherWidgetCallbacks &
+  OnDownloadFile;
+
+export class PaymentWidgetController extends DeunaWebViewController {
+  constructor(readonly callbacks: Callbacks) {
+    super();
+  }
+
+  onError = (event: any) => {
+    this.callbacks.onError?.({
+      type: PaymentErrorType.errorWhileLoadingTheURL,
+      metadata: {
+        code: PaymentErrorType.errorWhileLoadingTheURL,
+        message: event.message ?? 'Error while loading the URL',
+      },
+    });
+  };
+
+  onEventDispatch = async (event: Record<string, any>) => {
+    const checkoutEvent = event as CheckoutEvent;
+
+    // This event is used to listen when a voucher save request is made
+    if (checkoutEvent.type === constants.apmSaveId) {
+      const { voucherPdfDownloadUrl }: { voucherPdfDownloadUrl?: string } =
+        checkoutEvent.data.metadata;
+
+      // If the file url is provided, download the file and save it to the device
+      if (voucherPdfDownloadUrl) {
+        this.callbacks.onDownloadFile?.({
+          type: DownloadType.URL,
+          data: voucherPdfDownloadUrl,
+        });
+      } else {
+        // Take a screenshot of current content in the webview
+        const base64Image = await this.takeScreenshot();
+        if (base64Image) {
+          this.callbacks.onDownloadFile?.({
+            type: DownloadType.BASE64,
+            data: base64Image,
+          });
+        }
+      }
+      return;
+    }
+
+    if (this.callbacks.onEventDispatch) {
+      this.callbacks.onEventDispatch(checkoutEvent.type, checkoutEvent.data);
+    }
+
+    const mapper: Partial<Record<CheckoutEventType, () => void>> = {
+      [CheckoutEventType.linkClose]: () => {
+        this.closedAction = 'userAction';
+        this.delegate?.onCloseButtonPressed?.();
+      },
+      [CheckoutEventType.onBinDetected]: () => {
+        this.callbacks.onCardBinDetected?.(checkoutEvent.data.metadata);
+      },
+      [CheckoutEventType.onInstallmentSelected]: () => {
+        this.callbacks.onInstallmentSelected?.(checkoutEvent.data.metadata);
+      },
+      [CheckoutEventType.paymentProcessing]: () => {
+        this.callbacks.onPaymentProcessing?.();
+      },
+      [CheckoutEventType.purchase]: () => {
+        this.delegate?.onCloseSubWebView?.();
+        this.callbacks.onSuccess?.(checkoutEvent.data.order);
+      },
+      [CheckoutEventType.purchaseError]: () => {
+        this.delegate?.onCloseSubWebView?.();
+        const { metadata } = checkoutEvent.data;
+
+        if (metadata) {
+          const errorCode =
+            metadata.code ??
+            metadata.errorCode ??
+            PaymentErrorType.unknownError;
+
+          const errorMessage =
+            metadata.message ??
+            metadata.errorMessage ??
+            metadata.reason ??
+            'unknown error';
+
+          this.callbacks.onError?.({
+            type: PaymentErrorType.paymentError,
+            metadata: { code: errorCode, message: errorMessage },
+          });
+        } else {
+          this.callbacks.onError?.({
+            type: PaymentErrorType.unknownError,
+            metadata: {
+              code: PaymentErrorType.unknownError,
+              message: 'unknown error',
+            },
+          });
+        }
+      },
+    };
+
+    mapper[checkoutEvent.type]?.();
+  };
+}

package/src/helpers/Completer.ts

@@ -0,0 +1,33 @@
+export class Completer<T> {
+  private promise: Promise<T>;
+  private resolvePromise: ((value: T | PromiseLike<T>) => void) | null = null;
+  private rejectPromise: ((reason?: any) => void) | null = null;
+  private completed = false;
+
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.resolvePromise = resolve;
+      this.rejectPromise = reject;
+    });
+  }
+
+  get wait(): Promise<T> {
+    return this.promise;
+  }
+
+  complete(value: T): void {
+    if (this.completed) return;
+    this.completed = true;
+    this.resolvePromise?.(value);
+  }
+
+  completeError(error: any): void {
+    if (this.completed) return;
+    this.completed = true;
+    this.rejectPromise?.(error);
+  }
+
+  isCompleted(): boolean {
+    return this.completed;
+  }
+}

package/src/helpers/getController.ts

@@ -0,0 +1,83 @@
+import { DeunaWebViewController } from '../controllers/BaseWebViewController';
+import { PaymentWidgetController } from '../controllers/PaymentWidgetController';
+import { ElementsWidgetController } from '../controllers/ElementsWidgetController';
+import {
+  InitElementsWidgetParams,
+  InitializeParams,
+  InitNextActionWidgetParams,
+  InitPaymentWidgetParams,
+  InitVoucherWidgetParams,
+} from '../types';
+import { linkBuilders } from '../types/helpers';
+import { Mode } from '../interfaces/types';
+import { DeunaLogs } from '../DeunaLogs';
+
+type PaymentWidgetControllerProps = InitPaymentWidgetParams & {
+  widget: 'payment';
+};
+
+type NextActionWidgetControllerProps = InitNextActionWidgetParams & {
+  widget: 'nextAction';
+};
+
+type VoucherWidgetControllerProps = InitVoucherWidgetParams & {
+  widget: 'voucher';
+};
+
+type ElementsWidgetControllerProps = InitElementsWidgetParams & {
+  widget: 'elements';
+};
+
+type ControllerProps =
+  | PaymentWidgetControllerProps
+  | NextActionWidgetControllerProps
+  | VoucherWidgetControllerProps
+  | ElementsWidgetControllerProps;
+
+export const getWidgetController = (
+  config: InitializeParams,
+  props: ControllerProps & { mode?: Mode; sessionId?: string }
+): DeunaWebViewController => {
+  const { widget, mode, callbacks, ...rest } = props;
+
+  const baseParams = {
+    env: config.environment!,
+    publicApiKey: config.publicApiKey,
+    orderToken: rest.orderToken ?? '',
+    userToken: rest.userToken ?? '',
+    language: rest.language ?? 'es',
+    sessionId: rest.sessionId ?? '',
+    mode: mode ?? Mode.MODAL,
+  };
+
+  const widgetMappers = {
+    elements: () => ({
+      ...baseParams,
+      userInfo: rest.userInfo,
+      styleFile: rest.styleFile,
+      behavior: rest.behavior,
+      widgetExperience: rest.widgetExperience,
+      types: (props as ElementsWidgetControllerProps).types,
+    }),
+    payment: () => ({
+      ...baseParams,
+      behavior: rest.behavior,
+      paymentMethods: (props as PaymentWidgetControllerProps).paymentMethods,
+      styleFile: rest.styleFile,
+    }),
+    nextAction: () => baseParams,
+    voucher: () => baseParams,
+  };
+
+  const controller =
+    widget === 'elements'
+      ? new ElementsWidgetController(callbacks)
+      : new PaymentWidgetController(callbacks);
+
+  controller.url = linkBuilders[widget](widgetMappers[widget]());
+  controller.hidePayButton = rest.hidePayButton ?? false;
+
+  DeunaLogs.info('👀 loading link', controller.url);
+
+  return controller;
+};

package/src/index.tsx

@@ -0,0 +1,4 @@
+export * from './DeunaSDK';
+export * from './components/DeunaWidget';
+export * from './types';
+export * from './interfaces';

package/src/interfaces/constants.ts

@@ -0,0 +1,5 @@
+export const constants = {
+  apmSaveId: 'apmSaveId',
+  metadata: 'metadata',
+  voucherPdfDownloadUrl: 'voucherPdfDownloadUrl',
+};

package/src/interfaces/errors.ts

@@ -0,0 +1,34 @@
+export const initializationError = {
+  type: 'INITIALIZATION_ERROR',
+  code: 'INITIALIZATION_ERROR',
+  message: 'Failed to initialize the widget',
+};
+
+export const submitError = {
+  status: 'error',
+  code: 'error',
+  message: 'Error al procesar la solicitud.',
+};
+
+export enum PaymentErrorType {
+  noInternetConnection = 'noInternetConnection',
+  invalidOrderToken = 'invalidOrderToken',
+  initializationFailed = 'initializationFailed',
+  errorWhileLoadingTheURL = 'errorWhileLoadingTheURL',
+  orderNotFound = 'orderNotFound',
+  orderCouldNotBeRetrieved = 'orderCouldNotBeRetrieved',
+  paymentError = 'paymentError',
+  userError = 'userError',
+  unknownError = 'unknownError',
+}
+
+export enum ElementsErrorType {
+  noInternetConnection = 'noInternetConnection',
+  initializationFailed = 'initializationFailed',
+  errorWhileLoadingTheURL = 'errorWhileLoadingTheURL',
+  userError = 'userError',
+  invalidUserToken = 'invalidUserToken',
+  unknownError = 'unknownError',
+  vaultSaveError = 'vaultSaveError',
+  vaultFailed = 'vaultFailed',
+}