@deuna/react-native-sdk 1.0.0

package/package.json

@@ -0,0 +1,159 @@
+{
+  "name": "@deuna/react-native-sdk",
+  "version": "1.0.0",
+  "description": "React Native SDK",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/deuna-sdk-react-native/src/index.d.ts",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/deuna-sdk-react-native/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "copy-types": "bash copy-types.sh",
+    "example": "yarn workspace deuna-sdk-react-native-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "yarn copy-types && bob build",
+    "release": "release-it",
+    "example:install": "yarn prepare && yarn example install",
+    "example:android": "yarn example android",
+    "example:ios": "yarn example ios"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darwinmorocho-deuna/deuna-sdk-react-native.git"
+  },
+  "author": "DEUNA <dmorocho@deuna.com> (https://github.com/darwinmorocho-deuna)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/darwinmorocho-deuna/deuna-sdk-react-native/issues"
+  },
+  "homepage": "https://github.com/darwinmorocho-deuna/deuna-sdk-react-native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.6",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-builder-bob": "^0.40.6",
+    "react-native-webview": "^13.13.5",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.49.8"
+  }
+}

package/src/DeunaLogs.ts

@@ -0,0 +1,17 @@
+export class DeunaLogs {
+  static enable = true;
+
+  static info(tag: string, message: any) {
+    if (!DeunaLogs.enable) {
+      return;
+    }
+    console.info(`✅ DeunaSDK: ${tag}`, message);
+  }
+
+  static error(tag: string, message: any) {
+    if (!DeunaLogs.enable) {
+      return;
+    }
+    console.error(`❌ DeunaSDK: ${tag}`, message);
+  }
+}

package/src/DeunaSDK.ts

@@ -0,0 +1,269 @@
+import {
+  BaseDeuna,
+  CustomStyles,
+  GetStateFn,
+  InitElementsWidgetParams,
+  InitializeParams,
+  InitNextActionWidgetParams,
+  InitPaymentWidgetParams,
+  InitVoucherWidgetParams,
+  IsValid,
+  Json,
+  PaymentWidgetCallbacks,
+  RefetchOrder,
+  SetCustomStyle,
+  State,
+  Submit,
+  SubmitResult,
+  VoucherWidgetCallbacks,
+} from './types';
+import {
+  BaseWebViewController,
+  DeunaWebViewController,
+  WebViewDelegate,
+} from './controllers/BaseWebViewController';
+import { PaymentWidgetController } from './controllers/PaymentWidgetController';
+import { OpenInNewTabController } from './controllers/OpenInNewTabController';
+import { getWidgetController } from './helpers/getController';
+import { Completer } from './helpers/Completer';
+import { ElementsWidgetController } from './controllers/ElementsWidgetController';
+import { Mode, OnDownloadFile } from './interfaces/types';
+import { Platform } from 'react-native';
+
+export class DeunaSDK extends BaseDeuna {
+  constructor(private readonly config: InitializeParams) {
+    super();
+  }
+
+  mode: Mode | null = null;
+
+  setCustomStyleFn?: SetCustomStyle | undefined;
+  refetchOrderFn?: RefetchOrder | undefined;
+  getStateFn?: GetStateFn | undefined;
+  onSubmitFn?: Submit | undefined;
+  isValidFn?: IsValid | undefined;
+  closeFn?: (() => void) | undefined;
+
+  private listeners: Set<() => void> = new Set();
+  webViewController: DeunaWebViewController | null = null;
+  newTabWebViewController: BaseWebViewController | null = null;
+
+  modalDismissPromise: Completer<void> | null = null;
+  newTabModalDismissPromise: Completer<void> | null = null;
+
+  private 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.';
+      console.error(errorMessage);
+      throw new Error(errorMessage);
+    }
+    return this.webViewController;
+  }
+
+  getSessionId(): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+
+  static initialize(config: InitializeParams): DeunaSDK {
+    return new DeunaSDK(config);
+  }
+
+  /**
+   * Sets the DEUNA widget controller
+   * @param params - The parameters for the widget controller
+   * @param params.controller - The controller for the widget
+   * @param params.mode - The mode for the widget
+   */
+  private setWidgetController = (params: {
+    controller: DeunaWebViewController;
+    mode?: Mode;
+  }): void => {
+    const { controller, mode } = params;
+    this.mode = mode ?? Mode.MODAL;
+    if (this.mode === Mode.MODAL && Platform.OS === 'ios') {
+      this.modalDismissPromise = new Completer<void>();
+    }
+    this.webViewController = controller;
+    this.webViewController.delegate = this.buildDelegate();
+    this.notifyListeners();
+  };
+
+  /**
+   * Shows the payment widget
+   * @param props - The parameters for the payment widget controller
+   * @param props.mode - The mode for the widget
+   */
+  async initPaymentWidget(
+    props: Omit<InitPaymentWidgetParams, 'callbacks'> & {
+      mode?: Mode;
+      callbacks: PaymentWidgetCallbacks & OnDownloadFile;
+    }
+  ) {
+    this.setWidgetController({
+      controller: getWidgetController(this.config, {
+        widget: 'payment',
+        ...props,
+      }),
+      mode: props.mode,
+    });
+  }
+
+  /**
+   * Shows the elements widget
+   * @param props - The parameters for the elements widget controller
+   * @param props.mode - The mode for the widget
+   */
+  async initElements(
+    props: InitElementsWidgetParams & { mode?: Mode; sessionId?: string }
+  ) {
+    this.setWidgetController({
+      controller: getWidgetController(this.config, {
+        widget: 'elements',
+        ...props,
+      }),
+      mode: props.mode,
+    });
+  }
+
+  /**
+   * Shows the next action widget
+   * @param props - The parameters for the next action widget controller
+   * @param props.mode - The mode for the widget
+   */
+  async initNextAction(props: InitNextActionWidgetParams & { mode: Mode }) {
+    this.setWidgetController({
+      controller: getWidgetController(this.config, {
+        widget: 'nextAction',
+        ...props,
+      }),
+      mode: props.mode,
+    });
+  }
+
+  /**
+   * Shows the voucher widget
+   * @param props - The parameters for the voucher widget controller
+   * @param props.mode - The mode for the widget
+   */
+  async initVoucherWidget(
+    props: Omit<InitVoucherWidgetParams, 'callbacks'> & {
+      mode: Mode;
+      callbacks: VoucherWidgetCallbacks & OnDownloadFile;
+    }
+  ) {
+    this.setWidgetController({
+      controller: getWidgetController(this.config, {
+        widget: 'voucher',
+        ...props,
+      }),
+      mode: props.mode,
+    });
+  }
+
+  isValid = async (): Promise<boolean> => {
+    return this.safeWebViewController.isValid();
+  };
+
+  submit = async (): Promise<SubmitResult> => {
+    return this.safeWebViewController.submit();
+  };
+
+  setCustomStyle = async (style: Partial<CustomStyles>): Promise<void> => {
+    return this.safeWebViewController.setCustomStyle(style);
+  };
+
+  refetchOrder = async (): Promise<Json | null> => {
+    return this.safeWebViewController.refetchOrder();
+  };
+
+  getWidgetState = async (): Promise<State> => {
+    return this.safeWebViewController.getWidgetState();
+  };
+
+  /**
+   * Closes the DEUNA widget and releases the resources
+   */
+  close = async (): Promise<void> => {
+    if (this.webViewController instanceof PaymentWidgetController) {
+      this.webViewController.callbacks.onClosed?.(
+        this.webViewController.closedAction
+      );
+    } else if (this.webViewController instanceof ElementsWidgetController) {
+      this.webViewController.callbacks.onClosed?.(
+        this.webViewController.closedAction
+      );
+    }
+    this.onCloseNewTab();
+    await this.newTabModalDismissPromise?.wait;
+    this.newTabWebViewController?.dispose();
+
+    this.webViewController?.dispose();
+    // reset all prop
+    this.newTabWebViewController = null;
+    this.webViewController = null;
+    this.mode = 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;
+  };
+
+  onModalDismissed = () => {
+    this.modalDismissPromise?.complete();
+  };
+
+  onNewTabDismissed = () => {
+    this.newTabModalDismissPromise?.complete();
+  };
+
+  addListener = (listener: () => void) => {
+    this.listeners.add(listener);
+  };
+
+  removeListener = (listener: () => void) => {
+    this.listeners.delete(listener);
+  };
+
+  notifyListeners = () => {
+    this.listeners.forEach((listener) => listener());
+  };
+
+  onCloseNewTab = () => {
+    if (this.webViewController) {
+      this.webViewController.redirectUrl = null;
+    }
+    this.newTabWebViewController?.dispose();
+    this.newTabWebViewController = null;
+    this.notifyListeners();
+  };
+
+  /**
+   * Builds the delegate for the DEUNA widget to listen to the events
+   * like when the user presses the close button or when the user
+   * opens a new tab.
+   * @returns The delegate for the DEUNA widget
+   */
+  buildDelegate = (): WebViewDelegate => {
+    return {
+      onOpenInNewTab: (url) => {
+        this.newTabWebViewController = new OpenInNewTabController(url);
+        if (Platform.OS === 'ios') {
+          this.newTabModalDismissPromise = new Completer<void>();
+        }
+        this.notifyListeners();
+      },
+      onCloseButtonPressed: () => {
+        // Close the payment widget when the user
+        // presses the close button
+        this.close();
+      },
+      onCloseSubWebView: () => {
+        // Close the new tab web view when the DEUNA widget
+        // emits an error event or when the purchase is successful
+        this.onCloseNewTab();
+      },
+    };
+  };
+}

package/src/components/DeunaWebView.tsx

@@ -0,0 +1,38 @@
+import { StyleSheet, View } from 'react-native';
+import WebView from 'react-native-webview';
+import { WebViewLoader } from './WebViewLoader';
+
+interface DeunaWebViewProps {
+  url: string;
+  onWebView?: (webView: WebView) => void;
+  onMessage?: (event: any) => void;
+  onLoad?: () => void;
+  onError?: (error: any) => void;
+}
+
+export const DeunaWebView = (props: DeunaWebViewProps) => {
+  return (
+    <View style={styles.container}>
+      <WebView
+        ref={(webView) => {
+          if (webView && props.onWebView) {
+            props.onWebView(webView);
+          }
+        }}
+        source={{ uri: props.url }}
+        onMessage={props.onMessage}
+        onLoad={() => {
+          props.onLoad?.();
+        }}
+        startInLoadingState
+        renderLoading={() => <WebViewLoader />}
+        javaScriptEnabled={true}
+        onError={props.onError}
+        setSupportMultipleWindows={false}
+        javaScriptCanOpenWindowsAutomatically={false}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/components/DeunaWidget.tsx

@@ -0,0 +1,92 @@
+import { Modal, SafeAreaView, StyleSheet, View } from 'react-native';
+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';
+
+interface DeunaWidgetProps {
+  instance: DeunaSDK;
+}
+
+export const DeunaWidget = (props: DeunaWidgetProps) => {
+  const { instance } = props;
+  const instanceRef = useRef(instance);
+  const [mode, setMode] = useState<Mode | null>(instance.mode);
+
+  useEffect(() => {
+    instanceRef.current = instance;
+  }, [instance]);
+
+  // Listen when the DeunaSDK instance configuration
+  // has changed
+  useEffect(() => {
+    const listener = () => {
+      setMode(instanceRef.current.mode);
+    };
+
+    instanceRef.current.addListener(listener);
+
+    return () => {
+      instanceRef.current.removeListener(listener);
+      instanceRef.current.webViewController?.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;
+    controller.closedAction = 'userAction';
+    instanceRef.current.close();
+  };
+
+  // render the widget if mode is not null
+  return (
+    <>
+      <Modal
+        presentationStyle="pageSheet"
+        animationType="slide"
+        onRequestClose={onClose}
+        onDismiss={instanceRef.current.onModalDismissed}
+        visible={isModal}
+      >
+        {isModal && (
+          <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}
+              />
+              <NewTabWebView instance={instanceRef.current} />
+            </View>
+          </SafeAreaView>
+        )}
+      </Modal>
+
+      {isEmbedded && <NewTabWebView 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}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/components/NewTabWebView.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+import { DeunaSDK } from '../DeunaSDK';
+import { Modal, SafeAreaView, StyleSheet } from 'react-native';
+import { DeunaWebView } from './DeunaWebView';
+
+interface NewTabWebViewProps {
+  instance: DeunaSDK;
+}
+
+export const NewTabWebView = (props: NewTabWebViewProps) => {
+  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.newTabWebViewController;
+      setVisible(isVisible);
+    };
+
+    instanceRef.current.addListener(listener);
+
+    return () => {
+      ref.removeListener(listener);
+      ref.newTabWebViewController?.dispose();
+    };
+  }, []);
+
+  const newTabController = instanceRef.current.newTabWebViewController;
+
+  return (
+    <Modal
+      presentationStyle="pageSheet"
+      visible={visible}
+      animationType="slide"
+      onRequestClose={instanceRef.current.onCloseNewTab}
+      onDismiss={instanceRef.current.onNewTabDismissed}
+    >
+      {visible && (
+        <SafeAreaView style={styles.container}>
+          <DeunaWebView
+            url={newTabController?.url ?? ''}
+            onWebView={newTabController?.setWebView}
+            onMessage={newTabController?.onMessage}
+            onLoad={newTabController?.onLoad}
+            onError={newTabController?.onError}
+          />
+        </SafeAreaView>
+      )}
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/components/WebViewLoader.tsx

@@ -0,0 +1,22 @@
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+export const WebViewLoader = () => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="small" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+});