@textback/notification-widget 2.0.0 → 2.0.1-102913

package/src/sdk/utils/windowHelper.js

@@ -1,25 +1,25 @@
-'use strict';
-
-export default class WindowHelper {
-  constructior() {}
-
-  static get center() {
-    return {
-      x: Math.floor(window.innerWidth * 0.5),
-      y: Math.floor(window.innerHeight * 0.5)
-    };
-  }
-
-  static getRatio(percent) {
-    let r = percent / 100;
-    return {
-      width: Math.floor(window.innerWidth * r),
-      height: Math.floor(window.innerHeight * r)
-    };
-  }
-
-  static getRatioPropString(percent) {
-    let ratioObj = this.getRatio(percent);
-    return `width=${ratioObj.width},height=${ratioObj.height}`;
-  }
-}
+'use strict';
+
+export default class WindowHelper {
+  constructior() {}
+
+  static get center() {
+    return {
+      x: Math.floor(window.innerWidth * 0.5),
+      y: Math.floor(window.innerHeight * 0.5)
+    };
+  }
+
+  static getRatio(percent) {
+    let r = percent / 100;
+    return {
+      width: Math.floor(window.innerWidth * r),
+      height: Math.floor(window.innerHeight * r)
+    };
+  }
+
+  static getRatioPropString(percent) {
+    let ratioObj = this.getRatio(percent);
+    return `width=${ratioObj.width},height=${ratioObj.height}`;
+  }
+}

package/src/sdk/widget/widget.js

@@ -1,140 +1,192 @@
-import UUID from 'uuid-js';
-import assign from 'lodash/assign';
-
-import apiErrorHandler from '../utils/apiErrorHandler.js';
-import loadConfig from '../utils/loadConfig.js';
-import loadDeepLink from '../utils/loadDeepLink.js';
-import loadSubscriptions from '../utils/loadSubscriptions.js';
-import cookies from '../utils/cookies.js';
-import constants from '../utils/constants.js';
-import parseQueryString from '../utils/parseQueryString.js';
-import find from '../utils/find.js';
-import appInsights from '../utils/appInsights.js';
-
-import channelsFactory from '../channels/factory.js';
-
-const INITIAL_CONFIG_DEFAULTS = {
-    apiPath: 'https://api.textback.io/api',
-};
-
-export default class Widget {
-    constructor(config, sdk) {
-        this.initialConfig = assign({}, INITIAL_CONFIG_DEFAULTS, config);
-        this.sdk = sdk;
-
-        this.config = {};
-        this.channels = [];
-        this.initialized = false;
-        this.initPromise = null;
-
-        this.id = this.initialConfig.widgetId;
-        this.widgetUserId = Widget.getWidgetUserId();
-        this.insecureContext = Widget.createInsecureContext(this.initialConfig.insecureContext);
-        this.secureContextToken = this.initialConfig.secureContextToken;
-    }
-
-    getConfig() {
-        return this.config;
-    }
-
-    initialize() {
-        this.initPromise = Promise.all([
-            this.initializeConfig(),
-            loadSubscriptions(this.widgetUserId, this.initialConfig.widgetId, this.initialConfig.apiPath),
-        ]).then(([config, subscriptions]) => {
-            this.config = config.$value;
-            this.subscriptions = subscriptions.$items;
-
-            this.useVKApi = this.config.type === constants.WIDGET_TYPE_API_CALL;
-            this.aiKey = Widget.getAiKey(config);
-
-            return Promise.all([
-                loadDeepLink(
-                    this.initialConfig.apiPath,
-                    {
-                        accountId: this.config.accountId,
-                        insecureContext: this.insecureContext,
-                        widgetId: this.config.id,
-                        secureContextToken: this.secureContextToken,
-                        user: {
-                            id: this.widgetUserId
-                        }
-                    }
-                ),
-                appInsights.init(this.aiKey, this.widgetUserId, this.config.accountId)
-            ]);
-        }).then(([deeplink, ai]) => {
-            this.deeplink = `subscribe_${deeplink.$value.id}`;
-            this.channels = this.config.channels.map(channel => channelsFactory.create(channel, this.deeplink, this))
-                                                .filter(channel => !!channel);
-            const channelInitPromises = this.channels.filter(channel => !!channel.initPromise)
-                                                     .map(channel => channel.initPromise);
-
-            return Promise.all(channelInitPromises);
-        }).then(channelPromises => {
-            return this;
-        }, err => {
-            appInsights.trackWidgetEvent(this.config.id, 'Widget.initialize.error', err);
-            return Promise.reject(err);
-        })
-
-        return this.initPromise;
-    }
-
-    initializeConfig() {
-        let promise;
-        if (!this.initialConfig.overrideConfig) {
-            promise = loadConfig(this.initialConfig.widgetId, this.initialConfig.apiPath);
-        } else {
-            promise = Promise.resolve({ $value: this.initialConfig.overrideConfig });
-        }
-
-        return promise;
-    }
-
-    subscribe(channelCode) {
-        const channel = find(this.getEnabledChannels(), chan => chan.channel === channelCode);
-        if (channel) {
-            channel.subscribe();
-        }
-    }
-
-    getChannels() {
-        return this.channels;
-    }
-
-    getEnabledChannels() {
-        return this.channels.filter(channel => channel.enabled && !channel.hasError);
-    }
-
-    static getWidgetUserId() {
-        let widgetUserId = cookies.getCookie(constants.COOKIE_WIDGET_USER_ID);
-        if (widgetUserId === null) {
-            let uuid = UUID.create(4);
-            widgetUserId = uuid.hex;
-            cookies.setCookie(constants.COOKIE_WIDGET_USER_ID, widgetUserId, constants.WIDGET_USER_ID_COOKIE_TTL);
-        }
-        return widgetUserId;
-    }
-
-    static createInsecureContext(insecureContext = {}) {
-        const ctx = assign({}, insecureContext);//Object.assign({}, insecureContext);
-        ctx.pageTitle = window.document.title;
-        ctx.pageUrl = window.location.protocol + '//' + window.location.host + window.location.pathname;
-        ctx.params = parseQueryString(window.location.search.substring(1));
-        ctx.timezoneOffset = new Date().getTimezoneOffset();
-
-        return ctx;
-    }
-
-    static getAiKey(config) {
-        let aiKey = undefined;
-        try {
-            aiKey = config.headers.get('X-TB-AIKEY');
-        } catch (e) { }
-
-        return aiKey;
-    }
-
-
-}
+import UUID from 'uuid-js';
+import assign from 'lodash/assign';
+
+import apiErrorHandler from '../utils/apiErrorHandler.js';
+import loadConfig from '../utils/loadConfig.js';
+import loadDeepLink from '../utils/loadDeepLink.js';
+import loadSubscriptions from '../utils/loadSubscriptions.js';
+import cookies from '../utils/cookies.js';
+import constants from '../utils/constants.js';
+import parseQueryString from '../utils/parseQueryString.js';
+import find from '../utils/find.js';
+import appInsights from '../utils/appInsights.js';
+
+import channelsFactory from '../channels/factory.js';
+
+const INITIAL_CONFIG_DEFAULTS = {
+  apiPath: 'https://api.textback.io/api',
+};
+
+export default class Widget {
+  constructor(config, sdk) {
+    this.initialConfig = assign({}, INITIAL_CONFIG_DEFAULTS, config);
+    this.sdk = sdk;
+
+    this.config = {};
+    this.channels = [];
+    this.initialized = false;
+    this.initPromise = null;
+
+    this.id = this.initialConfig.widgetId;
+    this.widgetUserId = Widget.getWidgetUserId();
+    this.insecureContext = Widget.createInsecureContext(this.initialConfig.insecureContext);
+    this.secureContextToken = this.initialConfig.secureContextToken;
+  }
+
+  getConfig() {
+    return this.config;
+  }
+
+  initialize() {
+    this.initPromise = Promise.all([
+      this.initializeConfig(),
+      loadSubscriptions(this.widgetUserId, this.initialConfig.widgetId, this.initialConfig.apiPath),
+    ]).then(([config, subscriptions]) => {
+      this.config = config.$value;
+      this.subscriptions = subscriptions.$items;
+
+      this.useVKApi = this.config.type === constants.WIDGET_TYPE_API_CALL;
+      this.aiKey = Widget.getAiKey(config);
+
+      let customDeeplinkData = this.config.channels.filter(
+        c => c.hasOwnProperty('additionalProperties') && c.additionalProperties.hasOwnProperty('customDeeplinkValue')
+      ).filter(
+        c => c.channel === 'whatsapp' || c.channel === 'whatsappb'
+      ).filter(
+        c => c.enabled
+      ).map(
+        ({additionalProperties, channel, channelId}) => {
+          return {
+            channel: channel,
+            channelId: channelId,
+            customDeeplinkValue: additionalProperties.customDeeplinkValue
+          };
+        }
+      );
+
+      let deeplinkData = {
+        accountId: this.config.accountId,
+        insecureContext: this.insecureContext,
+        widgetId: this.config.id,
+        secureContextToken: this.secureContextToken,
+        user: {
+          id: this.widgetUserId
+        }
+      };
+
+      if(customDeeplinkData.length > 0) {
+        deeplinkData.customDeeplinkValue = customDeeplinkData;
+      }
+
+      return Promise.all([
+        loadDeepLink(
+          this.initialConfig.apiPath,
+          deeplinkData
+        ),
+        appInsights.init(this.aiKey, this.widgetUserId, this.config.accountId)
+      ]);
+    }).then(([deeplink, ai]) => {
+      this.deeplink = `subscribe_${deeplink.$value.id}`;
+      this.channels = this.config.channels.map(channel => channelsFactory.create(channel, this.deeplink, this))
+        .filter(channel => !!channel);
+
+      const channelInitPromises = this.channels.filter(
+        channel => !!channel.initPromise
+      ).map(
+        channel => channel.initPromise
+      );
+
+      return Promise.all(channelInitPromises);
+    }).then(channelPromises => {
+      return this;
+    }, err => {
+      appInsights.trackWidgetEvent(this.config.id, 'Widget.initialize.error', err);
+      return Promise.reject(err);
+    });
+
+    return this.initPromise;
+  }
+
+  initializeConfig() {
+    let promise;
+    if (!this.initialConfig.overrideConfig) {
+      promise = loadConfig(this.initialConfig.widgetId, this.initialConfig.apiPath);
+    } else {
+      promise = Promise.resolve({ $value: this.initialConfig.overrideConfig });
+    }
+
+    return promise;
+  }
+
+  subscribe(channelCode) {
+    const channel = find(this.getEnabledChannels(), chan => chan.channel === channelCode);
+    if (channel) {
+      channel.subscribe();
+    }
+  }
+
+  getChannels() {
+    return this.channels;
+  }
+
+  getEnabledChannels() {
+    return this.channels.filter(channel => channel.enabled && !channel.hasError);
+  }
+
+  runWahunter(phoneNumber) {
+    return fetch(`${this.initialConfig.apiPath}/wahunter`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8'
+      },
+      body: JSON.stringify({
+        notificationWidgetId: this.initialConfig.widgetId,
+        phone: phoneNumber,
+        insecureContext: this.insecureContext,
+        deeplinkId: this.deeplink,
+      }),
+    }).then((resp) => {
+      if (resp.ok) {
+        cookies.setCookie(`${constants.COOKIE_NAME_PREFIX + this.id}_wahunter_was_run`, true, this.config.showWidgetSetting.showSessionLength * 60);
+      } else {
+        return Promise.reject(resp);
+      }
+    })
+  }
+
+  static getWidgetUserId() {
+    let widgetUserId = cookies.getCookie(constants.COOKIE_WIDGET_USER_ID);
+    if (widgetUserId === null) {
+      let uuid = UUID.create(4);
+      widgetUserId = uuid.hex;
+      cookies.setCookie(constants.COOKIE_WIDGET_USER_ID, widgetUserId, constants.WIDGET_USER_ID_COOKIE_TTL);
+    }
+    return widgetUserId;
+  }
+
+  static createInsecureContext(insecureContext = {}) {
+    const ctx = assign({}, insecureContext);//Object.assign({}, insecureContext);
+    ctx.pageTitle = window.document.title;
+    ctx.pageUrl = window.location.protocol + '//' + window.location.host + window.location.pathname;
+    ctx.params = parseQueryString(window.location.search.substring(1));
+    ctx.timezoneOffset = new Date().getTimezoneOffset();
+    ctx.cookies = cookies.getCookieObject();
+
+    const roistatVisitCookie = cookies.getCookie("roistat_visit");
+
+    if (roistatVisitCookie) {
+      ctx.roistatVisit = roistatVisitCookie;
+    }
+
+    return ctx;
+  }
+
+  static getAiKey(config) {
+    let aiKey = undefined;
+    try {
+      aiKey = config.headers.get('X-TB-AIKEY');
+    } catch (e) { }
+
+    return aiKey;
+  }
+}

package/src/widget/components/index.js

@@ -5,7 +5,9 @@ import getLocale from '../utils/getLocale.js';
 
 export default class Component {
     constructor(props = {}) {
-        this.element = props.element || document.createElement(this.constructor.tagName);
+
+        if (Object.prototype.hasOwnProperty.call(props, 'parentElement')) this.element = props.parentElement;
+        if (!Object.prototype.hasOwnProperty.call(props, 'parentElement')) this.element = props.element || document.createElement(this.constructor.tagName);
 
         const dataset = JSON.parse(JSON.stringify(this.element.dataset || {}));
         const data = merge(JSON.parse(this.element.getAttribute('data')), dataset);
@@ -30,6 +32,8 @@ export default class Component {
     }
 
     set lang(value) {
+        if (!value) return;
+
         this.element.setAttribute('lang', value);
     }
 
@@ -45,4 +49,4 @@ export default class Component {
     static get tagName() {
         return 'div';
     }
-};
+};

package/src/widget/components/tb-notification-button/facebook.js

@@ -22,9 +22,16 @@ class FacebookButton extends Button {
                     <tb-notification-button__text>${this.text('facebook')}</tb-notification-button__text>
                 </a>
                 <p class="tb-notification-button__tip">
-                    ${this.text('facebook_tip')}
+                    ${this.text('facebookTip')}
                 </p>
             `;
+        } else if(this.config.markUp.style === 'gradient') {
+            return `
+                <a target="_blank" href="https://m.me/${this.config.id}?ref=${this.deepLink}">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('facebook')}</tb-notification-button__text>
+                </a>
+            `;
         } else if (this.config.markUp.style !== 'square') {
             return `
                 <a target="_blank" href="https://m.me/${this.config.id}?ref=${this.deepLink}">
@@ -37,7 +44,7 @@ class FacebookButton extends Button {
                 <div class="tb-notification-button__inner">
                     <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
                     <a target="_blank" href="https://m.me/${this.config.id}?ref=${this.deepLink}">
-                        <tb-notification-button__text>${this.text('sign-facebook')}</tb-notification-button__text>
+                        <tb-notification-button__text>${this.text('facebookExtended')}</tb-notification-button__text>
                     </a>
                 </div>
             `;

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

@@ -1,35 +1,35 @@
-import Component from '../index.js';
-import appInsights from '../../../sdk/utils/appInsights.js';
-import find from '../../../sdk/utils/find.js';
-import './styles.scss';
-
-export default class Button extends Component {
-    constructor() {
-        super(...arguments);
-
-        this.element.setAttribute('channel', this.channel);
-
-        this.channelAPI = find(this.widgetAPI.getEnabledChannels(), channel => {
-            return channel.id === this.config.id && channel.channel === this.config.channel && channel.channelId === this.config.channelId;
-        });
-    }
-
-    render() {
-        let self = this;
-        super.render();
-        this.element.addEventListener('click',  () => {
-            appInsights.trackButtonClick(this.widgetId, 'notificationWidget.button.click', this.channel)
-        });
-    }
-
-    get defaults() {
-        return {
-            config: JSON.parse(this.element.getAttribute('config')) || {},
-            channel: this.element.getAttribute('channel')
-        }
-    }
-
-    static get tagName() {
-        return 'tb-notification-button';
-    }
+import Component from '../index.js';
+import appInsights from '../../../sdk/utils/appInsights.js';
+import find from '../../../sdk/utils/find.js';
+import './styles.scss';
+
+export default class Button extends Component {
+    constructor() {
+        super(...arguments);
+
+        this.element.setAttribute('channel', this.channel);
+
+        this.channelAPI = find(this.widgetAPI.getEnabledChannels(), channel => {
+            return channel.id === this.config.id && channel.channel === this.config.channel && channel.channelId === this.config.channelId;
+        });
+    }
+
+    render() {
+        let self = this;
+        super.render();
+        this.element.addEventListener('click',  () => {
+            appInsights.trackButtonClick(this.widgetId, 'notificationWidget.button.click', this.channel)
+        });
+    }
+
+    get defaults() {
+        return {
+            config: JSON.parse(this.element.getAttribute('config')) || {},
+            channel: this.element.getAttribute('channel')
+        }
+    }
+
+    static get tagName() {
+        return 'tb-notification-button';
+    }
 };