@quiltt/react-native 5.0.0 → 5.0.2

package/dist/components/index.js

@@ -0,0 +1,530 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import { StyleSheet, StatusBar, Platform, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
+import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
+import { URL } from 'react-native-url-polyfill';
+import { WebView } from 'react-native-webview';
+import { smartEncodeURIComponent, isEncoded, getUserAgent, ErrorReporter, normalizeUrlEncoding, getErrorMessage } from '../utils/index.js';
+
+var version = "5.0.2";
+
+const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
+        testID: testId,
+        style: styles$2.AndroidSafeArea,
+        children: children
+    });
+const styles$2 = 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$1.container,
+                styles$1.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$1.title
+                                ],
+                                children: "Cannot connect to the internet."
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            style: [
+                                styles$1.subtitle
+                            ],
+                            children: error
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Pressable, {
+                    style: [
+                        styles$1.pressable
+                    ],
+                    onPress: cta,
+                    children: /*#__PURE__*/ jsx(Text, {
+                        style: [
+                            styles$1.pressableText
+                        ],
+                        children: "Exit"
+                    })
+                })
+            ]
+        })
+    });
+const styles$1 = 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 PREFLIGHT_RETRY_COUNT = 3;
+const parseMetadata = (url, connectorId)=>{
+    const metadata = {
+        connectorId: url.searchParams.get('connectorId') ?? connectorId
+    };
+    const profileId = url.searchParams.get('profileId');
+    if (profileId) metadata.profileId = profileId;
+    const connectionId = url.searchParams.get('connectionId');
+    if (connectionId) metadata.connectionId = connectionId;
+    const connectorSessionId = url.searchParams.get('connectorSession');
+    if (connectorSessionId) metadata.connectorSession = {
+        id: connectorSessionId
+    };
+    return metadata;
+};
+const checkConnectorUrl = async (connectorUrl, errorReporter, retryCount = 0)=>{
+    let responseStatus;
+    try {
+        const response = await fetch(connectorUrl);
+        switch(response.status){
+            case 200:
+                return {
+                    checked: true
+                };
+            case 400:
+                console.log('Invalid configuration');
+                return {
+                    checked: true
+                };
+            case 404:
+                console.error('Connector not found');
+                return {
+                    checked: true
+                };
+            default:
+                throw new Error('Connector URL is not routable.');
+        }
+    } catch (error) {
+        // Log error for debugging
+        console.error(error);
+        // Try again
+        if (retryCount < PREFLIGHT_RETRY_COUNT) {
+            const delay = 50 * 2 ** retryCount;
+            await new Promise((resolve)=>setTimeout(resolve, delay));
+            console.log(`Retrying connection... Attempt ${retryCount + 1}`);
+            return checkConnectorUrl(connectorUrl, errorReporter, retryCount + 1);
+        }
+        // Report error after retries exhausted
+        const errorMessage = getErrorMessage(responseStatus, error);
+        const errorToSend = error || new Error(errorMessage);
+        const context = {
+            connectorUrl,
+            responseStatus
+        };
+        await errorReporter.notify(errorToSend, context);
+        // Return errored preflight check
+        return {
+            checked: true,
+            error: errorMessage
+        };
+    }
+};
+/**
+ * Handle opening OAuth URLs with proper encoding detection and normalization
+ */ const handleOAuthUrl = (oauthUrl)=>{
+    try {
+        // Throw error if oauthUrl is null or undefined
+        if (oauthUrl == null) {
+            throw new Error('OAuth URL missing');
+        }
+        // Convert to string if it's a URL object
+        const urlString = oauthUrl.toString();
+        // Throw error if the resulting string is empty
+        if (!urlString || urlString.trim() === '') {
+            throw new Error('Empty OAuth URL');
+        }
+        // Normalize the URL encoding
+        const normalizedUrl = normalizeUrlEncoding(urlString);
+        // Open the normalized URL
+        Linking.openURL(normalizedUrl);
+    } catch (_error) {
+        console.error('OAuth URL handling error');
+        // Only try the fallback if oauthUrl is not null
+        if (oauthUrl != null) {
+            try {
+                const fallbackUrl = typeof oauthUrl === 'string' ? oauthUrl : oauthUrl.toString();
+                console.log('Attempting fallback OAuth opening');
+                Linking.openURL(fallbackUrl);
+            } catch (_fallbackError) {
+                console.error('Fallback OAuth opening failed');
+            }
+        }
+    }
+};
+const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, institution, oauthRedirectUrl, onEvent, onLoad, onExit, onExitSuccess, onExitAbort, onExitError, testId }, ref)=>{
+    const webViewRef = useRef(null);
+    const { session } = useQuilttSession();
+    const [preFlightCheck, setPreFlightCheck] = useState({
+        checked: false
+    });
+    const [errorReporter, setErrorReporter] = useState(null);
+    const [userAgent, setUserAgent] = useState('');
+    // Initialize error reporter and user agent
+    useEffect(()=>{
+        let mounted = true;
+        const init = async ()=>{
+            const agent = await getUserAgent(version);
+            if (mounted) {
+                setUserAgent(agent);
+                setErrorReporter(new ErrorReporter(agent));
+            }
+        };
+        init();
+        return ()=>{
+            mounted = false;
+        };
+    }, []);
+    // Script to disable scrolling on header
+    const disableHeaderScrollScript = `
+    (function() {
+      const header = document.querySelector('header');
+      if (header) {
+        header.style.position = 'fixed';
+        header.style.top = '0';
+        header.style.left = '0';
+        header.style.right = '0';
+        header.style.zIndex = '1000';
+      }
+    })();
+  `;
+    const onLoadEnd = useCallback(()=>{
+        if (Platform.OS === 'ios') {
+            webViewRef.current?.injectJavaScript(disableHeaderScrollScript);
+        }
+    }, []);
+    // Ensure oauthRedirectUrl is encoded properly - only once
+    const safeOAuthRedirectUrl = useMemo(()=>{
+        return smartEncodeURIComponent(oauthRedirectUrl);
+    }, [
+        oauthRedirectUrl
+    ]);
+    const connectorUrl = useMemo(()=>{
+        if (!userAgent) return null;
+        const url = new URL(`https://${connectorId}.quiltt.app`);
+        // For normal parameters, just append them directly
+        url.searchParams.append('mode', 'webview');
+        url.searchParams.append('agent', userAgent);
+        // For the oauth_redirect_url, we need to be careful
+        // If it's already encoded, we need to decode it once to prevent
+        // the automatic encoding that happens with searchParams.append
+        if (isEncoded(safeOAuthRedirectUrl)) {
+            const decodedOnce = decodeURIComponent(safeOAuthRedirectUrl);
+            url.searchParams.append('oauth_redirect_url', decodedOnce);
+        } else {
+            url.searchParams.append('oauth_redirect_url', safeOAuthRedirectUrl);
+        }
+        return url.toString();
+    }, [
+        connectorId,
+        safeOAuthRedirectUrl,
+        userAgent
+    ]);
+    useEffect(()=>{
+        if (preFlightCheck.checked || !connectorUrl || !errorReporter) return;
+        const fetchDataAndSetState = async ()=>{
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl, errorReporter);
+            setPreFlightCheck(connectorUrlStatus);
+        };
+        fetchDataAndSetState();
+    }, [
+        connectorUrl,
+        preFlightCheck,
+        errorReporter
+    ]);
+    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
+    ]);
+    const isQuilttEvent = useCallback((url)=>url.protocol === 'quilttconnector:', []);
+    const shouldRender = useCallback((url)=>!isQuilttEvent(url), [
+        isQuilttEvent
+    ]);
+    const clearLocalStorage = useCallback(()=>{
+        const script = 'localStorage.clear();';
+        webViewRef.current?.injectJavaScript(script);
+    }, []);
+    const handleQuilttEvent = useCallback((url)=>{
+        url.searchParams.delete('source');
+        url.searchParams.append('connectorId', connectorId);
+        const metadata = parseMetadata(url, connectorId);
+        requestAnimationFrame(()=>{
+            const eventType = url.host;
+            switch(eventType){
+                case 'Load':
+                    console.log('Event: Load');
+                    initInjectedJavaScript();
+                    onEvent?.(ConnectorSDKEventType.Load, metadata);
+                    onLoad?.(metadata);
+                    break;
+                case 'ExitAbort':
+                    console.log('Event: ExitAbort');
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitAbort, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitAbort, metadata);
+                    onExitAbort?.(metadata);
+                    break;
+                case 'ExitError':
+                    console.log('Event: ExitError');
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitError, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitError, metadata);
+                    onExitError?.(metadata);
+                    break;
+                case 'ExitSuccess':
+                    console.log('Event: ExitSuccess');
+                    clearLocalStorage();
+                    onEvent?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExit?.(ConnectorSDKEventType.ExitSuccess, metadata);
+                    onExitSuccess?.(metadata);
+                    break;
+                case 'Authenticate':
+                    console.log('Event: Authenticate');
+                    break;
+                case 'Navigate':
+                    {
+                        console.log('Event: Navigate');
+                        const navigateUrl = url.searchParams.get('url');
+                        if (navigateUrl) {
+                            if (isEncoded(navigateUrl)) {
+                                try {
+                                    const decodedUrl = decodeURIComponent(navigateUrl);
+                                    handleOAuthUrl(decodedUrl);
+                                } catch (_error) {
+                                    console.error('Navigate URL decoding failed, using original');
+                                    handleOAuthUrl(navigateUrl);
+                                }
+                            } else {
+                                handleOAuthUrl(navigateUrl);
+                            }
+                        } else {
+                            console.error('Navigate URL missing from request');
+                        }
+                        break;
+                    }
+                // NOTE: The `OauthRequested` is deprecated and should not be used
+                default:
+                    console.log(`Unhandled event: ${eventType}`);
+                    break;
+            }
+        });
+    }, [
+        clearLocalStorage,
+        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
+    ]);
+    // Expose method to handle OAuth callbacks from parent component
+    useImperativeHandle(ref, ()=>({
+            handleOAuthCallback: (callbackUrl)=>{
+                try {
+                    console.log('Handling OAuth callback:', callbackUrl);
+                    const url = new URL(callbackUrl);
+                    // Extract OAuth callback parameters
+                    const oauthParams = {};
+                    url.searchParams.forEach((value, key)=>{
+                        oauthParams[key] = value;
+                    });
+                    // Send OAuth callback data to the connector via postMessage
+                    // This preserves the connector's state and allows events to fire properly
+                    const message = {
+                        source: 'quiltt',
+                        type: 'OAuthCallback',
+                        data: {
+                            url: callbackUrl,
+                            params: oauthParams
+                        }
+                    };
+                    const script = `
+              (function() {
+                try {
+                  window.postMessage(${JSON.stringify(message)});
+                  console.log('OAuth callback message sent to connector');
+                } catch (e) {
+                  console.error('Failed to send OAuth callback message:', e);
+                }
+              })();
+              true;
+            `;
+                    webViewRef.current?.injectJavaScript(script);
+                } catch (error) {
+                    console.error('Error handling OAuth callback:', error);
+                }
+            }
+        }), []);
+    if (!preFlightCheck.checked || !connectorUrl) {
+        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, {
+            ref: webViewRef,
+            // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
+            domStorageEnabled: true,
+            javaScriptEnabled: true,
+            onLoadEnd: onLoadEnd,
+            onShouldStartLoadWithRequest: requestHandler,
+            originWhitelist: [
+                '*'
+            ],
+            scrollEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            showsVerticalScrollIndicator: false,
+            source: {
+                uri: connectorUrl
+            },
+            style: styles.webview,
+            testID: "webview",
+            webviewDebuggingEnabled: true,
+            ...Platform.OS === 'ios' ? {
+                allowsBackForwardNavigationGestures: false,
+                allowsInlineMediaPlayback: true,
+                automaticallyAdjustContentInsets: false,
+                bounces: false,
+                contentInsetAdjustmentBehavior: 'never',
+                dataDetectorTypes: 'none',
+                decelerationRate: 'normal',
+                keyboardDisplayRequiresUserAction: false,
+                scrollEventThrottle: 16,
+                startInLoadingState: true
+            } : {
+                androidLayerType: 'hardware',
+                cacheEnabled: true,
+                cacheMode: 'LOAD_CACHE_ELSE_NETWORK',
+                overScrollMode: 'never'
+            }
+        })
+    });
+});
+// Add styles for the WebView container
+const styles = StyleSheet.create({
+    webviewContainer: {
+        flex: 1,
+        backgroundColor: '#ffffff'
+    },
+    webview: {
+        flex: 1,
+        overflow: 'hidden'
+    }
+});
+QuilttConnector.displayName = 'QuilttConnector';
+
+export { QuilttConnector, checkConnectorUrl, handleOAuthUrl };

package/dist/index.cjs

@@ -0,0 +1,76 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base64 = require('base-64');
+var core = require('@quiltt/core');
+var react = require('@quiltt/react');
+var index_cjs = require('./components/index.cjs');
+var index_cjs$1 = require('./providers/index.cjs');
+
+// Hermes doesn't have atob
+// https://github.com/facebook/hermes/issues/1178
+if (!global.atob) {
+    global.atob = base64.decode;
+}
+
+Object.defineProperty(exports, "QuilttSettingsProvider", {
+  enumerable: true,
+  get: function () { return react.QuilttSettingsProvider; }
+});
+Object.defineProperty(exports, "useLazyQuery", {
+  enumerable: true,
+  get: function () { return react.useLazyQuery; }
+});
+Object.defineProperty(exports, "useMutation", {
+  enumerable: true,
+  get: function () { return react.useMutation; }
+});
+Object.defineProperty(exports, "useQuery", {
+  enumerable: true,
+  get: function () { return react.useQuery; }
+});
+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; }
+});
+Object.defineProperty(exports, "useSubscription", {
+  enumerable: true,
+  get: function () { return react.useSubscription; }
+});
+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]; }
+  });
+});
+Object.keys(index_cjs).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return index_cjs[k]; }
+  });
+});
+Object.keys(index_cjs$1).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return index_cjs$1[k]; }
+  });
+});

package/dist/index.d.ts

@@ -1,59 +1,4 @@
 export * from '@quiltt/core';
-import { ConnectorSDKCallbacks, QuilttAuthProviderProps as QuilttAuthProviderProps$1, QuilttSettingsProviderProps } from '@quiltt/react';
 export { ApolloQueryResult, DocumentNode, ErrorPolicy, FetchPolicy, MutationHookOptions, MutationResult, NormalizedCacheObject, OperationVariables, QueryHookOptions, QueryResult, QuilttSettingsProvider, SubscriptionHookOptions, SubscriptionResult, TypedDocumentNode, WatchQueryFetchPolicy, useLazyQuery, useMutation, useQuery, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage, useSubscription } from '@quiltt/react';
-import * as react from 'react';
-import { FC } from 'react';
-import { URL } from 'react-native-url-polyfill';
-import { NoticeTransportPayload } from '@honeybadger-io/core/build/src/types';
-
-declare class ErrorReporter {
-    private noticeUrl;
-    private apiKey;
-    private logger;
-    private userAgent;
-    constructor(userAgent: string);
-    notify(error: Error, context?: any): Promise<void>;
-    buildPayload(error: Error, localContext?: {}): Promise<Partial<NoticeTransportPayload>>;
-}
-
-type PreFlightCheck = {
-    checked: boolean;
-    error?: string;
-};
-declare const checkConnectorUrl: (connectorUrl: string, errorReporter: ErrorReporter, retryCount?: number) => Promise<PreFlightCheck>;
-/**
- * Handle opening OAuth URLs with proper encoding detection and normalization
- */
-declare const handleOAuthUrl: (oauthUrl: URL | string | null | undefined) => void;
-type QuilttConnectorHandle = {
-    handleOAuthCallback: (url: string) => void;
-};
-declare const QuilttConnector: react.ForwardRefExoticComponent<{
-    connectorId: string;
-    connectionId?: string;
-    institution?: string;
-    oauthRedirectUrl: string;
-    testId?: string;
-} & ConnectorSDKCallbacks & react.RefAttributes<QuilttConnectorHandle>>;
-
-type QuilttAuthProviderProps = QuilttAuthProviderProps$1;
-/**
- * React Native-specific QuilttAuthProvider that injects platform information
- * into the GraphQL client's User-Agent header.
- *
- * If a token is provided, will validate the token against the api and then import
- * it into trusted storage. While this process is happening, the component is put
- * into a loading state and the children are not rendered to prevent race conditions
- * from triggering within the transitionary state.
- */
-declare const QuilttAuthProvider: FC<QuilttAuthProviderProps>;
-
-type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps;
-/**
- * React Native-specific QuilttProvider that combines settings and auth providers
- * with platform-specific GraphQL client configuration.
- */
-declare const QuilttProvider: FC<QuilttProviderProps>;
-
-export { QuilttAuthProvider, QuilttConnector, QuilttProvider, checkConnectorUrl, handleOAuthUrl };
-export type { PreFlightCheck, QuilttAuthProviderProps, QuilttConnectorHandle };
+export * from './components/index.js';
+export * from './providers/index.js';