banking_dcb_sdk_react_native 0.1.9

package/src/helpers/webview.tsx

@@ -0,0 +1,410 @@
+import { WebView as RNWebView } from 'react-native-webview';
+import {
+  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 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;
+  };
+}
+interface WebViewCustomProps {
+  url: string;
+  options?: Partial<ExtendedWebViewProps>;
+  onCallback?: WebViewCallbackFunction;
+  hostName?: string;
+  whitelistedUrls?: string[];
+  onPageFinished?: () => void;
+}
+const clearAllCookies = async () => {
+  try {
+    await CookieManager.clearAll(true);
+    console.log('clearing cookies');
+  } catch (e) {
+    console.error('Failed to clear cookies:', e);
+  }
+};
+
+export const WebView = ({
+  url,
+  options,
+  onCallback,
+  hostName,
+  whitelistedUrls = [],
+  onPageFinished,
+}: WebViewCustomProps) => {
+  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 = [-2, -6, -8, -10];
+    if (errorCodesToHandle.includes(nativeEvent.code)) {
+      const message = `WebView Error: [${nativeEvent.code}] ${nativeEvent.description}`;
+      setToast({ visible: true, message });
+
+      if (nativeEvent.code === -2) {
+        if (Platform.OS === 'android') {
+          ToastAndroid.show(
+            'There seems to be a network issue. Please try again.',
+            ToastAndroid.LONG
+          );
+        }
+        clearAllCookies();
+        onCallback?.(WebViewCallback.redirect('WEBVIEW_ERROR'));
+      } else {
+        if (Platform.OS === 'android') {
+          ToastAndroid.show(
+            'Oops! Something went wrong. Please try again.',
+            ToastAndroid.LONG
+          );
+        }
+        clearAllCookies();
+        onCallback?.(WebViewCallback.redirect('WEBVIEW_ERROR'));
+      }
+
+      setTimeout(() => setToast(null), 6000);
+    }
+  };
+
+  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;
+    }
+    // _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');
+      clearAllCookies();
+      onCallback?.(WebViewCallback.redirect(status ?? undefined));
+      return false;
+    }
+    if (url?.includes('/api/user/redirect')) {
+      console.log('overriding redirect url');
+
+      StatusBar.setBackgroundColor('#7E7E7EFF');
+      clearAllCookies();
+      onCallback?.(WebViewCallback.redirect('SESSION_EXPIRED'));
+      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]);
+
+  const Loading = () => (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ActivityIndicator size="large" />
+    </View>
+  );
+
+  // Cookie injection script
+
+  const injectedJavaScript = `
+    window.onerror = function(message, source, lineno, colno, error) {
+      if (message.includes('RATE_LIMIT_USER')) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'RATE_LIMIT_ERROR'
+        }));
+      }
+    };
+    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[] = [];
+
+    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;
+
+    onPageFinished?.();
+  };
+
+  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={(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>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,5 @@
+export { BankingDcbReactNative } from './helpers/banking_dcb_react_native';
+
+export { WebView } from './helpers/webview';
+import type { WebViewCallbackFunction } from './helpers/utils/webviewCallback';
+export type { WebViewCallbackFunction };