@pushwoosh/websdk-common 6.17.1 → 6.19.0

package/inbox/InboxCellPreview.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import { type InboxCellPreviewProps } from './types';
+/** One inbox cell drawn the way the SDK of `platform` draws it; the web skin is the WebSDK widget cell itself. */
+export declare function InboxCellPreview(props: InboxCellPreviewProps): ReactElement;

package/inbox/InboxCellPreview.js

@@ -0,0 +1,497 @@
+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, getInboxEmptyLayout, getInboxHeroUrl, getInboxIconInitial, getInboxMobileTexts, getInboxValidSlides, isInboxContentEmpty, resolveInboxLayout, resolveInboxWidgetAppearance } from './helpers';
+import { InboxWebCell, inboxWidgetPreviewFrame } from './InboxWidgetReader';
+const MAIN = '#4B5057';
+const LOCKED = '#767C82';
+const PHANTOM = '#9AA0A6';
+const FROZEN = '#F7F9FA';
+const CLEAR = '#FFFFFF';
+const DIVIDER = '#EBF0F5';
+const BRIGHT = '#00A2FF';
+const BRIGHT_LIGHT = '#80B7FF33';
+const SOFT_LIGHT = '#889EB81A';
+const RADIUS = '8px';
+const FONT = 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+const CARD_EDGE_SHADOW = 'inset -1px -1px 1px 0 rgba(0, 0, 0, 0.09), inset 1px 1px 1px 0 rgba(0, 0, 0, 0.09)';
+const SLIDE_SCRIM = 'rgba(0, 0, 0, 0.45)';
+const DOT_SIZE = 6;
+const MIN_WIDTH = 240;
+const MAX_WIDTH = 350;
+const SKELETON_HEIGHT = 56;
+const TEXT = {
+  footnote: {
+    fontSize: 12,
+    lineHeight: 16 / 12,
+    fontWeight: 400
+  },
+  h5: {
+    fontSize: 12,
+    lineHeight: 16 / 12,
+    fontWeight: 500
+  },
+  h4: {
+    fontSize: 14,
+    lineHeight: 20 / 14,
+    fontWeight: 500
+  }
+};
+const ELLIPSIS = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+};
+const AVATAR = {
+  ios: {
+    size: 30,
+    radius: '50%',
+    text: TEXT.h5
+  },
+  android: {
+    size: 40,
+    radius: RADIUS,
+    text: TEXT.h4
+  }
+};
+function clamp(lines) {
+  return {
+    display: '-webkit-box',
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden'
+  };
+}
+function UnreadDot({
+  style
+}) {
+  return _jsx("div", {
+    style: {
+      width: DOT_SIZE,
+      height: DOT_SIZE,
+      flexShrink: 0,
+      borderRadius: '50%',
+      background: BRIGHT,
+      ...style
+    }
+  });
+}
+function Avatar({
+  content,
+  isEmpty,
+  platform
+}) {
+  const {
+    size,
+    radius,
+    text
+  } = AVATAR[platform];
+  const box = {
+    width: size,
+    height: size,
+    flexShrink: 0,
+    borderRadius: radius
+  };
+  if (isEmpty) {
+    return _jsx("div", {
+      style: {
+        ...box,
+        background: BRIGHT_LIGHT,
+        border: `1px dashed ${BRIGHT}`,
+        boxSizing: 'border-box'
+      }
+    });
+  }
+  return _jsx("div", {
+    style: {
+      ...box,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      background: PHANTOM
+    },
+    children: content.iconUrl ? _jsx("img", {
+      alt: content.title || '',
+      src: content.iconUrl,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      }
+    }) : _jsx("span", {
+      style: {
+        ...text,
+        color: MAIN
+      },
+      children: getInboxIconInitial(content)
+    })
+  });
+}
+const HERO = {
+  display: 'block',
+  width: '100%',
+  aspectRatio: '2 / 1',
+  objectFit: 'cover',
+  borderRadius: RADIUS
+};
+function Carousel({
+  content
+}) {
+  const slides = getInboxValidSlides(content.carousel);
+  const [index, setIndex] = useState(0);
+  const active = Math.min(index, slides.length - 1);
+  const slide = slides[active];
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      onClick: () => setIndex((active + 1) % slides.length),
+      style: {
+        position: 'relative',
+        cursor: 'pointer'
+      },
+      children: [_jsx("img", {
+        alt: slide.caption || '',
+        src: slide.imageUrl,
+        style: HERO
+      }), !!slide.caption && _jsx("div", {
+        style: {
+          ...TEXT.h5,
+          ...clamp(2),
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          padding: '14px 10px 6px',
+          color: CLEAR,
+          borderRadius: `0 0 ${RADIUS} ${RADIUS}`,
+          background: `linear-gradient(transparent, ${SLIDE_SCRIM})`
+        },
+        children: slide.caption
+      })]
+    }), slides.length > 1 && _jsx("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        paddingTop: 2
+      },
+      children: slides.map((_slide, slideIndex) => _jsx("button", {
+        onClick: event => {
+          event.stopPropagation();
+          setIndex(slideIndex);
+        },
+        style: {
+          width: DOT_SIZE,
+          height: DOT_SIZE,
+          padding: 0,
+          border: 'none',
+          borderRadius: '50%',
+          cursor: 'pointer',
+          background: slideIndex === active ? BRIGHT : DIVIDER
+        },
+        type: "button"
+      }, slideIndex))
+    })]
+  });
+}
+function Media({
+  content,
+  layout,
+  isEmpty
+}) {
+  if (isEmpty) {
+    return _jsx("div", {
+      style: {
+        aspectRatio: '2 / 1',
+        flexShrink: 0,
+        borderRadius: RADIUS,
+        border: `1px dashed ${BRIGHT}`,
+        background: BRIGHT_LIGHT
+      }
+    });
+  }
+  if (layout === 'carousel') {
+    return _jsx(Carousel, {
+      content: content
+    });
+  }
+  return _jsx("img", {
+    alt: content.title || '',
+    src: getInboxHeroUrl(content),
+    style: HERO
+  });
+}
+const IOS_CARD = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5,
+  padding: 5,
+  background: CLEAR,
+  borderRadius: RADIUS,
+  boxShadow: CARD_EDGE_SHADOW
+};
+function IOSCell(props) {
+  const {
+    content,
+    layout,
+    isEmpty,
+    title,
+    body,
+    dateLabel,
+    unread
+  } = props;
+  const texts = _jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      gap: 2,
+      minWidth: 0
+    },
+    children: [_jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [_jsx("div", {
+        style: {
+          ...TEXT.h5,
+          ...ELLIPSIS,
+          color: MAIN
+        },
+        children: title
+      }), _jsx("div", {
+        style: {
+          flex: 1,
+          minWidth: 4
+        }
+      }), _jsx("div", {
+        style: {
+          ...TEXT.footnote,
+          ...ELLIPSIS,
+          color: LOCKED
+        },
+        children: dateLabel
+      })]
+    }), !!body && _jsx("div", {
+      style: {
+        ...TEXT.footnote,
+        ...clamp(layout === 'classic' ? 3 : 2),
+        color: LOCKED
+      },
+      children: body
+    })]
+  });
+  if (layout === 'classic') {
+    return _jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '16px 16px 16px 18px',
+        background: CLEAR,
+        borderRadius: RADIUS,
+        boxShadow: CARD_EDGE_SHADOW
+      },
+      children: [unread && _jsx(UnreadDot, {}), _jsx(Avatar, {
+        content: content,
+        isEmpty: isEmpty,
+        platform: "ios"
+      }), texts]
+    });
+  }
+  const media = _jsx(Media, {
+    content: content,
+    isEmpty: isEmpty,
+    layout: layout
+  });
+  if (layout === 'banner') {
+    return _jsx("div", {
+      style: IOS_CARD,
+      children: _jsxs("div", {
+        style: {
+          position: 'relative'
+        },
+        children: [media, unread && _jsx(UnreadDot, {
+          style: {
+            position: 'absolute',
+            left: 10,
+            top: 10
+          }
+        })]
+      })
+    });
+  }
+  return _jsxs("div", {
+    style: IOS_CARD,
+    children: [media, _jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 4,
+        padding: 8,
+        background: FROZEN,
+        border: `1px solid ${SOFT_LIGHT}`,
+        borderRadius: RADIUS
+      },
+      children: [unread && _jsx(UnreadDot, {
+        style: {
+          marginTop: 3.5
+        }
+      }), texts]
+    })]
+  });
+}
+const ANDROID_ROW = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 16,
+  padding: 16,
+  background: CLEAR,
+  borderBottom: `1px solid ${DIVIDER}`
+};
+function AndroidCell(props) {
+  const {
+    content,
+    layout,
+    isEmpty,
+    title,
+    body,
+    dateLabel,
+    unread
+  } = props;
+  const texts = _jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      gap: 8,
+      minWidth: 0
+    },
+    children: [_jsxs("div", {
+      style: {
+        ...TEXT.footnote,
+        ...ELLIPSIS,
+        color: unread ? MAIN : LOCKED
+      },
+      children: [title, ' ', _jsx("span", {
+        style: {
+          color: LOCKED
+        },
+        children: dateLabel
+      })]
+    }), !!body && _jsx("div", {
+      style: {
+        ...TEXT.footnote,
+        ...clamp(3),
+        color: MAIN
+      },
+      children: body
+    })]
+  });
+  if (layout === 'classic') {
+    return _jsx("div", {
+      style: ANDROID_ROW,
+      children: _jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: 12
+        },
+        children: [_jsx(Avatar, {
+          content: content,
+          isEmpty: isEmpty,
+          platform: "android"
+        }), texts]
+      })
+    });
+  }
+  return _jsxs("div", {
+    style: ANDROID_ROW,
+    children: [_jsx(Media, {
+      content: content,
+      isEmpty: isEmpty,
+      layout: layout
+    }), layout !== 'banner' && texts]
+  });
+}
+/** One inbox cell drawn the way the SDK of `platform` draws it; the web skin is the WebSDK widget cell itself. */
+export function InboxCellPreview(props) {
+  const {
+    platform = 'ios',
+    content,
+    dateLabel = '12:12',
+    sendDate,
+    unread = true,
+    isLoading = false,
+    emptyTitle = 'Message preview',
+    emptyDescription = 'Enter text of your inbox message to see the preview',
+    renderText = text => text,
+    width = '100%'
+  } = props;
+  const frame = {
+    position: 'relative',
+    width,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH,
+    fontFamily: FONT,
+    boxSizing: 'border-box'
+  };
+  if (isLoading) {
+    return _jsx("div", {
+      style: {
+        ...frame,
+        minHeight: SKELETON_HEIGHT,
+        background: SOFT_LIGHT,
+        borderRadius: RADIUS
+      }
+    });
+  }
+  const picked = content || {};
+  const isEmpty = isInboxContentEmpty(picked);
+  const layout = isEmpty ? getInboxEmptyLayout(picked) : resolveInboxLayout(picked);
+  if (platform === 'web') {
+    const appearance = resolveInboxWidgetAppearance(props.appearance);
+    const widget = inboxWidgetPreviewFrame(appearance, 'pw-inbox-widget--cell');
+    return _jsxs("div", {
+      style: frame,
+      children: [_jsx("style", {
+        children: INBOX_WIDGET_CSS
+      }), _jsx("div", {
+        className: widget.className,
+        style: {
+          ...widget.style,
+          width: '100%'
+        },
+        children: _jsx("ul", {
+          className: "pw-inbox_list",
+          children: _jsx(InboxWebCell, {
+            body: isEmpty ? emptyDescription : picked.body,
+            content: picked,
+            isActionPerformed: !unread,
+            isRead: !unread,
+            layout: layout,
+            placeholder: isEmpty,
+            timeLabel: formatInboxMessageTime(sendDate || new Date().toISOString()),
+            title: isEmpty ? emptyTitle : picked.title
+          })
+        })
+      })]
+    });
+  }
+  const texts = getInboxMobileTexts(picked, layout);
+  const Cell = platform === 'android' ? AndroidCell : IOSCell;
+  return _jsx("div", {
+    style: frame,
+    children: _jsx(Cell, {
+      body: isEmpty ? emptyDescription : texts.body && renderText(texts.body),
+      content: picked,
+      dateLabel: dateLabel,
+      isEmpty: isEmpty,
+      layout: layout,
+      title: isEmpty ? emptyTitle : renderText(texts.title),
+      unread: unread
+    })
+  });
+}

package/inbox/InboxWidgetReader.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+import { type InboxCellContent, type InboxLayout, type InboxWidgetAppearance, type InboxWidgetReaderProps } from './types';
+/** Props of {@link InboxWebCell}. */
+export interface InboxWebCellProps {
+    content: InboxCellContent;
+    layout: InboxLayout;
+    title: ReactNode;
+    body: ReactNode;
+    timeLabel: string;
+    isRead: boolean;
+    isActionPerformed: boolean;
+    code?: string;
+    /** Draw dashed placeholders instead of the icon and the media. */
+    placeholder?: boolean;
+    onClick?: () => void;
+    onRemove?: () => void;
+    onSlideLinkClick?: (link: string) => void;
+}
+/** One cell of the web inbox widget, the `li.pw-inbox_item` the WebSDK draws. */
+export declare function InboxWebCell(props: InboxWebCellProps): ReactElement;
+/** Classes and custom properties of a preview widget box; a live host sets them on its own element. */
+export declare function inboxWidgetPreviewFrame(appearance: InboxWidgetAppearance, extraClass?: string): {
+    className: string;
+    style: CSSProperties;
+};
+/** The web inbox widget: message list or empty state. `live` fills the host's `.pw-inbox-widget` element, `preview` draws the box inline. */
+export declare function InboxWidgetReader(props: InboxWidgetReaderProps): ReactElement;