@pushwoosh/websdk-common 6.18.0 → 6.19.0

package/inbox/constants.js

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

package/inbox/helpers.d.ts

@@ -0,0 +1,30 @@
+import { type InboxCellContent, type InboxLayout, type InboxSlide, type InboxWidgetAppearance, type InboxWidgetStyleType } from './types';
+/** Picks the content to render: explicit `content` wins, otherwise the `language` entry of `localizedContent` with default/en/first fallbacks. */
+export declare function pickInboxLocalizedContent(content?: InboxCellContent | null, localizedContent?: Record<string, InboxCellContent>, language?: string): InboxCellContent | null;
+/** Slides a cell draws: the ones with an image, at most {@link INBOX_MAX_CAROUSEL_SLIDES}. */
+export declare function getInboxValidSlides(slides?: InboxSlide[] | null): InboxSlide[];
+/** Hero image of the banner/captioned layouts: the banner, with the icon standing in when none was sent. */
+export declare function getInboxHeroUrl(content: InboxCellContent): string;
+/** Resolves the layout a cell draws: the requested one when it can render, the heuristic for unknown ones, classic otherwise. */
+export declare function resolveInboxLayout(content: InboxCellContent): InboxLayout;
+/** True when the content has nothing to render yet, so a preview shows the layout placeholder. */
+export declare function isInboxContentEmpty(content: InboxCellContent): boolean;
+/** The layout whose placeholder an empty preview shows: the requested one when known, else classic. */
+export declare function getInboxEmptyLayout(content: InboxCellContent): InboxLayout;
+/** Title/body pair of the mobile cells: in classic the body stands in for a missing title, as the mobile SDKs draw it. */
+export declare function getInboxMobileTexts(content: InboxCellContent, layout: InboxLayout): {
+    title: string;
+    body: string;
+};
+/** The colored initial a classic cell shows when there is no icon. */
+export declare function getInboxIconInitial(content: InboxCellContent): string;
+/** Date label of a web widget message: relative within a day of `now`, then `D Mon YYYY, H:mm` in local time. */
+export declare function formatInboxMessageTime(sendDate: string, now?: number): string;
+/** Newest first. */
+export declare function compareInboxBySendDate(one: string, two: string): number;
+/** Full appearance from a partial one; the arrow border follows a visible widget border unless set explicitly. */
+export declare function resolveInboxWidgetAppearance(appearance?: Partial<InboxWidgetAppearance> | null): InboxWidgetAppearance;
+/** One appearance value as its CSS custom property value; `null` leaves it unset so the stylesheet default applies. */
+export declare function formatInboxStyleValue(type: InboxWidgetStyleType, value: unknown): string | null;
+/** The `--pw-inbox-*` custom properties of an appearance, ready for a `style` object or `setProperty`. */
+export declare function inboxWidgetStyleVariables(appearance: InboxWidgetAppearance): Record<string, string>;