@zohoim/chat-components 1.1.2-beta.7 → 1.1.3-beta.1

package/lib/icons/iconSrc/messageStatus/DoubleTick.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IconComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icon/es/Icon/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable */
+function IconComponent(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], props, /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "IM_doubleTick",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "59.016,15.14 31.131,43.291 29.446,41.606 25.728,45.324 31.131,50.727 63,18.858",
+    fill: "currentColor"
+  }), " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "43.758,13.273 15.872,41.424 4.718,30.269 1,33.987 15.872,48.86 47.741,16.991",
+    fill: "currentColor"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/Failed.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IconComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icon/es/Icon/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable */
+function IconComponent(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], props, /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "IM_failed",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M32,1C14.88,1,1,14.879,1,32s13.88,31,31,31c17.122,0,31-13.879,31-31S49.122,1,32,1z M32,47.613 c-2.475,0-4.48-2.006-4.48-4.481c0-2.474,2.006-4.481,4.48-4.481s4.48,2.006,4.48,4.481C36.48,45.607,34.475,47.613,32,47.613z M35.875,35.326h-7.75L27.126,15.81h9.751L35.875,35.326z",
+    fill: "currentColor",
+    className: "path-0"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/Tick.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IconComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icon/es/Icon/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable */
+function IconComponent(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], props, /*#__PURE__*/_react["default"].createElement("svg", {
+    id: "IM_tick",
+    viewBox: "0 0 64 64"
+  }, " ", /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "52.215,13.447 23.139,42.8 11.508,31.169 7.632,35.046 23.139,50.553 56.368,17.324",
+    fill: "currentColor"
+  }), " "));
+}
+
+IconComponent.propTypes = _Icon["default"].propTypes;

package/lib/icons/iconSrc/messageStatus/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Clock", {
+  enumerable: true,
+  get: function get() {
+    return _Clock["default"];
+  }
+});
+Object.defineProperty(exports, "DoubleTick", {
+  enumerable: true,
+  get: function get() {
+    return _DoubleTick["default"];
+  }
+});
+Object.defineProperty(exports, "Failed", {
+  enumerable: true,
+  get: function get() {
+    return _Failed["default"];
+  }
+});
+Object.defineProperty(exports, "Tick", {
+  enumerable: true,
+  get: function get() {
+    return _Tick["default"];
+  }
+});
+
+var _Clock = _interopRequireDefault(require("./Clock"));
+
+var _DoubleTick = _interopRequireDefault(require("./DoubleTick"));
+
+var _Failed = _interopRequireDefault(require("./Failed"));
+
+var _Tick = _interopRequireDefault(require("./Tick"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ArticleBubble/ArticleBubble.js

@@ -0,0 +1,104 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ArticleBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useArticleBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ArticleBubble/useArticleBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _ArticleBubbleModule = _interopRequireDefault(require("./css/ArticleBubble.module.css"));
+
+var _Article = _interopRequireDefault(require("../../icons/iconSrc/common/Article"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Components *** */
+
+/** ** Styles *** */
+
+/** ** Icons *** */
+
+/** ** Methods *** */
+function ArticleBubble(props) {
+  var customStyle = props.customStyle,
+      info = props.info,
+      articleDetails = props.articleDetails,
+      propOnClick = props.onClick,
+      isFailed = props.isFailed;
+  var title = articleDetails.title,
+      summary = articleDetails.summary;
+
+  var _useArticleBubble = (0, _useArticleBubble2["default"])({
+    articleDetails: articleDetails,
+    onClick: propOnClick
+  }),
+      onClick = _useArticleBubble.onClick,
+      webUrl = _useArticleBubble.webUrl;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ArticleBubbleModule["default"], customStyle);
+  var iconCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      base: newStyle.articleIcon
+    };
+  }, [newStyle.articleIcon]);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      articleBubbleClass = _cssJSLogic.articleBubbleClass;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: articleBubbleClass
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Article["default"], {
+    customStyle: iconCustomStyle
+  }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ArticleBubbleModule["default"].content,
+    flexible: true
+  }, info)), /*#__PURE__*/_react["default"].createElement("a", {
+    className: newStyle.articleWrapper,
+    href: webUrl,
+    onClick: onClick,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.title
+  }, title), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.summary
+  }, summary)));
+}
+
+ArticleBubble.propTypes = _propTypes["default"];
+ArticleBubble.defaultProps = _defaultProps["default"];
+ArticleBubble.displayName = 'ArticleBubble';

package/lib/im/ArticleBubble/css/ArticleBubble.module.css

@@ -0,0 +1,75 @@
+.articleWrapper {
+  display: block;
+  padding: var(--zd_size8) var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_articleBubble_bg_color);
+  border-radius: 3px;
+  cursor: pointer;
+  border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
+  margin-top: var(--zd_size4) ;
+}
+
+.failedArticleBubbleClass .articleWrapper{
+  background-color: var(--imlib_chat_components_articleBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_articleBubble_border_color_failed);
+}
+
+.title {
+  color: var(--imlib_chat_components_articleBubble_title_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedArticleBubbleClass .title{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
+}
+
+.summary {
+  color: var(--imlib_chat_components_articleBubble_summary_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  max-height: var(--zd_size40) ;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.failedArticleBubbleClass .summary{
+  color: var(--imlib_chat_components_articleBubble_summary_color_failed);
+}
+
+.articleIcon {
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size21)  !important;
+  height: var(--zd_size21)  !important;
+}
+
+.articleIcon :global(.path-0) {
+  fill: var(--imlib_chat_components_imTtIcon_path0_color);
+}
+
+.articleIcon :global(.path-1) {
+  fill: var(--imlib_chat_components_imTtIcon_path1_color);
+}
+
+.content{
+  composes: dotted from "../../css/common.module.css";
+  font-size: var(--zd_font_size13) ;
+  color: var(--imlib_chat_components_articleBubble_title_color);
+}
+
+[dir=ltr] .content{
+  margin-left: var(--zd_size8);
+}
+
+[dir=rtl] .content{
+  margin-right: var(--zd_size8);
+}
+
+.failedArticleBubbleClass .content{
+  color: var(--imlib_chat_components_articleBubble_title_color_failed);
+}

package/lib/im/ArticleBubble/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var isFailed = props.isFailed;
+  var articleBubbleClass = (0, _utils.compileClassNames)(_defineProperty({}, style.failedArticleBubbleClass, isFailed));
+  return {
+    articleBubbleClass: articleBubbleClass
+  };
+}

package/lib/im/ArticleBubble/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ArticleBubble", {
+  enumerable: true,
+  get: function get() {
+    return _ArticleBubble["default"];
+  }
+});
+
+var _ArticleBubble = _interopRequireDefault(require("./ArticleBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ArticleBubble/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var articleBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = articleBubbleDefaultProps;
+exports["default"] = _default;

package/lib/im/ArticleBubble/props/propTypes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var articleBubblePropTypes = {
+  articleDetails: _propTypes["default"].shape({
+    summary: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    webUrl: _propTypes["default"].string
+  }).isRequired,
+  customStyle: _propTypes["default"].object,
+  info: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  isFailed: _propTypes["default"].bool
+};
+var _default = articleBubblePropTypes;
+exports["default"] = _default;

package/lib/im/IMAttachmentHandler/IMAttachmentHandler.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMAttachmentHandler;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AttachmentHandler = _interopRequireDefault(require("../../AttachmentHandler/AttachmentHandler"));
+
+var _useIMAttachmentHandler = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/IMAttachmentHandler/useIMAttachmentHandler"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function IMAttachmentHandler(props) {
+  var _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconTitle = props.iconTitle,
+      renderCustomIcon = props.renderCustomIcon,
+      isMultiAttachment = props.isMultiAttachment,
+      propOnAttach = props.onAttach,
+      attachmentType = props.attachmentType,
+      integrationService = props.integrationService;
+  var _customProps$attachme = customProps.attachmentHandlerProps,
+      attachmentHandlerProps = _customProps$attachme === void 0 ? _emptyConstants.dummyObject : _customProps$attachme;
+
+  var _useIMAttachmentHandl = (0, _useIMAttachmentHandler["default"])({
+    onAttach: propOnAttach,
+    attachmentType: attachmentType,
+    integrationService: integrationService
+  }),
+      onAttach = _useIMAttachmentHandl.onAttach,
+      supportedTypes = _useIMAttachmentHandl.supportedTypes;
+
+  return /*#__PURE__*/_react["default"].createElement(_AttachmentHandler["default"], _extends({
+    iconName: iconName,
+    iconSize: iconSize,
+    iconTitle: iconTitle,
+    isMultiAttachment: isMultiAttachment,
+    onAttach: onAttach,
+    renderCustomIcon: renderCustomIcon,
+    supportedFileTypes: supportedTypes
+  }, attachmentHandlerProps));
+}
+
+IMAttachmentHandler.propTypes = _propTypes["default"];
+IMAttachmentHandler.defaultProps = _defaultProps["default"];
+IMAttachmentHandler.displayName = 'IMAttachmentHandler';

package/lib/im/IMAttachmentHandler/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IMAttachmentHandler", {
+  enumerable: true,
+  get: function get() {
+    return _IMAttachmentHandler["default"];
+  }
+});
+
+var _IMAttachmentHandler = _interopRequireDefault(require("./IMAttachmentHandler"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/IMAttachmentHandler/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var imAttachmentHandlerDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  iconName: 'ZD-TT-image',
+  iconSize: '14',
+  iconTitle: 'Upload',
+  isMultiAttachment: false
+};
+var _default = imAttachmentHandlerDefaultProps;
+exports["default"] = _default;

package/lib/im/IMAttachmentHandler/props/propTypes.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var WHATSAPP = _integrationConstants["default"].WHATSAPP,
+    TELEGRAM = _integrationConstants["default"].TELEGRAM,
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM,
+    WECHAT = _integrationConstants["default"].WECHAT,
+    TWILLIO = _integrationConstants["default"].TWILLIO,
+    LINE = _integrationConstants["default"].LINE,
+    IM_TALK = _integrationConstants["default"].IM_TALK,
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER;
+var imAttachmentHandlerPropTypes = {
+  customStyle: _propTypes["default"].object,
+  iconName: _propTypes["default"].string.isRequired,
+  iconSize: _propTypes["default"].string,
+  iconTitle: _propTypes["default"].string,
+  renderCustomIcon: _propTypes["default"].func,
+  isMultiAttachment: _propTypes["default"].bool,
+  onAttach: _propTypes["default"].func,
+  customProps: _propTypes["default"].object,
+  attachmentType: _propTypes["default"].oneOf(['image', 'document', 'documentAndImage']),
+  integrationService: _propTypes["default"].oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
+};
+var _default = imAttachmentHandlerPropTypes;
+exports["default"] = _default;

package/lib/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -0,0 +1,82 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = IMIntegrationIcon;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+
+var _IMIntegrationIconModule = _interopRequireDefault(require("./css/IMIntegrationIcon.module.css"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _integrationConstants = _interopRequireDefault(require("@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants"));
+
+var _fontIconMap;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var WHATSAPP = _integrationConstants["default"].WHATSAPP,
+    TELEGRAM = _integrationConstants["default"].TELEGRAM,
+    IM_TALK = _integrationConstants["default"].IM_TALK,
+    WECHAT = _integrationConstants["default"].WECHAT,
+    TWILLIO = _integrationConstants["default"].TWILLIO,
+    LINE = _integrationConstants["default"].LINE,
+    FACEBOOKMESSENGER = _integrationConstants["default"].FACEBOOKMESSENGER,
+    INSTAGRAM = _integrationConstants["default"].INSTAGRAM;
+var fontIconMap = (_fontIconMap = {}, _defineProperty(_fontIconMap, TWILLIO, 'ZD-TT-imtwillio'), _defineProperty(_fontIconMap, WHATSAPP, 'ZD-TT-whatsApp'), _defineProperty(_fontIconMap, TELEGRAM, 'ZD-TT-imTelegram'), _defineProperty(_fontIconMap, WECHAT, 'ZD-TT-imWeChat'), _defineProperty(_fontIconMap, LINE, 'ZD-TT-imLine'), _defineProperty(_fontIconMap, IM_TALK, 'ZD-TT-imASAP'), _defineProperty(_fontIconMap, FACEBOOKMESSENGER, 'ZD-TT-fbMessanger'), _defineProperty(_fontIconMap, INSTAGRAM, 'ZD-TT-instagram'), _fontIconMap);
+
+function IMIntegrationIcon(props) {
+  var customStyle = props.customStyle,
+      renderCustomIcon = props.renderCustomIcon,
+      title = props.title,
+      integrationName = props.integrationName,
+      onClick = props.onClick,
+      size = props.size;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_IMIntegrationIconModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    integrationName: integrationName,
+    size: size
+  }, newStyle),
+      iconWrapperClass = _cssJSLogic.iconWrapperClass;
+
+  var renderDefaultIcon = (0, _react.useCallback)(function () {
+    var iconName = fontIconMap[integrationName];
+    return iconName ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: iconWrapperClass,
+      "data-title": title,
+      onClick: onClick
+    }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      iconClass: newStyle.fontIcon,
+      name: iconName,
+      size: "12"
+    })) : null;
+  }, [integrationName, title, onClick, iconWrapperClass, newStyle.fontIcon]);
+  return renderCustomIcon ? renderCustomIcon({
+    integrationName: integrationName
+  }) : renderDefaultIcon();
+}
+
+IMIntegrationIcon.defaultProps = _defaultProps["default"];
+IMIntegrationIcon.propTypes = _propTypes["default"];

package/lib/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -0,0 +1,72 @@
+.varClass {
+  --integrationIcon-small_height: 20px;
+  --integrationIcon-small_width: 20px;
+  --integrationIcon-medium_height: 26px;
+  --integrationIcon-medium_width: 26px;
+}
+
+.integrationIcon {
+  composes: varClass;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.small {
+  width: var(--integrationIcon-small_height);
+  height: var(--integrationIcon-small_width);
+}
+
+.medium {
+  width: var(--integrationIcon-medium_height);
+  height: var(--integrationIcon-medium_width);
+}
+
+.whatsappIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_whatsapp_color
+  );
+}
+
+.telegramIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_telegram_color
+  );
+}
+
+.weChatIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_wechat_color);
+}
+
+.lineIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_line_color);
+}
+
+.twillioIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_twillio_color
+  );
+}
+
+.instagramIcon {
+  background: var(
+    --imlib_chat_components_imIntegrationIcon_instagram_color
+  );
+}
+
+.asapIcon {
+  background: var(--imlib_chat_components_imIntegrationIcon_asap_color);
+}
+
+.fbIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_fb_color);
+}
+
+.fontIcon :global .path1::before {
+  color: var(--imlib_chat_components_imIntegrationIcon_path0_color) !important;
+}
+
+.fontIcon :global .path2::before {
+  color: var(--imlib_chat_components_imIntegrationIcon_path1_color) !important;
+}