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

package/README.md

@@ -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` | | Presentation options for the popup. Any option set here is reported to Uptick with the flow as a `custom` parameter so performance can be read against it. |
+| `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` |
 | `host` | `api.uptick.com` | API host, only for testing against other environments |
 
@@ -66,7 +66,7 @@ They travel in the URL fragment, which is never sent to a server, so they do not
 
 ### Events
 
-`callback` receives the web SDK's lifecycle events with the same names and payloads: `init`, `flow_initialized`, `flow_delayed`, `offer_requested`, `offer_viewed`, `offer_accepted`, `offer_rejected`, `flow_complete`, plus `flow_hidden` when the user closes the offer.
+`callback` receives the web SDK's lifecycle events with the same names and payloads: `init`, `flow_initialized`, `flow_delayed`, `offer_requested`, `offer_viewed`, `offer_accepted`, `offer_rejected`, `flow_complete`, and `flow_closed` when the user closes the offer.
 The component adds `render_type` (`{ rendered: "inline" | "popup" }`) once the first offer renders, `popup_dismissed`, `webview_error`, `webview_http_error` and `open_url_failed`.
 
 ## How click-out works

package/index.d.ts

@@ -42,8 +42,8 @@ export interface UptickFlowProps extends UptickFlowParams {
 export function UptickFlow(props: UptickFlowProps): JSX.Element;
 
 export const version: string;
-export function customizations(modal?: UptickModalOptions): 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; custom?: string[] }): string;
+export function buildEmbedUrl(options: { host: string; integrationId: string; placement?: string; 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.2.8",
+  "version": "0.3.0",
   "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

@@ -9,7 +9,7 @@ const MAX_HEIGHT = 1400;
 
 // Messages from the host page that the component acts on itself; every message is also forwarded to `callback`.
 const SHOW_EVENTS = ["offer_viewed"];
-const HIDE_EVENTS = ["flow_complete", "flow_hidden"];
+const HIDE_EVENTS = ["flow_complete", "flow_closed"];
 
 const FILL = { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 };
 
@@ -34,13 +34,13 @@ export function UptickFlow({
 
   const params = pickFlowParams(flowProps);
   const paramsKey = JSON.stringify(params);
-  const custom = customizations(modal);
-  const customKey = custom.join(",");
+  const customization = customizations(modal);
+  const customizationKey = JSON.stringify(customization);
   const source = useMemo(
-    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params, version: SDK_VERSION, custom }) }),
+    () => ({ uri: buildEmbedUrl({ host, integrationId, placement, params, version: SDK_VERSION, customization }) }),
     // 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, customKey]
+    [host, integrationId, placement, paramsKey, customizationKey]
   );
   const ownPath = embedPath(host, integrationId);
 

package/src/embedUrl.js

@@ -41,21 +41,24 @@ export function embedPath(host, integrationId) {
   return `https://${host}/v1/places/${encodeURIComponent(integrationId)}/embed`;
 }
 
-// Names of the presentation options a host customised. They travel as a flow parameter, so every event stores them in its data like any other extra parameter, and reporting can tell a stock integration from a tuned one when performance differs.
+// The presentation options a host customised, with their values. They travel as a nested flow parameter, so every event stores them under `customization` in its data like any other extra parameter, and reporting can read a tuned integration's actual settings 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;
+  if (!modal) return {};
+  const out = {};
+  if (modal.backgroundColor !== undefined) out.backgroundColor = String(modal.backgroundColor);
+  if (modal.cardStyle !== undefined) out.cardStyle = JSON.stringify(modal.cardStyle);
+  if (modal.insets !== undefined) out.insets = JSON.stringify(modal.insets);
+  if (modal.maxCardHeight !== undefined) out.maxCardHeight = String(modal.maxCardHeight);
+  return out;
 }
 
-export function buildEmbedUrl({ host, integrationId, placement, params, version, custom }) {
+export function buildEmbedUrl({ host, integrationId, placement, params, version, customization }) {
   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", integration_version: version });
-  const fragment = encodeQuery({ ...(params || {}), custom: custom && custom.length ? custom.join(",") : undefined });
+  // Nested with bracket keys, the same shape the API stores for any other nested parameter.
+  const nested = {};
+  Object.keys(customization || {}).forEach((key) => { nested[`customization[${key}]`] = customization[key]; });
+  const fragment = encodeQuery({ ...(params || {}), ...nested });
   return `${embedPath(host, integrationId)}?${search}${fragment ? `#${fragment}` : ""}`;
 }

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.2.8";
+export const version = "0.3.0";