@savers_app/react-native-sandbox-sdk 1.2.6 → 1.2.8

package/src/services/webview/DualWebViewBridgeController.tsx

@@ -0,0 +1,330 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import WebView from 'react-native-webview';
+import {
+  type DualWebViewBridgeEnvelope,
+  parseDualWebViewEnvelope,
+} from './dualWebViewBridge.types';
+
+const DEFAULT_TRAVEL_PORTAL_URL = 'https://sandbox.travelercashback.com';
+
+/** Must match `applicationNameForUserAgent` on clo-app WebViews (DualWebViewBridgeController). */
+const WEBVIEW_UA_MARKER = 'CloAppWebView';
+
+/** Legacy / Hub: open travel from first WebView without JSON envelope. */
+const TRAVEL_DEEP_LINK = 'saversapp://travel';
+const LEGACY_OPEN_TRAVEL_ACTIONS = ['OPEN_TRAVEL_PORTAL', 'OPEN_TRAVEL'];
+
+export type Surface = 'savers' | 'travel';
+
+export type DualWebViewBridgeControllerProps = {
+  saversAppUrl: string;
+  travelPortalUrl?: string;
+  partnerLogo?: string;
+  renderTravelBackIcon?: () => React.ReactNode;
+  initialSurface?: Surface;
+  onSaversSdkMessage?: (raw: string, postBack: (data: unknown) => void) => void;
+  onLoadEndSavers?: () => void;
+  onLoadEndTravel?: () => void;
+};
+
+function buildInjectNativeBridgeScript(
+  detail: Record<string, unknown>
+): string {
+  return `
+    (function(){
+      var detail = ${JSON.stringify(detail)};
+      window.dispatchEvent(new CustomEvent('nativeBridge', { detail: detail }));
+      true;
+    })();
+  `;
+}
+
+export const DualWebViewBridgeController: React.FC<
+  DualWebViewBridgeControllerProps
+> = ({
+  saversAppUrl,
+  travelPortalUrl = DEFAULT_TRAVEL_PORTAL_URL,
+  partnerLogo,
+  renderTravelBackIcon,
+  initialSurface = 'savers',
+  onSaversSdkMessage,
+  onLoadEndSavers,
+  onLoadEndTravel,
+}) => {
+  const saversRef = useRef<WebView>(null);
+  const travelRef = useRef<WebView>(null);
+
+  const [surface, setSurface] = useState<Surface>(initialSurface);
+  const [saversKey, setSaversKey] = useState(0);
+  const [travelKey, setTravelKey] = useState(0);
+
+  const openTravel = useCallback(() => {
+    setSurface('travel');
+    setTravelKey((k) => k + 1);
+  }, []);
+
+  const backToSavers = useCallback(() => {
+    setSurface('savers');
+    setSaversKey((k) => k + 1);
+  }, []);
+
+  const relayTo = useCallback(
+    (
+      target: 'savers' | 'travel',
+      payload: unknown,
+      from: 'savers' | 'travel'
+    ) => {
+      const detail = {
+        bridge: 'dual-webview',
+        from,
+        action: 'relay' as const,
+        payload,
+      };
+      const ref = target === 'savers' ? saversRef : travelRef;
+      ref.current?.injectJavaScript(buildInjectNativeBridgeScript(detail));
+    },
+    []
+  );
+
+  const handleBridgeEnvelope = useCallback(
+    (env: DualWebViewBridgeEnvelope): boolean => {
+      switch (env.action) {
+        case 'open_travel':
+          openTravel();
+          return true;
+        case 'close_travel':
+          backToSavers();
+          return true;
+        case 'relay':
+          if (env.to === 'savers') {
+            relayTo('savers', env.payload, env.from);
+            return true;
+          }
+          if (env.to === 'travel') {
+            relayTo('travel', env.payload, env.from);
+            return true;
+          }
+          return false;
+        default:
+          return false;
+      }
+    },
+    [backToSavers, openTravel, relayTo]
+  );
+
+  const tryLegacyOpenTravel = useCallback(
+    (raw: string): boolean => {
+      if (!raw || typeof raw !== 'string') {
+        return false;
+      }
+      try {
+        const data = JSON.parse(raw);
+        if (
+          data?.action === 'OPEN_TRAVEL_PORTAL' ||
+          data?.type === 'OPEN_TRAVEL' ||
+          data?.openTravel === true
+        ) {
+          openTravel();
+          return true;
+        }
+      } catch {
+        /* ignore */
+      }
+      if (LEGACY_OPEN_TRAVEL_ACTIONS.some((s) => raw.includes(s))) {
+        openTravel();
+        return true;
+      }
+      return false;
+    },
+    [openTravel]
+  );
+
+  const onMessageSavers = useCallback(
+    (e: { nativeEvent: { data: string } }) => {
+      const raw = e?.nativeEvent?.data ?? '';
+      const env = parseDualWebViewEnvelope(raw);
+
+      if (env && env.from === 'savers' && handleBridgeEnvelope(env)) {
+        return;
+      }
+      if (tryLegacyOpenTravel(raw)) {
+        return;
+      }
+
+      const postBack = (data: unknown) => {
+        const detail = {
+          bridge: 'dual-webview',
+          from: 'native',
+          action: 'relay',
+          payload: data,
+        };
+        saversRef.current?.injectJavaScript(
+          buildInjectNativeBridgeScript(detail)
+        );
+      };
+      onSaversSdkMessage?.(raw, postBack);
+    },
+    [handleBridgeEnvelope, onSaversSdkMessage, tryLegacyOpenTravel]
+  );
+
+  const onMessageTravel = useCallback(
+    (e: { nativeEvent: { data: string } }) => {
+      const raw = e?.nativeEvent?.data ?? '';
+      const env = parseDualWebViewEnvelope(raw);
+
+      if (env && env.from === 'travel' && handleBridgeEnvelope(env)) {
+        return;
+      }
+      if (tryLegacyOpenTravel(raw)) {
+        return;
+      }
+    },
+    [handleBridgeEnvelope, tryLegacyOpenTravel]
+  );
+
+  const onShouldStartLoadSavers = useCallback(
+    (request: { url: string }) => {
+      const { url } = request;
+      if (url.startsWith(TRAVEL_DEEP_LINK) || url === 'saversapp://travel/') {
+        openTravel();
+        return false;
+      }
+      return true;
+    },
+    [openTravel]
+  );
+
+  const travelSource = useMemo(
+    () => ({ uri: travelPortalUrl }),
+    [travelPortalUrl]
+  );
+  const saversSource = useMemo(() => ({ uri: saversAppUrl }), [saversAppUrl]);
+
+  return (
+    <View style={styles.root}>
+      {surface === 'savers' ? (
+        <WebView
+          key={saversKey}
+          ref={saversRef}
+          source={saversSource}
+          originWhitelist={['*']}
+          applicationNameForUserAgent={WEBVIEW_UA_MARKER}
+          onMessage={onMessageSavers}
+          onShouldStartLoadWithRequest={onShouldStartLoadSavers}
+          onLoadEnd={onLoadEndSavers}
+          style={styles.webview}
+          sharedCookiesEnabled
+          incognito={false}
+          webviewDebuggingEnabled={__DEV__}
+        />
+      ) : null}
+
+      {surface === 'travel' ? (
+        <View style={styles.travelColumn}>
+          <View style={styles.header}>
+            <TouchableOpacity
+              onPress={backToSavers}
+              hitSlop={16}
+              accessibilityRole="button"
+              accessibilityLabel="Back"
+              style={styles.backButton}
+            >
+              {renderTravelBackIcon ? (
+                renderTravelBackIcon()
+              ) : (
+                <View style={styles.backIconWrapper}>
+                  <View style={styles.backIconShaft} />
+                  <View style={styles.backIconHead} />
+                </View>
+              )}
+            </TouchableOpacity>
+
+            <View style={styles.headerSpacer} />
+
+            {partnerLogo ? (
+              <Image
+                source={{ uri: partnerLogo }}
+                resizeMode="contain"
+                style={styles.logo}
+              />
+            ) : (
+              <View style={styles.logoPlaceholder} />
+            )}
+          </View>
+          <WebView
+            key={travelKey}
+            ref={travelRef}
+            source={travelSource}
+            originWhitelist={['*']}
+            applicationNameForUserAgent={WEBVIEW_UA_MARKER}
+            onMessage={onMessageTravel}
+            onLoadEnd={onLoadEndTravel}
+            style={styles.webview}
+            sharedCookiesEnabled
+            incognito={false}
+            webviewDebuggingEnabled={__DEV__}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  travelColumn: { flex: 1 },
+  webview: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#E5E5E5',
+  },
+  backButton: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backIconWrapper: {
+    width: 20,
+    height: 16,
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  backIconShaft: {
+    position: 'absolute',
+    left: 6,
+    right: 0,
+    height: 2,
+    backgroundColor: '#111827',
+    borderRadius: 1,
+  },
+  backIconHead: {
+    width: 10,
+    height: 10,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: '#111827',
+    transform: [{ rotate: '45deg' }],
+    marginLeft: 1,
+  },
+  headerSpacer: {
+    flex: 1,
+  },
+  logo: {
+    width: 120,
+    height: 32,
+  },
+  logoPlaceholder: {
+    width: 120,
+    height: 32,
+  },
+});
+
+export default DualWebViewBridgeController;

package/src/services/webview/dualWebViewBridge.types.ts

@@ -0,0 +1,32 @@
+/**
+ * Messages posted from either WebView via ReactNativeWebView.postMessage(string).
+ * Pages should JSON.stringify envelopes before posting.
+ */
+export type DualWebViewBridgeEnvelope = {
+  bridge: 'dual-webview';
+  /** Who sent this message (set by the page). */
+  from: 'savers' | 'travel';
+  /**
+   * relay — forward payload to the other WebView via injectJavaScript + CustomEvent.
+   * open_travel — show travel surface (reloads travel WebView).
+   * close_travel — same as native back (reloads Savers WebView).
+   */
+  action: 'relay' | 'open_travel' | 'close_travel';
+  /** For relay: which surface should receive the event. */
+  to?: 'savers' | 'travel';
+  payload?: unknown;
+};
+
+export function parseDualWebViewEnvelope(
+  raw: string
+): DualWebViewBridgeEnvelope | null {
+  try {
+    const o = JSON.parse(raw) as DualWebViewBridgeEnvelope;
+    if (o?.bridge === 'dual-webview' && o?.from && o?.action) {
+      return o;
+    }
+  } catch {
+    /* not JSON */
+  }
+  return null;
+}

package/src/utils/config.ts

@@ -7,6 +7,7 @@ const injectedEnv = 'sandbox' as string;
 const DEFAULT_ENVIRONMENT: Environment =
   injectedEnv === 'production' ? 'production' : 'sandbox';
 
+/** Hosted merchant web origins; aligned with `SaversSdkHostedEnvironment` via `setEnvironment` in SDK init. */
 const ENV_URLS: Record<Environment, string> = {
   sandbox: 'https://testm.saversapp.com/',
   production: 'https://m.saversapp.com/',

package/lib/module/services/device/location.js

@@ -1,47 +0,0 @@
-"use strict";
-
-// Platform Utilities
-import { isAndroid } from "../../utils/platformManager.js";
-import { resolveNativeDependencies } from "../../utils/dependencyManager.js";
-
-// Permissions
-import { ensureLocationPermission } from "../permissions/permissionManager.js";
-let locationProvider;
-export function setLocationProvider(provider) {
-  locationProvider = provider;
-}
-export const fetchLocation = async () => {
-  const {
-    Geolocation
-  } = resolveNativeDependencies();
-  if (!Geolocation) {
-    throw new Error('GEOLOCATION_NOT_LINKED: install and link @react-native-community/geolocation');
-  }
-  return new Promise((resolve, reject) => {
-    Geolocation.getCurrentPosition(pos => resolve({
-      lat: pos.coords.latitude,
-      lng: pos.coords.longitude
-    }), err => reject(err), {
-      enableHighAccuracy: true,
-      timeout: 10000
-    });
-  });
-};
-export async function getDeviceLocation() {
-  if (locationProvider) {
-    return locationProvider();
-  }
-  if (isAndroid()) {
-    const granted = await ensureLocationPermission();
-    if (!granted) {
-      throw new Error('LOCATION_PERMISSION_DENIED');
-    }
-  }
-  try {
-    const loc = await fetchLocation();
-    return loc;
-  } catch {
-    throw new Error('LOCATION_UNAVAILABLE');
-  }
-}
-//# sourceMappingURL=location.js.map

package/lib/module/services/device/location.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isAndroid","resolveNativeDependencies","ensureLocationPermission","locationProvider","setLocationProvider","provider","fetchLocation","Geolocation","Error","Promise","resolve","reject","getCurrentPosition","pos","lat","coords","latitude","lng","longitude","err","enableHighAccuracy","timeout","getDeviceLocation","granted","loc"],"sourceRoot":"../../../../src","sources":["services/device/location.ts"],"mappings":";;AAAA;AACA,SAASA,SAAS,QAAQ,gCAA6B;AACvD,SAASC,yBAAyB,QAAQ,kCAA+B;;AAEzE;AACA,SAASC,wBAAwB,QAAQ,qCAAkC;AAI3E,IAAIC,gBAAyE;AAE7E,OAAO,SAASC,mBAAmBA,CACjCC,QAAmD,EAC7C;EACNF,gBAAgB,GAAGE,QAAQ;AAC7B;AAEA,OAAO,MAAMC,aAAa,GAAG,MAAAA,CAAA,KAAqC;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAGN,yBAAyB,CAAC,CAAC;EACnD,IAAI,CAACM,WAAW,EAAE;IAChB,MAAM,IAAIC,KAAK,CACb,8EACF,CAAC;EACH;EACA,OAAO,IAAIC,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;IACtCJ,WAAW,CAACK,kBAAkB,CAC3BC,GAAwD,IACvDH,OAAO,CAAC;MAAEI,GAAG,EAAED,GAAG,CAACE,MAAM,CAACC,QAAQ;MAAEC,GAAG,EAAEJ,GAAG,CAACE,MAAM,CAACG;IAAU,CAAC,CAAC,EACjEC,GAAY,IAAKR,MAAM,CAACQ,GAAG,CAAC,EAC7B;MAAEC,kBAAkB,EAAE,IAAI;MAAEC,OAAO,EAAE;IAAM,CAC7C,CAAC;EACH,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,eAAeC,iBAAiBA,CAAA,EAAwC;EAC7E,IAAInB,gBAAgB,EAAE;IACpB,OAAOA,gBAAgB,CAAC,CAAC;EAC3B;EACA,IAAIH,SAAS,CAAC,CAAC,EAAE;IACf,MAAMuB,OAAO,GAAG,MAAMrB,wBAAwB,CAAC,CAAC;IAChD,IAAI,CAACqB,OAAO,EAAE;MACZ,MAAM,IAAIf,KAAK,CAAC,4BAA4B,CAAC;IAC/C;EACF;EACA,IAAI;IACF,MAAMgB,GAAG,GAAG,MAAMlB,aAAa,CAAC,CAAC;IACjC,OAAOkB,GAAG;EACZ,CAAC,CAAC,MAAM;IACN,MAAM,IAAIhB,KAAK,CAAC,sBAAsB,CAAC;EACzC;AACF","ignoreList":[]}

package/lib/typescript/src/services/device/location.d.ts

@@ -1,8 +0,0 @@
-export type DeviceLocation = {
-    lat: number;
-    lng: number;
-};
-export declare function setLocationProvider(provider: () => Promise<DeviceLocation | undefined>): void;
-export declare const fetchLocation: () => Promise<DeviceLocation>;
-export declare function getDeviceLocation(): Promise<DeviceLocation | undefined>;
-//# sourceMappingURL=location.d.ts.map

package/lib/typescript/src/services/device/location.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"location.d.ts","sourceRoot":"","sources":["../../../../../src/services/device/location.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,cAAc,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAI1D,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,GAClD,IAAI,CAEN;AAED,eAAO,MAAM,aAAa,QAAa,OAAO,CAAC,cAAc,CAe5D,CAAC;AAEF,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC,CAgB7E"}

package/src/services/device/location.ts

@@ -1,51 +0,0 @@
-// Platform Utilities
-import { isAndroid } from '../../utils/platformManager';
-import { resolveNativeDependencies } from '../../utils/dependencyManager';
-
-// Permissions
-import { ensureLocationPermission } from '../permissions/permissionManager';
-
-export type DeviceLocation = { lat: number; lng: number };
-
-let locationProvider: (() => Promise<DeviceLocation | undefined>) | undefined;
-
-export function setLocationProvider(
-  provider: () => Promise<DeviceLocation | undefined>
-): void {
-  locationProvider = provider;
-}
-
-export const fetchLocation = async (): Promise<DeviceLocation> => {
-  const { Geolocation } = resolveNativeDependencies();
-  if (!Geolocation) {
-    throw new Error(
-      'GEOLOCATION_NOT_LINKED: install and link @react-native-community/geolocation'
-    );
-  }
-  return new Promise((resolve, reject) => {
-    Geolocation.getCurrentPosition(
-      (pos: { coords: { latitude: number; longitude: number } }) =>
-        resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
-      (err: unknown) => reject(err),
-      { enableHighAccuracy: true, timeout: 10000 }
-    );
-  });
-};
-
-export async function getDeviceLocation(): Promise<DeviceLocation | undefined> {
-  if (locationProvider) {
-    return locationProvider();
-  }
-  if (isAndroid()) {
-    const granted = await ensureLocationPermission();
-    if (!granted) {
-      throw new Error('LOCATION_PERMISSION_DENIED');
-    }
-  }
-  try {
-    const loc = await fetchLocation();
-    return loc;
-  } catch {
-    throw new Error('LOCATION_UNAVAILABLE');
-  }
-}