@textback/notification-widget 2.0.0 → 2.0.1-102913

package/src/widget/components/tb-notification-widget/index.js

@@ -1,3 +1,4 @@
+import MobileDetect from 'mobile-detect';
 import assign from 'lodash/assign';
 import Component from '../index.js';
 
@@ -13,461 +14,665 @@ import SDK from '../../../sdk/index.js';
 import iconBell from '../../icons/bell-icon.png';
 import iconBroadcast from '../../icons/broadcast-icon.png';
 import iconPaperPlane from '../../icons/paper-plane-icon.png';
-import iconTextBackBadge from '../../icons/text-back-badge.png';
+import iconTbLogo from '../../icons/tb-logo.svg'
+import iconChatWindow from '../../icons/icon_whatsapp_hollow.svg';
+import iconClose from '../../icons/icon_close.svg';
 
 import './normalize.scss';
 import './styles.scss';
 
+import Wahunter from '../tb-nw-wahunter/index.js';
+
+
 const channelButtons = {
-    vk: require('../tb-notification-button/vk'),
-    tg: require('../tb-notification-button/telegram'),
-    facebook: require('../tb-notification-button/facebook'),
-    skype: require('../tb-notification-button/skype'),
-    viber: require('../tb-notification-button/viber'),
-    whatsapp: require('../tb-notification-button/whatsapp')
+  vk: require('../tb-notification-button/vk'),
+  tg: require('../tb-notification-button/telegram'),
+  facebook: require('../tb-notification-button/facebook'),
+  viber: require('../tb-notification-button/viber'),
+  whatsapp: require('../tb-notification-button/whatsapp'),
+  whatsappb: require('../tb-notification-button/whatsappb')
 };
 
-
 const DEFAULT_BUTTONS_MARKUP = {
-    style: 'square',
-    displayMode: 'horizontal',
-    align: 'center',
+  style: 'gradient',
+  displayMode: 'horizontal',
+  align: 'center',
+};
+
+const getDeviceDisplayMap = () => {
+  const md = new MobileDetect(window.navigator.userAgent);
+  const isDesktop = () => !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
+
+  return new Map([
+    ['pc', isDesktop()],
+    ['mobile', md.phone()],
+    ['tablet', md.tablet()]
+  ]);
+};
+
+const showOnDevice = deviceList => {
+  if (deviceList === null || deviceList === undefined) return true;
+
+  return deviceList.map(i => getDeviceDisplayMap().get(i)).some(x => x);
 };
 
 export default class Widget extends Component {
-    constructor() {
-        super(...arguments);
+  constructor() {
+    super(...arguments);
 
-        this.apiPath = this.apiPath || config.apiPath;
-        this.onlyManual = this.onlyManual || this.element.hasAttribute('only-manual');
+    this.apiPath = this.apiPath || config.apiPath;
+    this.onlyManual = this.onlyManual || this.element.hasAttribute('only-manual');
+    this.previewMode = this.previewMode || this.element.hasAttribute('preview-mode');
 
-        const predefinedConfig = this.widgetConfig;
+    const predefinedConfig = this.widgetConfig;
 
-        //override widgetId property with data from widgetConfig
-        if (!!predefinedConfig) {
-            this.widgetId = predefinedConfig.id;
-        }
+    //override widgetId property with data from widgetConfig
+    if (!!predefinedConfig) {
+      this.widgetId = predefinedConfig.id;
+    }
 
-        let widgetInitPromise = SDK.getWidget(this.widgetId);
-        if (!widgetInitPromise) {
-            // init widget
-            widgetInitPromise = SDK.initWidget({
-                widgetId: this.widgetId,
-                apiPath: this.apiPath,
-                insecureContext: this.data,
-                secureContextToken: this.secureContextToken,
-                overrideConfig: predefinedConfig,
-            });
-        }
+    let widgetInitPromise = SDK.getWidget(this.widgetId);
+
+    if (!widgetInitPromise) {
+      // init widget
+      widgetInitPromise = SDK.initWidget({
+        widgetId: this.widgetId,
+        apiPath: this.apiPath,
+        insecureContext: this.data,
+        secureContextToken: this.secureContextToken,
+        overrideConfig: predefinedConfig,
+      }, this.previewMode);
+    }
 
-        widgetInitPromise = widgetInitPromise
-            .then(widget => {
-                this.widget = widget;
-
-                this.widgetUserId = widget.widgetUserId;
-                this.config = widget.getConfig();
-                this.config.type = this.config.type || constants.DEFAULT_WIDGET_TYPE;
-                this.config.markUp = this.config.markUp || {};
-                this.config.markUp.buttons = assign({}, DEFAULT_BUTTONS_MARKUP, this.config.markUp.buttons);
-
-                this.widgetSubscriptions = widget.subscriptions;
-                this.deepLink = widget.deeplink;
-                const aiKey = widget.aiKey;
-
-                return appInsights.init(aiKey, this.widgetUserId, this.config.accountId);
-            })
-            .then(res => {
-                this.set({
-                    ready: true
-                });
-                return this;
-            }, err => {
-                console.error(err);
-                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.error', err);
-                this.set({error: err});
-                return this;
-            });
-
-        widgetsStorage.setWidget(this.widgetId, widgetInitPromise);
+    widgetInitPromise = widgetInitPromise
+      .then(widget => {
+        this.widget = widget;
+
+        this.widgetUserId = widget.widgetUserId;
+        this.config = widget.getConfig();
+        this.config.type = this.config.type || constants.DEFAULT_WIDGET_TYPE;
+        this.config.markUp = this.config.markUp || {};
+        this.config.markUp.buttons = assign({}, DEFAULT_BUTTONS_MARKUP, this.config.markUp.buttons);
+
+        this.widgetSubscriptions = widget.subscriptions;
+        this.deepLink = widget.deeplink;
+        this.lang = this.config.lang
+
+        this.showWidgetSetting = (this.widget.config && this.widget.config.showWidgetSetting)
+          ? this.widget.config.showWidgetSetting.devices
+          : null;
+
+        const aiKey = widget.aiKey;
+
+
+
+        return appInsights.init(aiKey, this.widgetUserId, this.config.accountId);
+      })
+      .then(res => {
+        this.set({
+          ready: showOnDevice(this.showWidgetSetting)
+        });
+        return this;
+      }, err => {
+        console.error(err);
+        appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.error', err);
+        this.set({ error: err });
+        return this;
+      });
+
+    widgetsStorage.setWidget(this.widgetId, widgetInitPromise);
+  }
+
+  get defaults() {
+    return {
+      widgetId: this.element.getAttribute('widget-id'),
+      secureContextToken: this.element.getAttribute('secure-context-token'),
+      apiPath: this.element.getAttribute('api-path') || config.apiPath
+    };
+  }
+
+  render() {
+    super.render();
+
+    const wahunterElem = this.element.querySelector('tb-nw-wahunter');
+
+    if (wahunterElem) {
+      new Wahunter({
+        element: wahunterElem,
+        widgetAPI: this.widget,
+        parentElement: this.element,
+      });
     }
 
-    get defaults() {
-        return {
-            widgetId: this.element.getAttribute('widget-id'),
-            secureContextToken: this.element.getAttribute('secure-context-token'),
-            apiPath: this.element.getAttribute('api-path') || config.apiPath
-        }
+    this.element.id = this.element.id ? this.element.id : 'tb-notification-widget';
+
+    const buttons = this.element.querySelectorAll('tb-notification-button');
+
+    if (buttons) {
+      for (let i = 0; i < buttons.length; i++) {
+        const channel = buttons[i].getAttribute('channel');
+        new channelButtons[channel]({
+          element: buttons[i],
+          accountId: this.config.accountId,
+          userId: this.userId,
+          apiPath: this.apiPath,
+          insecureContext: this.data,
+          secureContextToken: this.secureContextToken,
+          deepLink: this.deepLink,
+          lang: this.lang,
+          vkApiId: this.config.vkApiId,
+          widgetId: this.config.id,
+          widget: this,
+          widgetAPI: this.widget,
+        });
+      }
     }
 
-    render() {
-        super.render();
-
-        this.element.id = this.element.id ? this.element.id : 'tb-notification-widget';
-
-        const buttons = this.element.querySelectorAll('tb-notification-button');
-
-        if (buttons) {
-            for (let i = 0; i < buttons.length; i++) {
-                const channel = buttons[i].getAttribute('channel');
-                new channelButtons[channel]({
-                    element: buttons[i],
-                    accountId: this.config.accountId,
-                    userId: this.userId,
-                    apiPath: this.apiPath,
-                    insecureContext: this.data,
-                    secureContextToken: this.secureContextToken,
-                    deepLink: this.deepLink,
-                    lang: this.lang,
-                    vkApiId: this.config.vkApiId,
-                    widgetId: this.config.id,
-                    widget: this,
-                    widgetAPI: this.widget,
-                });
-            }
+    if (!this.config || !this.config.displayMode) return;
+
+    if (this.config.displayMode === "popup") {
+      let sessionShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_s_show_counter';
+      let daysShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_show_counter';
+      let daysCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_close_counter';
+      let totalCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_total_close_counter';
+      let showWidgetSetting = this.config.showWidgetSetting;
+      let popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
+
+      this.element.addEventListener("click", (e) => {
+        const target = e.target;
+
+        if (!target.matches('#tb-notification-widget-close') && !target.matches('tb-notification-widget-overlay')) return;
+
+        popup.className += " hidden closed";
+        e.preventDefault();
+        appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.click.close', 'userAction');
+        if (showWidgetSetting) {
+          let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
+
+          cookiesEx.incrementIntCookie(daysCloseCounterName, daysTimeout);
+          cookiesEx.incrementIntCookie(totalCloseCounterName, constants.WIDGET_USER_ID_COOKIE_TTL);
         }
+      });
 
-        if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
-            let sessionShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_s_show_counter';
-            let daysShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_show_counter';
-            let daysCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_close_counter';
-            let totalCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_total_close_counter';
-
-            let showWidgetSetting = this.config.showWidgetSetting;
-
-            let popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
-            this.element.querySelector('#tb-notification-widget-close').addEventListener("click", (e) => {
-                popup.className += " hidden closed";
-                e.preventDefault();
-                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.click.close', 'userAction');
-                if (showWidgetSetting) {
-                    let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
-
-                    cookiesEx.incrementIntCookie(daysCloseCounterName, daysTimeout);
-                    cookiesEx.incrementIntCookie(totalCloseCounterName, constants.WIDGET_USER_ID_COOKIE_TTL);
-                }
-            });
-
-
-            if (showWidgetSetting) {
-                if (!showWidgetSetting.showIfSubscribed && this.widgetSubscriptions.length > 0) {
-                    appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.notShown', 'alreadySubscribed');
-                    return;
-                }
-
-
-                let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
-                let sessionTimeout = showWidgetSetting.showSessionLength * 60;
-
-                let daysShowCounter = cookiesEx.incrementIntCookie(daysShowCounterName, daysTimeout);
-                let sessionShowCounter = cookiesEx.incrementIntCookie(sessionShowCounterName, sessionTimeout);
-                let daysCloseCounter = cookiesEx.getIntCookie(daysCloseCounterName) || 0;
-                let totalCloseCounter = cookiesEx.getIntCookie(totalCloseCounterName) || 0;
-
-                const sendNonDisplayed = (reason) => {
-                    appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.notShown', reason);
-                    return true;
-                };
-
-                if (sessionShowCounter > showWidgetSetting.showTimesInSession && sendNonDisplayed('timesPerSession')|| // Не более N раз в сессию
-                    (showWidgetSetting.showTimesInRow > 0 && daysShowCounter > showWidgetSetting.showTimesInRow && sendNonDisplayed('timesPerDays')) ||// Не более N раз в M дней
-                    (showWidgetSetting.closeTimesInRow > 0 && daysCloseCounter >= showWidgetSetting.closeTimesInRow && sendNonDisplayed('closedTimesPerDays')) || // Не более N закрытий в M дней
-                    (showWidgetSetting.closeTimesInTotal > 0 && totalCloseCounter >= showWidgetSetting.closeTimesInTotal && sendNonDisplayed('closedTimes')) // Не более N закрытий всего
-                ) {
-                    return;
-                }
-            }
 
-            if (this.onlyManual) {
-                popup.className = 'hidden';
-                return;
+      if (this.config.widgetKind === 'WAHUNTER') {
+        // For uniformity of config object, "showIfSubscribed" here is "show wahunter again if it allready was run"
+        const wahunterWasRun = cookiesEx.getBoolCookie(`${constants.COOKIE_NAME_PREFIX + this.widgetId}_wahunter_was_run`);
+        const showIfWasRun = showWidgetSetting.showIfSubscribed;
+
+        if (wahunterWasRun && !showIfWasRun) return;
+      }
+
+
+      if (showWidgetSetting) {
+        if (!showWidgetSetting.showIfSubscribed && this.widgetSubscriptions.length > 0) {
+          appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.notShown', 'alreadySubscribed');
+          return;
+        }
+
+        let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
+        let sessionTimeout = showWidgetSetting.showSessionLength * 60;
+        let daysShowCounter = cookiesEx.incrementIntCookie(daysShowCounterName, daysTimeout);
+        let sessionShowCounter = cookiesEx.incrementIntCookie(sessionShowCounterName, sessionTimeout);
+        let daysCloseCounter = cookiesEx.getIntCookie(daysCloseCounterName) || 0;
+        let totalCloseCounter = cookiesEx.getIntCookie(totalCloseCounterName) || 0;
+
+        const sendNonDisplayed = (reason) => {
+          appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.notShown', reason);
+          return true;
+        };
+
+        if (sessionShowCounter > showWidgetSetting.showTimesInSession && sendNonDisplayed('timesPerSession') || // Не более N раз в сессию
+          (showWidgetSetting.showTimesInRow > 0 && daysShowCounter > showWidgetSetting.showTimesInRow && sendNonDisplayed('timesPerDays')) ||// Не более N раз в M дней
+          (showWidgetSetting.closeTimesInRow > 0 && daysCloseCounter >= showWidgetSetting.closeTimesInRow && sendNonDisplayed('closedTimesPerDays')) || // Не более N закрытий в M дней
+          (showWidgetSetting.closeTimesInTotal > 0 && totalCloseCounter >= showWidgetSetting.closeTimesInTotal && sendNonDisplayed('closedTimes')) // Не более N закрытий всего
+        ) {
+          return;
+        }
+      }
+
+      if (this.onlyManual) {
+        popup.className = 'hidden';
+        return;
+      }
+
+      if (this.config.displayOptions && (this.config.displayOptions.onTimeout || this.config.displayOptions.onLeave)) {
+        let telemetryFlag = false;
+
+        if (this.config.displayOptions.onTimeout && showOnDevice(this.showWidgetSetting)) {
+          setTimeout(() => {
+            if (popup.className.indexOf('closed') === -1 && !telemetryFlag) {
+              telemetryFlag = true;
+              appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'timeout');
             }
+            popup.className = popup.className.indexOf('closed') === -1 ? "" : popup.className;
+          }, +this.config.displayOptions.timeoutDelay * 1000);
+        }
 
-            if (this.config.displayOptions && (this.config.displayOptions.onTimeout || this.config.displayOptions.onLeave)) {
-                let telemetryFlag = false;
-                if (this.config.displayOptions.onTimeout) {
-                    setTimeout(() => {
-                        if(popup.className.indexOf('closed') === -1 && !telemetryFlag){
-                            telemetryFlag = true;
-                            appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'timeout');
-                        }
-                        popup.className = popup.className.indexOf('closed') === -1 ? "" : popup.className;
-                    }, +this.config.displayOptions.timeoutDelay * 1000);
-                }
-                if (this.config.displayOptions.onLeave) {
-                    document.addEventListener('mousemove', (e) => {
-                        if (e.clientY < 50) {
-                            if(popup.className.indexOf('closed') === -1 && !telemetryFlag){
-                                telemetryFlag = true;
-                                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'onLeave');
-                            }
-                            popup.className = popup.className.indexOf('closed') === -1 ? "" : popup.className;
-                        }
-                    });
-                }
+        if (this.config.displayOptions.onLeave && showOnDevice(this.showWidgetSetting)) {
+          document.addEventListener('mousemove', (e) => {
+            if (e.clientY < 50) {
+              if (popup.className.indexOf('closed') === -1 && !telemetryFlag) {
+                telemetryFlag = true;
+                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'onLeave');
+              }
+              popup.className = popup.className.indexOf('closed') === -1 ? "" : popup.className;
             }
+          });
         }
+      }
     }
 
-    get header() {
-        if (this.config.markUp && this.config.markUp.header && this.config.markUp.header.value) {
-            var color = this.config.markUp.header.color ? 'style="color: ' + this.config.markUp.header.color + '"' : undefined;
-            var result = '';
+    if (this.config.displayMode === "corner-popup" && showOnDevice(this.showWidgetSetting)) {
+      const popupControlButtonElem = this.element.querySelector('tb-widget-corner-popup-button');
+      const popupElem = popupControlButtonElem.parentElement;
+      const popupTooltipContainer = popupElem.querySelector('tb-widget-corner-popup-tooltip-container');
+      const fullscreenCloseButtonElem = popupElem.querySelector('.tb-fullscreen-close-rectangle .tb-icon-close');
 
-            result += '<tb-widget-header-line ' + color + ' class="tb-widget-header-line">' + this.config.markUp.header.value + '</tb-widget-header-line>';
+      fullscreenCloseButtonElem.addEventListener('click', (e) => {
+        popupElem.classList.remove('tb-opened-corner-popup');
+      });
 
-            return '<tb-widget-header-container>' + result + '</tb-widget-header-container>';
-        }
-        else {
-            return '';
-        }
+      popupControlButtonElem.addEventListener('click', (e) => {
+        popupElem.classList.toggle('tb-opened-corner-popup');
+      });
 
+      popupElem.addEventListener('wahunter-success', (e) => {
+        popupTooltipContainer.style.display = 'none';
+      });
     }
+  }
 
-    get description() {
-        if (this.config.markUp && this.config.markUp.description && this.config.markUp.description.value) {
-            var color = this.config.markUp.description.color ? 'style="color: ' + this.config.markUp.description.color + '"' : undefined;
-            var result = '';
+  get header() {
+    if (this.config.markUp && this.config.markUp.header && this.config.markUp.header.value) {
+      var color = this.config.markUp.header.color ? 'style="color: ' + this.config.markUp.header.color + '"' : undefined;
+      var result = '';
 
-            result += '<tb-widget-description-line ' + color + ' class="tb-widget-description-line">' + this.config.markUp.description.value + '</tb-widget-description-line>'
+      result += '<tb-widget-header-line ' + color + ' class="tb-widget-header-line">' + this.config.markUp.header.value + '</tb-widget-header-line>';
 
-            return '<tb-widget-description-container>' + result + '</tb-widget-description-container>';
-        }
-        else {
-            return '';
-        }
+      return '<tb-widget-header-container>' + result + '</tb-widget-header-container>';
+    } else {
+      return '';
+    }
+  }
 
+  get description() {
+    if (this.config.markUp && this.config.markUp.description && this.config.markUp.description.value) {
+      var color = this.config.markUp.description.color ? 'style="color: ' + this.config.markUp.description.color + '"' : undefined;
+      var result = '';
+
+      result += '<tb-widget-description-line ' + color + ' class="tb-widget-description-line">' + this.config.markUp.description.value + '</tb-widget-description-line>'
+
+      return '<tb-widget-description-container>' + result + '</tb-widget-description-container>';
+    }
+    else {
+      return '';
+    }
+  }
+
+  static iconPreset(val) {
+    switch (val) {
+      case 'widgetIconBell':
+        return iconBell;
+      case 'widgetIconBroadcast':
+        return iconBroadcast;
+      case 'widgetIconPaperPlane':
+        return iconPaperPlane;
     }
 
-    static iconPreset(val) {
-        switch (val) {
-            case 'widgetIconBell':
-                return iconBell;
-            case 'widgetIconBroadcast':
-                return iconBroadcast;
-            case 'widgetIconPaperPlane':
-                return iconPaperPlane;
-            case 'text-back-badge':
-                return iconTextBackBadge;
-        }
+  }
 
+  get icon() {
+    if (this.config.markUp && this.config.markUp.icon && this.config.markUp.icon.type === "custom") {
+      return '<tb-notification-widget-icon_body>'
+        + '<img src="' + this.config.markUp.icon.url + '">'
+        + '</tb-notification-widget-icon_body>'
+    }
+    if (this.config.markUp && this.config.markUp.icon && this.config.markUp.icon.type === "preset") {
+      return '<tb-notification-widget-icon_body>'
+        + '<img src="' + Widget.iconPreset(this.config.markUp.icon.value) + '">'
+        + '</tb-notification-widget-icon_body>'
     }
+    else {
+      return '';
+    }
+  }
+
 
-    get icon() {
-        if (this.config.markUp && this.config.markUp.icon && this.config.markUp.icon.type === "custom") {
-            return '<tb-notification-widget-icon_body>'
-                + '<img src="' + this.config.markUp.icon.url + '">'
-                + '</tb-notification-widget-icon_body>'
-        }
-        if (this.config.markUp && this.config.markUp.icon && this.config.markUp.icon.type === "preset") {
-            return '<tb-notification-widget-icon_body>'
-                + '<img src="' + Widget.iconPreset(this.config.markUp.icon.value) + '">'
-                + '</tb-notification-widget-icon_body>'
-        }
-        else {
-            return '';
-        }
 
+  getTbBrandBadge({ displayMode, widgetKind }) {
+    const utmMedium = widgetKind === 'WAHUNTER' ? 'hunter' : 'widget-subscribe';
+
+    if (widgetKind === 'WAHUNTER') {
+      return `
+      <a target="_blank"
+         href="//textback.ru/?utm_source=TextBack_tool&utm_medium=${utmMedium}&utm_campaign=${window.location.origin}${window.location.pathname}&utm_content=${displayMode}
+
+         id="tb-notification-brand-badge"
+         style="${displayMode === 'inline' ? 'fill:inherit; color: inherit;' : ''}"
+      >
+        ${this.text('worksFor')} ${iconTbLogo}
+      </a>
+    `;
     }
 
-    get pallet() {
-        return this.config && this.config.markUp.body.palette && this.config.markUp.body.palette === "light" ? 'pallet-light' : 'pallet-dark'
+    return `
+      <a target="_blank"
+         href="//textback.ru/?utm_source=TextBack_tool&utm_medium=${utmMedium}&utm_campaign=${window.location.origin}${window.location.pathname}"
+
+         id="tb-notification-brand-badge"
+         style="${displayMode === 'inline' ? 'fill:inherit; color: inherit;' : ''}"
+      >
+        ${this.text('worksFor')} ${iconTbLogo}
+      </a>
+    `;
+  }
+
+
+  get image() {
+    if (!this.config.markUp.image || !this.config.markUp.image.show) return '';
+
+    return `
+      <tb-notification-widget-image style="background-image: url(${this.config.markUp.image.url})">
+        <img src="${this.config.markUp.image.url}">
+      </tb-notification-widget-image>
+    `;
+  }
+
+  get pallet() {
+    return this.config && this.config.markUp.body.palette && this.config.markUp.body.palette === "light" ? 'tb-pallet-light' : 'tb-pallet-dark'
+  }
+
+
+  get template() {
+    if (this.ready && this.config && this.config.displayMode) {
+      switch (this.config.displayMode) {
+        case 'popup':
+          return this.popupTemplate;
+        case 'inline':
+          return this.inlineTemplate;
+        case 'corner-popup':
+          return this.cornerPopupTemplate;
+        default:
+          return '';
+      }
+    } else if (this.error) {
+      console.warn(`could not render widget. reason: ${this.error}`);
     }
 
-    get template() {
-        if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
-            this.element.className = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-no-api-call' : '');
-
-            const buttonsStyle = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'square' : 'rounded'),
-                  buttonsStyleClass = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-btn-style-square' : 'tb-btn-style-rounded');
-
-            var body = '';
-            if (this.ready) {
-                const channels = this.widget.getEnabledChannels();
-                body = channels.map((channel, index) => {
-                    const item = assign({}, channel.config, { 
-                        type: this.config.type, 
-                        markUp: assign({}, this.config.markUp.buttons, { style: buttonsStyle }),
-                    });
-                    const attributes = stringifyAttributes({
-                        channel: item.channel,
-                        config: item,
-                    });
-
-                    return item.enabled ? `<div><tb-notification-button id="tb-notification-button-${index}" ${attributes}></tb-notification-button></div>` : '';
-                }).join('');
-            } else if (this.error) {
-                console.warn('could not render widget. reason: ' + this.error);
-                body = '';
-            } else {
-                body = '';
-            }
+    return '';
+  }
 
-            return `<tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner"><tb-notification-widget-overlay class="hidden">
-                            <tb-notification-widget-popup class="${this.pallet}">
-                                <span id="tb-notification-widget-close" class="tb-notification-widget-close-icon">&times;</span>
-                                <a target="_blank" href="//textback.ru/?utm_source=${window.location.host}&utm_medium=link&utm_content=notify_widget_opened&utm_campaign=ref_ad">
-                                    <img id="tb-notification-brand-badge" src="${Widget.iconPreset('text-back-badge')}">
-                                </a>
-                                ${this.icon}
-                                ${this.header}
-                                ${this.description}
-                                <div class="tb-widget-buttons tb-btn-align-center ${buttonsStyleClass}">${body}</div>
-                            </tb-notification-widget-popup>
-                        </tb-notification-widget-overlay></tb-notification-widget-inner>`;
-
-        } else {
-            if (this.ready) {
-                this.element.className = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-no-api-call' : '');
-                const buttonsContainerClasses = (this.config.type === constants.WIDGET_TYPE_WIDGET 
-                    ? this.getButtonsClasses()
-                    : 'tb-btn-style-rounded tb-btn-mode-horizontal tb-btn-align-left');
-                // let
-
-                const channels = this.widget.getEnabledChannels();
-                const body = channels.map((channel, index) => {
-                    const item = assign({}, channel.config, { type: this.config.type, markUp: this.config.markUp.buttons });
-                    const attributes = stringifyAttributes({
-                        channel: item.channel,
-                        config: item,
-                    });
-
-                    if (item.enabled) {
-                        let html = `<tb-notification-button id="tb-notification-button-${index}" ${attributes}></tb-notification-button>`;
-                        if (this.config.markUp.buttons.displayMode === 'vertical') {
-                            html = `<div>${html}</div>`;
-                        }
-                        return html;
-                    } else {
-                        return '';
-                    }
-                }).join('');
-                
-                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.inline.show', 'displaySettings');
-                return `<tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
-                    <div class="tb-widget-buttons ${buttonsContainerClasses}">
-                        ${body}
-                    </div>
-                </tb-notification-widget-inner>`;
-            } else if (this.error) {
-                console.warn('could not render widget. reason: ' + this.error);
-                return '';
-            } else {
-                return ''
-            }
+  get popupTemplate() {
+    this.element.className = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-no-api-call' : '');
 
-        }
+    const markUp = this.config.markUp;
+    const isPopupWithImage = markUp.image && markUp.image.show;
+
+    let imageUrlNotEmpty;
+    let popupStyleClass = this.pallet;
+
+    if (this.config.widgetKind === 'WAHUNTER' || isPopupWithImage) {
+      imageUrlNotEmpty = !!markUp.image.url.trim();
+      popupStyleClass += ` tb-popup-with-image tb-popup-${(markUp.image.align !== 'top' && imageUrlNotEmpty) ? 'horizontal' : 'vertical'}`;
     }
 
-    static get tagName() {
-        return 'tb-notification-widget';
+    if (this.config.widgetKind === 'WAHUNTER') {
+      let wahunterImageAlignClassName = `tb-nw-wahunter_${imageUrlNotEmpty ? ('image-align_' + markUp.image.align) : 'without-image'}`;
+
+      return `
+        <tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
+          <tb-notification-widget-overlay class="hidden">
+            <tb-notification-widget-popup class="${popupStyleClass}">
+              <span id="tb-notification-widget-close" class="tb-notification-widget-close-icon">&times;</span>
+                ${this.getTbBrandBadge(this.config)}
+              <tb-nw-wahunter class="tb-nw-wahunter tb-nw-wahunter_mode_popup ${wahunterImageAlignClassName}"></tb-nw-wahunter>
+            </tb-notification-widget-popup>
+          </tb-notification-widget-overlay>
+        </tb-notification-widget-inner>
+      `;
     }
 
-    static getWidget(widgetId) {
-        return widgetsStorage.getWidget(widgetId);
+    const buttonsStyle = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'square' : 'rounded');
+    const buttonsStyleClass = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-btn-style-square' : 'tb-btn-style-rounded');
+    let body = '';
+
+    const channels = this.widget.getEnabledChannels();
+
+    body = channels.map((channel, index) => {
+      const item = assign({}, channel.config, {
+        type: this.config.type,
+        markUp: assign({}, markUp.buttons, { style: buttonsStyle }),
+      });
+
+      const attributes = stringifyAttributes({
+        channel: item.channel,
+        config: item,
+      });
+
+      return item.enabled ? `<div><tb-notification-button id="tb-notification-button-${index}" ${attributes}></tb-notification-button></div>` : '';
+    }).join('');
+
+
+    let popupBodyStyleClass = 'tb-notification-widget-popup-body';
+
+    if (isPopupWithImage) {
+      popupBodyStyleClass += ` ${popupBodyStyleClass}_image-align_${imageUrlNotEmpty ? markUp.image.align : 'none'}`
     }
 
-    show() {
-        if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
-            const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
-            if (popup.className.indexOf('hidden') !== -1 || popup.className.indexOf('closed')) {
-                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'manual');
-            }
-            popup.className = '';
+    return `
+      <tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
+        <tb-notification-widget-overlay class="hidden">
+          <tb-notification-widget-popup class="${popupStyleClass}">
+              <span id="tb-notification-widget-close" class="tb-notification-widget-close-icon">&times;</span>
+              ${this.getTbBrandBadge(this.config)}
+              <tb-notification-widget-popup-body class="${popupBodyStyleClass}">
+                ${(markUp.image && markUp.image.show) ? this.image : this.icon}
+                <tb-notification-widget-popup-main>
+                  ${this.header}
+                  ${this.description}
+                  <div class="tb-widget-buttons tb-btn-align-center ${buttonsStyleClass}">${body}</div>
+                </tb-notification-widget-popup-main>
+              </tb-notification-widget-popup-body>
+          </tb-notification-widget-popup>
+        </tb-notification-widget-overlay>
+      </tb-notification-widget-inner>
+    `;
+  }
+
+  get inlineTemplate() {
+
+    this.element.className = (this.config.type === constants.WIDGET_TYPE_WIDGET ? 'tb-no-api-call' : '');
+
+    const buttonsContainerClasses = this.config.type === constants.WIDGET_TYPE_WIDGET
+      ? this.getButtonsClasses()
+      : 'tb-btn-style-rounded tb-btn-mode-horizontal tb-btn-align-left';
+
+    const channels = this.widget.getEnabledChannels();
+
+    const body = channels.map((channel, index) => {
+      const item = assign({}, channel.config, { type: this.config.type, markUp: this.config.markUp.buttons });
+      const attributes = stringifyAttributes({
+        channel: item.channel,
+        config: item,
+      });
+
+      if (item.enabled) {
+        let html = `<tb-notification-button id="tb-notification-button-${index}" ${attributes}></tb-notification-button>`;
+        if (this.config.markUp.buttons.displayMode === 'vertical') {
+          html = `<div>${html}</div>`;
         }
+        return html;
+      } else {
+        return '';
+      }
+    }).join('');
+
+    appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.inline.show', 'displaySettings');
+
+    if (this.config.widgetKind === 'WAHUNTER') {
+      return `
+        <tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
+          <tb-nw-wahunter class="tb-nw-wahunter tb-nw-wahunter_mode_inline tb-nw-wahunter_inline-mode-align_${this.config.markUp.buttons.align}"></tb-nw-wahunter>
+        </tb-notification-widget-inner>
+      `;
     }
 
-    showWithRules() {
-        let showWidgetSetting = this.config.showWidgetSetting;
-        let sessionShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_s_show_counter';
-        let daysShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_show_counter';
-        let daysCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_close_counter';
-        let totalCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_total_close_counter';
+    return `
+      <tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
+        <div class="tb-widget-buttons ${buttonsContainerClasses}">
+          ${body}
+        </div>
+      </tb-notification-widget-inner>
+    `;
+  }
+
+  get cornerPopupTemplate() {
+    const markUp = this.config.markUp;
+
+    if (this.config.widgetKind === 'WAHUNTER') {
+      return `
+        <tb-notification-widget-inner id="tb-notification-widget-inner" class="tb-notification-widget-inner">
+          <tb-notification-widget-corner-popup>
+            <tb-widget-corner-popup-window class="${this.pallet}">
+              <div class="tb-fullscreen-close-rectangle">
+                ${iconClose}
+              </div>
+              <tb-nw-wahunter class="tb-nw-wahunter tb-nw-wahunter_mode_corner-popup"></tb-nw-wahunter>
+              ${this.getTbBrandBadge(this.config)}
+            </tb-widget-corner-popup-window>
+            <tb-widget-corner-popup-button style="background: ${markUp.wahunterButton.color}">
+              ${iconChatWindow}
+              ${iconClose}
+            </tb-widget-corner-popup-button>
+            <tb-widget-corner-popup-tooltip-container
+              class="${markUp.description.showOnMobile ? 'tb-widget-corner-popup-tooltip-container_show-on-mobile' : ''}"
+              style="${markUp.description.value.trim() ? '' : 'display:none'}"
+            >
+              <tb-widget-corner-popup-tooltip style="color:${markUp.description.color}">\
+              ${markUp.description.value}\
+              </tb-widget-corner-popup-tooltip>
+              <tb-widget-corner-popup-tooltip-arrow />
+            </tb-widget-corner-popup-tooltip-container>
+          </tb-notification-widget-corner-popup>
+        </tb-notification-widget-inner>
+      `;
+    }
 
-        if (showWidgetSetting) {
-            if (!showWidgetSetting.showIfSubscribed && this.widgetSubscriptions.length > 0) {
-                return false;
-            }
+    return '';
+  }
 
-            let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
-            let sessionTimeout = showWidgetSetting.showSessionLength * 60;
-            let daysShowCounter = cookiesEx.incrementIntCookie(daysShowCounterName, daysTimeout);
-            let sessionShowCounter = cookiesEx.incrementIntCookie(sessionShowCounterName, sessionTimeout);
-            let daysCloseCounter = cookiesEx.getIntCookie(daysCloseCounterName) || 0;
-            let totalCloseCounter = cookiesEx.getIntCookie(totalCloseCounterName) || 0;
-
-            if (sessionShowCounter > showWidgetSetting.showTimesInSession ||
-               (showWidgetSetting.showTimesInRow > 0 && daysShowCounter > showWidgetSetting.showTimesInRow) ||
-               (showWidgetSetting.closeTimesInRow > 0 && daysCloseCounter >= showWidgetSetting.closeTimesInRow) ||
-               (showWidgetSetting.closeTimesInTotal > 0 && totalCloseCounter >= showWidgetSetting.closeTimesInTotal)) {
-               return false;
-            }
-        }
+  static get tagName() {
+    return 'tb-notification-widget';
+  }
 
-        if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
-            const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
-            if (popup.className.indexOf('hidden') !== -1 || popup.className.indexOf('closed')) {
-                appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'manual');
-            }
-            popup.className = '';
-            return popup;
-        }
+  static getWidget(widgetId) {
+    return widgetsStorage.getWidget(widgetId);
+  }
+
+  show() {
+    if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
+      const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
+      if (popup.className.indexOf('hidden') !== -1 || popup.className.indexOf('closed')) {
+        appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'manual');
+      }
+      popup.className = '';
+    }
+  }
+
+  showWithRules() {
+    let showWidgetSetting = this.config.showWidgetSetting;
+    let sessionShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_s_show_counter';
+    let daysShowCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_show_counter';
+    let daysCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_days_close_counter';
+    let totalCloseCounterName = constants.COOKIE_NAME_PREFIX + this.widgetId + '_total_close_counter';
 
+    if (showWidgetSetting) {
+      if (!showWidgetSetting.showIfSubscribed && this.widgetSubscriptions.length > 0) {
         return false;
+      }
+
+      let daysTimeout = showWidgetSetting.showAfterDays * constants.SECONDS_IN_DAY;
+      let sessionTimeout = showWidgetSetting.showSessionLength * 60;
+      let daysShowCounter = cookiesEx.incrementIntCookie(daysShowCounterName, daysTimeout);
+      let sessionShowCounter = cookiesEx.incrementIntCookie(sessionShowCounterName, sessionTimeout);
+      let daysCloseCounter = cookiesEx.getIntCookie(daysCloseCounterName) || 0;
+      let totalCloseCounter = cookiesEx.getIntCookie(totalCloseCounterName) || 0;
+
+      if (sessionShowCounter > showWidgetSetting.showTimesInSession ||
+        (showWidgetSetting.showTimesInRow > 0 && daysShowCounter > showWidgetSetting.showTimesInRow) ||
+        (showWidgetSetting.closeTimesInRow > 0 && daysCloseCounter >= showWidgetSetting.closeTimesInRow) ||
+        (showWidgetSetting.closeTimesInTotal > 0 && totalCloseCounter >= showWidgetSetting.closeTimesInTotal)) {
+        return false;
+      }
     }
 
-    hide() {
-        if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
-            const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
-            if (popup.className.indexOf('hidden') !== -1) {
-                popup.className += 'hidden';
-            }
-        }
+    if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
+      const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
+      if (popup.className.indexOf('hidden') !== -1 || popup.className.indexOf('closed')) {
+        appInsights.trackWidgetEvent(this.config.id, 'notificationWidget.popup.show', 'manual');
+      }
+      popup.className = '';
+      return popup;
     }
 
-    getButtonsClasses() {
-        console.log(this.config);
-        const classes = [];
+    return false;
+  }
 
-        if (this.config.markUp && this.config.markUp.buttons) {
-            const markUp = this.config.markUp.buttons;
-            classes.push( getButtonsStyleClass(markUp.style) );
-            classes.push( getButtonsAlignmentClass(markUp.align) );
-            classes.push( getButtonsDisplayModeClass(markUp.displayMode) );
-        }
+  hide() {
+    if (this.config && this.config.displayMode && this.config.displayMode === "popup") {
+      const popup = this.element.getElementsByTagName("tb-notification-widget-overlay")[0];
+      if (popup.className.indexOf('hidden') !== -1) {
+        popup.className += 'hidden';
+      }
+    }
+  }
 
-        function getButtonsStyleClass(style) {
-            const prefix = 'tb-btn-style';
-            switch (style) {
-                case 'rounded':
-                    return `${prefix}-rounded`;
-                case 'icons': 
-                    return `${prefix}-icons`;
-                default:
-                    return `${prefix}-square`;
-            }
-        }
+  getButtonsClasses() {
+    const classes = [];
 
-        function getButtonsAlignmentClass(align) {
-            const prefix = 'tb-btn-align';
-            switch (align) {
-                case 'left':
-                    return `${prefix}-left`;
-                case 'right': 
-                    return `${prefix}-right`;
-                default:
-                    return `${prefix}-center`;
-            }
-        }
+    if (this.config.markUp && this.config.markUp.buttons) {
+      const markUp = this.config.markUp.buttons;
+      classes.push(getButtonsStyleClass(markUp.style));
+      classes.push(getButtonsAlignmentClass(markUp.align));
+      classes.push(getButtonsDisplayModeClass(markUp.displayMode));
+    }
 
-        function getButtonsDisplayModeClass(mode) {
-            const prefix = 'tb-btn-mode';
-            if (mode === 'vertical') {
-                return `${prefix}-vertical`;
-            } else {
-                return `${prefix}-horizontal`;
-            }
-        }
+    function getButtonsStyleClass(style) {
+      const prefix = 'tb-btn-style';
+      switch (style) {
+        case 'rounded':
+          return `${prefix}-rounded`;
+        case 'icons':
+          return `${prefix}-icons`;
+        case 'gradient':
+          return `${prefix}-gradient`;
+        default:
+          return `${prefix}-square`;
+      }
+    }
 
-        return classes.join(' ');
+    function getButtonsAlignmentClass(align) {
+      const prefix = 'tb-btn-align';
+      switch (align) {
+        case 'left':
+          return `${prefix}-left`;
+        case 'right':
+          return `${prefix}-right`;
+        default:
+          return `${prefix}-center`;
+      }
     }
+
+    function getButtonsDisplayModeClass(mode) {
+      const prefix = 'tb-btn-mode';
+      if (mode === 'vertical') {
+        return `${prefix}-vertical`;
+      } else {
+        return `${prefix}-horizontal`;
+      }
+    }
+
+    return classes.join(' ');
+  }
 };