@textback/notification-widget 2.0.0-9450 → 2.0.1-102913

package/src/sdk/utils/loadDeepLink.js

@@ -1,21 +1,48 @@
-import apiErrorHandler from './apiErrorHandler.js';
-
-const cache = {};
-
-export default function loadDeepLink(apiPath, options = {}) {
-    const body = JSON.stringify(options);
-
-    if (cache[body]) {
-        return cache[body];
-    }
-
-    cache[body] = fetch(`${apiPath}/endUserNotifications/deepLinks`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body
-    }).then(apiErrorHandler);
-
-    return cache[body];
-};
+'use strict';
+
+import apiErrorHandler from './apiErrorHandler.js';
+
+const cache = {};
+
+export const deeplinkUpdater = (apiPath, deeplink) => {
+  let _promises = [];
+
+  return data => {
+    Promise.all(_promises).then(() => {
+      let _data = JSON.stringify({
+        id: deeplink,
+        insecureContext: { data: data }
+      });
+
+      let _promise = fetch(
+        `${apiPath}/endUserNotifications/deepLinks`,
+        {
+          method: 'PATCH',
+          body: _data
+        }
+      );
+
+      _promises.push(_promise);
+
+      return _promises;
+    });
+  };
+};
+
+export default function loadDeepLink(apiPath, options = {}) {
+  const body = JSON.stringify(options);
+
+  if (cache[body]) {
+    return cache[body];
+  }
+
+  cache[body] = fetch(`${apiPath}/endUserNotifications/deepLinks`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body
+  }).then(apiErrorHandler);
+
+  return cache[body];
+};

package/src/sdk/utils/loadScript.js

@@ -1,26 +1,26 @@
-const cache = {};
-
-export default function loadScript(url) {
-    if (cache[url]){
-        return cache[url];
-    }
-
-    cache[url] = new Promise((resolve, reject) => {
-        let ready = false;
-        const scriptElement = document.createElement("script");
-
-        scriptElement.type = "text/javascript";
-        scriptElement.src = url;
-        scriptElement.async = true;
-        scriptElement.onload = scriptElement.onreadystatechange = function() {
-            if (!ready && (!this.readyState || this.readyState == "complete")) {
-                ready = true;
-                resolve();
-            }
-        };
-        scriptElement.onerror = scriptElement.onabort = reject;
-        document.head.appendChild(scriptElement);
-    });
-
-    return cache[url];
+const cache = {};
+
+export default function loadScript(url) {
+    if (cache[url]){
+        return cache[url];
+    }
+
+    cache[url] = new Promise((resolve, reject) => {
+        let ready = false;
+        const scriptElement = document.createElement("script");
+
+        scriptElement.type = "text/javascript";
+        scriptElement.src = url;
+        scriptElement.async = true;
+        scriptElement.onload = scriptElement.onreadystatechange = function() {
+            if (!ready && (!this.readyState || this.readyState == "complete")) {
+                ready = true;
+                resolve();
+            }
+        };
+        scriptElement.onerror = scriptElement.onabort = reject;
+        document.head.appendChild(scriptElement);
+    });
+
+    return cache[url];
 }

package/src/sdk/utils/loadSubscriptions.js

@@ -1,6 +1,6 @@
-import apiErrorHandler from './apiErrorHandler.js';
-
-export default function loadSubscriptions(uuid, widgetId, apiPath){
-    const subscribedUsers = fetch(`${apiPath}/endUserNotifications/widgets/${widgetId}/subscribedUsers/${uuid}`).then(apiErrorHandler);
-    return subscribedUsers;
-}
+import apiErrorHandler from './apiErrorHandler.js';
+
+export default function loadSubscriptions(uuid, widgetId, apiPath){
+    const subscribedUsers = fetch(`${apiPath}/endUserNotifications/widgets/${widgetId}/subscribedUsers/${uuid}`).then(apiErrorHandler);
+    return subscribedUsers;
+}

package/src/sdk/utils/parseQueryString.js

@@ -1,34 +1,34 @@
-function parseQueryString(query) {
-    const vars = query.split('&'),
-        queryString = {};
-
-    if (query.length > 0) {
-        for (var i = 0; i < vars.length; i++) {
-            const pair = vars[i].split('='),
-                key = decodeURIComponent(pair[0]),
-                value = decodeURIComponent(pair[1]);
-
-            if (!key) 
-                continue;
-
-            switch ( typeof queryString[key] ) {
-                // If first entry with this name
-                case 'undefined':
-                    queryString[key] = value;
-                    break;
-                // If second entry with this name
-                case 'string': {
-                    const arr = [ queryString[key], value ];
-                    queryString[ key ] = arr;
-                    break;
-                }
-                // If third or later entry with this name
-                default:
-                    queryString[key].push(value);
-            }
-        }
-    }
-    return queryString;
-}
-
+function parseQueryString(query) {
+    const vars = query.split('&'),
+        queryString = {};
+
+    if (query.length > 0) {
+        for (var i = 0; i < vars.length; i++) {
+            const pair = vars[i].split('='),
+                key = decodeURIComponent(pair[0]),
+                value = decodeURIComponent(pair[1]);
+
+            if (!key) 
+                continue;
+
+            switch ( typeof queryString[key] ) {
+                // If first entry with this name
+                case 'undefined':
+                    queryString[key] = value;
+                    break;
+                // If second entry with this name
+                case 'string': {
+                    const arr = [ queryString[key], value ];
+                    queryString[ key ] = arr;
+                    break;
+                }
+                // If third or later entry with this name
+                default:
+                    queryString[key].push(value);
+            }
+        }
+    }
+    return queryString;
+}
+
 export default parseQueryString;

package/src/sdk/utils/windowHelper.js

@@ -0,0 +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}`;
+  }
+}

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>
             `;