@textback/notification-widget 2.0.0 → 2.0.1-102913

package/src/widget/components/tb-nw-wahunter/index.js

@@ -0,0 +1,259 @@
+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/src/widget/components/tb-nw-wahunter/styles.scss

@@ -0,0 +1,471 @@
+$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;
+      }
+    }
+  }
+}