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

carespace-chat-ui React component

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _ChatWindow = _interopRequireDefault(require("./ChatWindow"));

var _logoNoBg = _interopRequireDefault(require("./../assets/logo-no-bg.svg"));

var _notification = _interopRequireDefault(require("./../assets/sounds/notification.mp3"));

var _closeIcon = _interopRequireDefault(require("./../assets/close-icon.png"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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; }

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__*/_regenerator["default"].mark(function _callee() {
      var audio;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              audio = new Audio(_notification["default"]);
              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["default"].createElement("div", {
      id: "sc-launcher"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: classList.join(' '),
      onClick: this.handleClick.bind(this)
    }, /*#__PURE__*/_react["default"].createElement(MessageCount, {
      count: newMessagesCount,
      isOpen: isOpen
    }), /*#__PURE__*/_react["default"].createElement("img", {
      className: 'sc-open-icon',
      src: _closeIcon["default"]
    }), /*#__PURE__*/_react["default"].createElement("img", {
      className: 'sc-closed-icon',
      src: launcherIcon
    })), /*#__PURE__*/_react["default"].createElement(_ChatWindow["default"], {
      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;
}(_react.Component);

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

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

Launcher.propTypes = process.env.NODE_ENV !== "production" ? {
  onMessageWasReceived: _propTypes["default"].func,
  onMessageWasSent: _propTypes["default"].func,
  onPayloadClick: _propTypes["default"].func,
  onAuth: _propTypes["default"].func,
  newMessagesCount: _propTypes["default"].number,
  isOpen: _propTypes["default"].bool,
  handleClick: _propTypes["default"].func,
  messageList: _propTypes["default"].arrayOf(_propTypes["default"].object),
  mute: _propTypes["default"].bool,
  showEmoji: _propTypes["default"].bool,
  launcherIcon: _propTypes["default"].string
} : {};
Launcher.defaultProps = {
  newMessagesCount: 0,
  showEmoji: false,
  launcherIcon: _logoNoBg["default"]
};
var _default = Launcher;
exports["default"] = _default;
module.exports = exports.default;