web-push-notifications 3.40.3 → 3.44.2

package/src/widgets/SubscribePopup/constants.ts

@@ -0,0 +1,66 @@
+import { type ISubscribePopupConfig, type ISubscribePopupConfigStyles } from './types/subscribe-popup';
+
+export const DEFAULT_CONFIG: ISubscribePopupConfig = {
+  enable: true,
+  text: 'Don’t miss out on our news and updates! Enable push notifications',
+  askLaterButtonText: 'Not now',
+  confirmSubscriptionButtonText: 'Subscribe',
+  delay: 5,
+  retryOffset: 60 * 60 * 24 * 7,
+  overlay: false,
+  position: 'top',
+  mobileViewMargin: '0',
+
+  bgColor: '#fff',
+  borderColor: 'transparent',
+  boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+
+  textColor: '#000',
+  textSize: 'inherit',
+  textWeight: 'normal',
+  fontFamily: 'inherit',
+
+  subscribeBtnBgColor: '#4285f4',
+  subscribeBtnTextColor: '#fff',
+  subscribeBtnTextWeight: 'normal',
+  subscribeBtnBorderColor: 'transparent',
+  subscribeBtnBorderRadius: '2px',
+
+  askLaterBtnBgColor: 'transparent',
+  askLaterBtnTextColor: '#000',
+  askLaterBtnTextWeight: 'normal',
+  askLaterBtnBorderColor: 'transparent',
+  askLaterBtnBorderRadius: '2px',
+
+  theme: 'material',
+  viewport: 'html',
+};
+
+export const COLOR_TEST_REGEXP = /^(#([\da-f]{3}){1,2}$|(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0?\.\d+)\)$|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/i;
+
+// Permissions
+export const PERMISSION_DENIED = 'denied';
+export const PERMISSION_GRANTED = 'granted';
+
+export const CONFIG_STYLES: Array<ISubscribePopupConfigStyles> = [
+  { name: 'mobileViewMargin', type: 'string' },
+  { name: 'mobileViewPosition', type: 'string' },
+  { name: 'mobileViewTransition', type: 'string' },
+  { name: 'bgColor', type: 'color' },
+  { name: 'borderColor', type: 'color' },
+  { name: 'boxShadow', type: 'string' },
+  { name: 'textColor', type: 'color' },
+  { name: 'textSize', type: 'string' },
+  { name: 'textWeight', type: 'string' },
+  { name: 'fontFamily', type: 'string' },
+  { name: 'subscribeBtnBgColor', type: 'color' },
+  { name: 'subscribeBtnTextColor', type: 'color' },
+  { name: 'subscribeBtnTextWeight', type: 'string' },
+  { name: 'subscribeBtnBorderColor', type: 'color' },
+  { name: 'subscribeBtnBorderRadius', type: 'string' },
+  { name: 'askLaterBtnBgColor', type: 'color' },
+  { name: 'askLaterBtnTextColor', type: 'color' },
+  { name: 'askLaterBtnTextWeight', type: 'string' },
+  { name: 'askLaterBtnBorderColor', type: 'color' },
+  { name: 'askLaterBtnBorderRadius', type: 'string' },
+];

package/src/widgets/SubscribePopup/helpers.ts

@@ -0,0 +1,11 @@
+import { COLOR_TEST_REGEXP } from './constants';
+
+export function getValidColor(color: string): string {
+  if (color === 'transparent') {
+    return color;
+  }
+
+  return COLOR_TEST_REGEXP.test(color)
+    ? color
+    : '#333';
+}

package/src/widgets/SubscribePopup/index.ts

@@ -0,0 +1 @@
+export { PWSubscribePopupWidget } from './SubscribePopup';

package/src/widgets/SubscribePopup/popupTemplates.ts

@@ -0,0 +1,24 @@
+interface IInnerTemplate {
+  iconUrl?: string;
+  iconAlt?: string;
+  text: string;
+  askLaterButtonText: string;
+  confirmSubscriptionButtonText: string;
+}
+
+export const innerTemplate = ({ iconUrl, iconAlt, text, askLaterButtonText, confirmSubscriptionButtonText }: IInnerTemplate): string => {
+  return `<div class="pw-subscription-popup-inner">
+    <div class="pw-subscription-popup-content">
+      ${iconUrl
+        ? `<div class="pw-subscription-popup-icon"><img src="${iconUrl}" alt="${iconAlt || 'Subscribe'}"></div>`
+        : ''}
+      <div class="pw-subscription-popup-text">
+        ${text}
+      </div>
+    </div>
+    <div class="pw-subscription-popup-controls">
+      <button name="pwAskLater" class="pw-subscribe-popup-button">${askLaterButtonText}</button>
+      <button name="pwSubscribe" class="pw-subscribe-popup-button pw-subscribe-popup-button-active">${confirmSubscriptionButtonText}</button>
+    </div>
+  </div>`;
+};

package/src/widgets/SubscribePopup/styles/popup.css

@@ -0,0 +1,226 @@
+.pw-subscribe-popup {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  justify-content: center;
+  z-index: 1000000;
+  display: flex;
+  transition: all .4s ease-out;
+}
+
+.pw-subscribe-popup.pw-position-top {
+  top: calc(-100% - 24px);
+}
+.pw-subscribe-popup.pw-position-top.pw-show {
+  top: 0;
+}
+
+.pw-subscribe-popup.pw-position-bottom {
+  bottom: calc(-100% - 24px);
+}
+.pw-subscribe-popup.pw-position-bottom.pw-show {
+  bottom: 0;
+}
+
+.pw-subscribe-popup.pw-position-center {
+  display: flex;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+
+  transform: none;
+}
+
+.pw-subscribe-popup__overlay {
+  background: rgba(0,0,0,.4);
+  z-index: 1000000;
+}
+
+.pw-subscribe-popup.pw-position-center:not(.pw-subscribe-popup__overlay) {
+  pointer-events: none;
+}
+
+.pw-subscribe-popup.pw-position-center:not(.pw-show) {
+  display: none;
+}
+
+
+.pw-subscribe-popup__overlay.pw-position-top {
+  align-items: flex-start;
+}
+
+.pw-subscribe-popup__overlay.pw-position-bottom {
+  align-items: flex-end;
+}
+
+.pw-subscribe-popup__overlay.pw-position-center {
+  align-items: center;
+}
+
+.pw-subscription-popup-inner {
+  max-width: 400px;
+  font-size: var(--textSize);
+  color: var(--textColor);
+  font-weight: var(--textWeight);
+  font-family: var(--fontFamily);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--borderColor);
+  background: var(--bgColor);
+  box-shadow: var(--boxShadow);
+  pointer-events: auto;
+}
+
+.pw-subscription-popup-content {
+  padding: 16px 16px 4px;
+  display: flex;
+  justify-content: stretch;
+}
+
+.pw-subscription-popup-icon {
+  flex: 0 0 50px;
+  margin-right: 12px;
+  padding-top: 4px;
+}
+
+.pw-subscription-popup-icon img {
+  max-width: 60px;
+  max-height: 60px;
+}
+
+.pw-subscription-popup-text {
+  flex: 1 1 300px;
+}
+
+.pw-subscription-popup-controls {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  padding: 8px 16px 16px;
+}
+
+button.pw-subscribe-popup-button {
+  border: solid 1px var(--askLaterBtnBorderColor);
+  border-radius: var(--askLaterBtnBorderRadius);
+  display: inline-block;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+  text-transform: uppercase;
+  font-weight: var(--askLaterBtnTextWeight);
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  font-size: 14px;
+  outline: 0;
+  text-decoration: none;
+  color: var(--askLaterBtnTextColor);
+  text-align: center;
+  letter-spacing: .5px;
+  cursor: pointer;
+  background: var(--askLaterBtnBgColor);
+  margin: 4px 8px;
+}
+button.pw-subscribe-popup-button:hover {
+  background: rgba(0,0,0,.04);
+}
+button.pw-subscribe-popup-button:active {
+  background: rgba(0,0,0,.12);
+}
+
+button.pw-subscribe-popup-button.pw-subscribe-popup-button-active {
+  color: var(--subscribeBtnTextColor);
+  background: var(--subscribeBtnBgColor);
+  border-radius: var(--subscribeBtnBorderRadius);
+  border: solid 1px var(--subscribeBtnBorderColor);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
+  0 3px 1px -2px rgba(0,0,0,0.12),
+  0 1px 5px 0 rgba(0,0,0,0.2);
+  font-weight: var(--subscribeBtnTextWeight);
+}
+button.pw-subscribe-popup-button.pw-subscribe-popup-button-active:hover {
+  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),
+  0 1px 7px 0 rgba(0,0,0,0.12),
+  0 3px 1px -1px rgba(0,0,0,0.2);
+}
+button.pw-subscribe-popup-button.pw-subscribe-popup-button-active:active {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
+  0 3px 1px -2px rgba(0,0,0,0.12),
+  0 1px 5px 0 rgba(0,0,0,0.2);
+}
+
+@media screen and (min-width: 541px) {
+
+  .pw-subscribe-popup-topbar {
+    width: 100%;
+  }
+
+  .pw-subscribe-popup-topbar .pw-subscription-popup-inner {
+    max-width: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    padding: 2px 40px;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  .pw-subscribe-popup-topbar .pw-subscription-popup-content {
+    padding: 0;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .pw-subscribe-popup-topbar .pw-subscription-popup-icon img {
+    max-width: 28px;
+    max-height: 28px;
+  }
+
+  .pw-subscribe-popup-topbar button.pw-subscribe-popup-button {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  .pw-subscribe-popup-topbar .pw-subscription-popup-controls {
+    padding: 0 0 0 16px;
+    align-items: center;
+  }
+}
+@media screen and (max-width: 540px) {
+  .pw-subscribe-popup,
+  .pw-subscribe-popup.pw-position-top,
+  .pw-subscribe-popup.pw-position-center,
+  .pw-subscribe-popup.pw-position-bottom {
+    top: var(--mobileViewPosition);
+    bottom: -110%;
+    left: 0;
+    right: 0;
+    transform: none;
+    display: flex;
+    transition: var(--mobileViewTransition);
+    align-items: flex-end;
+  }
+
+  .pw-subscribe-popup.pw-subscribe-popup__overlay {
+    align-items: flex-end;
+  }
+
+  .pw-subscribe-popup.pw-show {
+    bottom: var(--mobileViewMargin);
+  }
+
+  .pw-subscribe-popup__overlay .pw-subscription-popup-inner {
+    align-items: flex-end;
+    justify-content: stretch;
+  }
+
+  .pw-subscription-popup-inner {
+    max-width: 100%;
+    width: 100%;
+  }
+}

package/src/widgets/SubscribePopup/types/subscribe-popup.ts

@@ -0,0 +1,68 @@
+export interface ISubscribePopupConfig {
+  enable: boolean;
+  text: string;
+  askLaterButtonText: string;
+  confirmSubscriptionButtonText: string;
+  delay: number;
+  manualToggle?: boolean;
+  retryOffset: number;
+  iconUrl?: string;
+  iconAlt?: string;
+  overlay: boolean;
+  position: string;
+  mobileViewMargin: string;
+
+  bgColor: string;
+  borderColor: string;
+  boxShadow: string;
+  textColor: string;
+  textSize: string;
+  textWeight: string;
+  fontFamily: string;
+  subscribeBtnBgColor: string;
+  subscribeBtnTextColor: string;
+  subscribeBtnTextWeight: string;
+  subscribeBtnBorderColor: string;
+  subscribeBtnBorderRadius: string;
+  askLaterBtnBgColor: string;
+  askLaterBtnTextColor: string;
+  askLaterBtnBorderColor: string;
+  askLaterBtnBorderRadius: string;
+  askLaterBtnTextWeight: string;
+  theme: string;
+  viewport: string;
+}
+
+export interface ISubscribePopupVariables extends ISubscribePopupConfig {
+  mobileViewTransition: string;
+  mobileViewPosition: string;
+}
+
+export interface ISubscribePopupConfigStyles {
+  name: SPTStylesNames;
+  type: SPTStylesTypes;
+}
+
+export type SPTStylesNames =
+  | 'mobileViewMargin'
+  | 'mobileViewTransition'
+  | 'mobileViewPosition'
+  | 'bgColor'
+  | 'borderColor'
+  | 'boxShadow'
+  | 'textColor'
+  | 'textSize'
+  | 'textWeight'
+  | 'fontFamily'
+  | 'subscribeBtnBgColor'
+  | 'subscribeBtnTextColor'
+  | 'subscribeBtnTextWeight'
+  | 'subscribeBtnBorderColor'
+  | 'subscribeBtnBorderRadius'
+  | 'askLaterBtnBgColor'
+  | 'askLaterBtnTextColor'
+  | 'askLaterBtnTextWeight'
+  | 'askLaterBtnBorderColor'
+  | 'askLaterBtnBorderRadius';
+
+export type SPTStylesTypes = 'number' | 'color' | 'string' | 'size';

package/src/widgets/SubscriptionButton/assets/css/main.css

@@ -0,0 +1,205 @@
+/* Widget */
+.pushwoosh-subscribe-widget {
+  position: fixed;
+  display: block;
+  transform: translate3d(0, 0, 0);
+}
+
+.pushwoosh-subscribe-widget__subscribed {
+  display: none;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__bell-button {
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 0;
+  text-align: center;
+  transform: scale(0.9) translate3d(0, 0, 0);
+  transition: transform .3s ease-in-out;
+  position: relative;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__bell-button:hover {
+  transform: scale(1);
+}
+
+/* Tooltip */
+.pushwoosh-subscribe-widget__tooltip {
+  position: absolute;
+  height: 48px;
+  max-width: 300px;
+  min-width: 200px;
+  padding: 5px 7px;
+  background-color: #3b444b;
+  color: #ffffff;
+  text-align: center;
+  vertical-align: middle;
+  box-sizing: border-box;
+  line-height: 38px;
+  font-size: 0;
+  font-weight: normal;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s ease-in .3s,
+              opacity .3s ease-in;
+  top: 50%;
+  transform: translate(0, -50%);
+  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.5);
+}
+
+.pushwoosh-subscribe-widget__tooltip__right:after,
+.pushwoosh-subscribe-widget__tooltip__left:after {
+  content: "";
+  top: 50%;
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  background: #3b444b;
+}
+
+.pushwoosh-subscribe-widget__tooltip__right:after {
+  left: calc(100% - 7px);
+  border-top: 5px solid #3b444b;
+  border-left: 5px solid #3b444b;
+  border-right: 5px solid transparent;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  transform: rotate(-45deg);
+  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.pushwoosh-subscribe-widget__tooltip__left:after {
+  left: -7px;
+  border-top: 5px solid #3b444b;
+  border-right: 5px solid #3b444b;
+  border-left: 5px solid transparent;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  transform: rotate(-45deg);
+  box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.pushwoosh-subscribe-widget__bell-button:hover + .pushwoosh-subscribe-widget__tooltip,
+.pushwoosh-subscribe-widget__tooltip.pushwoosh-subscribe-widget__tooltip__visible {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__tooltip-content {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 5px;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* Popover */
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover {
+  position: absolute;
+  right: auto;
+  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  background: #9ca8b1;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s ease-in .5s,
+              opacity .5s ease-in;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover__visible {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.pushwoosh-subscribe-widget__popover__bottom:after,
+.pushwoosh-subscribe-widget__popover__top:after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-right: 8px solid transparent;
+  border-left: 8px solid #9ca8b1;
+  background: #9ca8b1;
+  transform-origin: 0 0;
+  transform: rotate(-45deg);
+}
+
+.pushwoosh-subscribe-widget__popover__bottom:after {
+  border-bottom: 8px solid #9ca8b1;
+  border-top: 8px solid transparent;
+  box-sizing: border-box;
+  box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.25);
+  bottom: -16px;
+}
+
+.pushwoosh-subscribe-widget__popover__top:after {
+  top: 0;
+  border-top: 8px solid #9ca8b1;
+  border-bottom: 8px solid transparent;
+  box-sizing: border-box;
+  box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.pushwoosh-subscribe-widget__popover-content-wrapper {
+  overflow: auto;
+  max-width: 100%;
+}
+
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+  box-sizing: border-box;
+  float: left;
+  min-width: 100%;
+  align-items: center;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {
+  display: block;
+}
+
+.pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {
+  margin-bottom: 14px;
+}
+
+@media (max-width: 767px) and (orientation: portrait) {
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {
+    flex-direction: column;
+  }
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {
+    max-width: 280px;
+    height: auto;
+  }
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {
+    margin-right: 0;
+    margin-bottom: 14px;
+  }
+}
+@media (max-width: 767px) and (orientation: landscape) {
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover-content {
+    flex-direction: row;
+  }
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img {
+    max-width: 280px;
+    height: auto;
+  }
+  .pushwoosh-subscribe-widget .pushwoosh-subscribe-widget__popover img:first-child {
+    margin-right: 14px;
+    margin-bottom: 0;
+  }
+}

package/src/widgets/SubscriptionButton/bell.ts

@@ -0,0 +1,67 @@
+export default (fillColor: string, strokeColor: string) => {
+  return '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n'
+    + '<svg\n'
+    + '   xmlns:dc="http://purl.org/dc/elements/1.1/"\n'
+    + '   xmlns:cc="http://creativecommons.org/ns#"\n'
+    + '   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\n'
+    + '   xmlns:svg="http://www.w3.org/2000/svg"\n'
+    + '   xmlns="http://www.w3.org/2000/svg"\n'
+    + '   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\n'
+    + '   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\n'
+    + '   version="1.1"\n'
+    + '   id="Capa_1"\n'
+    + '   x="0px"\n'
+    + '   y="0px"\n'
+    + '   viewBox="0 0 346.013 346.013"\n'
+    + '   style="enable-background:new 0 0 346.013 346.013;width: 80%; height: auto; vertical-align: middle;"\n'
+    + '   xml:space="preserve"\n'
+    + '   inkscape:version="0.91 r13725"\n'
+    + '   sodipodi:docname="alarm_white.svg"><metadata\n'
+    + '     id="metadata51"><rdf:RDF><cc:Work\n'
+    + '         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type\n'
+    + '           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs\n'
+    + '     id="defs49" /><sodipodi:namedview\n'
+    + '     borderopacity="1"\n'
+    + '     objecttolerance="10"\n'
+    + '     gridtolerance="10"\n'
+    + '     guidetolerance="10"\n'
+    + '     inkscape:pageopacity="0"\n'
+    + '     inkscape:pageshadow="2"\n'
+    + '     inkscape:window-width="1618"\n'
+    + '     inkscape:window-height="828"\n'
+    + '     id="namedview47"\n'
+    + '     showgrid="false"\n'
+    + '     inkscape:zoom="0.6820553"\n'
+    + '     inkscape:cx="173.0065"\n'
+    + '     inkscape:cy="173.0065"\n'
+    + '     inkscape:window-x="0"\n'
+    + '     inkscape:window-y="0"\n'
+    + '     inkscape:window-maximized="0"\n'
+    + '     inkscape:current-layer="g3" /><g\n'
+    + '     id="g3"><path\n'
+    + '       d="m 256.76227,220.19006 c -1.77513,-2.69766 -3.45154,-5.24564 -3.98966,-7.46382 -0.042,-0.17861 -0.0911,-0.36128 -0.16237,-0.61436 -2.28354,-7.67647 0.69147,-24.43921 2.46886,-34.45124 0.26788,-1.50394 0.52274,-2.94197 0.75286,-4.29035 0.0232,-0.13675 0.044,-0.27211 0.0724,-0.48006 1.95582,-15.28051 2.58811,-37.91956 -5.51044,-58.99147 -5.6032,-14.57978 -14.45978,-25.82612 -26.3559,-33.48393 1.26598,-9.812938 -4.85967,-19.343691 -14.66682,-22.0511 -9.80715,-2.70741 -19.95724,2.33226 -23.90298,11.405413 -14.1382,0.467533 -27.51111,5.577097 -39.80114,15.219267 -17.76129,13.9298 -28.83431,33.68757 -34.99389,47.80757 l -0.0479,0.11335 c -0.0512,0.12175 -0.0998,0.24114 -0.13249,0.32962 -0.49733,1.28292 -1.01552,2.64514 -1.55689,4.07255 -3.61311,9.51043 -9.66004,25.42824 -15.611995,30.89342 -0.106524,0.10027 -0.208228,0.20187 -0.362362,0.35435 -1.636243,1.66563 -4.382941,2.99463 -7.288979,4.40101 -7.145531,3.45301 -22.013613,10.64166 -17.206389,31.67844 0.929154,4.07105 4.008437,7.29057 8.033861,8.40185 l 167.570804,46.2604 c 4.02253,1.11048 8.31521,-0.0729 11.2052,-3.08958 14.91617,-15.58874 5.84693,-29.38668 1.48625,-36.02133 z"\n'
+    + '       id="path5"\n'
+    + '       inkscape:connector-curvature="0"\n'
+    + '       vector-effect="non-scaling-stroke"\n'
+    + `       style="fill:${fillColor}; stroke: ${strokeColor}; stroke-width: 1; " /><path\n`
+    + '       vector-effect="non-scaling-stroke"\n'
+    + '       d="m 174.26737,259.72378 -38.76399,-10.70137 c -1.59243,-0.43962 -3.28183,-0.15596 -4.63548,0.7754 -2.53909,1.7494 -2.84182,4.93159 -3.02304,6.83188 l -0.0151,0.15247 c -1.22819,12.67106 6.79854,24.33046 19.08688,27.72284 12.51583,3.45518 25.8324,-2.91586 30.9681,-14.80385 l 0.0935,-0.19205 c 0.52305,-1.06418 1.74613,-3.55554 0.50882,-6.31116 -0.44302,-0.98439 -1.5794,-2.74529 -4.21964,-3.47416 z"\n'
+    + '       id="path7"\n'
+    + '       inkscape:connector-curvature="0"\n'
+    + `       style="fill:${fillColor}; stroke: ${strokeColor}; stroke-width: 1;" /></g><g\n`
+    + '     id="g17" /><g\n'
+    + '     id="g19" /><g\n'
+    + '     id="g21" /><g\n'
+    + '     id="g23" /><g\n'
+    + '     id="g25" /><g\n'
+    + '     id="g27" /><g\n'
+    + '     id="g29" /><g\n'
+    + '     id="g31" /><g\n'
+    + '     id="g33" /><g\n'
+    + '     id="g35" /><g\n'
+    + '     id="g37" /><g\n'
+    + '     id="g39" /><g\n'
+    + '     id="g41" /><g\n'
+    + '     id="g43" /><g\n'
+    + '     id="g45" /></svg>';
+};

package/src/widgets/SubscriptionButton/constants.ts

@@ -0,0 +1,28 @@
+// Bell
+import { type TBellConfig } from './subscribe_widget.types';
+
+export const BELL_POSITION_BOTTOM_RIGHT = 'bottomRight';
+export const BELL_POSITION_BOTTOM_LEFT = 'bottomLeft';
+export const BELL_POSITION_TOP_RIGHT = 'topRight';
+export const BELL_POSITION_TOP_LEFT = 'topLeft';
+
+// Common
+export const WIDGET_CONTAINER_ID = 'pushwooshBellWidget';
+
+export const SUBSCRIBE_WIDGET_DEFAULT_CONFIG: TBellConfig = {
+  position: BELL_POSITION_BOTTOM_LEFT,
+  bgColor: '#12AE7E',
+  bellColor: 'white',
+  bellStrokeColor: '#08754f',
+  bellButtonBorder: '1px solid #379676',
+  shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
+  size: '48px',
+  indent: '20px',
+  zIndex: '999999',
+  tooltipText: {
+    successSubscribe: 'You are successfully subscribed!',
+    needSubscribe: 'Get notifications about important news!',
+    blockSubscribe: 'Click to see how to get notifications',
+    alreadySubscribed: 'You are already subscribed',
+  },
+};