WebView

1
import { useCallback, useRef } from 'react';
2
import * as Location from 'expo-location';
3
import WebView, { ShouldStartLoadRequest } from 'react-native-webview';
4
5
const WEBVIEW_URL = 'https://webview-prod-us-east-1.getkard.com/';
6
const ALLOWED_ORIGIN = new URL(WEBVIEW_URL).origin;
7
8
interface RewardsWebViewProps {
9
  token: string;
10
  themeOverrides?: {
11
    theme?: 'system' | 'light' | 'dark';
12
    styles?: {
13
      light?: Record<string, string>;
14
      dark?: Record<string, string>;
15
    };
16
    labels?: {
17
      rewardsTitle?: string;
18
      nearbyOffersTitle?: string;
19
      offersTitle?: string;
20
    };
21
  };
22
}
23
24
// RFC4648 base64url encoding (URL-safe, no padding)
25
function encodeThemeOverrides(overrides: object): string {
26
  return btoa(JSON.stringify(overrides))
27
    .replace(/\+/g, '-')
28
    .replace(/\//g, '_')
29
    .replace(/=+$/, '');
30
}
31
32
export function RewardsWebView({ token, themeOverrides }: RewardsWebViewProps) {
33
  const webviewRef = useRef<WebView>(null);
34
35
  const handleMessage = useCallback(async (event: any) => {
36
    try {
37
      const msg = JSON.parse(event?.nativeEvent?.data);
38
39
      if (msg?.type === 'REQUEST_LOCATION') {
40
        // Request location permission
41
        const { status } = await Location.requestForegroundPermissionsAsync();
42
43
        if (status !== 'granted') {
44
          webviewRef.current?.postMessage(JSON.stringify({
45
            type: 'ERROR',
46
            payload: { ok: false, error: 'Location permission not granted' }
47
          }));
48
          return;
49
        }
50
51
        // Get current position
52
        const position = await Location.getCurrentPositionAsync({});
53
54
        webviewRef.current?.postMessage(JSON.stringify({
55
          type: 'LOCATION_RESPONSE',
56
          payload: {
57
            ok: true,
58
            coords: {
59
              latitude: position.coords.latitude,
60
              longitude: position.coords.longitude,
61
              accuracy: position.coords.accuracy,
62
              altitude: position.coords.altitude,
63
              heading: position.coords.heading,
64
              speed: position.coords.speed,
65
            },
66
            timestamp: position.timestamp,
67
          }
68
        }));
69
      }
70
    } catch (error) {
71
      console.error('Error handling WebView message:', error);
72
    }
73
  }, []);
74
75
  // base64url is URL-safe, no encodeURIComponent needed for theme param
76
  const themeParam = themeOverrides
77
    ? `&theme=${encodeThemeOverrides(themeOverrides)}`
78
    : '';
79
80
  const handleShouldStartLoadWithRequest = useCallback(
81
    (request: ShouldStartLoadRequest) => {
82
      try {
83
        const url = new URL(request.url);
84
        return url.origin === ALLOWED_ORIGIN;
85
      } catch {
86
        return false;
87
      }
88
    },
89
    [],
90
  );
91
92
  return (
93
    <WebView
94
      ref={webviewRef}
95
      source={{ uri: `${WEBVIEW_URL}?token=${encodeURIComponent(token)}${themeParam}` }}
96
      onMessage={handleMessage}
97
      onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
98
      originWhitelist={[ALLOWED_ORIGIN]}
99
    />
100
  );
101
}