@pushwoosh/websdk-common 6.17.1 → 6.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/websdk-common",
-  "version": "6.17.1",
+  "version": "6.18.0",
   "description": "Code shared by the Pushwoosh WebSDK and the Control Panel, one entry point per module (web-popups: web popup model and renderer; subscription-widget: push subscription widget model and renderer)",
   "main": "index.js",
   "module": "index.js",

package/subscription-widget/SubscriptionWidgetReader.d.ts

@@ -9,7 +9,7 @@ export declare function SubscriptionPromptBox({ config, variant, colors, busy, o
     onAccept?: () => void;
     onDecline?: () => void;
 }): import("react").JSX.Element;
-/** The launcher bell without placement. */
+/** The launcher without placement: the authored picture, or the round bell button. */
 export declare function SubscriptionLauncherButton({ config, blocked, colors, onClick }: {
     config: SubscriptionWidgetConfig;
     blocked: boolean;
@@ -17,7 +17,7 @@ export declare function SubscriptionLauncherButton({ config, blocked, colors, on
     onClick?: () => void;
 }): import("react").JSX.Element;
 /**
- * The launcher, or while `open` the prompt in its place; 'live' pins it to the viewport, 'preview' to the
- * nearest positioned parent with no enter animation. The host owns `open` and every side effect.
+ * The prompt while `open` and the launcher, each only when switched on; 'live' pins them to the viewport,
+ * 'preview' to the nearest positioned parent with no enter animation. The host owns `open` and every side effect.
  */
 export declare function SubscriptionWidgetReader({ config, permission, open, mode, colorScheme, busy, onAccept, onDecline, onLauncherClick, }: SubscriptionWidgetReaderProps): import("react").JSX.Element | null;

package/subscription-widget/SubscriptionWidgetReader.js

@@ -195,7 +195,7 @@ export function SubscriptionPromptBox({
     })]
   });
 }
-/** The launcher bell without placement. */
+/** The launcher without placement: the authored picture, or the round bell button. */
 export function SubscriptionLauncherButton({
   config,
   blocked,
@@ -203,29 +203,56 @@ export function SubscriptionLauncherButton({
   onClick
 }) {
   const {
-    size
+    width,
+    height,
+    imageUrl
   } = config.launcher;
   const label = blocked ? config.texts.launcherBlockedLabel : config.texts.launcherLabel;
-  const iconSize = Math.round(size / 2);
+  const iconSize = Math.round(Math.min(width, height) / 2);
+  const base = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width,
+    height,
+    padding: 0,
+    border: 'none',
+    cursor: 'pointer',
+    opacity: blocked ? 0.7 : 1
+  };
+  if (imageUrl) {
+    return _jsx("button", {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick: onClick,
+      style: {
+        ...base,
+        background: 'none'
+      },
+      children: _jsx("img", {
+        src: imageUrl,
+        alt: "",
+        width: width,
+        height: height,
+        style: {
+          display: 'block',
+          objectFit: 'contain'
+        }
+      })
+    });
+  }
   return _jsx("button", {
     type: "button",
     "aria-label": label,
     title: label,
     onClick: onClick,
     style: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: size,
-      height: size,
-      padding: 0,
-      border: 'none',
+      ...base,
       borderRadius: '50%',
-      backgroundColor: colors.accent,
-      color: colors.onAccent,
-      boxShadow: BOX_SHADOW,
-      cursor: 'pointer',
-      opacity: blocked ? 0.7 : 1
+      backgroundColor: config.launcher.background ?? colors.accent,
+      color: config.launcher.iconColor ?? colors.onAccent,
+      boxShadow: BOX_SHADOW
     },
     children: _jsxs("svg", {
       width: iconSize,
@@ -246,8 +273,8 @@ export function SubscriptionLauncherButton({
   });
 }
 /**
- * The launcher, or while `open` the prompt in its place; 'live' pins it to the viewport, 'preview' to the
- * nearest positioned parent with no enter animation. The host owns `open` and every side effect.
+ * The prompt while `open` and the launcher, each only when switched on; 'live' pins them to the viewport,
+ * 'preview' to the nearest positioned parent with no enter animation. The host owns `open` and every side effect.
  */
 export function SubscriptionWidgetReader({
   config,
@@ -264,25 +291,13 @@ export function SubscriptionWidgetReader({
   const colors = resolveWebPopupColors(config, scheme);
   const live = mode === 'live';
   const position = live ? 'fixed' : 'absolute';
-  const launcher = !open && subscriptionWidgetLauncherVisible(config, permission);
-  if (!config.enable || !open && !launcher) return null;
+  const prompt = open && config.prompt.enabled;
+  const launcher = subscriptionWidgetLauncherVisible(config, permission);
+  if (!prompt && !launcher) return null;
   return _jsxs(_Fragment, {
     children: [live && _jsx("style", {
       children: SUBSCRIPTION_WIDGET_KEYFRAMES
-    }), launcher && _jsx("div", {
-      style: {
-        position,
-        zIndex: config.zIndex,
-        pointerEvents: 'auto',
-        ...cornerStyle(config.launcher.position, config.launcher.offset)
-      },
-      children: _jsx(SubscriptionLauncherButton, {
-        config: config,
-        blocked: permission === 'denied',
-        colors: colors,
-        onClick: onLauncherClick
-      })
-    }), open && config.prompt.overlay && _jsx("div", {
+    }), prompt && config.prompt.overlay && _jsx("div", {
       style: {
         position,
         inset: 0,
@@ -292,7 +307,7 @@ export function SubscriptionWidgetReader({
         pointerEvents: 'auto'
       },
       onClick: onDecline
-    }), open && _jsx("div", {
+    }), prompt && _jsx("div", {
       style: promptFrameStyle(config, position, live),
       children: _jsx(SubscriptionPromptBox, {
         config: config,
@@ -302,6 +317,19 @@ export function SubscriptionWidgetReader({
         onAccept: onAccept,
         onDecline: onDecline
       })
+    }), launcher && _jsx("div", {
+      style: {
+        position,
+        zIndex: config.zIndex,
+        pointerEvents: 'auto',
+        ...cornerStyle(config.launcher.position, config.launcher.offset)
+      },
+      children: _jsx(SubscriptionLauncherButton, {
+        config: config,
+        blocked: permission === 'denied',
+        colors: colors,
+        onClick: onLauncherClick
+      })
     })]
   });
 }

package/subscription-widget/constants.d.ts

@@ -11,9 +11,10 @@ export declare const SUBSCRIPTION_WIDGET_LIMITS: {
     readonly cappingInterval: readonly [0, 8760];
     readonly borderRadius: readonly [0, 32];
     readonly offset: readonly [0, 100];
-    readonly size: readonly [32, 80];
+    readonly launcherSize: readonly [16, 200];
     readonly zIndex: readonly [0, 2147483647];
 };
 export declare const SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH = 300;
+export declare const SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH = 64;
 export declare const SUBSCRIPTION_WIDGET_DEFAULT_CONFIG: SubscriptionWidgetConfig;
 export declare const SUBSCRIPTION_WIDGET_KEYFRAMES = "\n@keyframes pw-subw-fade { from { opacity: 0; } }\n@keyframes pw-subw-drop { from { opacity: 0; translate: 0 -16px; } }\n@keyframes pw-subw-rise { from { opacity: 0; translate: 0 16px; } }\n";

package/subscription-widget/constants.js

@@ -15,13 +15,15 @@ export const SUBSCRIPTION_WIDGET_LIMITS = {
   cappingInterval: [0, 8760],
   borderRadius: [0, 32],
   offset: [0, 100],
-  size: [32, 80],
+  launcherSize: [16, 200],
   zIndex: [0, 2147483647]
 };
 export const SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH = 300;
+export const SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH = 64;
 export const SUBSCRIPTION_WIDGET_DEFAULT_CONFIG = {
   enable: false,
   prompt: {
+    enabled: false,
     layout: 'card',
     position: 'top',
     borderRadius: 12,
@@ -31,7 +33,8 @@ export const SUBSCRIPTION_WIDGET_DEFAULT_CONFIG = {
     enabled: false,
     position: 'bottom-right',
     offset: 20,
-    size: 48
+    width: 48,
+    height: 48
   },
   display: {
     trigger: 'auto',

package/subscription-widget/helpers.d.ts

@@ -1,4 +1,4 @@
-import { type SubscriptionWidgetConfig, type SubscriptionWidgetHistory, type SubscriptionWidgetPermission, type SubscriptionWidgetPromptVariant } from './types';
+import { type SubscriptionWidgetConfig, type SubscriptionWidgetHistory, type SubscriptionWidgetLauncherAction, type SubscriptionWidgetPermission, type SubscriptionWidgetPromptVariant } from './types';
 /**
  * The widget configuration from API-writable json: enums whitelisted, numbers
  * clamped, strings trimmed and capped, urls sanitized, defaults for the rest.
@@ -10,6 +10,8 @@ export declare function subscriptionWidgetActionable(permission: SubscriptionWid
 export declare function subscriptionWidgetPromptVariant(permission: SubscriptionWidgetPermission): SubscriptionWidgetPromptVariant;
 /** Whether the launcher is on screen. */
 export declare function subscriptionWidgetLauncherVisible(config: SubscriptionWidgetConfig, permission: SubscriptionWidgetPermission): boolean;
+/** What a launcher click does for this visitor. */
+export declare function subscriptionWidgetLauncherAction(config: SubscriptionWidgetConfig, permission: SubscriptionWidgetPermission): SubscriptionWidgetLauncherAction;
 /** Whether the prompt may open by itself now; the host still waits `display.delay` before showing it. */
 export declare function subscriptionWidgetCanAutoShow(config: SubscriptionWidgetConfig, permission: SubscriptionWidgetPermission, history: SubscriptionWidgetHistory, nowMs: number): boolean;
 /** The history after one more auto show at `nowMs`. */

package/subscription-widget/helpers.js

@@ -1,4 +1,4 @@
-import { SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, SUBSCRIPTION_WIDGET_TRIGGERS } from './constants';
+import { SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH } from './constants';
 import { normalizeWebPopupColors, normalizeWebPopupDark, safeUrl } from '../web-popups/helpers';
 const HOUR_MS = 3600 * 1000;
 function record(value) {
@@ -20,6 +20,12 @@ function imageUrl(value) {
   const url = safeUrl(typeof value === 'string' ? value : undefined);
   return url && /^(https?:\/\/|\/)/i.test(url) ? url : undefined;
 }
+function optionalColor(key, value) {
+  const color = typeof value === 'string' ? value.trim().slice(0, SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH) : '';
+  return color ? {
+    [key]: color
+  } : {};
+}
 function normalizeTexts(raw) {
   const defaults = SUBSCRIPTION_WIDGET_DEFAULT_CONFIG.texts;
   const keys = Object.keys(defaults);
@@ -40,15 +46,19 @@ export function normalizeSubscriptionWidgetConfig(raw) {
   const positions = SUBSCRIPTION_WIDGET_POSITIONS[layout];
   const trigger = oneOf(display.trigger, SUBSCRIPTION_WIDGET_TRIGGERS, defaults.display.trigger);
   const iconUrl = imageUrl(prompt.iconUrl);
+  const launcherImageUrl = imageUrl(launcher.imageUrl);
   const colors = normalizeWebPopupColors({
     colors: config.colors
   });
   const dark = normalizeWebPopupDark({
     dark: config.dark
   }, colors);
+  const promptEnabled = prompt.enabled === true;
+  const launcherEnabled = launcher.enabled === true;
   return {
-    enable: config.enable === true,
+    enable: promptEnabled || launcherEnabled,
     prompt: {
+      enabled: promptEnabled,
       layout,
       position: oneOf(prompt.position, positions, positions[0]),
       ...(iconUrl ? {
@@ -58,10 +68,16 @@ export function normalizeSubscriptionWidgetConfig(raw) {
       overlay: layout === 'modal' || prompt.overlay === true
     },
     launcher: {
-      enabled: trigger === 'launcher' || launcher.enabled === true,
+      enabled: launcherEnabled,
       position: oneOf(launcher.position, SUBSCRIPTION_WIDGET_CORNERS, defaults.launcher.position),
       offset: clamped(launcher.offset, limits.offset, defaults.launcher.offset),
-      size: clamped(launcher.size, limits.size, defaults.launcher.size)
+      width: clamped(launcher.width, limits.launcherSize, defaults.launcher.width),
+      height: clamped(launcher.height, limits.launcherSize, defaults.launcher.height),
+      ...(launcherImageUrl ? {
+        imageUrl: launcherImageUrl
+      } : {}),
+      ...optionalColor('background', launcher.background),
+      ...optionalColor('iconColor', launcher.iconColor)
     },
     display: {
       trigger,
@@ -88,7 +104,12 @@ export function subscriptionWidgetPromptVariant(permission) {
 }
 /** Whether the launcher is on screen. */
 export function subscriptionWidgetLauncherVisible(config, permission) {
-  return config.enable && config.launcher.enabled && subscriptionWidgetActionable(permission);
+  return config.launcher.enabled && subscriptionWidgetActionable(permission);
+}
+/** What a launcher click does for this visitor. */
+export function subscriptionWidgetLauncherAction(config, permission) {
+  if (config.prompt.enabled) return 'prompt';
+  return permission === 'default' ? 'subscribe' : 'none';
 }
 /** Whether the prompt may open by itself now; the host still waits `display.delay` before showing it. */
 export function subscriptionWidgetCanAutoShow(config, permission, history, nowMs) {
@@ -97,7 +118,7 @@ export function subscriptionWidgetCanAutoShow(config, permission, history, nowMs
     cappingCount,
     cappingInterval
   } = config.display;
-  if (!config.enable || trigger !== 'auto' || permission !== 'default') return false;
+  if (!config.prompt.enabled || trigger !== 'auto' || permission !== 'default') return false;
   if (cappingCount > 0 && history.shownCount >= cappingCount) return false;
   return history.lastShownAt === null || nowMs - history.lastShownAt >= cappingInterval * HOUR_MS;
 }

package/subscription-widget/index.d.ts

@@ -1,4 +1,4 @@
 export { SubscriptionWidgetReader, SubscriptionPromptBox, SubscriptionLauncherButton } from './SubscriptionWidgetReader';
-export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory, } from './helpers';
-export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, } from './constants';
-export type { SubscriptionWidgetConfig, SubscriptionWidgetCorner, SubscriptionWidgetDisplay, SubscriptionWidgetHistory, SubscriptionWidgetLauncher, SubscriptionWidgetLayout, SubscriptionWidgetPermission, SubscriptionWidgetPosition, SubscriptionWidgetPrompt, SubscriptionWidgetPromptVariant, SubscriptionWidgetReaderMode, SubscriptionWidgetReaderProps, SubscriptionWidgetTexts, SubscriptionWidgetTrigger, } from './types';
+export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetLauncherAction, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory, } from './helpers';
+export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH, } from './constants';
+export type { SubscriptionWidgetConfig, SubscriptionWidgetCorner, SubscriptionWidgetDisplay, SubscriptionWidgetHistory, SubscriptionWidgetLauncher, SubscriptionWidgetLauncherAction, SubscriptionWidgetLayout, SubscriptionWidgetPermission, SubscriptionWidgetPosition, SubscriptionWidgetPrompt, SubscriptionWidgetPromptVariant, SubscriptionWidgetReaderMode, SubscriptionWidgetReaderProps, SubscriptionWidgetTexts, SubscriptionWidgetTrigger, } from './types';

package/subscription-widget/index.js

@@ -1,3 +1,3 @@
 export { SubscriptionWidgetReader, SubscriptionPromptBox, SubscriptionLauncherButton } from './SubscriptionWidgetReader';
-export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory } from './helpers';
-export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH } from './constants';
+export { normalizeSubscriptionWidgetConfig, subscriptionWidgetActionable, subscriptionWidgetPromptVariant, subscriptionWidgetLauncherVisible, subscriptionWidgetLauncherAction, subscriptionWidgetCanAutoShow, nextSubscriptionWidgetHistory } from './helpers';
+export { SUBSCRIPTION_WIDGET_DEFAULT_CONFIG, SUBSCRIPTION_WIDGET_POSITIONS, SUBSCRIPTION_WIDGET_LAYOUTS, SUBSCRIPTION_WIDGET_CORNERS, SUBSCRIPTION_WIDGET_TRIGGERS, SUBSCRIPTION_WIDGET_LIMITS, SUBSCRIPTION_WIDGET_TEXT_MAX_LENGTH, SUBSCRIPTION_WIDGET_COLOR_MAX_LENGTH } from './constants';

package/subscription-widget/types.d.ts

@@ -28,6 +28,8 @@ export type SubscriptionWidgetTexts = {
 };
 /** The ask itself. */
 export type SubscriptionWidgetPrompt = {
+    /** Whether the prompt is drawn at all; independent of the launcher. */
+    enabled: boolean;
     layout: SubscriptionWidgetLayout;
     position: SubscriptionWidgetPosition;
     /** Image drawn beside the copy; absent = no image. */
@@ -36,15 +38,25 @@ export type SubscriptionWidgetPrompt = {
     /** Page dim behind the prompt; a modal always has one. */
     overlay: boolean;
 };
-/** The floating bell that reopens the prompt. */
+/** The floating bell: opens the prompt when it is on, asks for the permission itself otherwise. */
 export type SubscriptionWidgetLauncher = {
+    /** Whether the bell is drawn at all; independent of the prompt. */
     enabled: boolean;
     position: SubscriptionWidgetCorner;
     /** Distance from the screen edges, px. */
     offset: number;
-    /** Button diameter, px. */
-    size: number;
+    /** Button size, px. */
+    width: number;
+    height: number;
+    /** Picture drawn instead of the round bell button; absent = the bell. */
+    imageUrl?: string;
+    /** Fill of the round button; absent = the palette accent. */
+    background?: string;
+    /** The bell glyph; absent = the label colour over the accent. */
+    iconColor?: string;
 };
+/** What a launcher click does: open the prompt, ask the browser directly, or nothing (blocked). */
+export type SubscriptionWidgetLauncherAction = 'prompt' | 'subscribe' | 'none';
 /** When the prompt shows by itself. */
 export type SubscriptionWidgetDisplay = {
     trigger: SubscriptionWidgetTrigger;
@@ -57,6 +69,7 @@ export type SubscriptionWidgetDisplay = {
 };
 /** The whole widget configuration as stored in the WebSDK config (`subscriptionWidget`). */
 export type SubscriptionWidgetConfig = {
+    /** True when the prompt or the launcher is on, i.e. the widget draws something. */
     enable: boolean;
     prompt: SubscriptionWidgetPrompt;
     launcher: SubscriptionWidgetLauncher;