@risecx/carespace-chat-ui/es/components/Launcher.js

carespace-chat-ui React component

import _regeneratorRuntime from "@babel/runtime/regenerator";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ChatWindow from './ChatWindow';
import defaultLauncherIcon from './../assets/logo-no-bg.svg';
import incomingMessageSound from './../assets/sounds/notification.mp3';
import launcherIconActive from './../assets/close-icon.png';

var Launcher = /*#__PURE__*/function (_Component) {
  _inheritsLoose(Launcher, _Component);

  function Launcher() {
    var _this;

    _this = _Component.call(this) || this;
    _this.state = {
      isOpen: false
    };
    return _this;
  }

  var _proto = Launcher.prototype;

  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (this.props.mute) {
      return;
    }

    var nextMessage = nextProps.messageList[nextProps.messageList.length - 1];
    var isIncoming = (nextMessage || {}).author === 'them';
    var isNew = nextProps.messageList.length > this.props.messageList.length;

    if (isIncoming && isNew) {
      this.props.onMessageWasReceived(nextMessage);
      this.playIncomingMessageSound();
    }
  };

  _proto.playIncomingMessageSound = /*#__PURE__*/function () {
    var _playIncomingMessageSound = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var audio;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              audio = new Audio(incomingMessageSound);
              audio.preload = 'auto'; // intend to play through

              audio.autoplay = true; // await audio.play();

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    function playIncomingMessageSound() {
      return _playIncomingMessageSound.apply(this, arguments);
    }

    return playIncomingMessageSound;
  }();

  _proto.handleClick = function handleClick() {
    // if(!this.state.isOpen && this.props.messageList.length === 0)
    //   this.props.onPayloadClick({ payload: "GET_STARTED", title: "Get Started" });
    if (this.props.handleClick !== undefined) {
      this.props.handleClick();
    } else {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }
  };

  _proto.render = function render() {
    var isOpen = this.props.hasOwnProperty('isOpen') ? this.props.isOpen : this.state.isOpen;
    var classList = ['sc-launcher', isOpen ? 'opened' : ''];
    var _this$props = this.props,
        launcherIcon = _this$props.launcherIcon,
        messageList = _this$props.messageList,
        onMessageWasSent = _this$props.onMessageWasSent,
        onFilesSelected = _this$props.onFilesSelected,
        agentProfile = _this$props.agentProfile,
        showEmoji = _this$props.showEmoji,
        newMessagesCount = _this$props.newMessagesCount,
        onPayloadClick = _this$props.onPayloadClick,
        clientConfig = _this$props.clientConfig,
        recoveryMessageHistory = _this$props.recoveryMessageHistory,
        onAuth = _this$props.onAuth;
    return /*#__PURE__*/React.createElement("div", {
      id: "sc-launcher"
    }, /*#__PURE__*/React.createElement("div", {
      className: classList.join(' '),
      onClick: this.handleClick.bind(this)
    }, /*#__PURE__*/React.createElement(MessageCount, {
      count: newMessagesCount,
      isOpen: isOpen
    }), /*#__PURE__*/React.createElement("img", {
      className: 'sc-open-icon',
      src: launcherIconActive
    }), /*#__PURE__*/React.createElement("img", {
      className: 'sc-closed-icon',
      src: launcherIcon
    })), /*#__PURE__*/React.createElement(ChatWindow, {
      clientConfig: clientConfig,
      messageList: messageList,
      onUserInputSubmit: onMessageWasSent,
      onFilesSelected: onFilesSelected,
      agentProfile: agentProfile,
      isOpen: isOpen,
      onClose: this.handleClick.bind(this),
      showEmoji: showEmoji,
      onPayload: onPayloadClick,
      recoveryMessageHistory: recoveryMessageHistory,
      onAuth: onAuth
    }));
  };

  return Launcher;
}(Component);

var MessageCount = function MessageCount(props) {
  if (props.count === 0 || props.isOpen === true) {
    return null;
  }

  return /*#__PURE__*/React.createElement("div", {
    className: 'sc-new-messages-count'
  }, props.count);
};

Launcher.propTypes = process.env.NODE_ENV !== "production" ? {
  onMessageWasReceived: PropTypes.func,
  onMessageWasSent: PropTypes.func,
  onPayloadClick: PropTypes.func,
  onAuth: PropTypes.func,
  newMessagesCount: PropTypes.number,
  isOpen: PropTypes.bool,
  handleClick: PropTypes.func,
  messageList: PropTypes.arrayOf(PropTypes.object),
  mute: PropTypes.bool,
  showEmoji: PropTypes.bool,
  launcherIcon: PropTypes.string
} : {};
Launcher.defaultProps = {
  newMessagesCount: 0,
  showEmoji: false,
  launcherIcon: defaultLauncherIcon
};
export default Launcher;