@uptick-ads/react-native-web-sdk 0.3.1 → 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.1",
+  "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",

package/src/UptickFlow.js

@@ -114,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
@@ -122,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.1";
+export const version = "0.3.2";