@zohoim/chat-components 0.0.13 → 0.0.14

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,56 +1,51 @@
 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); }
-/* eslint-disable react/jsx-no-bind */
 
 /** ** 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 { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-
+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 IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
 export default function IMMessage(props) {
   const {
-    defaultAgentAvatar,
-    autoMessageAvatar,
-    defaultContactAvatar,
+    defaultAvatarUrls,
     messageDetails,
     sessionDetails,
-    highlightMessageId,
-    isSameSender,
-    isSingleMessage,
-    messageStatusI18N,
-    isCurrentAgent,
-    isSameTimeMessage,
-    messageActionDetails,
-    canReply,
+    messageDisplayProps,
+    actions,
+    onSelectAction,
     replyText,
-    articleShareText,
-    moreText,
+    seeMoreText,
+    messageStatusI18N,
+    onLoadFullMessage,
+    onClickReply,
+    onTicketClick,
     customProps
   } = props;
   const {
-    messageBubbleProps = dummyObject,
-    messageOwnerProps = dummyObject,
-    messageBoxProps = dummyObject,
-    messageStatusProps = dummyObject,
-    messageActionsProps = dummyObject,
+    messageProps = dummyObject,
     imMessageContentProps = dummyObject,
     imTicketLinkProps = dummyObject,
     imIntegrationIconProps = dummyObject
   } = customProps;
   const {
-    direction,
-    isActive,
+    isHighlightMessage,
+    needSender,
     isShowSender,
+    isShowMessageTime
+  } = messageDisplayProps;
+  const {
+    direction,
     // isBot,
     senderSrc,
     senderAlternateSrc,
@@ -63,87 +58,77 @@ export default function IMMessage(props) {
     isAgentMessage,
     messageStatusTitle,
     createdTime,
-    messageId,
+    // messageId,
+    ticketId,
     ticketNumber,
-    messageActions
+    ticketUrl
   } = useIMMessage({
-    defaultAgentAvatar,
-    autoMessageAvatar,
-    defaultContactAvatar,
+    defaultAvatarUrls,
     messageDetails,
     sessionDetails,
-    highlightMessageId,
-    isSameSender,
-    isSingleMessage,
-    messageStatusI18N,
-    messageActionDetails,
-    isCurrentAgent,
-    canReply
+    messageStatusI18N
   });
-  function handleRenderMessageBoxFooter() {
-    return !isSameTimeMessage ? /*#__PURE__*/React.createElement("div", null, createdTime) : null;
-  }
-  function handleRenderMessage() {
-    return /*#__PURE__*/React.createElement(IMMessageContent, _extends({
-      articleShareText: articleShareText,
-      messageDetails: messageDetails,
-      moreText: moreText,
-      replyText: replyText
-    }, imMessageContentProps));
-  }
-  function handleSelectAction(_ref) {
-    let {
-      id,
-      e
-    } = _ref;
+  /** ** Render Footer *** */
+
+  const handleRenderMessageBoxFooter = useCallback(() => isShowMessageTime ? /*#__PURE__*/React.createElement("div", null, createdTime) : null, [isShowMessageTime, createdTime]);
+  /** ** Render Message Content *** */
+
+  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 *** */
+
+  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 {
-      onClick
-    } = messageActionDetails[id] || {};
-    onClick && onClick({
-      id,
-      e,
-      messageId,
-      messageDetails,
-      sessionDetails
-    });
-  }
-  function handleRenderSecondaryActions() {
-    return /*#__PURE__*/React.createElement(IMTicketLink, _extends({
-      ticketNumber: ticketNumber
-    }, imTicketLinkProps));
-  }
-  function handleRenderIntegIcon() {
-    /*#__PURE__*/React.createElement(IMIntegrationIcon, _extends({
-      integrationName: isShowIntegrationIcon ? integrationName : ''
-    }, imIntegrationIconProps));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Message, {
-    actions: messageActions,
-    customProps: {
-      messageOwnerProps,
-      messageBoxProps,
-      messageStatusProps,
-      messageActionsProps,
+      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,
-    onSelectAction: handleSelectAction,
-    ownerDetails: {
-      src: senderSrc,
-      alternateSrc: senderAlternateSrc,
-      name: senderName
-    },
+    needSender: needSender,
+    onSelectAction: onSelectAction,
+    ownerDetails: ownerDetails,
     renderContent: handleRenderMessage,
-    renderOwnerOverlay: handleRenderIntegIcon,
+    renderOwnerStatusIcon: handleRenderIntegIcon,
     renderSecondaryActions: handleRenderSecondaryActions,
     status: isAgentMessage ? messageStatus : '',
     statusTooltip: messageStatusTitle
-  }));
+  });
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

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

@@ -1,20 +1,11 @@
 // import React from 'react';
 
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+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,
   customProps: dummyObject
 };
 export default imMessageDefaultProps;

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

@@ -1,19 +1,9 @@
-/* eslint-disable no-undef */
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-
 /** ** Constants *** */
+
 import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-const {
-  REPLY,
-  COPY,
-  DOWNLOAD,
-  CREATE_TICKET,
-  RESEND,
-  DELETE,
-  FORWARD
-} = defaultMessageActions;
 const {
   SENT,
   SAVED,
@@ -26,110 +16,73 @@ const {
 } = messageStatusConstants;
 const imMessagePropTypes = {
   messageDetails: PropTypes.shape({
-    direction: PropTypes.string,
+    displayMessage: PropTypes.string.isRequired,
     actor: PropTypes.shape({
-      type: PropTypes.string,
-      photoURL: PropTypes.string,
-      name: PropTypes.string,
       contactName: PropTypes.string,
-      externalId: PropTypes.string
+      externalId: PropTypes.string,
+      name: PropTypes.string,
+      photoURL: PropTypes.string,
+      type: PropTypes.string
     }),
-    status: PropTypes.string,
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    createdTime: PropTypes.string,
+    direction: PropTypes.string,
+    id: PropTypes.string,
+    isCustomMessage: PropTypes.bool,
+    layout: PropTypes.string,
+    locationUrl: PropTypes.string,
     meta: PropTypes.shape({
-      SYSTEM_MESSAGE_TYPE: PropTypes.string,
-      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_ID: PropTypes.string,
       DESK_TICKET_NUMBER: PropTypes.string,
-      DESK_TICKET_ID: PropTypes.string
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
     }),
-    attachment: PropTypes.string,
-    location: PropTypes.string,
-    layout: PropTypes.string,
-    contentType: PropTypes.string,
     replyToMessage: PropTypes.object,
-    kbArticle: PropTypes.string,
-    type: PropTypes.string,
-    displayMessage: PropTypes.string,
-    createdTime: PropTypes.string,
-    id: PropTypes.string
+    status: PropTypes.string,
+    type: PropTypes.string
   }).isRequired,
   sessionDetails: PropTypes.shape({
     integrationService: PropTypes.string
   }),
-  defaultAgentAvatar: PropTypes.string,
-  autoMessageAvatar: PropTypes.string,
-  defaultContactAvatar: PropTypes.string,
-  highlightMessageId: PropTypes.string,
-  isSameSender: PropTypes.bool,
-  isSingleMessage: PropTypes.bool,
+  defaultAvatarUrls: PropTypes.shape({
+    autoMessageAvatar: PropTypes.string,
+    defaultAgentAvatar: PropTypes.string,
+    defaultContactAvatar: PropTypes.string
+  }),
+  messageDisplayProps: PropTypes.shape({
+    isHighlightMessage: PropTypes.bool,
+    isShowMessageTime: PropTypes.bool,
+    isShowSender: PropTypes.bool,
+    needSender: PropTypes.bool
+  }),
   messageStatusI18N: PropTypes.shape({
-    [SENT]: PropTypes.string,
-    [SAVED]: PropTypes.string,
-    [QUEUED]: PropTypes.string,
     [DELIVERED]: PropTypes.string,
-    [READ]: PropTypes.string,
-    [UNSENT]: PropTypes.string,
     [FAILED]: PropTypes.string,
-    [OUTGOING]: PropTypes.string
+    [OUTGOING]: PropTypes.string,
+    [QUEUED]: PropTypes.string,
+    [READ]: PropTypes.string,
+    [SAVED]: PropTypes.string,
+    [SENT]: PropTypes.string,
+    [UNSENT]: PropTypes.string
   }),
-  isCurrentAgent: PropTypes.bool.isRequired,
-  isSameTimeMessage: PropTypes.bool,
-  messageActionDetails: PropTypes.shape({
-    [REPLY]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [COPY]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [DOWNLOAD]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [CREATE_TICKET]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [RESEND]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [DELETE]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    }),
-    [FORWARD]: PropTypes.shape({
-      id: PropTypes.string,
-      displayText: PropTypes.string,
-      iconTitle: PropTypes.string,
-      onClick: PropTypes.func
-    })
-  }).isRequired,
-  canReply: PropTypes.bool.isRequired,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    displayText: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(Object.values(defaultMessageActions))]).isRequired,
+    iconTitle: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    renderFunction: PropTypes.func
+  })),
+  onSelectAction: PropTypes.func,
   replyText: PropTypes.string,
-  articleShareText: PropTypes.string,
-  moreText: PropTypes.string,
+  seeMoreText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  onTicketClick: PropTypes.func,
   customProps: PropTypes.shape({
-    messageBubbleProps: PropTypes.object,
-    messageOwnerProps: PropTypes.object,
-    messageBoxProps: PropTypes.object,
-    messageStatusProps: PropTypes.object,
-    messageActionsProps: PropTypes.object,
+    imIntegrationIconProps: PropTypes.object,
     imMessageContentProps: PropTypes.object,
     imTicketLinkProps: PropTypes.object,
-    imIntegrationIconProps: PropTypes.object
+    messageProps: PropTypes.object
   })
 };
 export default imMessagePropTypes;