@zohoim/chat-components 0.0.11 → 0.0.14

package/es/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -1,30 +1,27 @@
-/* eslint-disable react/jsx-no-bind */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useCallback, useMemo } from 'react';
 /** ** Icons *** */
+
 import WhatsappIcon from '../../icons/iconSrc/integrations/ChWhatsApp';
 import TelegramIcon from '../../icons/iconSrc/integrations/TtTelegram';
 import InstagramIcon from '../../icons/iconSrc/integrations/ChInstagram';
 import ASAPIcon from '../../icons/iconSrc/integrations/TtASAP';
 import WeChatIcon from '../../icons/iconSrc/integrations/TtWechat';
 import TwillioIcon from '../../icons/iconSrc/integrations/TtTwillio';
-import LineIcon from '../../icons/iconSrc/integrations/TtTwitter';
-// import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
+import LineIcon from '../../icons/iconSrc/integrations/TtTwitter'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
 
 /** ** CSS *** */
-import style from './css/IMIntegrationIcon.module.css';
 
+import style from './css/IMIntegrationIcon.module.css';
 /** ** Methods *** */
+
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import cssJSLogic from './css/cssJSLogic';
-
 /** ** Constants *** */
+
 import imIntegrationIconDefaultProps from './props/defaultProps';
 import imIntegrationIconPropTypes from './props/propTypes';
-import constantProps from './props/propConstants';
-import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
 const {
   WHATSAPP,
   TELEGRAM,
@@ -41,50 +38,46 @@ const integrationIconMapping = {
   [ASAP]: ASAPIcon,
   [WECHAT]: WeChatIcon,
   [TWILLIO]: TwillioIcon,
-  [LINE]: LineIcon
-  // [TWITTER]: TwitterIcon
-};
+  [LINE]: LineIcon // [TWITTER]: TwitterIcon
 
+};
 export default function IMIntegrationIcon(props) {
   const {
     customStyle,
-    isCustom,
-    renderIcon,
-    title
+    renderCustomIcon,
+    title,
+    integrationName,
+    onClick,
+    size
   } = props;
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* css classnames added based on logic */
+
   const {
     iconWrapperClass,
-    iconStyle
-  } = cssJSLogic(props, newStyle);
-  function handleClick(e) {
-    const {
-      id,
-      onClick
-    } = props;
-    onClick && onClick({
-      id,
-      e
-    });
-  }
-  function renderDefaultIcon() {
-    const {
-      integrationName
-    } = props;
+    iconClass
+  } = cssJSLogic({
+    integrationName,
+    size
+  }, newStyle);
+  const iconStyle = useMemo(() => ({
+    base: iconClass
+  }), [iconClass]);
+  const renderDefaultIcon = useCallback(() => {
     const IntegrationIcon = integrationIconMapping[integrationName] || null;
     return IntegrationIcon ? /*#__PURE__*/React.createElement("div", {
       className: iconWrapperClass,
       "data-title": title,
-      onClick: handleClick
+      onClick: onClick
     }, /*#__PURE__*/React.createElement(IntegrationIcon, {
       customStyle: iconStyle
     })) : null;
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isCustom ? renderIcon() : renderDefaultIcon());
+  }, [integrationName, title, onClick, iconWrapperClass, iconStyle]);
+  return renderCustomIcon ? renderCustomIcon({
+    integrationName
+  }) : renderDefaultIcon();
 }
 IMIntegrationIcon.defaultProps = imIntegrationIconDefaultProps;
-IMIntegrationIcon.propTypes = imIntegrationIconPropTypes;
-IMIntegrationIcon.constantProps = constantProps;
+IMIntegrationIcon.propTypes = imIntegrationIconPropTypes;

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -1,8 +1,8 @@
 .varClass {
-  --integrationIcon-small_height: var(--imlib_size_22);
-  --integrationIcon-small_width: var(--imlib_size_22);
-  --integrationIcon-medium_height: var(--imlib_size_26);
-  --integrationIcon-medium_width: var(--imlib_size_26);
+  --integrationIcon-small_height: var(--zd_size22);
+  --integrationIcon-small_width: var(--zd_size22);
+  --integrationIcon-medium_height: var(--zd_size26);
+  --integrationIcon-medium_width: var(--zd_size26);
 }
 
 .integrationIcon {
@@ -10,7 +10,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
   border-radius: 50%;
 }
 
@@ -19,7 +18,7 @@
 .asapIcon :global(.cls-1),
 .weChatIcon :global(.cls-1),
 .weChatIcon :global(.path-0),
-.lineIcon :global(.cls-1){
+.lineIcon :global(.cls-1) {
   fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
 }
 
@@ -80,7 +79,6 @@
   );
 }
 
-
 .instagramIcon {
   background-color: var(
     --imlib_chat_components_imIntegrationIcon_instagram_color
@@ -90,7 +88,6 @@
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
 }
-
 /* .twitterIcon {
   background-color: var(
     --imlib_chat_components_imIntegrationIcon_twitter_color

package/es/im/IMIntegrationIcon/css/cssJSLogic.js

@@ -1,9 +1,9 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-
 /** ** Constants *** */
-import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
-import constantProps from '../props/propConstants';
+
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
 const {
   WHATSAPP,
   TELEGRAM,
@@ -24,11 +24,10 @@ export default function cssJSLogic(props, style) {
   const isASAPIcon = integrationName === ASAP;
   const isWeChatIcon = integrationName === WECHAT;
   const isTwillioIcon = integrationName === TWILLIO;
-  const isLineIcon = integrationName === LINE;
-  // const isTwitterIcon = integrationName === TWITTER;
+  const isLineIcon = integrationName === LINE; // const isTwitterIcon = integrationName === TWITTER;
 
-  const isSmall = size === constantProps.SIZE.SMALL;
-  const isMedium = size === constantProps.SIZE.MEDIUM;
+  const isSmall = size === sizes.SMALL;
+  const isMedium = size === sizes.MEDIUM;
   const iconWrapperClass = compileClassNames({
     [style.integrationIcon]: true,
     [style.small]: isSmall,
@@ -39,18 +38,15 @@ export default function cssJSLogic(props, style) {
     [style.asapIcon]: isASAPIcon,
     [style.weChatIcon]: isWeChatIcon,
     [style.twillioIcon]: isTwillioIcon,
-    [style.lineIcon]: isLineIcon
-    // [style.twitterIcon]: isTwitterIcon
-  });
+    [style.lineIcon]: isLineIcon // [style.twitterIcon]: isTwitterIcon
 
+  });
   const iconClass = compileClassNames({
     [style.small]: isSmall,
     [style.medium]: isMedium
   });
   return {
     iconWrapperClass,
-    iconStyle: {
-      base: iconClass
-    }
+    iconClass
   };
 }

package/es/im/IMIntegrationIcon/index.js

@@ -1,2 +1 @@
-export { default as IMIntegrationIcon } from './IMIntegrationIcon';
-export { default as IMIntegrationIconPropTypes } from './props/propTypes';
+export { default as IMIntegrationIcon } from './IMIntegrationIcon';

package/es/im/IMIntegrationIcon/props/defaultProps.js

@@ -1,9 +1,11 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import constantProps from './propConstants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+const {
+  SMALL
+} = sizes;
 const imIntegrationIconDefaultProps = {
   customStyle: dummyObject,
-  size: constantProps.SIZE.SMALL,
-  isCustom: false
+  size: SMALL
 };
 export default imIntegrationIconDefaultProps;

package/es/im/IMIntegrationIcon/props/propTypes.js

@@ -1,25 +1,14 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-
 /** ** Constants *** */
-import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
 import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
-const {
-  WHATSAPP,
-  TELEGRAM,
-  INSTAGRAM,
-  ASAP,
-  WECHAT,
-  TWILLIO,
-  LINE
-} = integrationConstants;
 const imIntegrationIconPropTypes = {
-  integrationName: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
+  integrationName: PropTypes.oneOf(Object.values(integrationConstants)).isRequired,
   customStyle: PropTypes.object,
-  isCustom: PropTypes.bool,
-  renderIcon: PropTypes.func,
-  size: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
-  id: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  renderCustomIcon: PropTypes.func,
+  size: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM])
 };
 export default imIntegrationIconPropTypes;

package/es/im/IMMessage/IMMessage.js

@@ -1,196 +1,135 @@
-/* eslint-disable react/jsx-no-bind */
+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); }
 
 /** ** Libraries *** */
-import React from "react";
-
+import React, { useCallback, useMemo } from 'react';
 /** ** Hooks *** */
-import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
 
+import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
 /** ** Constants *** */
-import imMessageDefaultProps from "./props/defaultProps";
-import imMessagePropTypes from "./props/propTypes";
 
+import imMessageDefaultProps from './props/defaultProps';
+import imMessagePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Components *** */
+
 import Message from '../../Message/Message';
-import IMMessageContent from "../IMMessageContent/IMMessageContent";
-import IMTicketLink from "../IMTicketLink/IMTicketLink";
+import IMMessageContent from '../IMMessageContent/IMMessageContent';
+import IMTicketLink from '../IMTicketLink/IMTicketLink';
+import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
 export default function IMMessage(props) {
   const {
-    defaultAgentAvatar,
-    autoMessageAvatar,
-    defaultContactAvatar,
+    defaultAvatarUrls,
     messageDetails,
     sessionDetails,
-    highlightMessageId,
-    isSameSender,
-    isSingleMessage,
-    messageStatusI18N,
-    isCurrentAgent,
-    isSameTimeMessage,
-    messageActionDetails,
-    canReply,
-    /*Customization Props*/
-    messageBubbleCustomStyle,
-    avatarCustomStyle,
-    senderIntegrationIconCustomStyle,
-    messageBoxCustomStyle,
-    actionIconCustomStyle,
-    moreActionItemCustomStyle,
-    messageActionCustomStyle,
-    moreActionPopupCustomStyle,
-    messageStatusCustomStyle,
-    needMessageActions,
-    needSender,
-    needMessageBox,
-    isCustomIntegrationIcon,
-    isCustomSenderAvatar,
-    senderAvatarSize,
-    senderIntegrationIconSize,
-    actionsDefaultShowCount,
-    renderCustomIntegrationIcon,
-    renderCustomSenderAvatar,
-    renderMessageFooter,
-    renderMessageHeader,
+    messageDisplayProps,
+    actions,
+    onSelectAction,
     replyText,
-    articleShareText,
-    moreText
+    seeMoreText,
+    messageStatusI18N,
+    onLoadFullMessage,
+    onClickReply,
+    onTicketClick,
+    customProps
   } = props;
   const {
-    direction,
-    isDeletedMessage,
-    isFailedMessage,
-    isActive,
+    messageProps = dummyObject,
+    imMessageContentProps = dummyObject,
+    imTicketLinkProps = dummyObject,
+    imIntegrationIconProps = dummyObject
+  } = customProps;
+  const {
+    isHighlightMessage,
+    needSender,
     isShowSender,
-    isBot,
+    isShowMessageTime
+  } = messageDisplayProps;
+  const {
+    direction,
+    // isBot,
     senderSrc,
     senderAlternateSrc,
-    senderTitle,
     senderName,
     isShowIntegrationIcon,
     integrationName,
-    messageMetaType,
-    messageType,
+    // messageMetaType,
+    // messageType,
     messageStatus,
     isAgentMessage,
     messageStatusTitle,
-    displayMessage,
     createdTime,
-    messageId,
-    ticketNumber,
+    // messageId,
     ticketId,
-    messageActions
+    ticketNumber,
+    ticketUrl
   } = useIMMessage({
-    defaultAgentAvatar,
-    autoMessageAvatar,
-    defaultContactAvatar,
+    defaultAvatarUrls,
     messageDetails,
     sessionDetails,
-    highlightMessageId,
-    isSameSender,
-    isSingleMessage,
-    messageStatusI18N,
-    messageActionDetails,
-    isCurrentAgent,
-    canReply
+    messageStatusI18N
   });
-  function handleRenderMessageBoxFooter() {
-    return !isSameTimeMessage ?
-    /*#__PURE__*/
-    //   <CommonDateWithTime
-    //     to={createdTime}
-    //     isNeedTime
-    //     prefix=''
-    //     isTimeOnly
-    //     hideTitle
-    //   />
-    // ) :
-    React.createElement("div", null, createdTime) : null;
-  }
-  function handleRenderMessage() {
-    return /*#__PURE__*/React.createElement(IMMessageContent, {
-      messageDetails: messageDetails,
-      replyText: replyText,
-      articleShareText: articleShareText,
-      moreText: moreText
-    });
-    // return <div>{displayMessage}</div>;
-  }
+  /** ** Render Footer *** */
 
-  function handleSelectAction(_ref) {
-    let {
-      id,
-      e
-    } = _ref;
-    const {
-      onClick
-    } = messageActionDetails[id] || {};
-    onClick && onClick({
-      id,
-      e,
-      messageId,
-      messageDetails,
-      sessionDetails
-    });
-  }
-  function handleRenderSecondaryActions() {
-    // return null;
-    return /*#__PURE__*/React.createElement(IMTicketLink, {
-      ticketNumber: ticketNumber
-    });
+  const handleRenderMessageBoxFooter = useCallback(() => isShowMessageTime ? /*#__PURE__*/React.createElement("div", null, createdTime) : null, [isShowMessageTime, createdTime]);
+  /** ** Render Message Content *** */
 
-    /*
-     <a
-        data-id={`ticketLink_${ticketNumber}`}
-        // className={style.ticketId}
-        // href='javascript:;'
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        {`#${ticketNumber}`}
-      </a> 
-    */
-  }
+  const handleRenderMessage = useCallback(() => /*#__PURE__*/React.createElement(IMMessageContent, _extends({
+    messageDetails: messageDetails,
+    onClickReply: onClickReply,
+    onLoadFullMessage: onLoadFullMessage,
+    replyText: replyText,
+    seeMoreText: seeMoreText,
+    sessionDetails: sessionDetails
+  }, imMessageContentProps)), [seeMoreText, replyText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, imMessageContentProps]);
+  /** ** Render Secondary Actions - TicketId *** */
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Message, {
+  const handleRenderSecondaryActions = useCallback(() => /*#__PURE__*/React.createElement(IMTicketLink, _extends({
+    onClick: onTicketClick,
+    ticketId: ticketId,
+    ticketNumber: ticketNumber,
+    ticketUrl: ticketUrl
+  }, imTicketLinkProps)), [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps]);
+  /** ** Render Owner Status Icon *** */
+
+  const handleRenderIntegIcon = useCallback(() => /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
+    integrationName: isShowIntegrationIcon ? integrationName : ''
+  }, imIntegrationIconProps)), [isShowIntegrationIcon, integrationName, imIntegrationIconProps]);
+  /** ** Construct Owner Details *** */
+
+  const ownerDetails = useMemo(() => ({
+    src: senderSrc,
+    alternateSrc: senderAlternateSrc,
+    name: senderName
+  }), [senderSrc, senderAlternateSrc, senderName]);
+  /** ** Construct Custom Props With default Footer *** */
+
+  const messageCustomProps = useMemo(() => {
+    const {
+      messageBubbleProps
+    } = messageProps;
+    return { ...messageProps,
+      messageBubbleProps: {
+        renderMessageBoxFooter: handleRenderMessageBoxFooter,
+        ...messageBubbleProps
+      }
+    };
+  }, [messageProps, handleRenderMessageBoxFooter]);
+  return /*#__PURE__*/React.createElement(Message, {
+    actions: actions,
+    customProps: messageCustomProps,
     direction: direction,
-    isActive: isActive,
+    isActive: isHighlightMessage,
     isShowSender: isShowSender,
-    senderName: senderName,
-    senderSrc: senderSrc,
-    senderAlternateSrc: senderAlternateSrc,
-    senderTitle: senderTitle,
-    senderIntegrationIcon: isShowIntegrationIcon ? integrationName : "",
-    isFailedMessage: isFailedMessage,
-    messageActions: messageActions,
-    needMessageActions: needMessageActions ? messageActions.length >= 0 : false,
-    onSelectAction: handleSelectAction,
-    messageStatus: isAgentMessage ? messageStatus : "",
-    statusTitle: messageStatusTitle,
-    customStyle: messageBubbleCustomStyle,
-    avatarCustomStyle: avatarCustomStyle,
-    senderIntegrationIconCustomStyle: senderIntegrationIconCustomStyle,
-    messageBoxCustomStyle: messageBoxCustomStyle,
-    actionIconCustomStyle: actionIconCustomStyle,
-    moreActionItemCustomStyle: moreActionItemCustomStyle,
-    messageActionCustomStyle: messageActionCustomStyle,
-    moreActionPopupCustomStyle: moreActionPopupCustomStyle,
-    messageStatusCustomStyle: messageStatusCustomStyle,
     needSender: needSender,
-    needMessageBox: needMessageBox,
-    isCustomIntegrationIcon: isCustomIntegrationIcon,
-    isCustomSenderAvatar: isCustomSenderAvatar,
-    senderAvatarSize: senderAvatarSize,
-    senderIntegrationIconSize: senderIntegrationIconSize,
-    actionsDefaultShowCount: actionsDefaultShowCount,
-    renderCustomIntegrationIcon: renderCustomIntegrationIcon,
-    renderCustomSenderAvatar: renderCustomSenderAvatar,
+    onSelectAction: onSelectAction,
+    ownerDetails: ownerDetails,
+    renderContent: handleRenderMessage,
+    renderOwnerStatusIcon: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
-    renderMessage: handleRenderMessage,
-    renderMessageFooter: renderMessageFooter,
-    renderMessageHeader: renderMessageHeader,
-    renderMessageBoxFooter: handleRenderMessageBoxFooter
-  }));
+    status: isAgentMessage ? messageStatus : '',
+    statusTooltip: messageStatusTitle
+  });
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;
-IMMessage.displayName = "IMMessage";
+IMMessage.displayName = 'IMMessage';

package/es/im/IMMessage/props/defaultProps.js

@@ -1,38 +1,11 @@
 // import React from 'react';
 
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
-import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imMessageDefaultProps = {
   messageDetails: dummyObject,
   sessionDetails: dummyObject,
-  defaultAgentAvatar: '',
-  autoMessageAvatar: '',
-  defaultContactAvatar: '',
-  highlightMessageId: '',
-  isSameSender: false,
-  isSingleMessage: false,
   messageStatusI18N: dummyObject,
-  messageActionDetails: dummyObject,
-  isCurrentAgent: false,
-  canReply: false,
-  messageBubbleCustomStyle: dummyObject,
-  avatarCustomStyle: dummyObject,
-  senderIntegrationIconCustomStyle: dummyObject,
-  messageBoxCustomStyle: dummyObject,
-  actionIconCustomStyle: dummyObject,
-  moreActionItemCustomStyle: dummyObject,
-  messageActionCustomStyle: dummyObject,
-  moreActionPopupCustomStyle: dummyObject,
-  messageStatusCustomStyle: dummyObject,
-  needMessageActions: true,
-  needSender: true,
-  needMessageBox: true,
-  isCustomIntegrationIcon: false,
-  isCustomSenderAvatar: false,
-  senderAvatarSize: 'medium',
-  senderIntegrationIconSize: sizes.SMALL,
-  actionsDefaultShowCount: actionsDefaultShowCount
+  customProps: dummyObject
 };
 export default imMessageDefaultProps;