partner_react_native_sdk 0.1.0 → 0.1.2

package/src/helpers/webview.tsx

@@ -1,231 +1,260 @@
 import { WebView as RNWebView } from 'react-native-webview';
 import {
-    BackHandler,
-    Platform,
-    Linking,
-    SafeAreaView,
-    ActivityIndicator,
-    View,
-    ToastAndroid,
-    StatusBar,
+  BackHandler,
+  Platform,
+  Linking,
+  SafeAreaView,
+  ActivityIndicator,
+  View,
+  ToastAndroid,
+  StatusBar,
 } from 'react-native';
 import { useEffect, useRef, useState } from 'react';
 
-import { type WebViewProps, type WebViewNavigation } from 'react-native-webview';
-import { WebViewCallback, type WebViewCallbackFunction } from './utils/webviewCallback';
-import { check, PERMISSIONS, request, RESULTS, type Permission } from 'react-native-permissions';
+import {
+  type WebViewProps,
+  type WebViewNavigation,
+} from 'react-native-webview';
+import {
+  WebViewCallback,
+  type WebViewCallbackFunction,
+} from './utils/webviewCallback';
+import {
+  check,
+  PERMISSIONS,
+  request,
+  RESULTS,
+  type Permission,
+} from 'react-native-permissions';
 import FileViewer from 'react-native-file-viewer';
 import RNFS from 'react-native-fs';
 import CookieManager from '@react-native-cookies/cookies';
+import { AnalyticsLogger } from './analytics/analytics_logger';
 
 interface ExtendedWebViewProps extends WebViewProps {
-    onPermissionRequest?: (event: any) => void;
-    androidPermissions?: {
-        camera?: boolean;
-        microphone?: boolean;
-        geolocation?: boolean;
-    };
+  onPermissionRequest?: (event: any) => void;
+  androidPermissions?: {
+    camera?: boolean;
+    microphone?: boolean;
+    geolocation?: boolean;
+  };
 }
 interface WebViewCustomProps {
-    url: string;
-    options?: Partial<ExtendedWebViewProps>;
-    onCallback?: WebViewCallbackFunction
-    hostName?: string;
-    whitelistedUrls?: string[];
-    onPageFinished?: () => void;
+  url: string;
+  options?: Partial<ExtendedWebViewProps>;
+  onCallback?: WebViewCallbackFunction;
+  hostName?: string;
+  whitelistedUrls?: string[];
+  onPageFinished?: () => void;
 }
 
 export const WebView = ({
-    url,
-    options,
-    onCallback,
-    hostName,
-    whitelistedUrls = [],
-    onPageFinished,
+  url,
+  options,
+  onCallback,
+  hostName,
+  whitelistedUrls = [],
+  onPageFinished,
 }: WebViewCustomProps) => {
-    const webviewRef = useRef<RNWebView | null>(null);;
-    const [canGoBack, setCanGoBack] = useState(false);
-    // const [hasRedirected, setHasRedirected] = useState(false);
-    const [, setToast] = useState<{ visible: boolean; message: string } | null>(null);
-
-    const handleExternalUrl = async (url: string) => {
-        try {
-            await new Promise(resolve => setTimeout(resolve, 200));
-            await Linking.openURL(url);
-        } catch (error) {
-            // Implement your toast here
-            if (Platform.OS === 'android') {
-                ToastAndroid.show("Oops! Something went wrong. Please try again.", ToastAndroid.LONG);
-            }
-            console.log('Application not found to open link');
-        }
-    };
-    const showToast_with_code_message = (syntheticEvent: any) => {
-        const { nativeEvent } = syntheticEvent;
-        const errorCodesToHandle = [-6, -8, -10];
-        if (errorCodesToHandle.includes(nativeEvent.code)) {
-            const message = `WebView Error: [${nativeEvent.code}] ${nativeEvent.description}`;
-            setToast({ visible: true, message });
-            if (Platform.OS === 'android') {
-                ToastAndroid.show("Oops! Something went wrong. Please try again.", ToastAndroid.LONG);
-            }
-            setTimeout(() => setToast(null), 5000);
-            onCallback?.(
-                WebViewCallback.redirect("WEBVIEW_ERROR")
-            )
-        }
-    };
-
-    const getQueryParam = (url: string, param: string): string | null => {
-        const match = url.match(new RegExp('[?&]' + param + '=([^&#]*)'));
-        return match && match[1] ? decodeURIComponent(match[1]) : null;
-    };
-
-    const downloadAndOpenFile = async (fileUrl: string) => {
-        try {
-            console.log('Starting file download...', fileUrl);
-
-            // Get cookies using CookieManager
-            let cookieString = '';
-            try {
-                const cookies = await CookieManager.get(fileUrl);
-                cookieString = Object.keys(cookies)
-                    .map(key => `${key}=${cookies[key]?.value ?? ''}`)
-                    .join('; ');
-            } catch (e) {
-                console.error('Failed to get cookies:', e);
-            }
-
-            // Create a clean filename from the URL
-            const timestamp = new Date().getTime();
-            // Extract only the last part of the path for the filename
-            const urlParts = fileUrl.split('/');
-            const lastPart = urlParts[urlParts.length - 1];
-            const fileExt = lastPart?.split('.').pop() || 'pdf';
-            const fileName = `${timestamp}.${fileExt}`;
-
-            const downloadPath = Platform.select({
-                ios: `${RNFS.DocumentDirectoryPath}/${fileName}`,
-                android: `${RNFS.DownloadDirectoryPath}/${fileName}`
-            });
-
-            if (!downloadPath) {
-                throw new Error('Could not determine download path');
-            }
-
-            console.log('Downloading to:', downloadPath);
-
-            const options = {
-                fromUrl: fileUrl,
-                toFile: downloadPath,
-                headers: {
-                    'Cookie': cookieString,
-                    'Accept': 'application/pdf',
-                    'Content-Type': 'application/pdf'
-                },
-                background: true,
-                begin: (res: any) => {
-                    console.log('Download started with headers:', res);
-                },
-
-            };
-
-            const response = await RNFS.downloadFile(options).promise;
-
-            if (response.statusCode === 200) {
-                console.log('File downloaded to:', downloadPath);
-
-                if (Platform.OS === 'android') {
-                    ToastAndroid.show('File downloaded successfully', ToastAndroid.SHORT);
-                }
-
-                await FileViewer.open(downloadPath, {
-                    showOpenWithDialog: true,
-                    onDismiss: () => {
-                        if (Platform.OS === 'ios') {
-                            RNFS.unlink(downloadPath).catch(console.error);
-                        }
-                    }
-                });
-            } else {
-                throw new Error(`Download failed with status ${response.statusCode}`);
-            }
-
-        } catch (error) {
-            console.error('File download/open error:', error);
-
-        }
-    };
-
-
-    const handleOnShouldStartLoadWithRequest = (event: WebViewNavigation) => {
-        const { url } = event;
-        console.log('URL:', url);
-        if (url === 'about:blank' || url === 'about:srcdoc') {
-            return true;
-        }
-
-
-        if (url?.includes('/session-expired?status=') || url?.includes("/redirect?status=")) {
-            const status = getQueryParam(url, 'status');
+  const webviewRef = useRef<RNWebView | null>(null);
+  const [canGoBack, setCanGoBack] = useState(false);
+  const _analyticsLogger = new AnalyticsLogger();
+  // const [hasRedirected, setHasRedirected] = useState(false);
+  const [, setToast] = useState<{ visible: boolean; message: string } | null>(
+    null
+  );
+  const handleExternalUrl = async (url: string) => {
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      await Linking.openURL(url);
+      // _analyticsLogger.logEvent({ event: 'REACT_NATIVE_OPEN_URL_EXTERNALLY' });
+    } catch (error) {
+      // Implement your toast here
+      if (Platform.OS === 'android') {
+        ToastAndroid.show(
+          'Oops! Something went wrong. Please try again.',
+          ToastAndroid.LONG
+        );
+      }
+      console.log('Application not found to open link');
+    }
+  };
+  const showToast_with_code_message = (syntheticEvent: any) => {
+    const { nativeEvent } = syntheticEvent;
+    const errorCodesToHandle = [-6, -8, -10];
+    if (errorCodesToHandle.includes(nativeEvent.code)) {
+      const message = `WebView Error: [${nativeEvent.code}] ${nativeEvent.description}`;
+      setToast({ visible: true, message });
+      if (Platform.OS === 'android') {
+        ToastAndroid.show(
+          'Oops! Something went wrong. Please try again.',
+          ToastAndroid.LONG
+        );
+      }
+      setTimeout(() => setToast(null), 5000);
+      onCallback?.(WebViewCallback.redirect('WEBVIEW_ERROR'));
+    }
+  };
+
+  const getQueryParam = (url: string, param: string): string | null => {
+    const match = url.match(new RegExp('[?&]' + param + '=([^&#]*)'));
+    return match && match[1] ? decodeURIComponent(match[1]) : null;
+  };
+
+  const downloadAndOpenFile = async (fileUrl: string) => {
+    try {
+      console.log('Starting file download...', fileUrl);
+
+      // Get cookies using CookieManager
+      let cookieString = '';
+      try {
+        const cookies = await CookieManager.get(fileUrl);
+        cookieString = Object.keys(cookies)
+          .map((key) => `${key}=${cookies[key]?.value ?? ''}`)
+          .join('; ');
+      } catch (e) {
+        console.error('Failed to get cookies:', e);
+      }
 
-            console.log('Status thrown from webview ', status);
-            // navigation.pop();
-            StatusBar.setBackgroundColor('#7E7E7EFF');
-            onCallback?.(
-                WebViewCallback.redirect(status ?? undefined)
-            );
-            return false;
-        }
+      // Create a clean filename from the URL
+      const timestamp = new Date().getTime();
+      // Extract only the last part of the path for the filename
+      const urlParts = fileUrl.split('/');
+      const lastPart = urlParts[urlParts.length - 1];
+      const fileExt = lastPart?.split('.').pop() || 'pdf';
+      const fileName = `${timestamp}.${fileExt}`;
+
+      const downloadPath = Platform.select({
+        ios: `${RNFS.DocumentDirectoryPath}/${fileName}`,
+        android: `${RNFS.DownloadDirectoryPath}/${fileName}`,
+      });
+
+      if (!downloadPath) {
+        throw new Error('Could not determine download path');
+      }
 
-        // Handle whitelisted URLs
-        const isWhitelisted = whitelistedUrls.some(white => url.includes(white)) ||
-            (hostName && url.includes(hostName));
-
-        if (!isWhitelisted &&
-            url &&
-            url !== 'about:blank' &&
-            url !== 'about:srcdoc') {
-            console.log('External URL detected:', url);
-            handleExternalUrl(url);
-            return false;
-        }
-        if (url.includes('.pdf') ||
-            url.includes('/statements/') ||
-            url.includes('/download_statements')
-        ) {
-            console.log('File download URL detected:', url);
-            downloadAndOpenFile(url);
-            return false;
+      console.log('Downloading to:', downloadPath);
+
+      const options = {
+        fromUrl: fileUrl,
+        toFile: downloadPath,
+        headers: {
+          'Cookie': cookieString,
+          'Accept': 'application/pdf',
+          'Content-Type': 'application/pdf',
+        },
+        background: true,
+        begin: (res: any) => {
+          console.log('Download started with headers:', res);
+        },
+      };
+
+      const response = await RNFS.downloadFile(options).promise;
+
+      if (response.statusCode === 200) {
+        console.log('File downloaded to:', downloadPath);
+
+        if (Platform.OS === 'android') {
+          ToastAndroid.show('File downloaded successfully', ToastAndroid.SHORT);
         }
 
-        return true;
-    };
-
-    const handleBackButton = () => {
-        if (canGoBack && webviewRef.current) {
-            webviewRef.current.goBack();
-            return true;
-        }
-        return false;
+        await FileViewer.open(downloadPath, {
+          showOpenWithDialog: true,
+          onDismiss: () => {
+            if (Platform.OS === 'ios') {
+              RNFS.unlink(downloadPath).catch(console.error);
+            }
+          },
+        });
+      } else {
+        throw new Error(`Download failed with status ${response.statusCode}`);
+      }
+    } catch (error) {
+      console.error('File download/open error:', error);
+    }
+  };
+
+  const handleOnShouldStartLoadWithRequest = (event: WebViewNavigation) => {
+    const { url } = event;
+    console.log('URL:', url);
+    if (url === 'about:blank' || url === 'about:srcdoc') {
+      return true;
+    }
+    // _analyticsLogger.logEvent({ event: 'REACT_NATIVE_LOADING_URL ', url });
+
+    if (
+      url?.includes('/session-expired?status=') ||
+      url?.includes('/redirect?status=')
+    ) {
+      console.log('overriding url');
+      const status = getQueryParam(url, 'status');
+
+      console.log('Status thrown from webview ', status);
+      // _analyticsLogger.logEvent({
+      //   event: 'REACT_NATIVE_WEBVIEW_CALLBACK ',
+      //   status,
+      // });
+
+      StatusBar.setBackgroundColor('#7E7E7EFF');
+      onCallback?.(WebViewCallback.redirect(status ?? undefined));
+      return false;
+    }
+
+    // Handle whitelisted URLs
+    const isWhitelisted =
+      whitelistedUrls.some((white) => url.includes(white)) ||
+      (hostName && url.includes(hostName));
+
+    if (
+      !isWhitelisted &&
+      url &&
+      url !== 'about:blank' &&
+      url !== 'about:srcdoc'
+    ) {
+      console.log('External URL detected:', url);
+      handleExternalUrl(url);
+      return false;
+    }
+    if (
+      url.includes('.pdf') ||
+      url.includes('/statements/') ||
+      url.includes('/download_statements')
+    ) {
+      console.log('File download URL detected:', url);
+      downloadAndOpenFile(url);
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleBackButton = () => {
+    if (canGoBack && webviewRef.current) {
+      webviewRef.current.goBack();
+      return true;
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handleBackButton
+    );
+    return () => {
+      backHandler.remove();
     };
+  }, [canGoBack]);
 
-    useEffect(() => {
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);
-        return () => {
-            backHandler.remove();
-        };
-    }, [canGoBack]);
-
-    const Loading = () => (
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-            <ActivityIndicator size="large" />
-        </View>
-    );
+  const Loading = () => (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ActivityIndicator size="large" />
+    </View>
+  );
 
-    // Cookie injection script
+  // Cookie injection script
 
-    const injectedJavaScript = `
+  const injectedJavaScript = `
     window.onerror = function(message, source, lineno, colno, error) {
       if (message.includes('RATE_LIMIT_USER')) {
         window.ReactNativeWebView.postMessage(JSON.stringify({
@@ -236,108 +265,119 @@ export const WebView = ({
     true;
   `;
 
-    const requestPermission = async (permission: Permission) => {
-        try {
-            const result = await check(permission);
-
-            if (result === RESULTS.DENIED) {
-                const requestResult = await request(permission);
-                return requestResult === RESULTS.GRANTED;
-            }
-
-            return result === RESULTS.GRANTED;
-        } catch (error) {
-            console.error('Permission request failed:', error);
-            return false;
-        }
-    };
-
-    const handlePermissionRequest = async (event: any) => {
-        const { resources } = event.nativeEvent;
-        console.log('Permission requested:', resources);
-
-        const permissionsToRequest: Permission[] = [];
+  const requestPermission = async (permission: Permission) => {
+    try {
+      const result = await check(permission);
 
-        if (resources.includes('video')) {
-            permissionsToRequest.push(
-                Platform.OS === 'ios'
-                    ? PERMISSIONS.IOS.CAMERA
-                    : PERMISSIONS.ANDROID.CAMERA
-            );
-        }
-        if (resources.includes('microphone')) {
-            permissionsToRequest.push(
-                Platform.OS === 'ios'
-                    ? PERMISSIONS.IOS.MICROPHONE
-                    : PERMISSIONS.ANDROID.RECORD_AUDIO
-            );
-        }
-        if (resources.includes('geolocation')) {
-            permissionsToRequest.push(
-                Platform.OS === 'ios'
-                    ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
-                    : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
-            );
-        }
+      if (result === RESULTS.DENIED) {
+        const requestResult = await request(permission);
+        return requestResult === RESULTS.GRANTED;
+      }
 
-        try {
-            const results = await Promise.all(
-                permissionsToRequest.map(permission => requestPermission(permission))
-            );
-
-            const granted = results.every(result => result === true);
-            if (granted) {
-                // @ts-ignore - grant exists on the event
-                event.nativeEvent.grant();
-            } else {
-                // @ts-ignore - deny exists on the event
-                event.nativeEvent.deny();
-            }
-        } catch (error) {
-            console.error('Permission handling failed:', error);
-            // @ts-ignore - deny exists on the event
-            event.nativeEvent.deny();
+      return result === RESULTS.GRANTED;
+    } catch (error) {
+      console.error('Permission request failed:', error);
+      return false;
+    }
+  };
+
+  const handlePermissionRequest = async (event: any) => {
+    const { resources } = event.nativeEvent;
+    console.log('Permission requested:', resources);
+
+    const permissionsToRequest: Permission[] = [];
+
+    if (resources.includes('video')) {
+      permissionsToRequest.push(
+        Platform.OS === 'ios'
+          ? PERMISSIONS.IOS.CAMERA
+          : PERMISSIONS.ANDROID.CAMERA
+      );
+    }
+    if (resources.includes('microphone')) {
+      permissionsToRequest.push(
+        Platform.OS === 'ios'
+          ? PERMISSIONS.IOS.MICROPHONE
+          : PERMISSIONS.ANDROID.RECORD_AUDIO
+      );
+    }
+    if (resources.includes('geolocation')) {
+      permissionsToRequest.push(
+        Platform.OS === 'ios'
+          ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
+          : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
+      );
+    }
+
+    try {
+      const results = await Promise.all(
+        permissionsToRequest.map((permission) => requestPermission(permission))
+      );
+
+      const granted = results.every((result) => result === true);
+      if (granted) {
+        // @ts-ignore - grant exists on the event
+        event.nativeEvent.grant();
+      } else {
+        // @ts-ignore - deny exists on the event
+        event.nativeEvent.deny();
+      }
+    } catch (error) {
+      console.error('Permission handling failed:', error);
+      // @ts-ignore - deny exists on the event
+      event.nativeEvent.deny();
+    }
+  };
+
+  const handleWebViewLoadEnd = (syntheticEvent: any) => {
+    const loadedUrl = syntheticEvent?.nativeEvent?.url || url;
+    // _analyticsLogger.logEvent({
+    //   event: 'REACT_NATIVE_WEBVIEW_LOADED',
+    //   url: loadedUrl,
+    // });
+
+    onPageFinished?.();
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <RNWebView
+        ref={webviewRef}
+        source={{ uri: url }}
+        onPermissionRequest={
+          handlePermissionRequest as ExtendedWebViewProps['onPermissionRequest']
         }
-    };
-
-
-    return (
-        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
-            <RNWebView
-                ref={webviewRef}
-                source={{
-                    uri: url,
-
-                }}
-                onPermissionRequest={handlePermissionRequest as ExtendedWebViewProps['onPermissionRequest']}
-                geolocationEnabled={true}
-                androidPermissions={{
-                    camera: true,
-                    microphone: true,
-                    geolocation: true
-                }}
-                onError={showToast_with_code_message}
-                startInLoadingState={true}
-                renderLoading={() => <Loading />}
-                onLoadEnd={onPageFinished}
-                originWhitelist={['*']}
-                javaScriptEnabled={true}
-                domStorageEnabled={true}
-                mediaPlaybackRequiresUserAction={false}
-                allowsInlineMediaPlayback={true}
-                onShouldStartLoadWithRequest={handleOnShouldStartLoadWithRequest}
-                onNavigationStateChange={(navState) => {
-                    setCanGoBack(navState.canGoBack);
-                }}
-                injectedJavaScript={injectedJavaScript}
-                decelerationRate={Platform.OS === 'ios' ? 'normal' : 0.9}
-                allowsBackForwardNavigationGestures={Platform.OS === 'ios'}
-                sharedCookiesEnabled={true}
-                setSupportMultipleWindows={false}
-                mixedContentMode="always"
-                allowsLinkPreview={true}
-                {...options}
-            />
-        </SafeAreaView>
-    );
-};
+        geolocationEnabled={true}
+        androidPermissions={{
+          camera: true,
+          microphone: true,
+          geolocation: true,
+        }}
+        onError={(e) => {
+          showToast_with_code_message(e);
+          options?.onError?.(e as any);
+        }}
+        {...options}
+        startInLoadingState={true}
+        renderLoading={() => <Loading />}
+        onLoadEnd={handleWebViewLoadEnd}
+        originWhitelist={['*']}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        mediaPlaybackRequiresUserAction={false}
+        allowsInlineMediaPlayback={true}
+        onShouldStartLoadWithRequest={handleOnShouldStartLoadWithRequest}
+        onNavigationStateChange={(navState) => {
+          setCanGoBack(navState.canGoBack);
+        }}
+        injectedJavaScript={injectedJavaScript}
+        decelerationRate={Platform.OS === 'ios' ? 'normal' : 0.9}
+        allowsBackForwardNavigationGestures={Platform.OS === 'ios'}
+        sharedCookiesEnabled={true}
+        setSupportMultipleWindows={false}
+        mixedContentMode="always"
+        allowsLinkPreview={true}
+      />
+    </SafeAreaView>
+  );
+};