@uptick-ads/react-native-web-sdk 0.2.6 → 0.2.7

package/README.md

@@ -38,7 +38,7 @@ import { UptickFlow } from "@uptick-ads/react-native-web-sdk";
 
 Whether the offer renders inline or as a popup is configured by the Uptick offers team on your placement, not in your app.
 When the placement is inline, the component sizes itself to the offer and starts at zero height, so nothing shows until an offer is ready.
-When the placement is a popup, the component presents a modal over the whole screen with a scrim and a centred card, from wherever it is mounted. Tap outside, the card's close button, and the Android back button all dismiss it.
+When the placement is a popup, the component presents a modal over the whole screen with a dimmed background and a centred card, from wherever it is mounted. Tap outside, the card's close button, and the Android back button all dismiss it.
 Because both presentations work from the same mount point, Uptick can switch a placement between inline and popup without a change to your app.
 
 ## Props
@@ -50,7 +50,7 @@ Because both presentations work from the same mount point, Uptick can switch a p
 | `callback` | | `(event, data)`, the same events as the web SDK callback |
 | `openUrl` | `Linking.openURL` | How accepted offers open; supply your own to use an in-app browser |
 | `style` | | Style for the inline slot |
-| `modal` | | `{ scrimColor, cardStyle, insets, maxCardHeight }` for the popup presentation |
+| `modal` | | Presentation options for the popup. Any option set here is reported to Uptick with the flow so performance can be read against it. |
 | `webViewProps` | | Extra props passed through to `WebView` |
 | `host` | `api.uptick.com` | API host, only for testing against other environments |
 

package/index.d.ts

@@ -21,7 +21,8 @@ export interface UptickFlowParams {
 }
 
 export interface UptickModalOptions {
-  scrimColor?: string;
+  /** Colour of the dimmed layer behind the card. */
+  backgroundColor?: string;
   cardStyle?: StyleProp<ViewStyle>;
   insets?: { top: number; bottom: number };
   maxCardHeight?: number;
@@ -40,6 +41,8 @@ export interface UptickFlowProps extends UptickFlowParams {
 
 export function UptickFlow(props: UptickFlowProps): JSX.Element;
 
+export const version: string;
+export function integrationVersion(sdkVersion: string, modal?: UptickModalOptions): 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 }): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptick-ads/react-native-web-sdk",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "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",
@@ -40,7 +40,7 @@
     "provenance": false
   },
   "scripts": {
-    "check": "node --check src/index.js && node --check src/UptickFlow.js && node --check src/embedUrl.js && npm pack --dry-run",
+    "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"
   },
   "private": false

package/src/UptickFlow.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Linking, Modal, Pressable, StyleSheet, View } from "react-native";
 import { WebView } from "react-native-webview";
-import { buildEmbedUrl, embedPath, pickFlowParams } from "./embedUrl";
+import { buildEmbedUrl, embedPath, integrationVersion, pickFlowParams } from "./embedUrl";
+import { version as SDK_VERSION } from "./version";
 
 const DEFAULT_HOST = "api.uptick.com";
 const MAX_HEIGHT = 1400;
@@ -33,11 +34,12 @@ export function UptickFlow({
 
   const params = pickFlowParams(flowProps);
   const paramsKey = JSON.stringify(params);
+  const version = integrationVersion(SDK_VERSION, modal);
   const source = useMemo(
-    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params }) }),
+    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params, version }) }),
     // Callers pass fresh prop values each render; key on the serialised params so the page does not reload on every parent render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [host, integrationId, placement, paramsKey]
+    [host, integrationId, placement, paramsKey, version]
   );
   const ownPath = embedPath(host, integrationId);
 
@@ -102,7 +104,7 @@ export function UptickFlow({
   const isPopup = renderType === "popup";
   const contentHeight = Math.max(height, 1);
   const {
-    scrimColor = "rgba(0, 0, 0, 0.45)",
+    backgroundColor = "rgba(0, 0, 0, 0.45)",
     cardStyle,
     insets = { top: 24, bottom: 24 },
     maxCardHeight = 620,
@@ -134,13 +136,13 @@ export function UptickFlow({
     return <View style={[styles.transparent, { height: renderType === "inline" ? contentHeight : 1, overflow: "hidden" }, style]}>{webView}</View>;
   }
 
-  // Popup: the page has already loaded inside the inline slot, so keep that WebView alive and move it into a system modal.
+  // Popup: the page has already loaded inside the inline slot, so keep that WebView alive and move it into a system modal over a dimmed background.
   // React Native's Modal presents above the whole window regardless of where this component sits in the tree.
   return (
     <View style={[styles.transparent, { height: 0 }, style]}>
       <Modal visible transparent animationType="fade" statusBarTranslucent onRequestClose={dismiss}>
         <View style={FILL} pointerEvents={visible ? "auto" : "none"}>
-          <Pressable accessibilityRole="button" accessibilityLabel="Dismiss" style={[FILL, { backgroundColor: scrimColor, opacity: visible ? 1 : 0 }]} onPress={dismiss} />
+          <Pressable accessibilityRole="button" accessibilityLabel="Dismiss" style={[FILL, { backgroundColor, opacity: visible ? 1 : 0 }]} onPress={dismiss} />
           <View pointerEvents="box-none" style={[FILL, styles.cardWrap, { paddingTop: insets.top, paddingBottom: insets.bottom, opacity: visible ? 1 : 0 }]}>
             <View style={[styles.card, { height: Math.min(contentHeight, maxCardHeight) }, cardStyle]}>{webView}</View>
           </View>

package/src/embedUrl.js

@@ -41,10 +41,27 @@ export function embedPath(host, integrationId) {
   return `https://${host}/v1/places/${encodeURIComponent(integrationId)}/embed`;
 }
 
-export function buildEmbedUrl({ host, integrationId, placement, params }) {
+// Names of the presentation options a host customised, so reporting can tell a stock integration from a tuned one when performance differs.
+export function customizations(modal) {
+  if (!modal) return [];
+  const names = [];
+  if (modal.backgroundColor !== undefined) names.push("background");
+  if (modal.cardStyle !== undefined) names.push("card");
+  if (modal.insets !== undefined) names.push("insets");
+  if (modal.maxCardHeight !== undefined) names.push("height");
+  return names;
+}
+
+// The integration version the API records on every event; a `+custom.` suffix lists any presentation options the host changed.
+export function integrationVersion(sdkVersion, modal) {
+  const names = customizations(modal);
+  return names.length ? `${sdkVersion}+custom.${names.join(",")}` : sdkVersion;
+}
+
+export function buildEmbedUrl({ host, integrationId, placement, params, version }) {
   if (!integrationId) throw new Error("UptickFlow: integrationId is required");
   // The page renders whatever presentation the placement's template defines; `native` only asks it to leave the popup chrome to the app.
-  const search = encodeQuery({ placement, variant: "native" });
+  const search = encodeQuery({ placement, variant: "native", integration_version: version });
   const fragment = encodeQuery(params || {});
   return `${embedPath(host, integrationId)}?${search}${fragment ? `#${fragment}` : ""}`;
 }

package/src/index.js

@@ -1,2 +1,3 @@
 export { UptickFlow } from "./UptickFlow";
-export { buildEmbedUrl, embedPath, pickFlowParams, FLOW_PARAMS } from "./embedUrl";
+export { buildEmbedUrl, embedPath, pickFlowParams, integrationVersion, FLOW_PARAMS } from "./embedUrl";
+export { version } from "./version";

package/src/version.js

@@ -0,0 +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.2.7";