@pushwoosh/websdk-common 6.17.1 → 6.19.0

package/inbox/helpers.js

@@ -0,0 +1,150 @@
+import { INBOX_KNOWN_LAYOUTS, INBOX_MAX_CAROUSEL_SLIDES, INBOX_MONTHS, INBOX_WIDGET_DEFAULT_APPEARANCE, INBOX_WIDGET_STYLE_PREFIX, INBOX_WIDGET_STYLE_VARIABLES } from './constants';
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const RULE_BREAKERS = /[;{}]/;
+/** Picks the content to render: explicit `content` wins, otherwise the `language` entry of `localizedContent` with default/en/first fallbacks. */
+export function pickInboxLocalizedContent(content, localizedContent, language) {
+  if (content) {
+    return content;
+  }
+  if (!localizedContent) {
+    return null;
+  }
+  const keys = Object.keys(localizedContent);
+  if (keys.length === 0) {
+    return null;
+  }
+  if (language && localizedContent[language]) {
+    return localizedContent[language];
+  }
+  return localizedContent.default || localizedContent.en || localizedContent[keys[0]];
+}
+/** Slides a cell draws: the ones with an image, at most {@link INBOX_MAX_CAROUSEL_SLIDES}. */
+export function getInboxValidSlides(slides) {
+  return (Array.isArray(slides) ? slides : []).filter(slide => !!slide && !!slide.imageUrl).slice(0, INBOX_MAX_CAROUSEL_SLIDES);
+}
+/** Hero image of the banner/captioned layouts: the banner, with the icon standing in when none was sent. */
+export function getInboxHeroUrl(content) {
+  return content.bannerUrl || content.iconUrl || '';
+}
+/** Resolves the layout a cell draws: the requested one when it can render, the heuristic for unknown ones, classic otherwise. */
+export function resolveInboxLayout(content) {
+  const hasTitle = !!content.title;
+  const hasBody = !!content.body;
+  const hero = getInboxHeroUrl(content);
+  let requested = content.layoutType;
+  if (!INBOX_KNOWN_LAYOUTS.includes(requested)) {
+    if (content.bannerUrl && !hasTitle) {
+      requested = 'banner';
+    } else if (content.bannerUrl && hasTitle && hasBody) {
+      requested = 'captioned';
+    } else {
+      requested = 'classic';
+    }
+  }
+  switch (requested) {
+    case 'banner':
+      return hero ? 'banner' : 'classic';
+    case 'captioned':
+      return hero && hasTitle && hasBody ? 'captioned' : 'classic';
+    case 'carousel':
+      return hasTitle && hasBody && getInboxValidSlides(content.carousel).length > 0 ? 'carousel' : 'classic';
+    default:
+      return 'classic';
+  }
+}
+/** True when the content has nothing to render yet, so a preview shows the layout placeholder. */
+export function isInboxContentEmpty(content) {
+  return !content.title && !content.body && !content.iconUrl && !content.bannerUrl && getInboxValidSlides(content.carousel).length === 0;
+}
+/** The layout whose placeholder an empty preview shows: the requested one when known, else classic. */
+export function getInboxEmptyLayout(content) {
+  const requested = content.layoutType;
+  return INBOX_KNOWN_LAYOUTS.includes(requested) ? requested : 'classic';
+}
+/** Title/body pair of the mobile cells: in classic the body stands in for a missing title, as the mobile SDKs draw it. */
+export function getInboxMobileTexts(content, layout) {
+  if (layout === 'classic') {
+    return {
+      title: content.title || content.body || '',
+      body: content.title && content.body || ''
+    };
+  }
+  return {
+    title: content.title || '',
+    body: content.body || ''
+  };
+}
+/** The colored initial a classic cell shows when there is no icon. */
+export function getInboxIconInitial(content) {
+  return (content.title || content.body || '?').trim().charAt(0).toUpperCase() || '?';
+}
+/** Date label of a web widget message: relative within a day of `now`, then `D Mon YYYY, H:mm` in local time. */
+export function formatInboxMessageTime(sendDate, now = Date.now()) {
+  const date = new Date(sendDate);
+  const gap = now - date.getTime();
+  if (gap <= MINUTE) {
+    return 'Just now';
+  }
+  if (gap < HOUR) {
+    return `${Math.floor(gap / MINUTE)} minutes ago`;
+  }
+  if (gap < DAY) {
+    return `${Math.floor(gap / HOUR)} hours ago`;
+  }
+  const minutes = `0${date.getMinutes()}`.slice(-2);
+  return `${date.getDate()} ${INBOX_MONTHS[date.getMonth()]} ${date.getFullYear()}, ${date.getHours()}:${minutes}`;
+}
+/** Newest first. */
+export function compareInboxBySendDate(one, two) {
+  return new Date(two).getTime() - new Date(one).getTime();
+}
+/** Full appearance from a partial one; the arrow border follows a visible widget border unless set explicitly. */
+export function resolveInboxWidgetAppearance(appearance) {
+  const {
+    borderColor
+  } = appearance || {};
+  return {
+    ...INBOX_WIDGET_DEFAULT_APPEARANCE,
+    arrowBorderColor: borderColor && borderColor !== 'transparent' ? borderColor : INBOX_WIDGET_DEFAULT_APPEARANCE.arrowBorderColor,
+    ...appearance
+  };
+}
+/** One appearance value as its CSS custom property value; `null` leaves it unset so the stylesheet default applies. */
+export function formatInboxStyleValue(type, value) {
+  switch (type) {
+    case 'size':
+      {
+        if (value === null || value === undefined || value === '') {
+          return null;
+        }
+        const size = Number(value);
+        return Number.isFinite(size) ? `${size}px` : null;
+      }
+    case 'number':
+      {
+        const parsed = parseFloat(String(value));
+        return Number.isFinite(parsed) ? String(parsed) : null;
+      }
+    default:
+      {
+        const text = String(value ?? '').trim();
+        return text && !RULE_BREAKERS.test(text) ? text : null;
+      }
+  }
+}
+/** The `--pw-inbox-*` custom properties of an appearance, ready for a `style` object or `setProperty`. */
+export function inboxWidgetStyleVariables(appearance) {
+  const variables = {};
+  INBOX_WIDGET_STYLE_VARIABLES.forEach(({
+    name,
+    type
+  }) => {
+    const formatted = formatInboxStyleValue(type, appearance[name]);
+    if (formatted !== null) {
+      variables[`--${INBOX_WIDGET_STYLE_PREFIX}-${name}`] = formatted;
+    }
+  });
+  return variables;
+}

package/inbox/index.d.ts

@@ -0,0 +1,6 @@
+export { InboxWidgetReader, InboxWebCell, inboxWidgetPreviewFrame } from './InboxWidgetReader';
+export { InboxCellPreview } from './InboxCellPreview';
+export { pickInboxLocalizedContent, getInboxValidSlides, getInboxHeroUrl, resolveInboxLayout, isInboxContentEmpty, getInboxEmptyLayout, getInboxMobileTexts, getInboxIconInitial, formatInboxMessageTime, compareInboxBySendDate, resolveInboxWidgetAppearance, formatInboxStyleValue, inboxWidgetStyleVariables, } from './helpers';
+export { INBOX_MAX_CAROUSEL_SLIDES, INBOX_KNOWN_LAYOUTS, INBOX_WIDGET_STYLE_PREFIX, INBOX_MONTHS, INBOX_WIDGET_STYLE_VARIABLES, INBOX_WIDGET_DEFAULT_APPEARANCE, INBOX_WIDGET_CSS, } from './constants';
+export type { InboxWebCellProps } from './InboxWidgetReader';
+export type { InboxLayout, InboxSlide, InboxCellContent, InboxWidgetMessage, InboxWidgetPosition, InboxWidgetAppearance, InboxWidgetStyleName, InboxWidgetStyleType, InboxWidgetStyleVariable, InboxWidgetReaderMode, InboxWidgetReaderProps, InboxCellPlatform, InboxCellPreviewProps, } from './types';

package/inbox/index.js

@@ -0,0 +1,4 @@
+export { InboxWidgetReader, InboxWebCell, inboxWidgetPreviewFrame } from './InboxWidgetReader';
+export { InboxCellPreview } from './InboxCellPreview';
+export { pickInboxLocalizedContent, getInboxValidSlides, getInboxHeroUrl, resolveInboxLayout, isInboxContentEmpty, getInboxEmptyLayout, getInboxMobileTexts, getInboxIconInitial, formatInboxMessageTime, compareInboxBySendDate, resolveInboxWidgetAppearance, formatInboxStyleValue, inboxWidgetStyleVariables } from './helpers';
+export { INBOX_MAX_CAROUSEL_SLIDES, INBOX_KNOWN_LAYOUTS, INBOX_WIDGET_STYLE_PREFIX, INBOX_MONTHS, INBOX_WIDGET_STYLE_VARIABLES, INBOX_WIDGET_DEFAULT_APPEARANCE, INBOX_WIDGET_CSS } from './constants';

package/inbox/types.d.ts

@@ -0,0 +1,126 @@
+import { type ReactNode } from 'react';
+/** Cell layout of an inbox message. */
+export type InboxLayout = 'classic' | 'captioned' | 'banner' | 'carousel';
+/** One carousel slide of an inbox message. */
+export interface InboxSlide {
+    /** Slide image URL; a slide without it is dropped. */
+    imageUrl?: string;
+    /** Caption overlaid at the bottom of the slide. */
+    caption?: string;
+    /** Where a tap on the slide goes; the host validates it before navigating. */
+    link?: string;
+}
+/** Content of one inbox cell, in the shape both the Control Panel and the WebSDK map their data to. */
+export interface InboxCellContent {
+    /** Cell title. */
+    title?: string;
+    /** Cell text. */
+    body?: string;
+    /** Small avatar icon URL; without it classic renders a colored initial. */
+    iconUrl?: string;
+    /** The campaign's own banner for the banner/captioned layouts. */
+    bannerUrl?: string;
+    /** Requested layout; unknown or absent values fall back to the heuristic of {@link resolveInboxLayout}. */
+    layoutType?: string;
+    /** Carousel slides; only the first valid ones are rendered. */
+    carousel?: InboxSlide[];
+}
+/** One message of the web inbox widget. */
+export interface InboxWidgetMessage extends InboxCellContent {
+    /** Message code, rendered as `data-pw-inbox-message-id`. */
+    code: string;
+    /** Send date as an ISO string (UTC). */
+    sendDate: string;
+    /** The message was seen in the widget. */
+    isRead: boolean;
+    /** The message action was performed. */
+    isActionPerformed: boolean;
+}
+/** Position of the widget relative to its trigger. */
+export type InboxWidgetPosition = 'left' | 'right' | 'top' | 'bottom';
+/** Appearance of the web inbox widget; every color and size is also a `--pw-inbox-<name>` CSS custom property. */
+export interface InboxWidgetAppearance {
+    title: string;
+    bgColor: string;
+    textColor: string;
+    fontFamily: string;
+    borderRadius: number;
+    borderColor: string;
+    badgeBgColor: string;
+    badgeTextColor: string;
+    widgetWidth: number;
+    zIndex: number;
+    messageTitleColor: string;
+    timeTextColor: string;
+    emptyInboxTitle: string;
+    emptyInboxText: string;
+    emptyInboxIconUrl: string;
+    emptyInboxTitleColor: string;
+    emptyInboxTextColor: string;
+    arrowBorderColor: string;
+    /** Keep the pre-3.75 look of the classic cell; the other layouts are unaffected. */
+    legacyClassicCell: boolean;
+    unreadDotColor: string;
+    avatarBgColor: string;
+    avatarTextColor: string;
+    avatarSize: number;
+    mediaRadius: number;
+    slideCaptionColor: string;
+    slideScrimColor: string;
+    pagerDotActiveColor: string;
+    pagerDotColor: string;
+}
+/** Appearance keys exposed as `--pw-inbox-<name>` CSS custom properties. */
+export type InboxWidgetStyleName = Exclude<keyof InboxWidgetAppearance, 'title' | 'emptyInboxTitle' | 'emptyInboxText' | 'emptyInboxIconUrl' | 'legacyClassicCell'>;
+/** How an appearance value is formatted into its CSS custom property. */
+export type InboxWidgetStyleType = 'number' | 'color' | 'string' | 'size';
+/** One CSS custom property of the widget. */
+export interface InboxWidgetStyleVariable {
+    name: InboxWidgetStyleName;
+    type: InboxWidgetStyleType;
+}
+/** `live` renders into the host's `.pw-inbox-widget` element; `preview` draws the widget box itself, inline. */
+export type InboxWidgetReaderMode = 'live' | 'preview';
+/** Props of {@link InboxWidgetReader}. */
+export interface InboxWidgetReaderProps {
+    mode: InboxWidgetReaderMode;
+    /** Messages in display order. */
+    messages: InboxWidgetMessage[];
+    /** Appearance; missing keys take {@link INBOX_WIDGET_DEFAULT_APPEARANCE}. */
+    appearance?: Partial<InboxWidgetAppearance>;
+    /** Reference time for the relative dates, ms since epoch (default: now). */
+    now?: number;
+    /** A tap on a message outside its remove icon, pager and slide link. */
+    onMessageClick?: (code: string) => void;
+    /** A tap on the remove icon of a message. */
+    onMessageRemove?: (code: string) => void;
+    /** A tap on a slide that carries a link. */
+    onSlideLinkClick?: (code: string, link: string) => void;
+}
+/** Platform skin of {@link InboxCellPreview}. */
+export type InboxCellPlatform = 'ios' | 'android' | 'web';
+/** Props of {@link InboxCellPreview}. */
+export interface InboxCellPreviewProps {
+    /** Platform skin (default `ios`). */
+    platform?: InboxCellPlatform;
+    /** Content to draw; empty content draws the placeholder of the requested layout. */
+    content?: InboxCellContent | null;
+    /** Date label of the mobile cells (default `12:12`); the web cell derives it from `sendDate`. */
+    dateLabel?: string;
+    /** Send date of the web cell (default: now). */
+    sendDate?: string;
+    /** Draw the unread dot (default `true`). */
+    unread?: boolean;
+    /** Show the loading placeholder. */
+    isLoading?: boolean;
+    /** Title of the empty placeholder. */
+    emptyTitle?: ReactNode;
+    /** Description of the empty placeholder. */
+    emptyDescription?: ReactNode;
+    /** Renders the title/body of the mobile cells (e.g. a rich-text viewer); plain text by default. */
+    renderText?: (text: string) => ReactNode;
+    /** Appearance of the web cell. */
+    appearance?: Partial<InboxWidgetAppearance>;
+    /** CSS width of the preview (default `100%`). */
+    width?: string | number;
+}

package/inbox/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pushwoosh/websdk-common",
-  "version": "6.17.1",
-  "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)",
+  "version": "6.19.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; inbox: web inbox widget and inbox cell previews)",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
@@ -18,6 +18,10 @@
       "types": "./subscription-widget/index.d.ts",
       "default": "./subscription-widget/index.js"
     },
+    "./inbox": {
+      "types": "./inbox/index.d.ts",
+      "default": "./inbox/index.js"
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

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';