@talend/react-components/lib/ActionIntercom/Intercom.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _TooltipTrigger = _interopRequireDefault(require("../TooltipTrigger"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Intercom = _interopRequireDefault(require("./Intercom.service"));
var _translate = _interopRequireDefault(require("../translate"));
var _constants = _interopRequireDefault(require("../constants"));
var _IntercomModule = _interopRequireDefault(require("./Intercom.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Intercom({
  id,
  className,
  config,
  t,
  tooltipPlacement
}) {
  const [show, setShow] = (0, _react.useState)(false);
  const ref = (0, _react.useRef)(null);

  // init intercom messenger, attaching it to the custom button
  (0, _react.useEffect)(() => {
    _Intercom.default.boot(`#${id}`, config);
    _Intercom.default.onShow(setShow.bind(null, true));
    _Intercom.default.onHide(() => {
      setShow(false);
      // a11y: on intercom dropdown close, focus on the trigger button
      ref.current.focus();
    });
    return _Intercom.default.shutdown;
  }, [id, config, setShow]);

  // place intercom messenger dropdown depending on the button
  (0, _react.useLayoutEffect)(() => _Intercom.default.setPosition(ref.current), [ref.current]);
  const label = show ? t('TC_INTERCOM_CLOSE', {
    defaultValue: 'Close chat with Talend Support'
  }) : t('TC_INTERCOM_OPEN', {
    defaultValue: 'Chat with Talend Support'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
    label: label,
    tooltipPlacement: tooltipPlacement,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "data-feature": show ? 'ipc.close' : 'ipc.open',
      "data-test": show ? 'close' : 'open',
      ref: ref,
      id: id,
      className: (0, _classnames.default)('btn', 'btn-link', 'tc-intercom', _IntercomModule.default['tc-intercom'], className, {
        [_IntercomModule.default.open]: show
      }),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: "talend-bubbles"
      })
    })
  });
}
Intercom.defaultProps = {
  t: (0, _translate.default)(),
  tooltipPlacement: 'bottom'
};
if (process.env.NODE_ENV !== 'production') {
  Intercom.propTypes = {
    id: _propTypes.default.string.isRequired,
    className: _propTypes.default.string,
    config: _propTypes.default.shape({
      app_id: _propTypes.default.string.isRequired,
      name: _propTypes.default.string,
      email: _propTypes.default.string.isRequired,
      company: _propTypes.default.shape({
        id: _propTypes.default.string.isRequired,
        name: _propTypes.default.string
      })
    }).isRequired,
    t: _propTypes.default.func,
    tooltipPlacement: _propTypes.default.string
  };
}
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(Intercom);
//# sourceMappingURL=Intercom.component.js.map