@pushwoosh/websdk-common 6.17.1 → 6.19.0

package/inbox/InboxWidgetReader.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { INBOX_WIDGET_CSS } from './constants';
+import { formatInboxMessageTime, getInboxHeroUrl, getInboxIconInitial, getInboxValidSlides, inboxWidgetStyleVariables, resolveInboxLayout, resolveInboxWidgetAppearance } from './helpers';
+function stop(handler) {
+  return event => {
+    event.stopPropagation();
+    handler?.();
+  };
+}
+function Carousel({
+  slides,
+  alt,
+  onSlideLinkClick
+}) {
+  const [index, setIndex] = useState(0);
+  const active = Math.min(index, slides.length - 1);
+  const slide = slides[active];
+  const onSlideClick = slide.link ? stop(() => onSlideLinkClick?.(slide.link)) : undefined;
+  return _jsxs("div", {
+    className: "pw-inbox_media",
+    children: [_jsxs("div", {
+      className: "pw-inbox_slide",
+      onClick: onSlideClick,
+      children: [_jsx("img", {
+        alt: slide.caption || alt,
+        className: "pw-inbox_hero",
+        src: slide.imageUrl
+      }), !!slide.caption && _jsx("span", {
+        className: "pw-inbox_slide-caption",
+        children: slide.caption
+      })]
+    }), slides.length > 1 && _jsx("div", {
+      className: "pw-inbox_pager",
+      children: slides.map((_slide, slideIndex) => _jsx("button", {
+        className: slideIndex === active ? 'pw-inbox_dot pw-active' : 'pw-inbox_dot',
+        onClick: stop(() => setIndex(slideIndex)),
+        type: "button"
+      }, slideIndex))
+    })]
+  });
+}
+function Hero({
+  url,
+  alt,
+  placeholder
+}) {
+  return _jsx("div", {
+    className: "pw-inbox_media",
+    children: placeholder ? _jsx("div", {
+      className: "pw-inbox_hero pw-inbox_hero--placeholder"
+    }) : _jsx("img", {
+      alt: alt,
+      className: "pw-inbox_hero",
+      src: url
+    })
+  });
+}
+/** One cell of the web inbox widget, the `li.pw-inbox_item` the WebSDK draws. */
+export function InboxWebCell(props) {
+  const {
+    content,
+    layout,
+    title,
+    body,
+    timeLabel,
+    isRead,
+    isActionPerformed,
+    code,
+    placeholder,
+    onClick,
+    onRemove,
+    onSlideLinkClick
+  } = props;
+  const alt = content.title || content.body || '';
+  const texts = _jsxs("div", {
+    className: "pw-inbox_content",
+    children: [_jsxs("div", {
+      className: "pw-inbox_item-title",
+      children: [title, !isRead && _jsx("span", {
+        className: "pw-inbox_unread-dot"
+      })]
+    }), _jsx("div", {
+      className: "pw-inbox_item-body",
+      children: body
+    }), _jsx("div", {
+      className: "pw-inbox_item-time",
+      children: timeLabel
+    })]
+  });
+  let media;
+  if (layout === 'carousel' && !placeholder) {
+    media = _jsx(Carousel, {
+      alt: alt,
+      onSlideLinkClick: onSlideLinkClick,
+      slides: getInboxValidSlides(content.carousel)
+    });
+  } else if (layout !== 'classic') {
+    media = _jsx(Hero, {
+      alt: alt,
+      placeholder: placeholder,
+      url: getInboxHeroUrl(content)
+    });
+  }
+  let icon;
+  if (placeholder) {
+    icon = _jsx("div", {
+      className: "pw-inbox_icon pw-inbox_icon--placeholder"
+    });
+  } else {
+    icon = _jsx("div", {
+      className: "pw-inbox_icon",
+      children: content.iconUrl ? _jsx("img", {
+        alt: alt,
+        className: "pw-inbox_message-image",
+        src: content.iconUrl
+      }) : _jsx("span", {
+        className: "pw-inbox_icon-initial",
+        children: getInboxIconInitial(content)
+      })
+    });
+  }
+  const className = ['pw-inbox_item', !isRead && 'pw-new', !isActionPerformed && 'pw-unread'].filter(Boolean).join(' ');
+  return _jsxs("li", {
+    className: className,
+    "data-pw-inbox-message-id": code,
+    onClick: onClick,
+    children: [_jsxs("div", {
+      className: `pw-inbox_item-inner pw-inbox_item--${layout}`,
+      children: [layout === 'classic' ? icon : media, layout !== 'banner' && texts]
+    }), _jsx("span", {
+      className: "pw-inbox_item-remove",
+      onClick: stop(onRemove)
+    })]
+  });
+}
+function WidgetBody({
+  messages,
+  appearance,
+  now,
+  onMessageClick,
+  onMessageRemove,
+  onSlideLinkClick
+}) {
+  if (messages.length === 0) {
+    return _jsxs("div", {
+      className: "pw-inbox_list--empty",
+      children: [_jsx("div", {
+        className: "pw-inbox_list-icon",
+        children: _jsx("img", {
+          alt: appearance.emptyInboxTitle,
+          src: appearance.emptyInboxIconUrl
+        })
+      }), _jsx("div", {
+        className: "pw-inbox_list-title",
+        children: appearance.emptyInboxTitle
+      }), _jsx("div", {
+        className: "ipw-inbox_list-body",
+        children: appearance.emptyInboxText
+      })]
+    });
+  }
+  return _jsxs("div", {
+    className: "pw-inbox_inner",
+    children: [_jsx("div", {
+      className: "pw-inbox_title",
+      children: appearance.title
+    }), _jsx("ul", {
+      className: "pw-inbox_list",
+      children: messages.map(message => _jsx(InboxWebCell, {
+        body: message.body,
+        code: message.code,
+        content: message,
+        isActionPerformed: message.isActionPerformed,
+        isRead: message.isRead,
+        layout: resolveInboxLayout(message),
+        onClick: () => onMessageClick?.(message.code),
+        onRemove: () => onMessageRemove?.(message.code),
+        onSlideLinkClick: link => onSlideLinkClick?.(message.code, link),
+        timeLabel: formatInboxMessageTime(message.sendDate, now),
+        title: message.title
+      }, message.code))
+    })]
+  });
+}
+/** Classes and custom properties of a preview widget box; a live host sets them on its own element. */
+export function inboxWidgetPreviewFrame(appearance, extraClass) {
+  const className = ['pw-inbox-widget pw-inbox-widget--preview', extraClass, appearance.legacyClassicCell && 'pw-inbox-widget--legacy-cell'].filter(Boolean).join(' ');
+  return {
+    className,
+    style: inboxWidgetStyleVariables(appearance)
+  };
+}
+/** The web inbox widget: message list or empty state. `live` fills the host's `.pw-inbox-widget` element, `preview` draws the box inline. */
+export function InboxWidgetReader(props) {
+  const {
+    mode,
+    messages,
+    now,
+    onMessageClick,
+    onMessageRemove,
+    onSlideLinkClick
+  } = props;
+  const appearance = resolveInboxWidgetAppearance(props.appearance);
+  const content = _jsxs(_Fragment, {
+    children: [_jsx("style", {
+      children: INBOX_WIDGET_CSS
+    }), _jsx("div", {
+      className: "pw-inbox__arrow"
+    }), _jsx(WidgetBody, {
+      appearance: appearance,
+      messages: messages,
+      now: now,
+      onMessageClick: onMessageClick,
+      onMessageRemove: onMessageRemove,
+      onSlideLinkClick: onSlideLinkClick
+    })]
+  });
+  if (mode === 'live') {
+    return content;
+  }
+  const frame = inboxWidgetPreviewFrame(appearance, messages.length === 0 ? 'pw-inbox-widget--empty' : undefined);
+  return _jsx("div", {
+    className: frame.className,
+    style: frame.style,
+    children: content
+  });
+}

package/inbox/constants.d.ts

@@ -0,0 +1,15 @@
+import { type InboxLayout, type InboxWidgetAppearance, type InboxWidgetStyleVariable } from './types';
+/** The sending pipeline and the editor keep at most this many carousel slides. */
+export declare const INBOX_MAX_CAROUSEL_SLIDES = 5;
+/** Layouts a cell can draw; anything else falls back to the heuristic. */
+export declare const INBOX_KNOWN_LAYOUTS: readonly InboxLayout[];
+/** Prefix of the widget's CSS custom properties: `--pw-inbox-<name>`, a public API customers override from their CSS. */
+export declare const INBOX_WIDGET_STYLE_PREFIX = "pw-inbox";
+/** Month labels of the absolute message dates. */
+export declare const INBOX_MONTHS: string[];
+/** Appearance values exposed as CSS custom properties, with their formatting. */
+export declare const INBOX_WIDGET_STYLE_VARIABLES: readonly InboxWidgetStyleVariable[];
+/** Default appearance of the web inbox widget. */
+export declare const INBOX_WIDGET_DEFAULT_APPEARANCE: InboxWidgetAppearance;
+/** Stylesheet of the web inbox widget and its trigger badge; class names and custom properties are public API. */
+export declare const INBOX_WIDGET_CSS = "\n.pw-inbox-trigger {\n  position: relative;\n  cursor: pointer;\n}\n\n.pw-inbox-trigger:after {\n  content: attr(data-pw-count);\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n  background: var(--pw-inbox-badgeBgColor, #ff4c00);\n  border-radius: 8px;\n  color: var(--pw-inbox-badgeTextColor, #ffffff);\n  font-size: 10px;\n  font-weight: normal;\n  line-height: 16px;\n  width: 16px;\n  padding: 0 2px;\n  box-sizing: border-box;\n  text-align: center;\n}\n\n.pw-inbox-trigger.pw-empty:after {\n  display: none;\n}\n\n.pw-inbox-widget * {\n  position: static;\n  box-sizing: border-box;\n  font-size: 1em;\n  outline: none;\n  font-family: var(--pw-inbox-fontFamily, inherit);\n}\n.pw-inbox-widget {\n  font-size: 14px;\n  position: absolute;\n  top: 0;\n  left: -1000px;\n  background: var(--pw-inbox-bgColor, #ffffff);\n  border: solid 1px var(--pw-inbox-borderColor, transparent);\n  border-radius: var(--pw-inbox-borderRadius, 4px);\n  width: var(--pw-inbox-widgetWidth, 350px);\n  box-shadow: 0 1px 4px 0 rgba(0,0,0,.25);\n  z-index: var(--pw-inbox-zIndex, 100);\n  opacity: 0;\n  transition: opacity .6s ease;\n  transition-delay: 100ms;\n}\n.pw-inbox-widget.pw-open {\n  opacity: 1;\n  transition-delay: 0ms;\n}\n.pw-inbox-widget.pw-inbox-widget--inset {\n  top: auto;\n  left: auto;\n  display: none;\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-open {\n  display: block;\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-right {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--inset.pw-left {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-inbox-widget--empty {\n  max-height: none;\n}\n.pw-inbox-widget .pw-inbox__arrow {\n  display: block;\n  width: 0;\n  height: 0;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent;\n  position: absolute;\n}\n.pw-inbox-widget .pw-inbox__arrow:before {\n  content: \"\";\n  display: block;\n  width: 0;\n  height: 0;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent;\n  position: absolute;\n}\n.pw-inbox-widget.pw-top {\n  margin-top: -12px;\n}\n.pw-inbox-widget.pw-top .pw-inbox__arrow {\n  border-top-color: var(--pw-inbox-arrowBorderColor, rgba(0,0,0,.1));\n  bottom: -21px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-top .pw-inbox__arrow:before {\n  border-top-color: var(--pw-inbox-bgColor, #ffffff);\n  top: -11px;\n  left: -10px;\n}\n.pw-inbox-widget.pw-bottom {\n  margin-top: 12px;\n}\n.pw-inbox-widget.pw-bottom .pw-inbox__arrow {\n  border-bottom-color: var(--pw-inbox-arrowBorderColor, rgba(0,0,0,.1));\n  top: -21px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pw-inbox-widget.pw-bottom .pw-inbox__arrow:before {\n  border-bottom-color: var(--pw-inbox-bgColor, #ffffff);\n  bottom: -11px;\n  left: -10px;\n}\n.pw-inbox-widget.pw-left {\n  margin-left: -12px;\n}\n.pw-inbox-widget.pw-left .pw-inbox__arrow {\n  border-left-color: var(--pw-inbox-arrowBorderColor, rgba(0,0,0,.1));\n  right: -21px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-left .pw-inbox__arrow:before {\n  border-left-color: var(--pw-inbox-bgColor, #ffffff);\n  left: -11px;\n  top: -10px;\n}\n.pw-inbox-widget.pw-right {\n  margin-left: 12px;\n}\n.pw-inbox-widget.pw-right .pw-inbox__arrow {\n  border-right-color: var(--pw-inbox-arrowBorderColor, rgba(0,0,0,.1));\n  left: -21px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.pw-inbox-widget.pw-right .pw-inbox__arrow:before {\n  border-right-color: var(--pw-inbox-bgColor, #ffffff);\n  right: -11px;\n  top: -10px;\n}\n.pw-inbox_inner {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.pw-inbox_title {\n  color: var(--pw-inbox-textColor, #333333);\n  margin: 0;\n  padding: 28px 32px 12px;\n  font-size: 24px;\n  font-weight: 500;\n  line-height: 1.1;\n  text-align: left;\n  flex: 0 0 66px;\n}\n.pw-inbox_list {\n  overflow-x: hidden;\n  overflow-y: auto;\n  min-width: 200px;\n  max-height: 300px;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  position: relative;\n  flex: 1 1 auto;\n}\n\n.pw-inbox_item {\n  position: relative;\n  padding: 8px 32px;\n  margin: 0;\n  text-align: left;\n}\n.pw-inbox_item-inner {\n  display: flex;\n  cursor: pointer;\n}\n.pw-inbox_icon {\n  flex: 0 0 auto;\n  width: var(--pw-inbox-avatarSize, 52px);\n  height: var(--pw-inbox-avatarSize, 52px);\n  margin-right: 14px;\n  overflow: hidden;\n  border-radius: var(--pw-inbox-mediaRadius, 8px);\n  background: var(--pw-inbox-avatarBgColor, #c4c8cc);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pw-inbox_message-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.pw-inbox_icon-initial {\n  color: var(--pw-inbox-avatarTextColor, #4b5057);\n  font-size: 22px;\n  line-height: 1;\n  font-weight: 700;\n}\n.pw-inbox_content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.pw-inbox_item-title {\n  color: var(--pw-inbox-messageTitleColor, #7a7a7a);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pw-inbox_unread-dot {\n  flex: 0 0 auto;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--pw-inbox-unreadDotColor, #00a2ff);\n}\n.pw-inbox_item-body {\n  color: var(--pw-inbox-textColor, #333333);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 4px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.pw-inbox_item-time {\n  color: var(--pw-inbox-timeTextColor, #c4c4c4);\n  font-size: 12px;\n  line-height: 17px;\n}\n.pw-inbox_item-remove {\n  position: absolute;\n  z-index: 2;\n  top: 8px;\n  right: 8px;\n  display: none;\n  width: 10px;\n  height: 10px;\n  background: transparent url('https://cdn.pushwoosh.com/webpush/img/iconClose.svg') 50% no-repeat;\n  cursor: pointer;\n}\n.pw-inbox_item:hover .pw-inbox_item-remove {\n  display: block;\n}\n\n.pw-inbox_item.pw-new .pw-inbox_item-title {\n  color: var(--pw-inbox-textColor, #333333);\n  font-weight: 700;\n}\n\n.pw-inbox_item.pw-new .pw-inbox_item-body {\n  font-weight: 700;\n}\n\n.pw-inbox_list--empty {\n  padding: 50px 16px;\n  text-align: center;\n  max-height: 100%;\n  overflow: auto;\n}\n\n.pw-inbox_list--empty .pw-inbox_list-icon {\n  text-align: center;\n  margin-bottom: 30px;\n}\n.pw-inbox_list--empty .pw-inbox_list-icon img {\n  max-width: 100%;\n}\n\n.pw-inbox_list--empty .pw-inbox_list-title {\n  font-size: 28px;\n  line-height: 36px;\n  color: var(--pw-inbox-emptyInboxTitleColor, #333333);\n  margin-bottom: 20px;\n}\n\n.pw-inbox_list--empty .ipw-inbox_list-body {\n  font-size: 14px;\n  line-height: 18px;\n  color: var(--pw-inbox-emptyInboxTextColor, #7a7a7a);\n}\n\n/* Cell layouts: banner, captioned and carousel stack their media above the\n   texts, so the flex row of the classic cell becomes a column. */\n.pw-inbox_item--banner,\n.pw-inbox_item--captioned,\n.pw-inbox_item--carousel {\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pw-inbox_media {\n  position: relative;\n  width: 100%;\n}\n.pw-inbox_hero {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  aspect-ratio: 2 / 1;\n  object-fit: cover;\n  border-radius: var(--pw-inbox-mediaRadius, 8px);\n}\n\n.pw-inbox_slide {\n  position: relative;\n  display: block;\n  cursor: pointer;\n}\n.pw-inbox_slide-caption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 14px 10px 6px;\n  color: var(--pw-inbox-slideCaptionColor, #ffffff);\n  font-size: 14px;\n  line-height: 20px;\n  border-radius: 0 0 var(--pw-inbox-mediaRadius, 8px) var(--pw-inbox-mediaRadius, 8px);\n  background: linear-gradient(transparent, var(--pw-inbox-slideScrimColor, rgba(0,0,0,.45)));\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.pw-inbox_pager {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n.pw-inbox_dot {\n  width: 6px;\n  height: 6px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--pw-inbox-pagerDotColor, #ebf0f5);\n  cursor: pointer;\n}\n.pw-inbox_dot.pw-active {\n  background: var(--pw-inbox-pagerDotActiveColor, #00a2ff);\n}\n\n/* `legacyClassicCell` restores the pre-3.75 classic cell. Scoped to classic on\n   purpose: the three new layouts have no older look to go back to. */\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_icon {\n  display: block;\n  flex: 0 0 40px;\n  width: auto;\n  height: auto;\n  margin-right: 0;\n  border-radius: 0;\n  background: none;\n}\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_message-image {\n  width: 28px;\n  height: auto;\n  object-fit: fill;\n}\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_content {\n  flex: 0 1 100%;\n}\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_item-title {\n  display: block;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_unread-dot {\n  display: none;\n}\n.pw-inbox-widget--legacy-cell .pw-inbox_item--classic .pw-inbox_item-body {\n  display: block;\n  overflow: visible;\n}\n\n.pw-inbox-widget.pw-inbox-widget--preview {\n  position: relative;\n  top: auto;\n  left: auto;\n  max-width: 100%;\n  opacity: 1;\n  transition: none;\n}\n.pw-inbox-widget--preview .pw-inbox__arrow {\n  display: none;\n}\n.pw-inbox-widget--cell .pw-inbox_item {\n  padding: 16px;\n}\n.pw-inbox_icon--placeholder {\n  border: 1px dashed #00a2ff;\n  background: #80b7ff33;\n}\n.pw-inbox_hero--placeholder {\n  border: 1px dashed #00a2ff;\n  background: #80b7ff33;\n}\n";