@quiltt/react-native 3.6.2 → 3.6.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react-native
 
+## 3.6.4
+
+### Patch Changes
+
+- [#246](https://github.com/quiltt/quiltt-js/pull/246) [`38f7904`](https://github.com/quiltt/quiltt-js/commit/38f79048e99dc617d700b62fd285623f9f2ae2fa) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Update exports for react-native
+
+- Updated dependencies [[`38f7904`](https://github.com/quiltt/quiltt-js/commit/38f79048e99dc617d700b62fd285623f9f2ae2fa)]:
+  - @quiltt/react@3.6.4
+  - @quiltt/core@3.6.4
+
+## 3.6.3
+
+### Patch Changes
+
+- [#240](https://github.com/quiltt/quiltt-js/pull/240) [`96556d4`](https://github.com/quiltt/quiltt-js/commit/96556d4e4d29b1a5623b78f60d97c49a974e44e8) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Pre-transpile '@quiltt/react-native' code before publish
+
+- Updated dependencies [[`96556d4`](https://github.com/quiltt/quiltt-js/commit/96556d4e4d29b1a5623b78f60d97c49a974e44e8)]:
+  - @quiltt/core@3.6.3
+  - @quiltt/react@3.6.3
+
 ## 3.6.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -0,0 +1,490 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base64 = require('base-64');
+var core = require('@quiltt/core');
+var react = require('@quiltt/react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('react');
+var reactNativeUrlPolyfill = require('react-native-url-polyfill');
+var reactNativeWebview = require('react-native-webview');
+var reactNative = require('react-native');
+var util = require('@honeybadger-io/core/build/src/util');
+
+// Generated by genversion.
+const version = '3.6.4';
+
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
+        testID: testId,
+        style: styles$1.AndroidSafeArea,
+        children: children
+    });
+const styles$1 = reactNative.StyleSheet.create({
+    AndroidSafeArea: {
+        flex: 1,
+        backgroundColor: 'white',
+        paddingTop: reactNative.Platform.OS === 'android' ? reactNative.StatusBar.currentHeight : 0
+    }
+});
+
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
+            style: [
+                styles.container,
+                styles.padding
+            ],
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
+                    style: {
+                        flex: 1,
+                        justifyContent: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
+                            style: {
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginVertical: 10
+                            },
+                            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                                style: [
+                                    styles.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                            style: [
+                                styles.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(reactNative.Pressable, {
+                    style: [
+                        styles.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.Text, {
+                        style: [
+                            styles.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles = reactNative.StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        backgroundColor: '#F3F4F6'
+    },
+    title: {
+        color: '#1F2937',
+        fontSize: 30,
+        fontWeight: 'bold'
+    },
+    subtitle: {
+        color: 'rgba(107, 114, 128, 1)'
+    },
+    padding: {
+        paddingHorizontal: 16,
+        paddingVertical: 24
+    },
+    pressable: {
+        marginTop: 20,
+        backgroundColor: '#1F2937',
+        padding: 10,
+        paddingHorizontal: 25,
+        borderRadius: 5
+    },
+    pressableText: {
+        color: '#fff',
+        textAlign: 'center'
+    }
+});
+
+const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
+            style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.ActivityIndicator, {
+                testID: "activity-indicator",
+                size: "large",
+                color: "#5928A3"
+            })
+        })
+    });
+
+const ErrorReporterConfig = {
+    honeybadger_api_key: 'undefined'
+};
+
+// Quick hack to send error to Honeybadger to debug why the connector is not routable
+const notifier = {
+    name: 'Quiltt React Native SDK Reporter',
+    url: 'https://www.quiltt.dev/guides/connector/react-native',
+    version: version
+};
+class ErrorReporter {
+    constructor(platform){
+        this.noticeUrl = 'https://api.honeybadger.io/v1/notices';
+        this.apiKey = ErrorReporterConfig.honeybadger_api_key;
+        this.clientName = 'react-native-sdk';
+        this.clientVersion = version;
+        this.platform = platform;
+        this.logger = console;
+        this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`;
+    }
+    async send(error, context) {
+        const headers = {
+            'X-API-Key': this.apiKey,
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`
+        };
+        const payload = await this.buildPayload(error, context);
+        const method = 'POST';
+        const body = JSON.stringify(payload);
+        const mode = 'cors';
+        fetch(this.noticeUrl, {
+            headers,
+            method,
+            body,
+            mode
+        }).then((response)=>{
+            if (response.status !== 201) {
+                this.logger.warn(`Error report failed: unknown response from server. code=${response.status}`);
+                return;
+            }
+            return response.json();
+        }).then((data)=>{
+            if (data) {
+                this.logger.info(`Error report sent ⚡ https://app.honeybadger.io/notice/${data?.id}`);
+            }
+        });
+    }
+    async buildPayload(error, localContext = {}) {
+        const notice = error;
+        notice.stack = util.generateStackTrace();
+        notice.backtrace = util.makeBacktrace(notice.stack);
+        return {
+            notifier,
+            error: {
+                class: notice.name,
+                message: notice.message,
+                backtrace: notice.backtrace,
+                // fingerprint: this.calculateFingerprint(notice),
+                tags: notice.tags || [],
+                causes: util.getCauses(notice, this.logger)
+            },
+            request: {
+                url: notice.url,
+                component: notice.component,
+                action: notice.action,
+                context: localContext || {},
+                cgi_data: {},
+                params: {},
+                session: {}
+            },
+            server: {
+                project_root: notice.projectRoot,
+                environment_name: this.userAgent,
+                revision: version,
+                hostname: this.platform,
+                time: new Date().toUTCString()
+            },
+            details: notice.details || {}
+        };
+    }
+}
+
+const getErrorMessage = (responseStatus, error)=>{
+    if (error) return `An error occurred while checking the connector URL: ${error?.name} \n${error?.message}`;
+    return responseStatus ? `The URL is not routable. Response status: ${responseStatus}` : 'An error occurred while checking the connector URL';
+};
+
+const errorReporter = new ErrorReporter(`${reactNative.Platform.OS} ${reactNative.Platform.Version}`);
+const PREFLIGHT_RETRY_COUNT = 3;
+const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
+    let responseStatus;
+    let error;
+    let errorOccurred = false;
+    try {
+        const response = await fetch(connectorUrl);
+        if (!response.ok) {
+            console.error(`The URL ${connectorUrl} is not routable.`);
+            responseStatus = response.status;
+            errorOccurred = true;
+        } else {
+            console.log(`The URL ${connectorUrl} is routable.`);
+            return {
+                checked: true
+            };
+        }
+    } catch (e) {
+        error = e;
+        console.error(`An error occurred while checking the connector URL: ${error}`);
+        errorOccurred = true;
+    }
+    if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
+        const delay = 50 * Math.pow(2, retryCount);
+        await new Promise((resolve)=>setTimeout(resolve, delay));
+        console.log(`Retrying... Attempt number ${retryCount + 1}`);
+        return checkConnectorUrl(connectorUrl, retryCount + 1);
+    }
+    const errorMessage = getErrorMessage(responseStatus, error);
+    const errorToSend = error || new Error(errorMessage);
+    const context = {
+        connectorUrl,
+        responseStatus
+    };
+    if (responseStatus !== 404) await errorReporter.send(errorToSend, context);
+    return {
+        checked: true,
+        error: errorMessage
+    };
+};
+
+const handleOAuthUrl = (oauthUrl)=>{
+    if (oauthUrl.protocol !== 'https:') {
+        console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
+        return;
+    }
+    reactNative.Linking.openURL(oauthUrl.href);
+};
+
+const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
+    const webViewRef = react$1.useRef(null);
+    const { session } = react.useQuilttSession();
+    const encodedOAuthRedirectUrl = react$1.useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
+        oauthRedirectUrl
+    ]);
+    const connectorUrl = react$1.useMemo(()=>{
+        const url = new reactNativeUrlPolyfill.URL(`https://${connectorId}.quiltt.app`);
+        url.searchParams.append('mode', 'webview');
+        url.searchParams.append('oauth_redirect_url', encodedOAuthRedirectUrl);
+        url.searchParams.append('agent', `react-native-${version}`);
+        return url.toString();
+    }, [
+        connectorId,
+        encodedOAuthRedirectUrl
+    ]);
+    const [preFlightCheck, setPreFlightCheck] = react$1.useState({
+        checked: false
+    });
+    react$1.useEffect(()=>{
+        if (preFlightCheck.checked) return;
+        const fetchDataAndSetState = async ()=>{
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
+            setPreFlightCheck(connectorUrlStatus);
+        };
+        fetchDataAndSetState();
+    }, [
+        connectorUrl,
+        preFlightCheck
+    ]);
+    const initInjectedJavaScript = react$1.useCallback(()=>{
+        const script = `\
+      const options = {\
+        source: 'quiltt',\
+        type: 'Options',\
+        token: '${session?.token}',\
+        connectorId: '${connectorId}',\
+        connectionId: '${connectionId}',\
+        institution: '${institution}', \
+      };\
+      const compactedOptions = Object.keys(options).reduce((acc, key) => {\
+        if (options[key] !== 'undefined') {\
+          acc[key] = options[key];\
+        }\
+        return acc;\
+      }, {});\
+      window.postMessage(compactedOptions);\
+    `;
+        webViewRef.current?.injectJavaScript(script);
+    }, [
+        connectionId,
+        connectorId,
+        institution,
+        session?.token
+    ]);
+    // allowedListUrl & shouldRender ensure we are only rendering Quiltt, MX and Plaid content in Webview
+    // For other urls, we assume those are bank urls, which needs to be handle in external browser.
+    // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
+    const allowedListUrl = react$1.useMemo(()=>[
+            'quiltt.app',
+            'quiltt.dev',
+            'moneydesktop.com',
+            'cdn.plaid.com/link/v2/stable/link.html'
+        ], []);
+    const isQuilttEvent = react$1.useCallback((url)=>url.protocol === 'quilttconnector:', []);
+    const shouldRender = react$1.useCallback((url)=>{
+        if (isQuilttEvent(url)) return false;
+        if (url.protocol !== 'https:') {
+            return false;
+        }
+        return allowedListUrl.some((href)=>url.href.includes(href));
+    }, [
+        allowedListUrl,
+        isQuilttEvent
+    ]);
+    const clearLocalStorage = ()=>{
+        const script = 'localStorage.clear();';
+        webViewRef.current?.injectJavaScript(script);
+    };
+    const handleQuilttEvent = react$1.useCallback((url)=>{
+        url.searchParams.delete('source');
+        url.searchParams.append('connectorId', connectorId);
+        const metadata = Object.fromEntries(url.searchParams);
+        const eventType = url.host;
+        switch(eventType){
+            case 'Load':
+                initInjectedJavaScript();
+                onEvent?.(react.ConnectorSDKEventType.Load, metadata);
+                onLoad?.(metadata);
+                break;
+            case 'ExitAbort':
+                clearLocalStorage();
+                onEvent?.(react.ConnectorSDKEventType.ExitAbort, metadata);
+                onExit?.(react.ConnectorSDKEventType.ExitAbort, metadata);
+                onExitAbort?.(metadata);
+                break;
+            case 'ExitError':
+                clearLocalStorage();
+                onEvent?.(react.ConnectorSDKEventType.ExitError, metadata);
+                onExit?.(react.ConnectorSDKEventType.ExitError, metadata);
+                onExitError?.(metadata);
+                break;
+            case 'ExitSuccess':
+                clearLocalStorage();
+                onEvent?.(react.ConnectorSDKEventType.ExitSuccess, metadata);
+                onExit?.(react.ConnectorSDKEventType.ExitSuccess, metadata);
+                onExitSuccess?.(metadata);
+                break;
+            case 'Authenticate':
+                break;
+            case 'OauthRequested':
+                handleOAuthUrl(new reactNativeUrlPolyfill.URL(url.searchParams.get('oauthUrl')));
+                break;
+            default:
+                console.log('unhandled event', url);
+                break;
+        }
+    }, [
+        connectorId,
+        initInjectedJavaScript,
+        onEvent,
+        onExit,
+        onExitAbort,
+        onExitError,
+        onExitSuccess,
+        onLoad
+    ]);
+    const requestHandler = react$1.useCallback((request)=>{
+        const url = new reactNativeUrlPolyfill.URL(request.url);
+        if (isQuilttEvent(url)) {
+            handleQuilttEvent(url);
+            return false;
+        }
+        if (shouldRender(url)) return true;
+        // Plaid set oauth url by doing window.location.href = url
+        // So we use `handleOAuthUrl` as a catch all and assume all url got to this step is Plaid OAuth url
+        handleOAuthUrl(url);
+        return false;
+    }, [
+        handleQuilttEvent,
+        isQuilttEvent,
+        shouldRender
+    ]);
+    if (!preFlightCheck.checked) return /*#__PURE__*/ jsxRuntime.jsx(LoadingScreen, {
+        testId: "loading-screen"
+    });
+    if (preFlightCheck.error) return /*#__PURE__*/ jsxRuntime.jsx(ErrorScreen, {
+        testId: "error-screen",
+        error: preFlightCheck.error,
+        cta: ()=>onExitError?.({
+                connectorId
+            })
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactNativeWebview.WebView, {
+            testID: "webview",
+            ref: webViewRef,
+            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
+            // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
+            originWhitelist: [
+                '*'
+            ],
+            source: {
+                uri: connectorUrl
+            },
+            onShouldStartLoadWithRequest: requestHandler,
+            javaScriptEnabled: true,
+            domStorageEnabled: true,
+            webviewDebuggingEnabled: true
+        })
+    });
+};
+QuilttConnector.displayName = 'QuilttConnector';
+
+// Hermes doesn't have atob
+// https://github.com/facebook/hermes/issues/1178
+if (!global.atob) {
+    global.atob = base64.decode;
+}
+
+Object.defineProperty(exports, "QuilttAuthProvider", {
+  enumerable: true,
+  get: function () { return react.QuilttAuthProvider; }
+});
+Object.defineProperty(exports, "QuilttProvider", {
+  enumerable: true,
+  get: function () { return react.QuilttProvider; }
+});
+Object.defineProperty(exports, "QuilttSettingsProvider", {
+  enumerable: true,
+  get: function () { return react.QuilttSettingsProvider; }
+});
+Object.defineProperty(exports, "useQuilttClient", {
+  enumerable: true,
+  get: function () { return react.useQuilttClient; }
+});
+Object.defineProperty(exports, "useQuilttConnector", {
+  enumerable: true,
+  get: function () { return react.useQuilttConnector; }
+});
+Object.defineProperty(exports, "useQuilttSession", {
+  enumerable: true,
+  get: function () { return react.useQuilttSession; }
+});
+Object.defineProperty(exports, "useQuilttSettings", {
+  enumerable: true,
+  get: function () { return react.useQuilttSettings; }
+});
+Object.defineProperty(exports, "useSession", {
+  enumerable: true,
+  get: function () { return react.useSession; }
+});
+Object.defineProperty(exports, "useStorage", {
+  enumerable: true,
+  get: function () { return react.useStorage; }
+});
+exports.QuilttConnector = QuilttConnector;
+Object.keys(core).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return core[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+export * from '@quiltt/core';
+import { ConnectorSDKCallbacks } from '@quiltt/react';
+export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type QuilttConnectorProps = {
+    testId?: string;
+    connectorId: string;
+    connectionId?: string;
+    institution?: string;
+    oauthRedirectUrl: string;
+} & ConnectorSDKCallbacks;
+declare const QuilttConnector: {
+    ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { QuilttConnector };

package/dist/index.d.ts

@@ -4,13 +4,14 @@ export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttCl
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type QuilttConnectorProps = {
+    testId?: string;
     connectorId: string;
     connectionId?: string;
     institution?: string;
     oauthRedirectUrl: string;
 } & ConnectorSDKCallbacks;
 declare const QuilttConnector: {
-    ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
+    ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, }: QuilttConnectorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };