@zohoim/chat-components 0.0.13 → 0.0.15

package/es/im/IMMessage/IMMessage.js

@@ -1,56 +1,61 @@
 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 useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useIMMessage from '@zohoim/chat-components-hooks/es/im/IMMessage/useIMMessage';
+/** ** Methods *** */
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** 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 IMPermaLink from '../IMPermaLink/IMPermaLink';
 import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
+/** ** Styles *** */
+
+import style from './css/IMMessage.module.css';
 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,
+    deleteMessageText,
+    messageStatusI18N,
+    onLoadFullMessage,
+    onClickReply,
+    onTicketClick,
+    customStyle,
     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 newStyle = useMergeStyle(style, customStyle);
+  const {
+    direction,
     // isBot,
     senderSrc,
     senderAlternateSrc,
@@ -63,87 +68,89 @@ 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({
+    deleteMessageText: deleteMessageText,
+    messageDetails: messageDetails,
+    onClickReply: onClickReply,
+    onLoadFullMessage: onLoadFullMessage,
+    replyText: replyText,
+    seeMoreText: seeMoreText,
+    sessionDetails: sessionDetails
+  }, imMessageContentProps)), [seeMoreText, replyText, deleteMessageText, messageDetails, sessionDetails, onLoadFullMessage, onClickReply, imMessageContentProps]);
+  /** ** Render Secondary Actions - TicketId *** */
+
+  const handleRenderSecondaryActions = useCallback(() => {
     const {
-      onClick
-    } = messageActionDetails[id] || {};
-    onClick && onClick({
-      id,
-      e,
-      messageId,
-      messageDetails,
-      sessionDetails
-    });
-  }
-  function handleRenderSecondaryActions() {
-    return /*#__PURE__*/React.createElement(IMTicketLink, _extends({
-      ticketNumber: ticketNumber
+      imTicketLinkClass
+    } = cssJSLogic({
+      messageDetails
+    }, newStyle);
+    const customStyle = {
+      text: imTicketLinkClass
+    };
+    return /*#__PURE__*/React.createElement(IMPermaLink, _extends({
+      customStyle: customStyle,
+      href: ticketUrl,
+      id: ticketId,
+      onClick: onTicketClick,
+      text: 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,
+  }, [ticketNumber, ticketUrl, ticketId, onTicketClick, imTicketLinkProps, messageDetails, newStyle]);
+  /** ** 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,
-    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/css/IMMessage.module.css

@@ -0,0 +1,36 @@
+.varClass {
+  --imTicketLink-top_gap: var(--zd_size5);
+  --imTicketLink-font_size: var(--zd_font_size12);
+  --imTicketLink-max_width: var(--zd_size150);
+}
+
+.ticketLink {
+  composes: varClass;
+  font-size: var(--imTicketLink-font_size);
+  max-width: var(--imTicketLink-max_width);
+  margin-top: var(--imTicketLink-top_gap);
+}
+
+.ticketLinkRight {
+  composes: ticketLink;
+}
+
+[dir=ltr] .ticketLinkRight {
+  text-align: left;
+}
+
+[dir=rtl] .ticketLinkRight {
+  text-align: right;
+}
+
+.ticketLinkLeft {
+  composes: ticketLink;
+}
+
+[dir=ltr] .ticketLinkLeft {
+  text-align: right;
+}
+
+[dir=rtl] .ticketLinkLeft {
+  text-align: left;
+}

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

@@ -1,10 +1,23 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/imUtils/getMessageDirection';
+/** ** Constants *** */
+
+import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 export default function cssJSLogic(props, style) {
-  const imMessageClass = compileClassNames({
-    [style.imMessage]: true
+  const {
+    messageDetails
+  } = props;
+  const {
+    direction
+  } = getMessageDirectionType({
+    messageDetails
+  });
+  const imTicketLinkClass = compileClassNames({
+    [style.ticketLinkLeft]: directionConstants.OUT === direction,
+    [style.ticketLinkRight]: directionConstants.IN === direction
   });
   return {
-    imMessageClass
+    imTicketLinkClass
   };
 }

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

@@ -1,20 +1,12 @@
 // 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
+  customProps: dummyObject,
+  customStyle: 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,75 @@ 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,
+  deleteMessageText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  onTicketClick: PropTypes.func,
+  customStyle: PropTypes.object,
   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
+    imPermaLinkProps: PropTypes.object,
+    messageProps: PropTypes.object
   })
 };
 export default imMessagePropTypes;