web-push-notifications 3.40.1 → 3.44.1

package/src/widgets/Inbox/css/inboxWidgetStyle.css

@@ -0,0 +1,274 @@
+.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(--badgeBgColor);
+  border-radius: 8px;
+  color: var(--badgeTextColor);
+  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(--fontFamily);
+}
+.pw-inbox-widget {
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: -1000px;
+  background: var(--bgColor);
+  border: solid 1px var(--borderColor);
+  border-radius: var(--borderRadius);
+  width: var(--widgetWidth);
+  box-shadow: 0 1px 4px 0 rgba(0,0,0,.25);
+  z-index: var(--zIndex);
+  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(--arrowBorderColor);
+  bottom: -21px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pw-inbox-widget.pw-top .pw-inbox__arrow:before {
+  border-top-color: var(--bgColor);
+  top: -11px;
+  left: -10px;
+}
+.pw-inbox-widget.pw-bottom {
+  margin-top: 12px;
+}
+.pw-inbox-widget.pw-bottom .pw-inbox__arrow {
+  border-bottom-color: var(--arrowBorderColor);
+  top: -21px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pw-inbox-widget.pw-bottom .pw-inbox__arrow:before {
+  border-bottom-color: var(--bgColor);
+  bottom: -11px;
+  left: -10px;
+}
+.pw-inbox-widget.pw-left {
+  margin-left: -12px;
+}
+.pw-inbox-widget.pw-left .pw-inbox__arrow {
+  border-left-color: var(--arrowBorderColor);
+  right: -21px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.pw-inbox-widget.pw-left .pw-inbox__arrow:before {
+  border-left-color: var(--bgColor);
+  left: -11px;
+  top: -10px;
+}
+.pw-inbox-widget.pw-right {
+  margin-left: 12px;
+}
+.pw-inbox-widget.pw-right .pw-inbox__arrow {
+  border-right-color: var(--arrowBorderColor);
+  left: -21px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.pw-inbox-widget.pw-right .pw-inbox__arrow:before {
+  border-right-color: var(--bgColor);
+  right: -11px;
+  top: -10px;
+}
+.pw-inbox_inner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.pw-inbox_title {
+  color: var(--textColor);
+  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 40px;
+}
+.pw-inbox_message-image {
+  width: 28px;
+}
+.pw-inbox_content {
+  flex: 0 1 100%;
+}
+.pw-inbox_item-title {
+  color: var(--messageTitleColor);
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+.pw-inbox_item-body {
+  color: var(--textColor);
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+.pw-inbox_item-time {
+  color: var(--timeTextColor);
+  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(--textColor);
+  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(--emptyInboxTitleColor);
+  margin-bottom: 20px;
+}
+
+.pw-inbox_list--empty .ipw-inbox_list-body {
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--emptyInboxTextColor);
+}

package/src/widgets/Inbox/helpers.ts

@@ -0,0 +1,63 @@
+import {
+  MILLISECONDS_IN_HOUR,
+  MILLISECONDS_IN_DAY,
+  MONTHS,
+  COLOR_TEST_REGEXP,
+} from './constants';
+
+export function isElementFixed(element: HTMLElement): boolean {
+  let isFixed = window.getComputedStyle(element).position === 'fixed';
+  if (!isFixed && element.parentElement) {
+    isFixed = isElementFixed(element.parentElement);
+  }
+  return isFixed;
+}
+
+export function getMessageTime(date: string): string {
+  const localDate = new Date(date);
+  const localTime = localDate.getHours() + (localDate.getTimezoneOffset() / 60);
+  localDate.setHours(localTime);
+  const now = new Date();
+
+  const gap = (now.getTime() - localDate.getTime());
+
+  if (gap <= 60 * 1000) {
+    return `Just now`;
+  } else if (gap < MILLISECONDS_IN_HOUR && gap > 0) {
+    const minutesAgo = Math.floor(gap / (60 * 1000));
+    return `${minutesAgo} minutes ago`;
+  } else if (gap < MILLISECONDS_IN_DAY && gap > 0) {
+    const hoursAgo = Math.floor(gap / (60 * 60 * 1000));
+    return `${hoursAgo} hours ago`;
+  }
+
+  const day = localDate.getDate();
+  const month = MONTHS[localDate.getMonth()];
+  const year = localDate.getFullYear();
+  const hours = localDate.getHours();
+  const minutes = `0${localDate.getMinutes().toString()}`.slice(-2); // padStart(2, 0)
+
+  return `${day} ${month} ${year}, ${hours}:${minutes}`;
+}
+
+export function getValidColor(color: string): string {
+  if (color === 'transparent') {
+    return color;
+  }
+
+  return COLOR_TEST_REGEXP.test(color)
+    ? color
+    : '#333';
+}
+
+export function compareBySendDate(dateOne: string, dateTwo: string): number {
+  const localDateOne = new Date(dateOne);
+  const localTimeOne = localDateOne.getHours() + (localDateOne.getTimezoneOffset() / 60);
+  const localDateTwo = new Date(dateTwo);
+  const localTimeTwo = localDateTwo.getHours() + (localDateTwo.getTimezoneOffset() / 60);
+
+  localDateOne.setHours(localTimeOne);
+  localDateTwo.setHours(localTimeTwo);
+
+  return localDateTwo.getTime() - localDateOne.getTime();
+}

package/src/widgets/Inbox/inbox.d.ts

@@ -0,0 +1,9 @@
+import { type IInboxMessagePublic } from '../../models/InboxMessages.types';
+
+interface Ipwinbox {
+  readMessagesWithCodes(codes: Array<string>): Promise<void>;
+  loadMessages(): Promise<Array<IInboxMessagePublic>>;
+  unreadMessagesCount(): Promise<number>;
+  performActionForMessageWithCode(code: string): Promise<void>;
+  deleteMessagesWithCodes(codes: Array<string>): Promise<void>;
+}

package/src/widgets/Inbox/inbox_widget.types.ts

@@ -0,0 +1,41 @@
+export interface TMessagesElementsType {
+  [code: string]: HTMLElement;
+}
+
+export interface IConfigStyles {
+  name: TStylesNames;
+  type: TStylesTypes;
+}
+
+export type TStylesNames = 'bgColor' | 'textColor' | 'fontFamily' | 'borderRadius' | 'borderColor'
+  | 'badgeBgColor' | 'badgeTextColor' | 'widgetWidth' | 'zIndex' | 'messageTitleColor' | 'timeTextColor'
+  | 'emptyInboxTitleColor' | 'emptyInboxTextColor' | 'arrowBorderColor';
+
+export type TStylesTypes = 'number' | 'color' | 'string' | 'size';
+
+export type TWidgetPosition = 'left' | 'right' | 'top' | 'bottom';
+
+export interface IInboxWidgetConfig {
+  enable: boolean;
+  triggerId: string;
+  position: TWidgetPosition;
+  appendTo: string;
+  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;
+}

package/src/widgets/Inbox/index.ts

@@ -0,0 +1 @@
+export { PWInboxWidget } from './InboxWidget';

package/src/widgets/Inbox/widgetTemplates.ts

@@ -0,0 +1,55 @@
+import { getMessageTime } from './helpers';
+import { type IInboxMessagePublic } from '../../models/InboxMessages.types';
+
+export const widgetTemplate = (title: string): string => `
+<div class="pw-inbox__arrow"></div>
+<div class="pw-inbox_inner">
+    <div class="pw-inbox_title">
+      ${title}
+    </div>
+    <ul class="pw-inbox_list">
+
+    </ul>
+</div>`;
+
+export const widgetTemplateEmpty = (
+  emptyInboxIconUrl: string,
+  emptyInboxTitle: string,
+  emptyInboxText: string,
+) => `
+<div class="pw-inbox__arrow"></div>
+<div class="pw-inbox_list--empty">
+    <div class="pw-inbox_list-icon">
+      <img src="${emptyInboxIconUrl}" alt="${emptyInboxTitle}">
+    </div>
+    <div class="pw-inbox_list-title">
+      ${emptyInboxTitle}
+    </div>
+    <div class="ipw-inbox_list-body">
+      ${emptyInboxText}
+    </div>
+</div>`;
+
+export const messageTemplate = ({
+  imageUrl,
+  title,
+  message,
+  sendDate,
+}: IInboxMessagePublic) => `
+<div class="pw-inbox_item-inner">
+  <div class="pw-inbox_icon">
+    <img src="${imageUrl}" alt="${title || message}" class="pw-inbox_message-image">
+  </div>
+  <div class="pw-inbox_content">
+    ${title ? `<div class="pw-inbox_item-title">
+      ${title}
+    </div>` : null}
+    <div class="pw-inbox_item-body">
+      ${message}
+    </div>
+    <div class="pw-inbox_item-time">
+      ${getMessageTime(sendDate)}
+    </div>
+  </div>
+</div>
+<span class="pw-inbox_item-remove"></span>`;

package/src/widgets/SubscribePopup/SubscribePopup.ts

@@ -0,0 +1,241 @@
+import {
+  DEFAULT_CONFIG,
+  CONFIG_STYLES,
+
+  PERMISSION_DENIED,
+  PERMISSION_GRANTED,
+} from './constants';
+import { getValidColor } from './helpers';
+import { innerTemplate } from './popupTemplates';
+import popupCss from './styles/popup.css';
+import {
+  type ISubscribePopupConfig,
+  type ISubscribePopupConfigStyles,
+  type ISubscribePopupVariables,
+} from './types/subscribe-popup';
+import { type Pushwoosh } from '../../core/Pushwoosh';
+
+export class PWSubscribePopupWidget {
+  pw: Pushwoosh;
+  config: ISubscribePopupVariables;
+  popup: HTMLElement;
+  isShown: boolean;
+
+  constructor(pw: Pushwoosh) {
+    this.pw = pw;
+
+    const { mobileViewMargin = '' } = pw.initParams.subscribePopup || ({} as ISubscribePopupConfig);
+
+    this.config = {
+      ...DEFAULT_CONFIG,
+      ...pw.initParams.subscribePopup,
+      mobileViewTransition: mobileViewMargin ? 'none' : 'bottom .4s ease-out',
+      mobileViewPosition: mobileViewMargin ? 'auto!important' : 'auto',
+    };
+
+    this.onAskLaterClick = this.onAskLaterClick.bind(this);
+    this.onSubscribeClick = this.onSubscribeClick.bind(this);
+  }
+
+  async initPopup() {
+    const { manualToggle } = this.config;
+    const [isSubscribed, isManualUnsubscribed] = await Promise.all([
+      this.pw.isSubscribed(),
+      this.pw.data.getStatusManualUnsubscribed(),
+    ]);
+    if (isSubscribed || (!manualToggle && isManualUnsubscribed)) {
+      return;
+    }
+
+    const permission = this.pw.driver.getPermission();
+    if (permission === PERMISSION_GRANTED || permission === PERMISSION_DENIED) {
+      return;
+    }
+
+    this.renderPopup();
+    this.appendStyles();
+
+    this.pw.moduleRegistry.subscribePopup = this;
+    this.pw.dispatchEvent('subscribe-popup-ready', {});
+
+    if (manualToggle) {
+      return;
+    }
+
+    const lastPopupOpen = localStorage.getItem('LAST_OPEN_SUBSCRIPTION_POPUP');
+    const lastPopupOpenTime = lastPopupOpen ? parseInt(lastPopupOpen) : 0;
+    const now = new Date().getTime();
+
+    if (lastPopupOpenTime + (this.config.retryOffset * 1000) < now) {
+      setTimeout(() => {
+        this.toggle(true);
+      }, this.config.delay * 1000);
+    }
+  }
+
+  toggle(isShown?: boolean) {
+    const isPopupShown = typeof isShown === 'undefined' ? !this.isShown : !!isShown;
+    if (isPopupShown !== this.isShown) {
+      if (isPopupShown) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+
+  async show() {
+    if (await this.pw.isSubscribed()) {
+      return;
+    }
+    this.isShown = true;
+    this.popup.classList.add('pw-show');
+    document.body.classList.add('pw-popup-opened');
+
+    const event = new CustomEvent('showPopup', {
+      bubbles: false,
+      cancelable: false,
+      detail: {
+        popup: this.popup,
+      },
+    });
+    this.popup.dispatchEvent(event);
+
+    const screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    if (screenWidth < 541) {
+      // mobile screen doesn't support themes
+      return;
+    }
+    const {
+      theme,
+      viewport,
+      position,
+    } = this.config;
+    if (theme === 'topbar' && position === 'top') {
+      const viewportElement: HTMLElement = document.querySelector(viewport) || document.createElement('div');
+      const currentMarginTop = window.getComputedStyle(viewportElement).marginTop || '0';
+      viewportElement.style.transition = 'margin-top .3s ease-out';
+      viewportElement.style.marginTop = `${parseInt(currentMarginTop) + this.popup.getBoundingClientRect().height}px`;
+    }
+
+    this.pw.dispatchEvent('subscribe-popup-show', {});
+  }
+
+  hide() {
+    this.isShown = false;
+    this.popup.classList.remove('pw-show');
+    document.body.classList.remove('pw-popup-opened');
+
+    const event = new CustomEvent('hidePopup', {
+      bubbles: false,
+      cancelable: false,
+      detail: {
+        popup: this.popup,
+      },
+    });
+    this.popup.dispatchEvent(event);
+
+    const now = new Date().getTime().toString();
+
+    localStorage.setItem('LAST_OPEN_SUBSCRIPTION_POPUP', now);
+
+    const screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    if (screenWidth < 541) {
+      // mobile screen doesn't support themes
+      return;
+    }
+    const {
+      theme,
+      viewport,
+      position,
+    } = this.config;
+    if (theme === 'topbar' && position === 'top') {
+      const viewportElement: HTMLElement = document.querySelector(viewport) || document.createElement('div');
+      const currentMarginTop = window.getComputedStyle(viewportElement).marginTop || '0';
+      viewportElement.style.marginTop = `${parseInt(currentMarginTop) - this.popup.getBoundingClientRect().height}px`;
+    }
+
+    this.pw.dispatchEvent('subscribe-popup-hide', {});
+  }
+
+  renderPopup() {
+    this.popup = document.createElement('div');
+    this.popup.id = 'pwSubscribePopup';
+    const {
+      text,
+      askLaterButtonText,
+      confirmSubscriptionButtonText,
+      iconUrl,
+      iconAlt,
+      position,
+      overlay,
+      theme,
+    } = this.config;
+    this.popup.className = `pw-subscribe-popup pw-position-${position} pw-subscribe-popup-${theme}`;
+    this.popup.classList.toggle('pw-subscribe-popup__overlay', overlay);
+    this.popup.innerHTML = innerTemplate({
+      text,
+      askLaterButtonText,
+      confirmSubscriptionButtonText,
+      iconUrl,
+      iconAlt,
+    });
+    document.body.appendChild(this.popup);
+    this.addListeners();
+  }
+
+  appendStyles() {
+    const style = document.createElement('style');
+    style.innerHTML = this.configureStyle(popupCss);
+    document.body.appendChild(style);
+  }
+
+  private getStyleFormatter(style: ISubscribePopupConfigStyles): string {
+    switch (style.type) {
+      case 'size':
+        return `${this.config[style.name] || 0}px`;
+      case 'number':
+        return parseFloat(this.config[style.name].toString()).toString();
+      case 'string':
+        return this.config[style.name].toString();
+      case 'color':
+        return getValidColor(this.config[style.name].toString());
+      default:
+        return 'none';
+    }
+  }
+
+  configureStyle(styles: string): string {
+    let resultStyles = styles.toString();
+
+    CONFIG_STYLES.forEach((style: ISubscribePopupConfigStyles) => {
+      const template = new RegExp(`var\\(--${style.name}\\)`, 'ig');
+      const result = this.getStyleFormatter(style);
+
+      resultStyles = resultStyles.replace(template, result);
+    });
+
+    return resultStyles;
+  }
+
+  addListeners() {
+    const askLaterButton = this.popup.querySelector('button[name="pwAskLater"]')
+      || document.createElement('button');
+    const subscribeButton = this.popup.querySelector('button[name="pwSubscribe"]')
+      || document.createElement('button');
+
+    askLaterButton.addEventListener('click', this.onAskLaterClick);
+    subscribeButton.addEventListener('click', this.onSubscribeClick);
+  }
+
+  onAskLaterClick() {
+    this.toggle(false);
+    this.pw.dispatchEvent('subscribe-popup-decline', {});
+  }
+
+  onSubscribeClick() {
+    this.toggle(false);
+    this.pw.dispatchEvent('subscribe-popup-accept', {});
+    this.pw.subscribe();
+  }
+}