web-push-notifications 3.44.6 → 3.44.8

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

@@ -1,274 +0,0 @@
-.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

@@ -1,63 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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/widgetTemplates.ts

@@ -1,55 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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();
-  }
-}