@quiltt/react-native 3.6.3 → 3.6.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/dist/index.cjs

@@ -5,103 +5,16 @@ var core = require('@quiltt/core');
 var react = require('@quiltt/react');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('react');
-var reactNative = require('react-native');
 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');
 
-const ErrorReporterConfig = {
-    honeybadger_api_key: 'undefined'
-};
-
 // Generated by genversion.
-const version = '3.6.3';
-
-// 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 version = '3.6.4';
 
-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 AndroidSafeAreaView = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsxRuntime.jsx(reactNative.SafeAreaView, {
+        testID: testId,
         style: styles$1.AndroidSafeArea,
         children: children
     });
@@ -113,7 +26,8 @@ const styles$1 = reactNative.StyleSheet.create({
     }
 });
 
-const ErrorScreen = ({ error, cta })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
         children: /*#__PURE__*/ jsxRuntime.jsxs(reactNative.View, {
             style: [
                 styles.container,
@@ -196,7 +110,8 @@ const styles = reactNative.StyleSheet.create({
     }
 });
 
-const LoadingScreen = ()=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
+        testId: testId,
         children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.View, {
             style: {
                 flex: 1,
@@ -204,15 +119,152 @@ const LoadingScreen = ()=>/*#__PURE__*/ jsxRuntime.jsx(AndroidSafeAreaView, {
                 alignItems: 'center'
             },
             children: /*#__PURE__*/ jsxRuntime.jsx(reactNative.ActivityIndicator, {
+                testID: "activity-indicator",
                 size: "large",
-                color: "#0000ff"
+                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 QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
+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), [
@@ -231,59 +283,15 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
     const [preFlightCheck, setPreFlightCheck] = react$1.useState({
         checked: false
     });
-    const checkConnectorUrl = react$1.useCallback(async (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;
-        }
-        // Retry logic in case of error or response not OK
-        if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
-            const delay = 50 * Math.pow(2, retryCount) // Exponential back-off
-            ;
-            await new Promise((resolve)=>setTimeout(resolve, delay)) // delay with exponential back-off for each retry
-            ;
-            console.log(`Retrying... Attempt number ${retryCount + 1}`);
-            return checkConnectorUrl(retryCount + 1);
-        }
-        const errorMessage = getErrorMessage(responseStatus, error);
-        const errorToSend = error || new Error(errorMessage);
-        const context = {
-            connectorUrl,
-            responseStatus
-        };
-        if (responseStatus !== 404) errorReporter.send(errorToSend, context);
-        return {
-            checked: true,
-            error: errorMessage
-        };
-    }, [
-        connectorUrl
-    ]);
     react$1.useEffect(()=>{
         if (preFlightCheck.checked) return;
         const fetchDataAndSetState = async ()=>{
-            const connectorUrlStatus = await checkConnectorUrl();
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
             setPreFlightCheck(connectorUrlStatus);
         };
         fetchDataAndSetState();
     }, [
-        checkConnectorUrl,
+        connectorUrl,
         preFlightCheck
     ]);
     const initInjectedJavaScript = react$1.useCallback(()=>{
@@ -313,7 +321,7 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
     ]);
     // 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.
+    // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
     const allowedListUrl = react$1.useMemo(()=>[
             'quiltt.app',
             'quiltt.dev',
@@ -335,13 +343,6 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         const script = 'localStorage.clear();';
         webViewRef.current?.injectJavaScript(script);
     };
-    const handleOAuthUrl = react$1.useCallback((oauthUrl)=>{
-        if (oauthUrl.protocol !== 'https:') {
-            console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`);
-            return;
-        }
-        reactNative.Linking.openURL(oauthUrl.href);
-    }, []);
     const handleQuilttEvent = react$1.useCallback((url)=>{
         url.searchParams.delete('source');
         url.searchParams.append('connectorId', connectorId);
@@ -382,7 +383,6 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         }
     }, [
         connectorId,
-        handleOAuthUrl,
         initInjectedJavaScript,
         onEvent,
         onExit,
@@ -403,22 +403,26 @@ const QuilttConnector = ({ connectorId, connectionId, institution, oauthRedirect
         handleOAuthUrl(url);
         return false;
     }, [
-        handleOAuthUrl,
         handleQuilttEvent,
         isQuilttEvent,
         shouldRender
     ]);
-    if (!preFlightCheck.checked) return /*#__PURE__*/ jsxRuntime.jsx(LoadingScreen, {});
+    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 keep sending window.location = 'about:srcdoc' and causes some noise in RN
+            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
             // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
             originWhitelist: [
                 '*'

package/dist/index.d.cts

@@ -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;
 };
 

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;
 };
 

package/dist/index.js

@@ -0,0 +1,447 @@
+import { decode } from 'base-64';
+export * from '@quiltt/core';
+import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
+export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { URL } from 'react-native-url-polyfill';
+import { WebView } from 'react-native-webview';
+import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
+import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
+
+// Generated by genversion.
+const version = '3.6.4';
+
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
+        testID: testId,
+        style: styles$1.AndroidSafeArea,
+        children: children
+    });
+const styles$1 = StyleSheet.create({
+    AndroidSafeArea: {
+        flex: 1,
+        backgroundColor: 'white',
+        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
+    }
+});
+
+const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsxs(View, {
+            style: [
+                styles.container,
+                styles.padding
+            ],
+            children: [
+                /*#__PURE__*/ jsxs(View, {
+                    style: {
+                        flex: 1,
+                        justifyContent: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(View, {
+                            style: {
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginVertical: 10
+                            },
+                            children: /*#__PURE__*/ jsx(Text, {
+                                style: [
+                                    styles.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            style: [
+                                styles.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Pressable, {
+                    style: [
+                        styles.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsx(Text, {
+                        style: [
+                            styles.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles = 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__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsx(View, {
+            style: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            children: /*#__PURE__*/ jsx(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 = generateStackTrace();
+        notice.backtrace = makeBacktrace(notice.stack);
+        return {
+            notifier,
+            error: {
+                class: notice.name,
+                message: notice.message,
+                backtrace: notice.backtrace,
+                // fingerprint: this.calculateFingerprint(notice),
+                tags: notice.tags || [],
+                causes: 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(`${Platform.OS} ${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;
+    }
+    Linking.openURL(oauthUrl.href);
+};
+
+const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError })=>{
+    const webViewRef = useRef(null);
+    const { session } = useQuilttSession();
+    const encodedOAuthRedirectUrl = useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
+        oauthRedirectUrl
+    ]);
+    const connectorUrl = useMemo(()=>{
+        const url = new 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] = useState({
+        checked: false
+    });
+    useEffect(()=>{
+        if (preFlightCheck.checked) return;
+        const fetchDataAndSetState = async ()=>{
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
+            setPreFlightCheck(connectorUrlStatus);
+        };
+        fetchDataAndSetState();
+    }, [
+        connectorUrl,
+        preFlightCheck
+    ]);
+    const initInjectedJavaScript = 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 = useMemo(()=>[
+            'quiltt.app',
+            'quiltt.dev',
+            'moneydesktop.com',
+            'cdn.plaid.com/link/v2/stable/link.html'
+        ], []);
+    const isQuilttEvent = useCallback((url)=>url.protocol === 'quilttconnector:', []);
+    const shouldRender = 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 = 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?.(ConnectorSDKEventType.Load, metadata);
+                onLoad?.(metadata);
+                break;
+            case 'ExitAbort':
+                clearLocalStorage();
+                onEvent?.(ConnectorSDKEventType.ExitAbort, metadata);
+                onExit?.(ConnectorSDKEventType.ExitAbort, metadata);
+                onExitAbort?.(metadata);
+                break;
+            case 'ExitError':
+                clearLocalStorage();
+                onEvent?.(ConnectorSDKEventType.ExitError, metadata);
+                onExit?.(ConnectorSDKEventType.ExitError, metadata);
+                onExitError?.(metadata);
+                break;
+            case 'ExitSuccess':
+                clearLocalStorage();
+                onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                onExit?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                onExitSuccess?.(metadata);
+                break;
+            case 'Authenticate':
+                break;
+            case 'OauthRequested':
+                handleOAuthUrl(new URL(url.searchParams.get('oauthUrl')));
+                break;
+            default:
+                console.log('unhandled event', url);
+                break;
+        }
+    }, [
+        connectorId,
+        initInjectedJavaScript,
+        onEvent,
+        onExit,
+        onExitAbort,
+        onExitError,
+        onExitSuccess,
+        onLoad
+    ]);
+    const requestHandler = useCallback((request)=>{
+        const url = new 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__*/ jsx(LoadingScreen, {
+        testId: "loading-screen"
+    });
+    if (preFlightCheck.error) return /*#__PURE__*/ jsx(ErrorScreen, {
+        testId: "error-screen",
+        error: preFlightCheck.error,
+        cta: ()=>onExitError?.({
+                connectorId
+            })
+    });
+    return /*#__PURE__*/ jsx(AndroidSafeAreaView, {
+        testId: testId,
+        children: /*#__PURE__*/ jsx(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 = decode;
+}
+
+export { QuilttConnector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "description": "React Native components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -11,12 +11,14 @@
   "license": "MIT",
   "type": "module",
   "exports": {
+    "import": {
+      "default": "./dist/index.js"
+    },
     "require": {
-      "import": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**",
@@ -25,14 +27,14 @@
   ],
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
-    "@quiltt/react": "3.6.3",
-    "@quiltt/core": "3.6.3"
+    "@quiltt/core": "3.6.4",
+    "@quiltt/react": "3.6.4"
   },
   "devDependencies": {
     "@apollo/client": "3.9.9",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@types/base-64": "0.1.0",
-    "@types/node": "20.12.2",
+    "@types/node": "20.12.7",
     "@types/react": "18.2.73",
     "@types/react-native": "0.72.5",
     "@typescript-eslint/eslint-plugin": "5.60.1",

package/src/components/AndroidSafeAreaView.tsx

@@ -2,8 +2,14 @@ import { PropsWithChildren } from 'react'
 
 import { SafeAreaView, StyleSheet, Platform, StatusBar } from 'react-native'
 
-export const AndroidSafeAreaView = ({ children }: PropsWithChildren) => (
-  <SafeAreaView style={styles.AndroidSafeArea}>{children}</SafeAreaView>
+type AndroidSafeAreaViewProps = PropsWithChildren & {
+  testId?: string
+}
+
+export const AndroidSafeAreaView = ({ testId, children }: AndroidSafeAreaViewProps) => (
+  <SafeAreaView testID={testId} style={styles.AndroidSafeArea}>
+    {children}
+  </SafeAreaView>
 )
 
 const styles = StyleSheet.create({

package/src/components/ErrorScreen.tsx

@@ -2,13 +2,14 @@ import { View, Text, Pressable, StyleSheet } from 'react-native'
 
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 
-type ErrorScreenProp = {
+type ErrorScreenProps = {
+  testId?: string
   error: string
   cta: () => void
 }
 
-export const ErrorScreen = ({ error, cta }: ErrorScreenProp) => (
-  <AndroidSafeAreaView>
+export const ErrorScreen = ({ testId, error, cta }: ErrorScreenProps) => (
+  <AndroidSafeAreaView testId={testId}>
     <View style={[styles.container, styles.padding]}>
       <View style={{ flex: 1, justifyContent: 'center' }}>
         <View

package/src/components/LoadingScreen.tsx

@@ -2,10 +2,14 @@ import { ActivityIndicator, View } from 'react-native'
 
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 
-export const LoadingScreen = () => (
-  <AndroidSafeAreaView>
+type LoadingScreenProps = {
+  testId?: string
+}
+
+export const LoadingScreen = ({ testId }: LoadingScreenProps) => (
+  <AndroidSafeAreaView testId={testId}>
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator testID="activity-indicator" size="large" color="#5928A3" />
     </View>
   </AndroidSafeAreaView>
 )

package/src/components/QuilttConnector.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { Linking, Platform } from 'react-native'
 // React Native's URL implementation is incomplete
 // https://github.com/facebook/react-native/issues/16434
 import { URL } from 'react-native-url-polyfill'
@@ -14,29 +13,23 @@ import {
   useQuilttSession,
 } from '@quiltt/react'
 
-import { ErrorReporter, getErrorMessage } from '../utils'
-import { version } from '../version'
+import { version } from '@/version'
 import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
-
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
+import { checkConnectorUrl, handleOAuthUrl } from '@/utils'
+import type { PreFlightCheck } from '@/utils'
 
 type QuilttConnectorProps = {
+  testId?: string
   connectorId: string
   connectionId?: string
   institution?: string
   oauthRedirectUrl: string
 } & ConnectorSDKCallbacks
 
-type PreFlightCheck = {
-  checked: boolean
-  error?: string
-}
-
-const PREFLIGHT_RETRY_COUNT = 3
-
 const QuilttConnector = ({
+  testId,
   connectorId,
   connectionId,
   institution,
@@ -63,52 +56,14 @@ const QuilttConnector = ({
   }, [connectorId, encodedOAuthRedirectUrl])
   const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
 
-  const checkConnectorUrl = useCallback(
-    async (retryCount = 0): Promise<PreFlightCheck> => {
-      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
-      }
-
-      // Retry logic in case of error or response not OK
-      if (errorOccurred && retryCount < PREFLIGHT_RETRY_COUNT) {
-        const delay = 50 * Math.pow(2, retryCount) // Exponential back-off
-        await new Promise((resolve) => setTimeout(resolve, delay)) // delay with exponential back-off for each retry
-        console.log(`Retrying... Attempt number ${retryCount + 1}`)
-        return checkConnectorUrl(retryCount + 1)
-      }
-
-      const errorMessage = getErrorMessage(responseStatus, error as Error)
-      const errorToSend = (error as Error) || new Error(errorMessage)
-      const context = { connectorUrl, responseStatus }
-      if (responseStatus !== 404) errorReporter.send(errorToSend, context)
-      return { checked: true, error: errorMessage }
-    },
-    [connectorUrl]
-  )
-
   useEffect(() => {
     if (preFlightCheck.checked) return
     const fetchDataAndSetState = async () => {
-      const connectorUrlStatus = await checkConnectorUrl()
+      const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
       setPreFlightCheck(connectorUrlStatus)
     }
     fetchDataAndSetState()
-  }, [checkConnectorUrl, preFlightCheck])
+  }, [connectorUrl, preFlightCheck])
 
   const initInjectedJavaScript = useCallback(() => {
     const script = `\
@@ -133,7 +88,7 @@ const QuilttConnector = ({
 
   // 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.
+  // TODO: Convert it to a list from Quiltt Server to prevent MX/ Plaid changes.
   const allowedListUrl = useMemo(
     () => [
       'quiltt.app',
@@ -162,14 +117,6 @@ const QuilttConnector = ({
     webViewRef.current?.injectJavaScript(script)
   }
 
-  const handleOAuthUrl = useCallback((oauthUrl: URL) => {
-    if (oauthUrl.protocol !== 'https:') {
-      console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`)
-      return
-    }
-    Linking.openURL(oauthUrl.href)
-  }, [])
-
   const handleQuilttEvent = useCallback(
     (url: URL) => {
       url.searchParams.delete('source')
@@ -202,7 +149,7 @@ const QuilttConnector = ({
           onExitSuccess?.(metadata)
           break
         case 'Authenticate':
-          // @todo handle Authenticate
+          // TODO: handle Authenticate
           break
         case 'OauthRequested':
           handleOAuthUrl(new URL(url.searchParams.get('oauthUrl') as string))
@@ -214,7 +161,6 @@ const QuilttConnector = ({
     },
     [
       connectorId,
-      handleOAuthUrl,
       initInjectedJavaScript,
       onEvent,
       onExit,
@@ -239,18 +185,25 @@ const QuilttConnector = ({
       handleOAuthUrl(url)
       return false
     },
-    [handleOAuthUrl, handleQuilttEvent, isQuilttEvent, shouldRender]
+    [handleQuilttEvent, isQuilttEvent, shouldRender]
   )
 
-  if (!preFlightCheck.checked) return <LoadingScreen />
+  if (!preFlightCheck.checked) return <LoadingScreen testId="loading-screen" />
   if (preFlightCheck.error)
-    return <ErrorScreen error={preFlightCheck.error} cta={() => onExitError?.({ connectorId })} />
+    return (
+      <ErrorScreen
+        testId="error-screen"
+        error={preFlightCheck.error}
+        cta={() => onExitError?.({ connectorId })}
+      />
+    )
 
   return (
-    <AndroidSafeAreaView>
+    <AndroidSafeAreaView testId={testId}>
       <WebView
+        testID="webview"
         ref={webViewRef}
-        // Plaid keep sending window.location = 'about:srcdoc' and causes some noise in RN
+        // 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 }}

package/src/utils/connector/checkConnectorUrl.ts

@@ -0,0 +1,47 @@
+import { getErrorMessage, ErrorReporter } from '../error'
+import { Platform } from 'react-native'
+
+const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
+const PREFLIGHT_RETRY_COUNT = 3
+
+export type PreFlightCheck = {
+  checked: boolean
+  error?: string
+}
+
+export const checkConnectorUrl = async (
+  connectorUrl: string,
+  retryCount = 0
+): Promise<PreFlightCheck> => {
+  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 as Error)
+  const errorToSend = (error as Error) || new Error(errorMessage)
+  const context = { connectorUrl, responseStatus }
+  if (responseStatus !== 404) await errorReporter.send(errorToSend, context)
+  return { checked: true, error: errorMessage }
+}

package/src/utils/connector/handleOAuthUrl.ts

@@ -0,0 +1,9 @@
+import { Linking } from 'react-native'
+
+export const handleOAuthUrl = (oauthUrl: URL) => {
+  if (oauthUrl.protocol !== 'https:') {
+    console.log(`handleOAuthUrl - Skipping non https url - ${oauthUrl.href}`)
+    return
+  }
+  Linking.openURL(oauthUrl.href)
+}

package/src/utils/connector/index.ts

@@ -0,0 +1,2 @@
+export * from './checkConnectorUrl'
+export * from './handleOAuthUrl'

package/src/utils/{ErrorReporter.ts → error/ErrorReporter.ts}

@@ -1,10 +1,9 @@
 // Quick hack to send error to Honeybadger to debug why the connector is not routable
-
 import type { Notice, NoticeTransportPayload } from '@honeybadger-io/core/build/src/types'
 import { generateStackTrace, getCauses, makeBacktrace } from '@honeybadger-io/core/build/src/util'
 
 import { ErrorReporterConfig } from './ErrorReporterConfig'
-import { version } from '../version'
+import { version } from '../../version'
 
 const notifier = {
   name: 'Quiltt React Native SDK Reporter',

package/src/utils/{ErrorReporterConfig.ts → error/ErrorReporterConfig.ts}

@@ -1,4 +1,3 @@
-
 export const ErrorReporterConfig = {
   honeybadger_api_key: 'undefined',
 }

package/src/utils/{getErrorMessage.ts → error/getErrorMessage.ts}

@@ -1,9 +1,7 @@
-const getErrorMessage = (responseStatus?: number, error?: Error): string => {
+export const getErrorMessage = (responseStatus?: number, error?: Error): string => {
   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'
 }
-
-export { getErrorMessage }

package/src/utils/error/index.ts

@@ -0,0 +1,2 @@
+export * from './ErrorReporter'
+export * from './getErrorMessage'

package/src/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './ErrorReporter'
-export * from './getErrorMessage'
+export * from './connector'
+export * from './error'

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '3.6.3'
+export const version = '3.6.4'