@textback/notification-widget 2.0.15 → 2.0.17

package/src/widget/components/tb-notification-button/styles.scss

@@ -4,18 +4,21 @@ $color-fb-gradient: #6077a6;
 $color-vk: #4a76a8;
 $color-vk-gradient: #0f65c6;
 
-$color-tg: #61A8DE;
-$color-tg-gradient:#408AC2;
+$color-tg: #61a8de;
+$color-tg-gradient: #408ac2;
+
+$color-max: #7147ee;
+$color-max-gradient: #7147ee;
 
 $color-skype: #00aff0;
-$color-skype-gradient:#00d0e7;
+$color-skype-gradient: #00d0e7;
 
 $color-viber: #574e92;
-$color-viber-gradient:#655bab;
+$color-viber-gradient: #655bab;
 
-$color-whatsapp: #25D366;
-$color-whatsappb: #25D366;
-$color-whatsapp-gradient:#2fc368;
+$color-whatsapp: #25d366;
+$color-whatsappb: #25d366;
+$color-whatsapp-gradient: #2fc368;
 
 @mixin shadow-on-hover() {
   transition: box-shadow 0.4s;
@@ -29,7 +32,7 @@ $color-whatsapp-gradient:#2fc368;
   transition: box-shadow 0.4s;
 
   &:hover {
-    box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
+    box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -44,7 +47,11 @@ $color-whatsapp-gradient:#2fc368;
 }
 
 @mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
-  background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
+  background: linear-gradient(
+    309.02deg,
+    $color -6.45%,
+    $color-gradient 111.08%
+  );
 }
 
 tb-notification-widget {
@@ -78,7 +85,8 @@ tb-notification-widget {
 
   /* new design */
 
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-square {
     /* inline & popup */
     tb-notification-button {
       display: block;
@@ -88,8 +96,6 @@ tb-notification-widget {
       background-color: transparent;
       height: 30px;
 
-
-
       &[channel="skype"] {
         @include set-channel-button-brand-color($color-skype);
       }
@@ -106,7 +112,8 @@ tb-notification-widget {
         }
       }
 
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+      &[authorized="true"] tb-notification-button__text[for="login"],
+      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
         display: none;
       }
 
@@ -121,6 +128,12 @@ tb-notification-widget {
         @include set-channel-button-brand-color($color-tg);
       }
 
+      &[channel="max"] {
+        .tb-notification-button__inner > a {
+          background-color: $color-max;
+        }
+      }
+
       &[channel="whatsapp"] {
         .tb-notification-button__inner > a {
           background-color: $color-whatsapp;
@@ -152,8 +165,6 @@ tb-notification-widget {
         }
       }
 
-
-
       .tb-notification-button__inner {
         position: relative;
         display: inline-block;
@@ -171,7 +182,7 @@ tb-notification-widget {
           color: #fff;
           position: relative;
           font-size: 12px;
-          font-family: Arial,Helvetica,sans-serif;
+          font-family: Arial, Helvetica, sans-serif;
           padding: 0px;
           line-height: 29px;
           height: 30px;
@@ -201,14 +212,13 @@ tb-notification-widget {
             height: 100%;
           }
         }
-
       }
     }
   }
 
   /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
-
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-rounded {
     /* inline */
     tb-notification-button {
       @include shadow-on-hover();
@@ -217,7 +227,7 @@ tb-notification-widget {
       padding: 10px 20px;
       border-radius: 25px;
       cursor: pointer;
-      background-color: #2979FF;
+      background-color: #2979ff;
       color: #fff;
       display: inline-block;
       margin: 0 13px 45px 0;
@@ -232,7 +242,8 @@ tb-notification-widget {
       &[channel="vk"] {
         background-color: $color-vk;
       }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+      &[authorized="true"] tb-notification-button__text[for="login"],
+      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
         display: none;
       }
       &[channel="viber"] {
@@ -241,6 +252,9 @@ tb-notification-widget {
       &[channel="tg"] {
         background-color: $color-tg;
       }
+      &[channel="max"] {
+        background-color: $color-max;
+      }
       &[channel="whatsapp"] {
         background-color: $color-whatsapp;
       }
@@ -307,12 +321,17 @@ tb-notification-widget {
     }
   }
 
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
+  &.tb-no-api-call
+    #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-rounded
+    tb-notification-button {
     margin-bottom: 13px;
   }
 
   /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    tb-notification-widget-overlay
+    .tb-widget-buttons.tb-btn-style-rounded {
     tb-notification-button {
       display: inline-block;
       width: 120px;
@@ -347,8 +366,8 @@ tb-notification-widget {
   }
 
   /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
-
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-gradient {
     /* inline */
     tb-notification-button {
       @include shadow-on-hover-gradient();
@@ -357,36 +376,64 @@ tb-notification-widget {
       padding: 21px 36px;
       border-radius: 5px;
       cursor: pointer;
-      background-color: #2979FF;
+      background-color: #2979ff;
       color: #fff;
       display: inline-block;
       margin: 0 13px 45px 0;
       position: relative;
 
       &[channel="skype"] {
-        @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-skype,
+          $color-skype-gradient
+        );
       }
       &[channel="facebook"] {
-        @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-fb,
+          $color-fb-gradient
+        );
       }
       &[channel="vk"] {
-        @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-vk,
+          $color-vk-gradient
+        );
         padding: 19px 36px;
       }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
+      &[authorized="true"] tb-notification-button__text[for="login"],
+      &[authorized="false"] tb-notification-button__text[for="subscribe"] {
         display: none;
       }
       &[channel="viber"] {
-        @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-viber,
+          $color-viber-gradient
+        );
       }
       &[channel="tg"] {
-        @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-tg,
+          $color-tg-gradient
+        );
+      }
+      &[channel="max"] {
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-max,
+          $color-max-gradient
+        );
       }
       &[channel="whatsapp"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-whatsapp,
+          $color-whatsapp-gradient
+        );
       }
       &[channel="whatsappb"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
+        @include set-channel-button-brand-linear-gradient-color(
+          $color-whatsappb,
+          $color-whatsapp-gradient
+        );
       }
       &[loading] {
         color: transparent;
@@ -455,12 +502,17 @@ tb-notification-widget {
     }
   }
 
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
+  &.tb-no-api-call
+    #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-gradient
+    tb-notification-button {
     margin-bottom: 13px;
   }
 
   /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    tb-notification-widget-overlay
+    .tb-widget-buttons.tb-btn-style-gradient {
     tb-notification-button {
       display: inline-block;
       width: 120px;
@@ -494,10 +546,9 @@ tb-notification-widget {
     }
   }
 
-
   /* circle icons design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
-
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-icons {
     /* inline */
     tb-notification-button {
       display: inline-block;
@@ -543,7 +594,8 @@ tb-notification-widget {
         }
       }
 
-      &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
+      &[channel="whatsappb"] tb-notification-button__icon,
+      &[channel="whatsapp"] tb-notification-button__icon {
         background: $color-whatsapp;
       }
 
@@ -555,6 +607,10 @@ tb-notification-widget {
         background: $color-tg;
       }
 
+      &[channel="max"] tb-notification-button__icon {
+        background: $color-max;
+      }
+
       &[channel="facebook"] tb-notification-button__icon {
         background: $color-fb;
       }
@@ -571,9 +627,9 @@ tb-notification-widget {
       width: 50px;
       height: 50px;
       margin: 0 auto;
-      transition: all .3s ease;
+      transition: all 0.3s ease;
       border-radius: 50%;
-      box-shadow: 0 6px 12px rgba(0,0,0,.25);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
       > svg {
         width: 100%;
         height: 100%;
@@ -596,62 +652,66 @@ tb-notification-widget {
         -ms-transform: scale(1.3);
         transform: scale(1.3);
       }
-     }
     }
   }
+}
 
-  /*styles for non mobile*/
-  @media only screen and (min-device-width: 736px) {
-
-    /* new design */
+/*styles for non mobile*/
+@media only screen and (min-device-width: 736px) {
+  /* new design */
 
-    #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
-      tb-notification-button {
-        .tb-notification-button__inner {
-          padding-left: 55px;
-          width: 239px;
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    .tb-widget-buttons.tb-btn-style-square {
+    tb-notification-button {
+      .tb-notification-button__inner {
+        padding-left: 55px;
+        width: 239px;
 
-          tb-notification-button__icon {
-            top: -5px;
-            left: 0px;
-            width: 40px;
-            height: 40px;
-          }
+        tb-notification-button__icon {
+          top: -5px;
+          left: 0px;
+          width: 40px;
+          height: 40px;
         }
       }
     }
+  }
 
-    /* old design*/
+  /* old design*/
 
-    #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
-      tb-notification-button {
-        margin: 0px 19px 24px 0px;
-        width: 206px;
-        height: 50px;
+  #tb-notification-widget-inner.tb-notification-widget-inner
+    tb-notification-widget-overlay
+    .tb-widget-buttons.tb-btn-style-rounded {
+    tb-notification-button {
+      margin: 0px 19px 24px 0px;
+      width: 206px;
+      height: 50px;
 
-        > a {
-          padding: 10px 20px;
-          font-size: 20px;
-        }
+      > a {
+        padding: 10px 20px;
+        font-size: 20px;
       }
+    }
 
-      tb-notification-button__icon {
-        width: 40px;
-        height: 40px;
-        left: 15px;
-        top: 5px;
-      }
+    tb-notification-button__icon {
+      width: 40px;
+      height: 40px;
+      left: 15px;
+      top: 5px;
+    }
 
-      tb-notification-button__text {
-        width: 100px;
-        line-height: 30px;
-      }
+    tb-notification-button__text {
+      width: 100px;
+      line-height: 30px;
     }
   }
+}
 
-  // Dirty crutch. There is no other way now *'(
-  tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
-    tb-notification-button {
-      margin-bottom: 0 !important;
-    }
+// Dirty crutch. There is no other way now *'(
+tb-notification-widget-popup.tb-popup-with-image
+  .tb-widget-buttons
+  > div:last-child {
+  tb-notification-button {
+    margin-bottom: 0 !important;
   }
+}

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

@@ -33,7 +33,8 @@ const channelButtons = {
   facebook: require('../tb-notification-button/facebook'),
   viber: require('../tb-notification-button/viber'),
   whatsapp: require('../tb-notification-button/whatsapp'),
-  whatsappb: require('../tb-notification-button/whatsappb')
+  whatsappb: require('../tb-notification-button/whatsappb'),
+  max: require('../tb-notification-button/max')
 };
 
 const DEFAULT_BUTTONS_MARKUP = {

package/src/widget/icons/icon_max.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1646_11767)">
+        <path
+            d="M16.5057 3H7.49426C5.01215 3 3 5.01215 3 7.49426V16.5057C3 18.9879 5.01215 21 7.49426 21H16.5057C18.9879 21 21 18.9879 21 16.5057V7.49426C21 5.01215 18.9879 3 16.5057 3Z"
+            fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M12.1478 18.8099C10.7976 18.8099 10.1702 18.6128 9.07961 17.8244C8.38976 18.7114 6.20527 19.4045 6.10999 18.2186C6.10999 17.3284 5.91289 16.5761 5.68951 15.7549C5.42344 14.7431 5.12122 13.6164 5.12122 11.9837C5.12122 8.08448 8.32079 5.151 12.1116 5.151C15.9058 5.151 18.8787 8.22902 18.8787 12.0199C18.8914 15.7521 15.88 18.79 12.1478 18.8099ZM12.2036 8.52137C10.3575 8.42612 8.91864 9.70397 8.6 11.7078C8.3372 13.3667 8.80367 15.387 9.20115 15.4921C9.39168 15.5381 9.87129 15.1505 10.1702 14.8515C10.6645 15.193 11.2401 15.3981 11.839 15.4461C13.7519 15.5381 15.3864 14.0818 15.5149 12.171C15.5896 10.2561 14.1168 8.63425 12.2036 8.52467V8.52137Z"
+            fill="#7147EE" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1646_11767">
+            <rect width="18" height="18" fill="white" transform="translate(3 3)" />
+        </clipPath>
+    </defs>
+</svg>
+    

package/src/widget/icons/icon_max_circle.svg

@@ -0,0 +1,16 @@
+<svg width="50" height="48" viewBox="0 0 50 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1650_11775)">
+        <path
+            d="M32.5096 9H17.4904C13.3536 9 10 12.3536 10 16.4904V31.5096C10 35.6464 13.3536 39 17.4904 39H32.5096C36.6464 39 40 35.6464 40 31.5096V16.4904C40 12.3536 36.6464 9 32.5096 9Z"
+            fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M25.2463 35.3498C22.9961 35.3498 21.9504 35.0213 20.1327 33.7073C18.983 35.1856 15.3422 36.3408 15.1834 34.3643C15.1834 32.8807 14.8549 31.6269 14.4826 30.2581C14.0391 28.5718 13.5354 26.6939 13.5354 23.9729C13.5354 17.4741 18.868 12.585 25.1861 12.585C31.5097 12.585 36.4645 17.715 36.4645 24.0331C36.4857 30.2535 31.4667 35.3167 25.2463 35.3498ZM25.3394 18.2023C22.2625 18.0435 19.8644 20.1733 19.3334 23.513C18.8954 26.2779 19.6728 29.6449 20.3353 29.8201C20.6528 29.8968 21.4522 29.2507 21.9504 28.7525C22.7742 29.3217 23.7336 29.6635 24.7317 29.7435C27.9199 29.8969 30.6441 27.4697 30.8581 24.285C30.9828 21.0935 28.528 18.3904 25.3394 18.2078V18.2023Z"
+            fill="#7147EE" />
+    </g>
+    <defs>
+        <clipPath id="clip0_1650_11775">
+            <rect width="30" height="30" fill="white" transform="translate(10 9)" />
+        </clipPath>
+    </defs>
+</svg>
+    

package/src/widget/locales/cs.js

@@ -16,6 +16,8 @@ module.exports = {
     whatsappExtended: "Přihlásit se k WhatsApp",
     whatsappb: "WhatsApp",
     whatsappbExtended: "Přihlásit se k WhatsApp",
+    max: "Max",
+    maxExtended: "Přihlásit se k Max",
 
     vkontakteLogin: "VK Login",
     singVK: "Poslat přes VK",

package/src/widget/locales/en.js

@@ -13,6 +13,8 @@
     whatsappExtended: "Subscribe to WhatsApp", //если выбран вариант показа "Прямоугольные кнопки" или "Всплывающее окно"
     whatsappb: "WhatsApp", //для всех кнопок, кроме варианта показа "Прямоугольные кнопки" или "Всплывающее окно"
     whatsappbExtended: "Subscribe to WhatsApp", //если выбран вариант показа "Прямоугольные кнопки" или "Всплывающее окно"
+    max: "Max",
+    maxExtended: "Subscribe to Max",
 
     //NB: если не использовать лендинг ВК, то при выборе прямоугольных кнопок или попапа используется нативная кнопка, перевод которой пока не реализован
 

package/src/widget/locales/pl.js

@@ -15,7 +15,8 @@ module.exports = {
     whatsappExtended: "Subskrybuj WhatsApp",
     whatsappb: "WhatsApp",
     whatsappbExtended: "Subskrybuj WhatsApp",
-
+    max: "Max",
+    maxExtended: "Subskrybuj Max",
 
     vkontakteLogin: "VK Login",
     singVK: "Zapisz się VK",

package/src/widget/locales/ro.js

@@ -15,6 +15,8 @@ module.exports = {
     whatsappExtended: "Abonați-vă la WhatsApp",
     whatsappb: "WhatsApp",
     whatsappbExtended: "Abonați-vă la WhatsApp",
+    max: "Max",
+    maxExtended: "Abonați-vă la Max",
 
     vkontakteLogin: "VK Login",
     singVK: "Abonează-te VK",

package/src/widget/locales/ru.js

@@ -1,5 +1,4 @@
 module.exports = {
-
   //пояснения к переводу смотри в en.js
 
   //виджет подписок
@@ -15,6 +14,8 @@ module.exports = {
   whatsappExtended: "Подписаться в WhatsApp",
   whatsappb: "WhatsApp",
   whatsappbExtended: "Подписаться в WhatsApp",
+  max: 'Max',
+  maxExtended: 'Подписаться в Max',
 
   vkontakteLogin: "VK Login",
   singVK: "Подписаться ВКонтакте",
@@ -22,9 +23,11 @@ module.exports = {
   //double check в рассылке
   telegramTip: "Нажмите <strong>Запустить</strong></br>в приложении Telegram",
   facebookTip: "Нажмите <strong>Начать</strong><br/>в Messenger",
-  viberTip: "У вас должно быть установлено<br/><strong>Viber Desktop приложение</strong>",
+  viberTip:
+    "У вас должно быть установлено<br/><strong>Viber Desktop приложение</strong>",
   vkontakteTip: "Нажмите <strong>Разрешить</strong><br/>во всплывающем окне",
-  whatsappTip: "Отправьте <strong>предзаполненный текст</strong><br/>в WhatsApp без изменений",
+  whatsappTip:
+    "Отправьте <strong>предзаполненный текст</strong><br/>в WhatsApp без изменений",
 
   //WhatsApp Hunter
   getAnswer: "Получить ответ в ",

package/src/widget/locales/uk.js

@@ -15,6 +15,8 @@ module.exports = {
     whatsappExtended: "Підписатися в WhatsApp",
     whatsappb: "WhatsApp",
     whatsappbExtended: "Підписатися в WhatsApp",
+    max: "Max",
+    maxExtended: "Підписатися в Max",
 
     vkontakteLogin: "VK Login",
     singVK: "Підписатися на VK",

package/test.html

@@ -1,9 +1,9 @@
 <html>
   <body>
-    <script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/index.js"></script>
+    <script src="//localhost:8083/build/index.js"></script>
     <tb-notification-widget
-      widget-id="f21b0356-2450-e165-c357-0199e26e4030"
-      secure-context-token="00e1ca7f-6fe2-4edd-bab3-b53747c3cd1b"
+      api-path="https://api.qa-1.textback.io/api"
+      widget-id="64496244-eeb6-5993-017f-019c94f5feec"
     >
     </tb-notification-widget>
   </body>