@uptick-ads/react-native-web-sdk 0.3.0 → 0.3.2

package/README.md

@@ -51,7 +51,7 @@ Because both presentations work from the same mount point, Uptick can switch a p
 | `openUrl` | `Linking.openURL` | How accepted offers open; supply your own to use an in-app browser |
 | `style` | | Style for the inline slot |
 | `modal` | | Presentation options for the popup. Any option set here is reported to Uptick with the flow, with its value, so performance can be read against it. |
-| `webViewProps` | | Extra props passed through to `WebView` |
+| `webViewProps` | | Extra props passed through to `WebView`, except the ones the component sets itself: `source`, `originWhitelist`, `javaScriptEnabled`, `domStorageEnabled`, `setSupportMultipleWindows`, `onMessage`, `onShouldStartLoadWithRequest` and `onOpenWindow` |
 | `host` | `api.uptick.com` | API host, only for testing against other environments |
 
 ### Flow parameters
@@ -71,7 +71,7 @@ The component adds `render_type` (`{ rendered: "inline" | "popup" }`) once the f
 
 ## How click-out works
 
-When a user accepts an offer the SDK opens the advertiser link with `window.open`. The component receives that through `onOpenWindow`, hands the URL to `openUrl`, and the page inside the WebView stays put, so the SDK moves on to the next offer while the user is in the browser. Do not set `setSupportMultipleWindows={false}` through `webViewProps`: on Android that makes the WebView start the navigation itself and leaves the offer frozen.
+When a user accepts an offer the SDK opens the advertiser link with `window.open`. The component receives that through `onOpenWindow`, hands the URL to `openUrl`, and the page inside the WebView stays put, so the SDK moves on to the next offer while the user is in the browser.
 
 ## Demo
 

package/index.d.ts

@@ -20,6 +20,8 @@ export interface UptickFlowParams {
   country_code?: string;
 }
 
+export type UptickPlacement = "checkout" | "order_confirmation" | "order_status" | (string & {});
+
 export interface UptickModalOptions {
   /** Colour of the dimmed layer behind the card. */
   backgroundColor?: string;
@@ -28,14 +30,25 @@ export interface UptickModalOptions {
   maxCardHeight?: number;
 }
 
+/** Props the component sets on the WebView itself, which webViewProps cannot override. */
+export type ReservedWebViewProp =
+  | "source"
+  | "originWhitelist"
+  | "javaScriptEnabled"
+  | "domStorageEnabled"
+  | "setSupportMultipleWindows"
+  | "onMessage"
+  | "onShouldStartLoadWithRequest"
+  | "onOpenWindow";
+
 export interface UptickFlowProps extends UptickFlowParams {
   integrationId: string;
-  placement?: string;
+  placement?: UptickPlacement;
   callback?: (event: string, data: unknown) => void;
   openUrl?: (url: string) => void | Promise<unknown>;
   style?: StyleProp<ViewStyle>;
   modal?: UptickModalOptions;
-  webViewProps?: Partial<ComponentProps<typeof WebView>>;
+  webViewProps?: Omit<Partial<ComponentProps<typeof WebView>>, ReservedWebViewProp>;
   host?: string;
 }
 
@@ -45,5 +58,5 @@ export const version: string;
 export function customizations(modal?: UptickModalOptions): Record<string, string>;
 export const FLOW_PARAMS: ReadonlyArray<keyof UptickFlowParams>;
 export function pickFlowParams(props: Record<string, unknown>): UptickFlowParams;
-export function buildEmbedUrl(options: { host: string; integrationId: string; placement?: string; params?: UptickFlowParams; version?: string; customization?: Record<string, string> }): string;
+export function buildEmbedUrl(options: { host: string; integrationId: string; placement?: UptickPlacement; params?: UptickFlowParams; version?: string; customization?: Record<string, string> }): string;
 export function embedPath(host: string, integrationId: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptick-ads/react-native-web-sdk",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "React Native component that runs the Uptick web SDK inside a WebView, inline or as a popup, with the web integration's parameters",
   "keywords": [
     "uptick",
@@ -23,6 +23,7 @@
   "types": "index.d.ts",
   "files": [
     "src",
+    "!src/**/*.test.js",
     "index.d.ts",
     "README.md",
     "LICENSE"
@@ -41,7 +42,20 @@
   },
   "scripts": {
     "check": "node --check src/index.js && node --check src/UptickFlow.js && node --check src/embedUrl.js && node --check src/version.js && node -e \"const p=require('./package.json');const v=require('fs').readFileSync('src/version.js','utf8');if(!v.includes('\\\"'+p.version+'\\\"'))throw new Error('src/version.js is out of step with package.json')\" && npm pack --dry-run",
-    "prepublishOnly": "npm run check"
+    "prepublishOnly": "npm run check && npm test",
+    "test": "jest --selectProjects unit",
+    "test:e2e": "jest --selectProjects e2e"
   },
-  "private": false
+  "private": false,
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.88.0",
+    "@react-native/jest-preset": "^0.88.0",
+    "@testing-library/react-native": "^14.1.0",
+    "jest": "^29.7.0",
+    "playwright": "^1.64.1",
+    "react": "^19.3.1",
+    "react-native": "^0.88.0",
+    "react-native-webview": "^13.17.0",
+    "test-renderer": "^1.3.1"
+  }
 }

package/src/UptickFlow.js

@@ -7,7 +7,7 @@ import { version as SDK_VERSION } from "./version";
 const DEFAULT_HOST = "api.uptick.com";
 const MAX_HEIGHT = 1400;
 
-// Messages from the host page that the component acts on itself; every message is also forwarded to `callback`.
+// Messages from the host page that the component acts on itself; every message except `height` is also forwarded to `callback`.
 const SHOW_EVENTS = ["offer_viewed"];
 const HIDE_EVENTS = ["flow_complete", "flow_closed"];
 
@@ -65,6 +65,7 @@ export function UptickFlow({
     } catch (error) {
       return;
     }
+    if (!message || typeof message !== "object") return;
     const { name, data } = message;
     if (name === "height") {
       setHeight(Math.min(Math.max(Number(data && data.height) || 0, 0), MAX_HEIGHT));
@@ -113,6 +114,13 @@ export function UptickFlow({
 
   const webView = (
     <WebView
+      onError={(event) => emit.current && emit.current("webview_error", { description: event.nativeEvent.description })}
+      onHttpError={(event) => emit.current && emit.current("webview_http_error", { status: event.nativeEvent.statusCode, url: event.nativeEvent.url })}
+      scrollEnabled={false}
+      nestedScrollEnabled
+      opaque={false}
+      {...webViewProps}
+      // These follow the spread so webViewProps can't break messaging or click-out.
       source={source}
       originWhitelist={["*"]}
       javaScriptEnabled
@@ -121,12 +129,6 @@ export function UptickFlow({
       onMessage={onMessage}
       onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
       onOpenWindow={onOpenWindow}
-      onError={(event) => emit.current && emit.current("webview_error", { description: event.nativeEvent.description })}
-      onHttpError={(event) => emit.current && emit.current("webview_http_error", { status: event.nativeEvent.statusCode, url: event.nativeEvent.url })}
-      scrollEnabled={false}
-      nestedScrollEnabled
-      opaque={false}
-      {...webViewProps}
       style={[styles.transparent, { height: isPopup ? Math.min(contentHeight, maxCardHeight) : contentHeight }, webViewProps && webViewProps.style]}
     />
   );

package/src/version.js

@@ -1,2 +1,2 @@
 // Kept in step with package.json by the release pipeline; the API records it on every event as integration_version.
-export const version = "0.3.0";
+export const version = "0.3.2";