@textback/notification-widget 2.0.0 → 2.0.1-102913

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

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

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

@@ -23,9 +23,16 @@ class ViberButton extends Button {
                     <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
                 </a>
                 <p class="tb-notification-button__tip">
-                    ${this.text('viber_tip')}
+                    ${this.text('viberTip')}
                 </p>
             `;
+        } else if(this.config.markUp.style === 'gradient') {
+            return `
+                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
+                </a>
+            `;
         } else if (this.config.markUp.style !== 'square') {
             return `
                 <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
@@ -38,7 +45,7 @@ class ViberButton extends Button {
                 <div class="tb-notification-button__inner">
                     <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
                     <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
-                        <tb-notification-button__text>${this.text('sign-viber')}</tb-notification-button__text>
+                        <tb-notification-button__text>${this.text('viberExtended')}</tb-notification-button__text>
                     </a>
                 </div>
             `;

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

@@ -7,77 +7,86 @@ import iconCircle from '../../icons/icon_vk_circle.svg';
 import constants from '../../../sdk/utils/constants.js';
 
 class VKButton extends Button {
-    constructor() {
-        super(...arguments);
+  constructor() {
+    super(...arguments);
 
-        this.useVkApp = this.widget.config.useVkApp;
-        this.element.setAttribute('type', this.config.type || 'widget');
+    this.useVkApp = this.widget.config.useVkApp;
+    this.landingUrl = this.config.additionalProperties ? this.config.additionalProperties.landingUrl : undefined;
+    this.element.setAttribute('type', this.config.type || 'widget');
 
-        this.buttonContainerId = UUID.create(4).hex;
+    this.buttonContainerId = UUID.create(4).hex;
 
-        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
-            this.element.setAttribute('authorized', this.channelAPI.authorized);
-            this.element.addEventListener('click', event => {
-                event.preventDefault();
-                this.channelAPI.subscribeViaApi();
-            });
+    if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+      this.element.setAttribute('authorized', this.channelAPI.authorized);
+      this.element.addEventListener('click', event => {
+        event.preventDefault();
+        this.channelAPI.subscribeViaApi();
+      });
 
-            this.set({
-                ready: true
-            });
-        } else if (this.useVkApp || this.config.markUp.style !== 'square') {
-            this.element.addEventListener('click', event => {
-                event.preventDefault();
-                this.channelAPI.subscribe();
-            });
+      this.set({
+        ready: true
+      });
+    } else if (this.useVkApp || this.config.markUp.style !== 'square'|| this.config.markUp.style === 'gradient' || this.landingUrl) {
+      this.element.addEventListener('click', event => {
+        event.preventDefault();
+        this.channelAPI.subscribe();
+      });
 
-            this.set({
-                ready: true
-            });
-        } else {
-            this.set({
-                ready: true
-            });
+      this.set({
+        ready: true
+      });
+    } else {
+      this.set({
+        ready: true
+      });
 
-            this.channelAPI.renderVKSubscriptionButton(30, this.buttonContainerId);
-        }
+      this.channelAPI.renderVKSubscriptionButton(30, this.buttonContainerId);
     }
+  }
 
 
   get template() {
-        if (this.ready) {
-            if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
-                return `
+    if (this.ready) {
+      if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+        return `
                     <a href="javascript:void(0)">
-                        <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                        <tb-notification-button__text for="login">${this.text('vkontakte login')}</tb-notification-button__text>
+                        <tb-notification-button__icon>${icon}</tb-notification-button__icon>
+                        <tb-notification-button__text for="login">${this.text('vkontakteLogin')}</tb-notification-button__text>
                         <tb-notification-button__text for="subscribe">${this.text('vkontakte')}</tb-notification-button__text>
                     </a>
                     <p class="tb-notification-button__tip">
-                        ${this.text('vkontakte_tip')}
+                        ${this.text('vkontakteTip')}
                     </p>
                 `;
-            } else if (this.config.markUp.style !== 'square') {
-                return `
+      } else if(this.config.markUp.style === 'gradient') {
+        return `
+                    <a class="vk-app-link" href="#">
+                        <tb-notification-button__icon>${icon}</tb-notification-button__icon>
+                        <tb-notification-button__text>${this.text('vkontakte')}</tb-notification-button__text>
+                    </a>
+                `;
+      } else if (this.config.markUp.style !== 'square') {
+        return `
                     <a href="#">
-                        <tb-notification-button__icon>${(this.config.markUp.style === 'rounded' ? icon : iconCircle)}</tb-notification-button__icon> 
+                        <tb-notification-button__icon>${(this.config.markUp.style === 'rounded' ? icon : iconCircle)}</tb-notification-button__icon>
                         <tb-notification-button__text>${this.text('vkontakte')}</tb-notification-button__text>
                     </a>
                 `;
-            } else {
-                  return this.useVkApp
-                       ?`<a class="vk-app-link" href="#">
-                           <tb-notification-button__icon>${icon}</tb-notification-button__icon>
-                           <tb-notification-button__text>${this.text('vkontakte')}</tb-notification-button__text>
-                         </a>`
-                       :`<div class="tb-notification-button__inner">
-                           <tb-notification-button__icon>${icon}</tb-notification-button__icon>
-                           <a id="${this.buttonContainerId}"></a>
-                       </div>`;
-            }
-        }
-        return '';
+      } else {
+        return `
+                    <div class="tb-notification-button__inner">
+                      <tb-notification-button__icon>${icon}</tb-notification-button__icon>
+                      <a id="${this.buttonContainerId}">
+                      ${
+                        this.useVkApp || this.landingUrl ? this.text('vkontakteExtended') : ''
+                      }
+                      </a>
+                    </div>
+                `
+      }
     }
+    return '';
+  }
 }
 
 module.exports = VKButton;

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

@@ -9,29 +9,36 @@ const prefixText = encodeURIComponent('Отправьте не изменяя э
 class WhatsappButton extends Button {
     render() {
         super.render();
-        
+
         const link = this.element.querySelector('a');
         link.addEventListener('click', (event) => {
             event.preventDefault();
             this.channelAPI.subscribe();
         });
     }
-    
+
     get template() {
         if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
             return `
-                <a target="_blank" href="https://api.whatsapp.com/send?phone=${this.config.id}&text=${prefixText + this.deepLink}">
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
                     <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
                     <tb-notification-button__text>${this.text('whatsapp')}</tb-notification-button__text>
                 </a>
                 <p class="tb-notification-button__tip">
-                    ${this.text('whatsapp_tip')}
+                    ${this.text('whatsappTip')}
                 </p>
             `;
+        } else if(this.config.markUp.style === 'gradient' || this.config.markUp.style === 'icons') {
+            return `
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                    <tb-notification-button__icon>${iconCircle}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('whatsapp')}</tb-notification-button__text>
+                </a>
+            `;
         } else if (this.config.markUp.style !== 'square') {
             return `
-                <a target="_blank" href="https://api.whatsapp.com/send?phone=${this.config.id}&text=${prefixText + this.deepLink}">
-                    <tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? icon : iconCircle )}</tb-notification-button__icon> 
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                    <tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? iconCircle : icon )}</tb-notification-button__icon> 
                     <tb-notification-button__text>${this.text('whatsapp')}</tb-notification-button__text>
                 </a>
             `;
@@ -39,8 +46,8 @@ class WhatsappButton extends Button {
             return `
                 <div class="tb-notification-button__inner">
                     <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
-                    <a target="_blank" href="https://api.whatsapp.com/send?phone=${this.config.id}&text=${prefixText + this.deepLink}">
-                        <tb-notification-button__text>${this.text('sign-whatsapp')}</tb-notification-button__text>
+                    <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                        <tb-notification-button__text>${this.text('whatsappExtended')}</tb-notification-button__text>
                     </a>
                 </div>
             `;

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

@@ -0,0 +1,58 @@
+import Button from './index.js';
+import icon from '../../icons/icon_whatsappb.svg';
+import iconNew from '../../icons/icon_whatsappb_new.svg';
+import iconCircle from '../../icons/icon_whatsappb_circle.svg';
+import constants from '../../../sdk/utils/constants.js';
+
+const prefixText = encodeURIComponent('Отправьте не изменяя это сообщение ');
+
+class WhatsappbButton extends Button {
+    render() {
+        super.render();
+
+        const link = this.element.querySelector('a');
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.channelAPI.subscribe();
+        });
+    }
+
+    get template() {
+        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+            return `
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
+                </a>
+                <p class="tb-notification-button__tip">
+                    ${this.text('whatsappTip')}
+                </p>
+            `;
+        } else if(this.config.markUp.style === 'gradient' || this.config.markUp.style === 'icons') {
+            return `
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                    <tb-notification-button__icon>${iconCircle}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
+                </a>
+            `;
+        } else if (this.config.markUp.style !== 'square') {
+            return `
+                <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                    <tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? iconCircle : icon )}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('whatsappb')}</tb-notification-button__text>
+                </a>
+            `;
+        } else {
+            return `
+                <div class="tb-notification-button__inner">
+                    <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
+                    <a target="_blank" href="https://api.whatsapp.com/send/?phone=+${this.config.id}&text=${prefixText + this.deepLink}">
+                        <tb-notification-button__text>${this.text('whatsappbExtended')}</tb-notification-button__text>
+                    </a>
+                </div>
+            `;
+        }
+    }
+};
+
+module.exports = WhatsappbButton;