@textback/notification-widget 2.0.2 → 2.0.4-110500

package/src/sdk/channels/vk-modal/vk-modal.scss

@@ -1,116 +1,116 @@
-.tb-modal-open {
-    overflow: hidden;
-    
-    .tb-modal {
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        display: block;
-    }
-}
-
-.tb-modal {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: none;
-    background-color: rgba(0, 0, 0, .7);
-    z-index: 1072;
-    height: 100%;
-    width: 100%;
-    text-align: center;
-
-    * {
-        box-sizing: border-box;
-    }
-
-    .tb-modal-dialog {
-        height: 100%;
-        width: 100%;
-
-        &:before {
-            display: inline-block;
-            vertical-align: middle;
-            content: " ";
-            height: 100%;
-        }
-
-        .tb-modal-content {
-            display: inline-block;
-            position: relative;
-            padding: 25px 25px 35px;
-            background-color: #fff;
-
-            width: 310px;
-
-            .tb-modal-content_text {
-                display: flex;
-                justify-content: center;
-            }
-
-            .tb-close {
-                position: absolute;
-                top: 5px;
-                right: 12px;
-
-                border: none;
-                outline: 0;
-                padding: 0;
-                background-color: transparent;
-
-                font-size: 24px;
-                font-weight: bold;
-                color: #000;
-                opacity: 0.7;
-
-                &:hover {
-                    opacity: 1;
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-}
-
-.tb-vk-button {
-    margin-top: 15px;
-    display: inline-block;
-    width: 230px; 
-    position: relative;
-    padding-left: 40px;
-
-    .tb-vk-icon {
-        width: 30px;
-        height: 30px;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-
-        > svg path {
-            fill: #45668e;
-        }
-    }
-
-    .tb-vk-button-container {
-
-    }
-}
-
-@media only screen and (min-device-width: 736px) {
-    .tb-modal .tb-modal-dialog .tb-modal-content{
-        width: 500px;
-    }
-
-    .tb-vk-button {
-        width: 245px; 
-        padding-left: 55px;
-
-        .tb-vk-icon {
-            width: 40px;
-            height: 40px;
-            top: -5px;
-        }
-    }
-}
+.tb-modal-open {
+    overflow: hidden;
+    
+    .tb-modal {
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        display: block;
+    }
+}
+
+.tb-modal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: none;
+    background-color: rgba(0, 0, 0, .7);
+    z-index: 1072;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .tb-modal-dialog {
+        height: 100%;
+        width: 100%;
+
+        &:before {
+            display: inline-block;
+            vertical-align: middle;
+            content: " ";
+            height: 100%;
+        }
+
+        .tb-modal-content {
+            display: inline-block;
+            position: relative;
+            padding: 25px 25px 35px;
+            background-color: #fff;
+
+            width: 310px;
+
+            .tb-modal-content_text {
+                display: flex;
+                justify-content: center;
+            }
+
+            .tb-close {
+                position: absolute;
+                top: 5px;
+                right: 12px;
+
+                border: none;
+                outline: 0;
+                padding: 0;
+                background-color: transparent;
+
+                font-size: 24px;
+                font-weight: bold;
+                color: #000;
+                opacity: 0.7;
+
+                &:hover {
+                    opacity: 1;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+
+.tb-vk-button {
+    margin-top: 15px;
+    display: inline-block;
+    width: 230px; 
+    position: relative;
+    padding-left: 40px;
+
+    .tb-vk-icon {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+
+        > svg path {
+            fill: #45668e;
+        }
+    }
+
+    .tb-vk-button-container {
+
+    }
+}
+
+@media only screen and (min-device-width: 736px) {
+    .tb-modal .tb-modal-dialog .tb-modal-content{
+        width: 500px;
+    }
+
+    .tb-vk-button {
+        width: 245px; 
+        padding-left: 55px;
+
+        .tb-vk-icon {
+            width: 40px;
+            height: 40px;
+            top: -5px;
+        }
+    }
+}

package/src/sdk/channels/vk.js

@@ -1,195 +1,195 @@
-import UUID from 'uuid-js';
-
-import loadScript from '../utils/loadScript.js';
-import apiErrorHandler from '../utils/apiErrorHandler.js';
-
-import Channel from './channel.js';
-import VKModal from './vk-modal/vk-modal.js';
-import constants from "../utils/constants";
-
-const VK_API_VERSION = '5.131';
-const LOGIN_TIMEOUT = 4096;
-
-function loadVkLib(){
-  return new Promise((resolve, reject) => {
-    if (window.VK && window.VK.Auth) {
-      resolve('vk cache');
-    }
-    else {
-      loadScript('//vk.com/js/api/openapi.js')
-        .then(function () {
-          resolve('vk load');
-        }, function (err) {
-          reject(err);
-        });
-    }
-  });
-}
-
-function initVK(apiId) {
-  return new Promise((resolve, reject) => {
-    if (apiId) {
-      if (!window.VK._apiId) {
-        window.VK.init({apiId});
-      }
-      window.VK.Auth.getLoginStatus(resolve);
-    } else {
-      reject('noVKApiId');
-    }
-  });
-}
-
-function handleVKLoadingError(error) {
-  console.error('Failed to load VK openapi.js. VK channel will be unavailable');
-  return null;
-}
-
-// isVkAppUsed :: Object -> Boolean
-const isVkAppUsed = config => {
-  return config.useVkApp
-    ? config.useVkApp
-    : false;
-};
-
-export default class VKChannel extends Channel {
-  constructor(channelData = {}, deeplink, widget) {
-    super(channelData, deeplink, widget);
-
-    this.isDoubleCheck = widget.config.isDoubleCheck;
-    this.vkApiId = this.widget.config.vkApiId;
-    this.initPromise = null;
-    this.vkPluginContainerId = null;
-    this.authorized = false;
-    this.landingUrl = this.config.additionalProperties ? this.config.additionalProperties.landingUrl : undefined;
-
-    if (this.enabled) {
-      this.vkPluginContainerId = UUID.create(4).hex;
-
-      if (!this.widget.useVKApi) {
-        this.initPromise = loadVkLib()
-          .catch(err => this.__handleVKLoadingError(err));
-      } else {
-        this.initPromise = loadVkLib()
-          .then(() => initVK(this.vkApiId))
-          .then(() => {
-            this.authorized = !!(window.VK.Auth.getSession());
-          })
-          .catch(err => this.__handleVKLoadingError(err));
-      }
-    }
-  }
-
-  subscribe() {
-    super.subscribe();
-    return this.landingUrl ?
-      window.open(this.landingUrl, '_blank')
-      :
-      (isVkAppUsed(this.widget.config)
-       ? window.open(`https://vk.com/app${this.widget.config.vkApiId}_-${this.config.id}#r=subscribe_${this.deeplink}&accountId=${this.widget.config.accountId}&channelId=${this.channelId}`, 'vk')
-       : this.subscribeViaPlugin());
-  }
-
-  subscribeViaApi() {
-    let promise = null;
-
-    if (!this.authorized) {
-      promise = this.__login().then( res => this.__allowMessagesFromGroup() );
-    } else {
-      promise = this.__allowMessagesFromGroup();
-    }
-    return promise;
-  }
-
-  __allowMessagesFromGroup () {
-    window.VK.Api.call(
-      'messages.allowMessagesFromGroup',
-      {
-        group_id: this.id,
-        v: VK_API_VERSION,
-      },
-      res => {
-        const vkSession = window.VK.Auth.getSession();
-        const vkUserId = vkSession.mid;
-
-        if (res.response === 1) {
-          this.__textbackSubscribe(vkUserId);
-        } else {
-          console.log('VK res error:', res);
-        }
-      }
-    );
-  }
-
-
-  __login () {
-    return new Promise(resolve => {
-      window.VK.Auth.login(res => {
-        resolve(res);
-      }, LOGIN_TIMEOUT);
-    });
-  }
-
-  __textbackSubscribe (vkUserId, channelWidgetIdx) {
-    //we shall parse deeplink from server webhook. This method looks like artifact from age without webhhoks.
-    if(!this.isDoubleCheck) return null;
-
-    return fetch(`${this.widget.initialConfig.apiPath}/endUserNotifications/subscriptions`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        'accountId': this.widget.config.accountId,
-        'insecureContext': this.widget.insecureContext,
-        'secureContextToken': this.widget.secureContextToken,
-        'address': {
-          'channel': 'vk',
-          'channelId': this.config.channelId,
-          'accountId': this.widget.config.accountId,
-          'remoteAddress': vkUserId,
-          'chatId': vkUserId
-        },
-        deepLinkId: this.deeplink.replace('subscribe_',''),
-        widgetId: this.widget.id,
-        'user': {
-          'id': this.widget.widgetUserId
-        }
-      })
-    }).then(apiErrorHandler);
-  }
-
-  __handleVKLoadingError(err) {
-    super.reportError('Failed to load VK openapi.js. VK channel will be unavailable.', err);
-    return null;
-  }
-
-  subscribeViaPlugin() {
-    const modal = new VKModal(this.vkPluginContainerId);
-    this.renderVKSubscriptionButton();
-
-    modal.onClose = () => {
-      if (this.vkSubscribeHandler) {
-        window.VK.Observer.unsubscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
-        this.vkSubscribeHandler = null;
-      }
-    };
-  }
-
-  renderVKSubscriptionButton(height = 30, containerId = this.vkPluginContainerId) {
-    if (this.vkSubscribeHandler) {
-      window.VK.Observer.unsubscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
-      this.vkSubscribeHandler = null;
-    }
-
-    const options = {
-      height,
-      key: this.deeplink
-    };
-
-    window.VK.Widgets.AllowMessagesFromCommunity(containerId, options, this.id);
-    if (!this.config.disableAllowMessageEvents) {
-      this.vkSubscribeHandler = this.__textbackSubscribe.bind(this);
-      window.VK.Observer.subscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
-    }
-  }
-}
+import UUID from 'uuid-js';
+
+import loadScript from '../utils/loadScript.js';
+import apiErrorHandler from '../utils/apiErrorHandler.js';
+
+import Channel from './channel.js';
+import VKModal from './vk-modal/vk-modal.js';
+import constants from "../utils/constants";
+
+const VK_API_VERSION = '5.131';
+const LOGIN_TIMEOUT = 4096;
+
+function loadVkLib(){
+  return new Promise((resolve, reject) => {
+    if (window.VK && window.VK.Auth) {
+      resolve('vk cache');
+    }
+    else {
+      loadScript('//vk.com/js/api/openapi.js')
+        .then(function () {
+          resolve('vk load');
+        }, function (err) {
+          reject(err);
+        });
+    }
+  });
+}
+
+function initVK(apiId) {
+  return new Promise((resolve, reject) => {
+    if (apiId) {
+      if (!window.VK._apiId) {
+        window.VK.init({apiId});
+      }
+      window.VK.Auth.getLoginStatus(resolve);
+    } else {
+      reject('noVKApiId');
+    }
+  });
+}
+
+function handleVKLoadingError(error) {
+  console.error('Failed to load VK openapi.js. VK channel will be unavailable');
+  return null;
+}
+
+// isVkAppUsed :: Object -> Boolean
+const isVkAppUsed = config => {
+  return config.useVkApp
+    ? config.useVkApp
+    : false;
+};
+
+export default class VKChannel extends Channel {
+  constructor(channelData = {}, deeplink, widget) {
+    super(channelData, deeplink, widget);
+
+    this.isDoubleCheck = widget.config.isDoubleCheck;
+    this.vkApiId = this.widget.config.vkApiId;
+    this.initPromise = null;
+    this.vkPluginContainerId = null;
+    this.authorized = false;
+    this.landingUrl = this.config.additionalProperties ? this.config.additionalProperties.landingUrl : undefined;
+
+    if (this.enabled) {
+      this.vkPluginContainerId = UUID.create(4).hex;
+
+      if (!this.widget.useVKApi) {
+        this.initPromise = loadVkLib()
+          .catch(err => this.__handleVKLoadingError(err));
+      } else {
+        this.initPromise = loadVkLib()
+          .then(() => initVK(this.vkApiId))
+          .then(() => {
+            this.authorized = !!(window.VK.Auth.getSession());
+          })
+          .catch(err => this.__handleVKLoadingError(err));
+      }
+    }
+  }
+
+  subscribe() {
+    super.subscribe();
+    return this.landingUrl ?
+      window.open(this.landingUrl, '_blank')
+      :
+      (isVkAppUsed(this.widget.config)
+       ? window.open(`https://vk.com/app${this.widget.config.vkApiId}_-${this.config.id}#r=subscribe_${this.deeplink}&accountId=${this.widget.config.accountId}&channelId=${this.channelId}`, 'vk')
+       : this.subscribeViaPlugin());
+  }
+
+  subscribeViaApi() {
+    let promise = null;
+
+    if (!this.authorized) {
+      promise = this.__login().then( res => this.__allowMessagesFromGroup() );
+    } else {
+      promise = this.__allowMessagesFromGroup();
+    }
+    return promise;
+  }
+
+  __allowMessagesFromGroup () {
+    window.VK.Api.call(
+      'messages.allowMessagesFromGroup',
+      {
+        group_id: this.id,
+        v: VK_API_VERSION,
+      },
+      res => {
+        const vkSession = window.VK.Auth.getSession();
+        const vkUserId = vkSession.mid;
+
+        if (res.response === 1) {
+          this.__textbackSubscribe(vkUserId);
+        } else {
+          console.log('VK res error:', res);
+        }
+      }
+    );
+  }
+
+
+  __login () {
+    return new Promise(resolve => {
+      window.VK.Auth.login(res => {
+        resolve(res);
+      }, LOGIN_TIMEOUT);
+    });
+  }
+
+  __textbackSubscribe (vkUserId, channelWidgetIdx) {
+    //we shall parse deeplink from server webhook. This method looks like artifact from age without webhhoks.
+    if(!this.isDoubleCheck) return null;
+
+    return fetch(`${this.widget.initialConfig.apiPath}/endUserNotifications/subscriptions`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        'accountId': this.widget.config.accountId,
+        'insecureContext': this.widget.insecureContext,
+        'secureContextToken': this.widget.secureContextToken,
+        'address': {
+          'channel': 'vk',
+          'channelId': this.config.channelId,
+          'accountId': this.widget.config.accountId,
+          'remoteAddress': vkUserId,
+          'chatId': vkUserId
+        },
+        deepLinkId: this.deeplink.replace('subscribe_',''),
+        widgetId: this.widget.id,
+        'user': {
+          'id': this.widget.widgetUserId
+        }
+      })
+    }).then(apiErrorHandler);
+  }
+
+  __handleVKLoadingError(err) {
+    super.reportError('Failed to load VK openapi.js. VK channel will be unavailable.', err);
+    return null;
+  }
+
+  subscribeViaPlugin() {
+    const modal = new VKModal(this.vkPluginContainerId);
+    this.renderVKSubscriptionButton();
+
+    modal.onClose = () => {
+      if (this.vkSubscribeHandler) {
+        window.VK.Observer.unsubscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
+        this.vkSubscribeHandler = null;
+      }
+    };
+  }
+
+  renderVKSubscriptionButton(height = 30, containerId = this.vkPluginContainerId) {
+    if (this.vkSubscribeHandler) {
+      window.VK.Observer.unsubscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
+      this.vkSubscribeHandler = null;
+    }
+
+    const options = {
+      height,
+      key: this.deeplink
+    };
+
+    window.VK.Widgets.AllowMessagesFromCommunity(containerId, options, this.id);
+    if (!this.config.disableAllowMessageEvents) {
+      this.vkSubscribeHandler = this.__textbackSubscribe.bind(this);
+      window.VK.Observer.subscribe('widgets.allowMessagesFromCommunity.allowed', this.vkSubscribeHandler);
+    }
+  }
+}