@textback/notification-widget 2.0.3 → 2.0.4-110501

package/release/builds/textback/notificationwidget/src/widget/components/tb-nw-wahunter/index.js

@@ -1,259 +0,0 @@
-import Component from '../index.js';
-import arrowIcon from '../../icons/paper-plane-arrow.svg';
-import waIcon from '../../icons/icon_whatsapp_new.svg';
-import iconTbLogo from '../../icons/tb-logo.svg';
-
-import './styles.scss';
-
-const parsePhoneNumber = (phoneString) => phoneString.replace(/[^\d]/g, '');
-
-export default class Wahunter extends Component {
-  constructor() {
-    super(...arguments);
-  }
-
-
-  render() {
-    this.lang = this.widgetAPI.config.lang || this.parentElement.getAttribute('lang');
-
-    super.render();
-    this.submitFormElem = this.element.querySelector(`.${Wahunter.tagName}__submit-form`);
-    this.addListeners();
-  }
-
-  addListeners() {
-    this.submitFormElem.addEventListener('submit', (e) => {
-      e.preventDefault();
-      this.submit();
-    });
-
-    this.submitFormElem.phoneNumber.addEventListener('input', (e) => {
-      const target = e.target;
-      let selectionPos = target.selectionStart;
-      let newValue = parsePhoneNumber(target.value);
-
-      if (['7', '8'].includes(newValue[0]) || newValue.slice(0, 2) === '+7') {
-        newValue = newValue.slice(0, 11);
-        newValue = (newValue + '_'.repeat(11 - newValue.length)).replace(/(.{1})(.{3})(.{3})(.{2})(.{2})/, "+7 ($2) $3-$4-$5");
-
-        const indexOfFirstUnderscore = newValue.indexOf('_');
-        const indexOfLastNumber = newValue.lastIndexOf(newValue.match(/\d/g).pop());
-
-        if (target.value[selectionPos] === "_") {
-          selectionPos = indexOfLastNumber + 1;
-        } else {
-          selectionPos = indexOfFirstUnderscore;
-        }
-
-        target.value = newValue;
-        return target.setSelectionRange(selectionPos, selectionPos);
-      }
-
-      if (target.value[0] === '+') {
-        newValue = `+${newValue}`;
-      }
-
-      target.value = newValue;
-    });
-
-    this.submitFormElem.tryAgain.addEventListener('click', (e) => {
-      if (this.widgetAPI.config.displayMode !== 'inline') {
-        this.element.querySelector(`.${Wahunter.tagName}__text-content`).style = null;
-      }
-
-      this.changeSubmitFormState('initial');
-    });
-  }
-
-  getTbBrandBadge({ displayMode }) {
-    const utmMedium = 'hunter';
-    return `
-      <a target="_blank"
-         href="//textback.ru/?utm_source=TextBack_tool&utm_medium=${utmMedium}&utm_campaign=${window.location.origin}${window.location.pathname}&utm_content=${displayMode}"
-
-         id="tb-notification-brand-badge"
-         style="${displayMode === 'inline' ? 'fill:inherit; color: inherit;' : ''}"
-      >
-        ${this.text('worksFor')} ${iconTbLogo}
-      </a>
-    `;
-  }
-
-
-  submit() {
-    const phoneNumber = +parsePhoneNumber(this.submitFormElem.phoneNumber.value);
-
-    if (this.widgetAPI.config.displayMode !== 'inline') {
-      this.element.querySelector(`.${Wahunter.tagName}__text-content`).style.display = 'none';
-    }
-
-    this.changeSubmitFormState('pending');
-
-    setTimeout(() => {
-      this.widgetAPI.runWahunter(phoneNumber)
-        .then(() => this.changeSubmitFormState('success'))
-        .catch((error) => {
-          if (error.status === 400) return this.changeSubmitFormState('notFound');
-
-          this.changeSubmitFormState('error');
-        });
-    }, 1500);
-  }
-
-
-  changeSubmitFormState(stateName) {
-    const submitFormElem = this.submitFormElem;
-    let messageText = '';
-    let tryAgainText = '';
-    let emoji = '';
-
-    switch (stateName) {
-      case 'pending': {
-        submitFormElem.dataset.state = 'pending';
-        messageText = this.text('sendMessage');
-        emoji = '⏳';
-        break;
-      }
-      case 'success': {
-        submitFormElem.dataset.state = 'success';
-        messageText = this.text('answerSuccessful');
-        emoji = '👍';
-        break;
-      }
-      case 'notFound': {
-        submitFormElem.dataset.state = 'notFound';
-        messageText = this.text('numberNotFound');
-        emoji = '🕵️‍♂️';
-        tryAgainText = this.text('tryAgain');
-        break;
-      }
-      case 'error': {
-        submitFormElem.dataset.state = 'error';
-        messageText = this.text('somethingWentWrong');
-        emoji = '👨‍🔧';
-        tryAgainText = this.text('errorTryAgain');
-        break;
-      }
-      default: {
-        submitFormElem.dataset.state = 'initial';
-        break;
-      }
-    }
-
-    submitFormElem.querySelector(`.${Wahunter.tagName}__state-report-emoji`).textContent = emoji;
-    submitFormElem.querySelector(`.${Wahunter.tagName}__state-report-message`).innerHTML = messageText;
-    submitFormElem.tryAgain.textContent = tryAgainText;
-  }
-
-
-  get template() {
-    const {
-      displayMode,
-      markUp: {
-        image,
-        header,
-        description,
-      },
-    } = this.widgetAPI.config;
-
-    if (displayMode === 'inline') return this.submitFormTemplate;
-
-    if (displayMode === 'popup') {
-      return `
-        <div class="${Wahunter.tagName}__top-img" style="background-image: url(${image.url})"></div>
-
-        <div class="${Wahunter.tagName}__img">
-          <img src="${image.url}">
-        </div>
-
-        <div class="${Wahunter.tagName}__main-content">
-          <div class="${Wahunter.tagName}__text-content">
-            <div class="${Wahunter.tagName}__headline" style="color:${header.color}">
-              ${header.value}
-            </div>
-            <div class="${Wahunter.tagName}__description" style="color:${description.color}">
-              ${description.value}
-            </div>
-          </div>
-
-          ${this.submitFormTemplate}
-        </div>
-      `;
-    }
-
-    if (displayMode === 'corner-popup') {
-      return `
-        <div class="${Wahunter.tagName}__text-content">
-          <div class="${Wahunter.tagName}__headline" style="color:${header.color}">
-            ${header.value}
-          </div>
-        </div>
-        ${this.submitFormTemplate}
-      `
-    }
-  }
-
-
-  get submitFormTemplate() {
-    let {
-      displayMode,
-      showWahunterAgreement,
-      markUp: {
-        wahunterButton,
-        header,
-      },
-    } = this.widgetAPI.config;
-
-
-    const landingPlacesUrls = [
-      'lp.textback.ru',
-      'lp.textback.io',
-      'lp-dev.textback.ru',
-      'tb-opsrv-dev.textback.io/messaging.html#!/mini-landings',
-      'my.textback.io/messaging.html#!/mini-landings',
-      'landings.textback.io',
-    ];
-
-    const isTBMiniLanding = landingPlacesUrls.some((url) => location.href.includes(url));
-
-    return `
-      <form class="${Wahunter.tagName}__submit-form" data-state="initial">
-        <div class="${Wahunter.tagName}__submit-form-controls">
-          <div class="${Wahunter.tagName}__phone-input-container">
-            <input type="text" class="${Wahunter.tagName}__phone-input" name="phoneNumber" placeholder="${this.text('enterNumber')}" required>
-
-            <button class="${Wahunter.tagName}__submit-button" style="color:${wahunterButton.textColor};background-color:${wahunterButton.color}">
-              ${wahunterButton.text}
-              <div class="${Wahunter.tagName}__submit-button-icon">
-                ${arrowIcon}
-              </div>
-            </button>
-          </div>
-
-          <div class="${Wahunter.tagName}__submit-form-footer" style="${showWahunterAgreement ? '' : 'display:none'}">
-            <label class="${Wahunter.tagName}__agreement">
-              <input type="checkbox" required checked>
-              <span class="${Wahunter.tagName}__agreement-text">${this.text('getAnswer')}<span class="${Wahunter.tagName}__agreement-wa-icon">${waIcon}</span>WhatsApp</span>
-            </label>
-          </div>
-        </div>
-
-        <div class="${Wahunter.tagName}__state-report">
-          <div class="${Wahunter.tagName}__state-report-emoji"></div>
-
-          <div class="${Wahunter.tagName}__state-report-message-container"
-               style="${displayMode === 'inline' ? ('color:' + header.color + ';' + 'fill:' + header.color) : ''}">
-            <div class="${Wahunter.tagName}__state-report-message"></div>
-            <button class="${Wahunter.tagName}__try-again-button" type="button" name="tryAgain"></button>
-            ${displayMode === 'inline' && !isTBMiniLanding ? this.getTbBrandBadge(this.widgetAPI.config) : ''}
-          </div>
-        </div>
-      </form>
-    `
-  }
-
-
-  static get tagName() {
-    return 'tb-nw-wahunter';
-  }
-};

package/release/builds/textback/notificationwidget/src/widget/components/tb-nw-wahunter/styles.scss

@@ -1,471 +0,0 @@
-$base-class-name: tb-nw-wahunter;
-$font-family: 'Montserrat',
-'Open Sans',
-'Droid Sans',
-Arial,
-sans-serif;
-
-$color-green: #25D366;
-$color-light-gray: #F2F2F2;
-$color-dark-gray: darken($color-light-gray, 5%);
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner tb-nw-wahunter {
-  font-size: 12px;
-  font-family: $font-family;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  // TODO: Move reset to level of entire widget. Now I’m not sure that this will not break anything in normal notif widget
-  a,
-  label,
-  button,
-  input {
-    margin: 0;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    outline: none;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background: transparent;
-  }
-
-  button,
-  label {
-    cursor: pointer;
-  }
-}
-
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner .tb-nw-wahunter {
-
-  /**** All modes ****/
-  &__headline {
-    font-weight: 600;
-    line-height: 1.3;
-  }
-
-  &__text-content {
-    margin-bottom: 1.4em;
-  }
-
-
-
-  /**** Popup mode only ****/
-  &__top-img {
-    padding: 20% 0;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    border-radius: 4px 4px 0px 0px;
-  }
-
-  &__img {
-    display: none;
-    align-items: center;
-    width: 280px;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &__main-content {
-    padding: 1.4em 10%;
-    padding-bottom: 4em;
-  }
-
-  &__description {
-    font-size: 1.3em;
-    line-height: 1.5;
-  }
-
-  &_without-image {
-
-    .#{$base-class-name}__top-img,
-    .#{$base-class-name}__img {
-      display: none;
-    }
-
-    .#{$base-class-name}__main-content {
-      padding-top: 3em;
-    }
-  }
-
-  &_mode_popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.9em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Inline mode only ****/
-  &_mode_inline {
-    display: flex;
-
-    .#{$base-class-name}__submit-form {
-      margin: 0;
-    }
-
-    #tb-notification-brand-badge {
-      display: none;
-      font-size: 9px;
-      margin-top: 1.2em;
-    }
-  }
-
-  &_inline-mode-align_left {
-    justify-content: flex-start;
-  }
-
-  &_inline-mode-align_right {
-    justify-content: flex-end;
-  }
-
-  &_inline-mode-align_center {
-    justify-content: center;
-  }
-
-
-
-  /**** Corner-popup mode only ****/
-  &_mode_corner-popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.7em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Submit-form ****/
-  &__submit-form {
-    padding: 0;
-    width: 100%;
-    max-width: 100%;
-    margin: auto;
-  }
-
-  &__phone-input,
-  &__submit-button {
-    height: 44px;
-    width: 100%;
-    border-radius: 22px;
-    padding: 0 40px !important;
-  }
-
-  &__phone-input {
-    font-size: 14px;
-    margin-bottom: 12px;
-    background: #F2F2F2;
-    border: 1px solid $color-dark-gray;
-    letter-spacing: 1px;
-    color: #333;
-
-    &:invalid {
-      letter-spacing: 0px;
-    }
-  }
-
-  &__submit-button {
-    position: relative;
-    background: $color-green;
-    color: #fff;
-    font-size: 9px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    transition: background ease 0.25s;
-  }
-
-  &__submit-button-icon {
-    position: absolute;
-    right: 13px;
-    top: 0;
-    height: 100%;
-    width: 20px;
-
-    svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-
-  &__submit-form-footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 5px;
-    font-size: 12px;
-    margin-top: 10px;
-  }
-
-  &__agreement {
-    display: flex;
-    align-items: center;
-  }
-
-  &__agreement input[type="checkbox"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    position: relative;
-    height: 14px;
-    width: 14px;
-    border: 1px solid rgb(207, 207, 207);
-    border-radius: 4px;
-    outline: none;
-    cursor: pointer;
-
-    &:checked {
-      background: $color-green;
-      border: none;
-    }
-
-    &:checked::before {
-      content: '\2714';
-      display: block;
-      text-align: center;
-      color: #fff;
-      position: absolute;
-      left: 3.5px;
-      top: 2px;
-      font-size: 9px;
-    }
-  }
-
-  &__agreement-text {
-    margin-left: 5px;
-  }
-
-  &__agreement-wa-icon {
-    display: inline-block;
-    position: relative;
-    width: 18px;
-    height: 14px;
-    vertical-align: middle;
-
-    svg {
-      position: absolute;
-      top: -7px;
-      left: -3px;
-      width: 25px;
-    }
-  }
-
-  &__state-report {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    line-height: 1.5;
-  }
-
-  &__state-report-emoji {
-    font-size: 40px;
-    margin-bottom: 10px;
-  }
-
-  &__state-report-message-container {
-    text-align: center;
-  }
-
-  &__state-report-message {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  &__try-again-button {
-    display: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 20px;
-    font-size: 16px;
-  }
-
-  &__try-again-button {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-
-
-
-  /**** Submit-form state management ****/
-  &__submit-form:not([data-state="initial"]) {
-    .#{$base-class-name}__submit-form-controls {
-      display: none;
-    }
-
-    .#{$base-class-name}__state-report {
-      display: flex;
-    }
-  }
-
-  &__submit-form[data-state="success"] {
-    #tb-notification-brand-badge {
-      display: inline-flex;
-    }
-  }
-
-  &__submit-form[data-state="error"],
-  &__submit-form[data-state="notFound"] {
-
-    .#{$base-class-name}__state-report-message {
-      font-weight: normal;
-    }
-
-    .#{$base-class-name}__try-again-button {
-      display: inline-block;
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 481px) {
-    font-size: 13px;
-
-    &:not(.tb-nw-wahunter_mode_corner-popup) {
-      .#{$base-class-name}__phone-input-container {
-        padding: 5px;
-        background: #F2F2F2;
-        border-radius: 22px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .#{$base-class-name}__phone-input,
-      .#{$base-class-name}__submit-button {
-        height: auto;
-        width: auto;
-        flex-grow: 1;
-      }
-
-      .#{$base-class-name}__phone-input {
-        background: transparent;
-        border-radius: 0;
-        padding-left: 15px !important;
-        padding-right: 10px !important;
-        min-width: 150px;
-        margin: 0;
-        border: none;
-      }
-
-      .#{$base-class-name}__submit-button {
-        padding-top: 15px !important;
-        padding-bottom: 15px !important;
-        min-width: 49%;
-      }
-
-      .#{$base-class-name}__submit-form-footer {
-        margin-top: 6px;
-      }
-    }
-
-    &_mode_popup,
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        width: max-content;
-      }
-    }
-
-    &_mode_popup {
-      .#{$base-class-name}__submit-form {
-        min-width: 370px;
-      }
-    }
-
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 768px) {
-    font-size: 14px;
-
-    &_image-align_right,
-    &_image-align_left {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      text-align: left;
-      padding: 7em 2.5em;
-
-      .#{$base-class-name}__submit-form {
-        min-width: unset;
-        width: 100%;
-      }
-
-      .#{$base-class-name}__top-img {
-        display: none;
-      }
-
-      .#{$base-class-name}__img {
-        display: flex;
-      }
-
-      .#{$base-class-name}__main-content {
-        padding: 0;
-      }
-
-      .#{$base-class-name}__state-report {
-        flex-direction: row;
-      }
-
-      .#{$base-class-name}__state-report-message-container {
-        text-align: left;
-      }
-
-      .#{$base-class-name}__state-report-emoji {
-        margin-bottom: 0;
-        margin-right: 10px;
-      }
-
-      .#{$base-class-name}__submit-form[data-state="notFound"],
-      .#{$base-class-name}__submit-form[data-state="error"] {
-        .#{$base-class-name}__state-report {
-          align-items: flex-start;
-        }
-      }
-    }
-
-    &_image-align_top,
-    &_without-image {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-
-    &_image-align_top {
-      .#{$base-class-name}__main-content {
-        padding-bottom: 6em;
-      }
-    }
-
-    &_image-align_right {
-      .#{$base-class-name}__img {
-        margin-left: 3em;
-        order: 1;
-      }
-    }
-
-    &_image-align_left {
-      .#{$base-class-name}__img {
-        margin-right: 3em;
-      }
-    }
-  }
-}