@zohoim/chat-components 0.0.5 → 0.0.7

package/es/IMImageBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imImageBubbleClass = compileClassNames({
+    [style.imImageBubble]: true
+  });
+  return {
+    imImageBubbleClass
+  };
+}

package/es/IMImageBubble/index.js

@@ -0,0 +1 @@
+export { default as IMImageBubble } from './IMImageBubble';

package/es/IMImageBubble/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imImageBubbleDefaultProps = {
+  customStyle: dummyObject,
+  attachmentDetails: dummyObject
+};
+export default imImageBubbleDefaultProps;

package/es/IMImageBubble/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imImageBubblePropTypes = {
+  customStyle: PropTypes.object,
+  attachmentDetails: PropTypes.shape({
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string,
+    id: PropTypes.string
+  })
+};
+export default imImageBubblePropTypes;

package/es/IMInfoBubble/IMInfoBubble.js

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imInfoBubbleDefaultProps from './props/defaultProps';
+import imInfoBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMInfoBubble.module.css';
+export default function IMInfoBubble(props) {
+  const {
+    customStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imInfoBubbleClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: imInfoBubbleClass
+  }, "Working On this...");
+}
+IMInfoBubble.propTypes = imInfoBubblePropTypes;
+IMInfoBubble.defaultProps = imInfoBubbleDefaultProps;
+IMInfoBubble.displayName = 'IMInfoBubble';

package/es/IMInfoBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imInfoBubbleClass = compileClassNames({
+    [style.imInfoBubble]: true
+  });
+  return {
+    imInfoBubbleClass
+  };
+}

package/es/IMInfoBubble/index.js

@@ -0,0 +1 @@
+export { default as IMInfoBubble } from './IMInfoBubble';

package/es/IMInfoBubble/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imInfoBubbleDefaultProps = {
+  customStyle: dummyObject
+};
+export default imInfoBubbleDefaultProps;

package/es/IMInfoBubble/props/propTypes.js

@@ -0,0 +1,6 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imInfoBubblePropTypes = {
+  customStyle: PropTypes.object
+};
+export default imInfoBubblePropTypes;

package/es/IMLocationBubble/IMLocationBubble.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imLocationBubbleDefaultProps from './props/defaultProps';
+import imLocationBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMLocationBubble.module.css';
+import useIMLocationBubble from '@zohoim/chat-components-hooks/es/IMLocationBubble/useIMLocationBubble';
+import LocationBubble from '../LocationBubble/LocationBubble';
+export default function IMLocationBubble(props) {
+  const {
+    customStyle,
+    locationDetails,
+    locationCustomStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imLocationBubbleClass
+  } = cssJSLogic(props, newStyle);
+  const {
+    locationURL
+  } = useIMLocationBubble({
+    locationDetails
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: imLocationBubbleClass
+  }, /*#__PURE__*/React.createElement(LocationBubble, {
+    locationURL: locationURL,
+    customStyle: locationCustomStyle
+  }));
+}
+IMLocationBubble.propTypes = imLocationBubblePropTypes;
+IMLocationBubble.defaultProps = imLocationBubbleDefaultProps;
+IMLocationBubble.displayName = 'IMLocationBubble';

package/es/IMLocationBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imLocationBubbleClass = compileClassNames({
+    [style.imLocationBubble]: true
+  });
+  return {
+    imLocationBubbleClass
+  };
+}

package/es/IMLocationBubble/index.js

@@ -0,0 +1 @@
+export { default as IMLocationBubble } from './IMLocationBubble';

package/es/IMLocationBubble/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imLocationBubbleDefaultProps = {
+  customStyle: dummyObject,
+  locationCustomStyle: dummyObject,
+  locationDetails: dummyObject
+};
+export default imLocationBubbleDefaultProps;

package/es/IMLocationBubble/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imLocationBubblePropTypes = {
+  customStyle: PropTypes.object,
+  locationCustomStyle: PropTypes.object,
+  locationDetails: PropTypes.shape({
+    latitude: PropTypes.string,
+    longitude: PropTypes.string
+  })
+};
+export default imLocationBubblePropTypes;

package/es/IMMessage/IMMessage.js

@@ -1,142 +1,189 @@
 /* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
 
 /** ** Libraries *** */
 import React from 'react';
 
 /** ** Hooks *** */
-// import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMMessage from '@zohoim/chat-components-hooks/es/IMMessage/useIMMessage';
 
 /** ** Constants *** */
 import imMessageDefaultProps from './props/defaultProps';
 import imMessagePropTypes from './props/propTypes';
 
-/** ** Methods *** */
-// import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
-// import cssJSLogic from './css/cssJSLogic';
-
-/** ** Styles *** */
-// import style from './css/IMMessage.module.css';
-
 /** ** Components *** */
-import MessageBubble from '../MessageBubble/MessageBubble';
-import MessageBox from '../MessageBox/MessageBox';
-import IMMessageAvatar from '../IMMessageAvatar/IMMessageAvatar';
-import IMMessageActions from '../IMMessageActions/IMMessageActions';
-import IMMessageStatus from '../IMMessageStatus/IMMessageStatus';
+import Message from '../Message/Message';
+import IMMessageContent from '../IMMessageContent/IMMessageContent';
+import IMTicketLink from '../IMTicketLink/IMTicketLink';
 export default function IMMessage(props) {
   const {
-    customStyle,
-    direction,
-    isActive,
-    needMessageActions,
-    renderMessageBoxFooter,
-    /* Avatar Related Props Start */
-    needSender,
-    isShowSender,
-    senderSrc,
-    senderAlternateSrc,
-    senderTitle,
-    senderAvatarSize,
-    senderName,
+    defaultAgentAvatar,
+    autoMessageAvatar,
+    defaultContactAvatar,
+    messageDetails,
+    sessionDetails,
+    highlightMessageId,
+    isSameSender,
+    isSingleMessage,
+    messageStatusI18N,
+    isCurrentAgent,
+    isSameTimeMessage,
+    messageActionDetails,
+    canReply,
+    /*Customization Props*/
+    messageBubbleCustomStyle,
     avatarCustomStyle,
-    senderIntegrationIcon,
-    senderIntegrationIconSize,
     senderIntegrationIconCustomStyle,
-    isCustomIntegrationIcon,
-    isCustomSenderAvatar,
-    renderCustomIntegrationIcon,
-    renderCustomSenderAvatar,
-    /*Avatar Related Props  End*/
-
-    /* MessageBox Props Start */
-    isFailedMessage,
-    needMessageBox,
-    renderMessage,
-    renderMessageFooter,
-    renderMessageHeader,
     messageBoxCustomStyle,
-    /*MessageBox Props End */
-
-    /* MessageAction Props Start */
-    messageActions,
-    actionsDefaultShowCount,
     actionIconCustomStyle,
     moreActionItemCustomStyle,
-    onSelectAction,
     messageActionCustomStyle,
     moreActionPopupCustomStyle,
-    renderSecondaryActions,
-    /* MessageAction Props End */
-
-    /*MessageStatus Props Start */
-    messageStatus,
     messageStatusCustomStyle,
-    statusTitle
-    /*MessageStatus Props End */
+    needMessageActions,
+    needSender,
+    needMessageBox,
+    isCustomIntegrationIcon,
+    isCustomSenderAvatar,
+    senderAvatarSize,
+    senderIntegrationIconSize,
+    actionsDefaultShowCount,
+    renderCustomIntegrationIcon,
+    renderCustomSenderAvatar,
+    renderMessageFooter,
+    renderMessageHeader
   } = props;
-  function handleRenderMessageStatus() {
-    const props = {
-      messageStatus,
-      customStyle: messageStatusCustomStyle,
-      title: statusTitle
-    };
-    return /*#__PURE__*/React.createElement(IMMessageStatus, props);
+  const {
+    direction,
+    isDeletedMessage,
+    isFailedMessage,
+    isActive,
+    isShowSender,
+    isBot,
+    senderSrc,
+    senderAlternateSrc,
+    senderTitle,
+    senderName,
+    isShowIntegrationIcon,
+    integrationName,
+    messageMetaType,
+    messageType,
+    messageStatus,
+    isAgentMessage,
+    messageStatusTitle,
+    displayMessage,
+    createdTime,
+    messageId,
+    ticketNumber,
+    ticketId,
+    messageActions
+  } = useIMMessage({
+    defaultAgentAvatar,
+    autoMessageAvatar,
+    defaultContactAvatar,
+    messageDetails,
+    sessionDetails,
+    highlightMessageId,
+    isSameSender,
+    isSingleMessage,
+    messageStatusI18N,
+    messageActionDetails,
+    isCurrentAgent,
+    canReply
+  });
+  function handleRenderMessageBoxFooter() {
+    return !isSameTimeMessage ?
+    /*#__PURE__*/
+    //   <CommonDateWithTime
+    //     to={createdTime}
+    //     isNeedTime
+    //     prefix=''
+    //     isTimeOnly
+    //     hideTitle
+    //   />
+    // ) :
+    React.createElement("div", null, createdTime) : null;
   }
-  function handleRenderMessageBox() {
-    const props = {
-      renderMessageFooter,
-      renderMessageHeader,
-      renderMessageStatus: handleRenderMessageStatus,
-      renderMessage,
-      customStyle: messageBoxCustomStyle,
-      isFailed: isFailedMessage
-    };
-    return /*#__PURE__*/React.createElement(MessageBox, props);
+  function handleRenderMessage() {
+    return /*#__PURE__*/React.createElement(IMMessageContent, {
+      messageDetails: messageDetails
+    });
+    // return <div>{displayMessage}</div>;
   }
-  function handleRenderMessageOwner() {
-    const props = {
-      src: senderSrc,
-      alternateSrc: senderAlternateSrc,
-      title: senderTitle,
-      avatarSize: senderAvatarSize,
-      name: senderName,
-      customStyle: avatarCustomStyle,
-      integrationName: senderIntegrationIcon,
-      iconSize: senderIntegrationIconSize,
-      iconCustomStyle: senderIntegrationIconCustomStyle,
-      isCustomIcon: isCustomIntegrationIcon,
-      renderCustomIcon: renderCustomIntegrationIcon,
-      isCustomAvatar: isCustomSenderAvatar,
-      renderCustomAvatar: renderCustomSenderAvatar
-    };
-    return isShowSender ? /*#__PURE__*/React.createElement(IMMessageAvatar, props) : null;
+
+  function handleSelectAction(_ref) {
+    let {
+      id,
+      e
+    } = _ref;
+    const {
+      onClick
+    } = messageActionDetails[id] || {};
+    onClick && onClick({
+      id,
+      e,
+      messageId,
+      messageDetails,
+      sessionDetails
+    });
   }
-  function handleRenderMessageActions() {
-    const props = {
-      actions: messageActions,
-      renderSecondaryActions: renderSecondaryActions,
-      defaultShowCount: actionsDefaultShowCount,
-      actionIconCustomStyle: actionIconCustomStyle,
-      moreItemCustomStyle: moreActionItemCustomStyle,
-      onSelect: onSelectAction,
-      customStyle: messageActionCustomStyle,
-      morePopupCustomStyle: moreActionPopupCustomStyle
-    };
-    return /*#__PURE__*/React.createElement(IMMessageActions, props);
+  function handleRenderSecondaryActions() {
+    // return null;
+    return /*#__PURE__*/React.createElement(IMTicketLink, {
+      ticketNumber: ticketNumber
+    });
+
+    /*
+     <a
+        data-id={`ticketLink_${ticketNumber}`}
+        // className={style.ticketId}
+        // href='javascript:;'
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        {`#${ticketNumber}`}
+      </a> 
+    */
   }
-  return /*#__PURE__*/React.createElement(MessageBubble, {
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Message, {
     direction: direction,
     isActive: isActive,
-    needMessageActions: needMessageActions,
-    renderMessageBox: handleRenderMessageBox,
-    renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: handleRenderMessageOwner,
-    renderMessageActions: handleRenderMessageActions,
-    customStyle: customStyle,
+    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,
-    isShowSender: isShowSender
-  });
+    needMessageBox: needMessageBox,
+    isCustomIntegrationIcon: isCustomIntegrationIcon,
+    isCustomSenderAvatar: isCustomSenderAvatar,
+    senderAvatarSize: senderAvatarSize,
+    senderIntegrationIconSize: senderIntegrationIconSize,
+    actionsDefaultShowCount: actionsDefaultShowCount,
+    renderCustomIntegrationIcon: renderCustomIntegrationIcon,
+    renderCustomSenderAvatar: renderCustomSenderAvatar,
+    renderSecondaryActions: handleRenderSecondaryActions,
+    renderMessage: handleRenderMessage,
+    renderMessageFooter: renderMessageFooter,
+    renderMessageHeader: renderMessageHeader,
+    renderMessageBoxFooter: handleRenderMessageBoxFooter
+  }));
 }
 IMMessage.propTypes = imMessagePropTypes;
 IMMessage.defaultProps = imMessageDefaultProps;

package/es/IMMessage/props/defaultProps.js

@@ -1,51 +1,38 @@
 // import React from 'react';
 
 /** ** Constants *** */
-import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
-import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-// import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+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 messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-
-// const { WHATSAPP } = integrationConstants;
-// const { READ } = messageStatusConstants;
-
 const imMessageDefaultProps = {
-  customStyle: dummyObject,
-  direction: direction.IN,
-  isActive: false,
-  needMessageActions: true,
-  needSender: true,
-  isShowSender: true,
-  senderSrc: '',
-  senderAlternateSrc: '',
-  senderTitle: '',
-  //'RAVI KUMAR',
-  senderAvatarSize: 'medium',
-  senderName: '',
-  //'Ravi kumar',
+  messageDetails: dummyObject,
+  sessionDetails: dummyObject,
+  defaultAgentAvatar: '',
+  autoMessageAvatar: '',
+  defaultContactAvatar: '',
+  highlightMessageId: '',
+  isSameSender: false,
+  isSingleMessage: false,
+  messageStatusI18N: dummyObject,
+  messageActionDetails: dummyObject,
+  isCurrentAgent: false,
+  canReply: false,
+  messageBubbleCustomStyle: dummyObject,
   avatarCustomStyle: dummyObject,
-  senderIntegrationIcon: '',
-  //WHATSAPP
-  senderIntegrationIconSize: sizes.SMALL,
   senderIntegrationIconCustomStyle: dummyObject,
-  isCustomIntegrationIcon: false,
-  isCustomSenderAvatar: false,
-  needMessageBox: true,
-  isFailedMessage: false,
   messageBoxCustomStyle: dummyObject,
-  messageActions: dummyArray,
-  actionsDefaultShowCount: actionsDefaultShowCount,
   actionIconCustomStyle: dummyObject,
   moreActionItemCustomStyle: dummyObject,
   messageActionCustomStyle: dummyObject,
   moreActionPopupCustomStyle: dummyObject,
-  messageStatus: '',
-  // READ,
   messageStatusCustomStyle: dummyObject,
-  statusTitle: '' // READ,
-  // renderMessage: () => <div>Test</div>
+  needMessageActions: true,
+  needSender: true,
+  needMessageBox: true,
+  isCustomIntegrationIcon: false,
+  isCustomSenderAvatar: false,
+  senderAvatarSize: 'medium',
+  senderIntegrationIconSize: sizes.SMALL,
+  actionsDefaultShowCount: actionsDefaultShowCount
 };
-
 export default imMessageDefaultProps;