connect-react-native-sdk/lib/commonjs/index.js

React Native SDK for Mastercard Open Finance Connect

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {
  Connect: true
};
exports.Connect = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeWebview = require("react-native-webview");
var _reactNativeInappbrowserReborn = require("react-native-inappbrowser-reborn");
var _constants = require("./constants");
var _nativeModule = require("./nativeModule");
var _types = require("./types");
Object.keys(_types).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _types[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function () {
      return _types[key];
    }
  });
});
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const defaultEventHandlers = {
  onLoad: () => {
    // Intentionally empty function
  },
  onUser: () => {
    // Intentionally empty function
  },
  onRoute: () => {
    // Intentionally empty function
  }
};
class Connect extends _react.Component {
  webViewRef = null;
  state = {
    connectUrl: '',
    pingingConnect: false,
    pingedConnectSuccessfully: false,
    pingIntervalId: 0,
    eventHandlers: defaultEventHandlers,
    browserDisplayed: false,
    modalVisible: false
  };
  constructor(props) {
    super(props);
    this.launch(props.connectUrl, props.eventHandlers);
  }
  launch = (connectUrl, eventHandlers) => {
    this.state.connectUrl = connectUrl;
    this.state.eventHandlers = {
      ...defaultEventHandlers,
      ...eventHandlers
    };
    this.state.modalVisible = true;
  };
  close = () => {
    this.dismissModal();
    this.state.eventHandlers.onCancel({
      code: 100,
      reason: 'exit'
    });
  };
  postMessage(eventData) {
    this?.webViewRef?.postMessage(JSON.stringify(eventData));
  }
  pingConnect = () => {
    const {
      redirectUrl = ''
    } = this.props;
    if (this.webViewRef !== null) {
      this.postMessage({
        type: _constants.ConnectEvents.PING,
        sdkVersion: _constants.CONNECT_SDK_VERSION,
        platform: _constants.SDK_PLATFORM,
        redirectUrl: redirectUrl
      });
    } else {
      this.stopPingingConnect();
    }
  };
  startPingingConnect = () => {
    if (this.webViewRef !== null && !this.state.pingedConnectSuccessfully && !this.state.pingingConnect && this.state.pingIntervalId === 0) {
      this.state.pingingConnect = true;
      this.state.pingIntervalId = setInterval(this.pingConnect, _constants.PING_TIMEOUT);
    }
  };
  stopPingingConnect = () => {
    if (this.state.pingingConnect && this.state.pingIntervalId !== 0) {
      clearInterval(this.state.pingIntervalId);
      this.state.pingingConnect = false;
      this.state.pingIntervalId = 0;
    }
  };
  dismissBrowser = type => {
    if (this.state.browserDisplayed) {
      this.postMessage({
        type: 'window',
        closed: true
      });
      this.state.browserDisplayed = false;
      if (type !== 'cancel') (_reactNative.Platform.OS === 'android' ? _nativeModule.ConnectReactNativeSdk : _reactNativeInappbrowserReborn.InAppBrowser).close();
    }
  };
  openBrowser = async url => {
    if (!url) return;
    this.state.browserDisplayed = true;
    await _reactNativeInappbrowserReborn.InAppBrowser.isAvailable();
    // NOTE: solves bug in InAppBrowser if an object with non-iOS options is passed
    const browserOptions = _reactNative.Platform.OS === 'ios' ? undefined : {
      forceCloseOnRedirection: false,
      showInRecents: true
    };
    if (_reactNative.Platform.OS === 'android') {
      const {
        type
      } = await _nativeModule.ConnectReactNativeSdk.open({
        url,
        ...(browserOptions || {})
      });
      this.dismissBrowser(type);
    } else {
      const {
        type
      } = await _reactNativeInappbrowserReborn.InAppBrowser.open(url, browserOptions);
      this.dismissBrowser(type);
    }
  };
  handleEvent = event => {
    const eventData = parseEventData(event.nativeEvent.data);
    const {
      type: eventType,
      url
    } = eventData;
    let {
      browserDisplayed,
      eventHandlers
    } = this.state;
    switch (eventType) {
      case _constants.ConnectEvents.URL:
        if (!browserDisplayed) {
          _reactNative.Platform.OS === 'ios' ? url && (0, _nativeModule.checkLink)(url).then(canOpen => {
            !canOpen && this.openBrowser(url);
          }) : this.openBrowser(url);
        }
        break;
      case _constants.ConnectEvents.CLOSE_POPUP:
        browserDisplayed && this.dismissBrowser();
        break;
      case _constants.ConnectEvents.ACK:
        this.state.pingedConnectSuccessfully = true;
        this.stopPingingConnect();
        eventHandlers.onLoad();
        break;
      case _constants.ConnectEvents.CANCEL:
        this.dismissModal();
        eventHandlers.onCancel(eventData.data);
        break;
      case _constants.ConnectEvents.DONE:
        this.dismissModal();
        eventHandlers.onDone(eventData.data);
        break;
      case _constants.ConnectEvents.ERROR:
        this.dismissModal();
        eventHandlers.onError(eventData.data);
        break;
      case _constants.ConnectEvents.ROUTE:
        eventHandlers.onRoute(eventData.data);
        break;
      case _constants.ConnectEvents.USER:
        eventHandlers.onUser(eventData.data);
        break;
      default:
        break;
    }
  };
  dismissModal = () => {
    this.setState({
      modalVisible: false
    });
  };
  render() {
    const injectedJavaScript = `
      (function() {
        window.maOBConnectReactNative = window.maOBConnectReactNative || true;
        window.ReactNativeWebView = window.ReactNativeWebView || true;
      })();
    `;
    return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
      visible: this.state.modalVisible,
      animationType: 'slide',
      presentationStyle: _reactNative.Platform.OS === 'ios' ? 'pageSheet' : 'fullScreen',
      transparent: false,
      testID: "test-modal",
      onRequestClose: () => this.close()
    }, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.WebView, {
      ref: ref => this.webViewRef = ref,
      source: {
        uri: this.state.connectUrl
      },
      javaScriptEnabled: true,
      injectedJavaScriptBeforeContentLoaded: injectedJavaScript,
      testID: "test-webview",
      onMessage: event => this.handleEvent(event),
      onLoad: () => this.startPingingConnect()
    }));
  }
}
exports.Connect = Connect;
function parseEventData(eventData) {
  try {
    return typeof eventData === 'string' ? JSON.parse(eventData) : eventData;
  } catch (e) {
    return {};
  }
}
//# sourceMappingURL=index.js.map