chat-wdgt.js

var onemgConsultationWidget = {  // eslint-disable-line no-unused-vars
  init: function (parameters) {
    function isMobile() {
      try {
        if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
          return true;
        };
        return false;
      } catch(e) { return false; }
    }
    if(isMobile()) {
      return false;
    }
    var params = parameters || {};
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
    @-webkit-keyframes animateChatWidgetUp {
      0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0%);
        opacity: 1;        
      }
    }
    @-moz-keyframes animateChatWidgetUp {
      0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0%);
        opacity: 1;        
      }
    }
    @-webkit-keyframes animateChatWidgetDown {
      0% {
        -webkit-transform: translateY(0%);
        opacity: 1;        
      }
      100% {
        -webkit-transform: translateY(100%);
        opacity: 0;
      }
    }
    @-moz-keyframes animateChatWidgetDown {
      0% {
        -webkit-transform: translateY(0%);
        opacity: 1;        
      }
      100% {
        -webkit-transform: translateY(100%);
        opacity: 0;
      }
    }
    @-webkit-keyframes animateSpecialityDown {
      0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;        
      }
      100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
      }
    }
    @-moz-keyframes animateSpecialityDown {
      0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;        
      }
      100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
      }
    }
    .bringSpecialityIntoView{
      animation: animateSpecialityDown 0.3s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
    .showChatWidget{
      animation: animateChatWidgetUp 0.3s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      border-radius: 10px;
    }
    .hideChatWidget{
      animation: animateChatWidgetDown 0.3s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      border-radius: 10px;
    }`;
    document.getElementsByTagName('head')[0].appendChild(style);

    function initWidget() {

      var timer = null;
      var specialityDiv = document.createElement('div');
      specialityDiv.classList.toggle('bringSpecialityIntoView');
      Object.assign(specialityDiv.style, {
        display: 'inline-block',
      });
      setSpecialityAnimations(specialityDiv);

      function getButtonImage() {
        return '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19">\
            <g fill="none" fill-rule="evenodd" stroke="#184A68" stroke-linecap="round" stroke-linejoin="round">\
                <path d="M1 1l4.993 7.727H18zM1 18l4.993-7.727H18z"/>\
            </g>\
        </svg>'
      }

      function getCollapseButton() {
        return '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">\
            <g fill="none" fill-rule="evenodd">\
                <path d="M-3-6h20v20H-3z"/>\
                <path fill="#FFF" d="M2.1 7.7L.7 6.3l6-6 6 6-1.4 1.4-4.6-4.6z"/>\
            </g>\
        </svg>';
      }

      function toggleWidget() {
        var utm_source = 'na';
        if (window.location.href.indexOf('/categories/')) {
            utm_source = 'categorypage';
        } else if (window.location.href.indexOf('/otc/')) {
            utm_source = 'otcpage';
        } else if (window.location.href.indexOf('/drugs/')) {
            utm_source = 'drugpage';
        }
        var redirect_url = '/online-doctor-consultation/chat';
        if(isMobile()) {
            redirect_url = '/online-doctor-consultation/mobilechat/new';
        }
        redirect_url += '?utm_source=' + utm_source + '&utm_medium=startconsultcta&utm_campaign=doctorsgrowth';
        window.location.href = redirect_url;
//        iframeWrapper.classList.toggle('showChatWidget');
//        iframeWrapper.classList.toggle('hideChatWidget');
//        ctaDiv.classList.toggle('showChatWidget');
//        ctaDiv.classList.toggle('hideChatWidget');
//        if(iframeWrapper.hidden) {
//          iframeWrapper.hidden = false;
//          destroyTimer();
//        } else {
//          setSpecialityAnimations(specialityDiv);
//          setTimeout(() => {
//            iframeWrapper.hidden = true;
//          }, 300);
//        }
      }

      function setSpecialityAnimations(element) {
        var current = 1;
        var specialities = [
          'Dermatologist',
          'General Physician',
          'Sexologist',
          'Gynaecologist',
          'Pathologist',
        ];
        var length = specialities.length;
        element.innerHTML = specialities[0];
        if(timer) {
          clearInterval(timer);
        }
        timer = setInterval(function () {
          element.classList.add('hideChatWidget');
          element.classList.remove('bringSpecialityIntoView');
          current = current === (length - 1) ? 0 : current + 1;
          setTimeout(() => {
            element.innerHTML = specialities[current];
            element.classList.remove('hideChatWidget');
            element.classList.add('bringSpecialityIntoView');
          }, 300);
        }, 2500);
      }

      function destroyTimer() {
        if(timer) {
          clearInterval(timer);
        }
      }

      var body = document.getElementsByTagName('body')[0];

      var wrapperDiv = document.createElement('div');
      var divStyle = params.divStyle || {
        zIndex: '10',
        bottom: '0',
        right: '30px',
        position: 'fixed',
        zIndex: '10000',
      };
      Object.assign(wrapperDiv.style, divStyle);
      var iframeWrapper = document.createElement('div');
      iframeWrapper.hidden = true;
      iframeWrapper.style.position = 'relative';
      iframeWrapper.style.backgroundColor = '#ffffff';
      iframeWrapper.classList.toggle('hideChatWidget');

      var iframe = document.createElement('iframe');
      var url = window.location.href;
      var arr = url.split('/');
      var host = arr[0] + '//' + arr[2]
      iframe.src = host + '/chat-widget/online-doctor-consultation/myconsultationWidget';
      iframe.sandbox = 'allow-popups allow-forms allow-pointer-lock allow-scripts allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-downloads-without-user-activation';
      var iframeStyle = {
        minHeight: '204px',
        maxHeight: '700px',
        height: 'calc(100vh - 200px)',
        width: '360px',
        boxShadow: '3px -2px 19px 0 rgba(81, 81, 81, 0.5)',
        borderRadius: '10px',
        border: 'none',
      };
      Object.assign(iframe.style, iframeStyle);

      var ctaDiv = document.createElement('div');
      Object.assign(ctaDiv.style, {
        width: '360px',
        borderRadius: '10px 10px 0 0',
        boxShadow: '3px -2px 19px 0 rgba(81, 81, 81, 0.5)',
        backgroundColor: '#eaeaea',
        overflow: 'hidden',
        position: 'absolute',
        bottom: '0',
        right: '0',
      });
      ctaDiv.classList.toggle('showChatWidget');

      var topButtonDiv = document.createElement('div');
      Object.assign(topButtonDiv.style, {
        backgroundColor: '#194b67',
        padding: '10px 12px',
        color: 'white',
        fontSize: '16px',
        fontWeight: 'bold',
      });
      var loginName = params.loginName ? ',&nbsp;' + params.loginName : '';

      var preSpecialityDiv = document.createElement('span');
      preSpecialityDiv.innerHTML = 'Hey' + loginName + '<br /> Chat for <span style="color:#0bc5d8">FREE</span> with our ';

      var mockInputBoxDiv = document.createElement('div');
      Object.assign(mockInputBoxDiv.style, {
        padding: '15px 18px',
        display: 'flex',
        justifyContent: 'space-between',
      })

      var mockInput = document.createElement('div');
      Object.assign(mockInput.style, {
        width: '270px',
        height: '36px',
        lineHeight: '36px',
        borderRadius: '23.5px',
        boxShadow: '0 0 2px 0 rgba(25, 75, 103, 0.49), 0 3px 4px 0 rgba(168, 168, 168, 0.69)',
        backgroundColor: '#ffffff',
        paddingLeft: '14px',
        cursor: 'text',
        color: '#bdbdbd',
      });
      mockInput.innerHTML = 'eg. I have a sore throat';
      mockInput.onclick = toggleWidget;

      var mockSendBtn = document.createElement('div');
      Object.assign(mockSendBtn.style, {
        borderRadius: '50%',
        height: '37px',
        width: '37px',
        boxShadow: '0 0 2px 0 rgba(25, 75, 103, 0.51), 0 4px 4px 0 rgba(139, 139, 139, 0.57)',
        backgroundColor: '#ffffff',
        lineHeight: '43px',
        textAlign: 'center',
      });
      mockSendBtn.innerHTML = getButtonImage();
      mockSendBtn.onclick = toggleWidget;

      var closeButton = document.createElement('button');
      closeButton.innerHTML = getCollapseButton();
      Object.assign(closeButton.style, {
        position: 'absolute',
        top: '10px',
        right: '10px',
        borderRadius: '50%',
        height: '28px',
        width: '28px',
        textAlign: 'center',
        outline: 'none',
        lineHeight: '5px',
        backgroundColor: 'rgb(25, 75, 103)',
        border: 'none',
        transform: 'rotate(180deg)',
      });
      closeButton.onclick = toggleWidget;

      var ctaWrapperDiv = document.createElement('div');
      Object.assign(ctaWrapperDiv.style, {
        position: 'relative',
      });

      mockInputBoxDiv.appendChild(mockInput);
      mockInputBoxDiv.appendChild(mockSendBtn);

      topButtonDiv.appendChild(preSpecialityDiv);
      topButtonDiv.appendChild(specialityDiv);

      ctaDiv.appendChild(topButtonDiv);
      ctaDiv.appendChild(mockInputBoxDiv);

      iframeWrapper.appendChild(iframe);
      iframeWrapper.appendChild(closeButton);

      ctaWrapperDiv.appendChild(ctaDiv);

      wrapperDiv.appendChild(iframeWrapper);
      wrapperDiv.appendChild(ctaWrapperDiv);

      body.appendChild(wrapperDiv);
    };
    initWidget();
  },
}