@zohoim/chat-components 0.0.2 → 0.0.3

package/es/IMMessage/props/propTypes.js

@@ -0,0 +1,98 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const {
+  IN,
+  OUT
+} = direction;
+const imMessagePropTypes = {
+  customStyle: PropTypes.object,
+  direction: PropTypes.oneOf([IN, OUT]),
+  isActive: PropTypes.bool,
+  needMessageActions: PropTypes.bool,
+  renderMessageBoxFooter: PropTypes.func,
+  /* Avatar Related Props Start */
+  needSender: PropTypes.bool,
+  isShowSender: PropTypes.bool,
+  senderSrc: PropTypes.string,
+  senderAlternateSrc: PropTypes.string,
+  senderTitle: PropTypes.string,
+  senderAvatarSize: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  senderName: PropTypes.string,
+  avatarCustomStyle: PropTypes.object,
+  senderIntegrationIcon: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
+  senderIntegrationIconSize: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
+  senderIntegrationIconCustomStyle: PropTypes.object,
+  isCustomIntegrationIcon: PropTypes.bool,
+  isCustomSenderAvatar: PropTypes.bool,
+  renderCustomIntegrationIcon: PropTypes.func,
+  renderCustomSenderAvatar: PropTypes.func,
+  /*Avatar Related Props  End*/
+
+  /* MessageBox Props Start */
+  needMessageBox: PropTypes.bool,
+  renderMessage: PropTypes.func,
+  renderMessageFooter: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
+  messageBoxCustomStyle: PropTypes.object,
+  isFailedMessage: PropTypes.bool,
+  /*MessageBox Props End */
+
+  /* MessageAction Props Start */
+  messageActions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
+    displayText: PropTypes.string,
+    renderFunction: PropTypes.func,
+    iconTitle: PropTypes.string
+  })),
+  renderSecondaryActions: PropTypes.func,
+  actionsDefaultShowCount: PropTypes.number,
+  actionIconCustomStyle: PropTypes.object,
+  moreActionItemCustomStyle: PropTypes.object,
+  onSelectAction: PropTypes.func,
+  messageActionCustomStyle: PropTypes.object,
+  moreActionPopupCustomStyle: PropTypes.object,
+  /* MessageAction Props End */
+
+  /* MessageStatus Props Start */
+  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
+  messageStatusCustomStyle: PropTypes.object,
+  statusTitle: PropTypes.string
+  /*MessageStatus Props End */
+};
+
+export default imMessagePropTypes;

package/es/IMMessage/renderChild/renderMessage.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
+}

package/es/IMMessage/renderChild/renderMessageActions.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageActions from '../../IMMessageActions/IMMessageActions';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageActions, null);
+}

package/es/IMMessage/renderChild/renderMessageBox.js

@@ -0,0 +1,15 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import MessageBox from '../../MessageBox/MessageBox';
+export default function renderMessageBox(props) {
+  const {
+    renderMessageFooter,
+    renderMessageHeader,
+    renderMessageStatus,
+    renderMessage,
+    customStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(MessageBox, props);
+}

package/es/IMMessage/renderChild/renderMessageBoxFooter.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import MessageBoxFooter from '../../MessageBoxFooter/MessageBoxFooter';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(MessageBoxFooter, null);
+}

package/es/IMMessage/renderChild/renderMessageFooter.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
+}

package/es/IMMessage/renderChild/renderMessageHeader.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
+}

package/es/IMMessage/renderChild/renderMessageOwner.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageAvatar from '../../IMMessageAvatar/IMMessageAvatar';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageAvatar, null);
+}

package/es/IMMessage/renderChild/renderMessageStatus.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
+export default function renderMessageBoxFooter(props) {
+  return /*#__PURE__*/React.createElement(IMMessageStatus, props);
+}

package/es/IMMessageActions/IMMessageActions.js

@@ -0,0 +1,146 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+/* eslint-disable arrow-parens */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import ActionIcon from '../ActionIcon/ActionIcon';
+import MessageActions from '../MessageActions/MessageActions';
+import MessageAction from '../MessageAction/MessageAction';
+
+/** ** Icons *** */
+import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+import ReloadIcon from '@zohodesk/icon/es/general/Reload';
+import CopyIcon from '@zohodesk/icon/es/general/Copy';
+import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
+import DeleteIcon from '@zohodesk/icon/es/general/Delete';
+import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
+import MoreIcon from '@zohodesk/icon/es/general/More';
+import ConvertTicket from '../icons/iconSrc/actions/ConvertTicket';
+
+/** ** Hooks *** */
+import useIMMessageActions from '@zohoim/chat-components-hooks/es/IMMessageActions/useIMMessageActions';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Constants *** */
+import imMessageActionsDefaultProps from './props/defaultProps';
+import imMessageActionsPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+
+/** ** CSS *** */
+import style from './css/IMMessageActions.module.css';
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
+export default function IMMessageActions(props) {
+  const {
+    actions,
+    defaultShowCount,
+    actionIconCustomStyle,
+    moreItemCustomStyle,
+    onSelect,
+    customStyle,
+    morePopupCustomStyle,
+    renderSecondaryActions
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    moreIconClass,
+    secondaryActionsClass,
+    iconStyle
+  } = cssJSLogic(props, newStyle);
+  const {
+    actionDetails
+  } = useIMMessageActions({
+    actions,
+    defaultRenderFunction: renderAction
+  });
+  const {
+    allActions
+  } = actionDetails;
+  function handleClickAction(_ref) {
+    let {
+      id
+    } = _ref;
+    onSelect && onSelect({
+      id
+    });
+  }
+  function renderIcon(_ref2) {
+    let {
+      id
+    } = _ref2;
+    const iconMapping = {
+      [REPLY]: ReplyIcon,
+      [COPY]: CopyIcon,
+      [DOWNLOAD]: DownloadIcon,
+      [CREATE_TICKET]: ConvertTicket,
+      [RESEND]: ReloadIcon,
+      [DELETE]: DeleteIcon,
+      [FORWARD]: ForwardIcon
+    };
+    const IconComponent = iconMapping[id];
+    return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+      customStyle: iconStyle
+    }) : null;
+  }
+  function renderAction() {
+    let {
+      id,
+      isShowInMore,
+      action
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      displayText,
+      iconTitle
+    } = action || dummyObject;
+    return /*#__PURE__*/React.createElement(MessageAction, {
+      displayText: displayText,
+      id: id,
+      index: id,
+      key: id,
+      renderIcon: renderIcon,
+      onClick: handleClickAction,
+      isShowInMore: isShowInMore,
+      iconTitle: iconTitle,
+      actionIconCustomStyle: actionIconCustomStyle,
+      moreItemCustomStyle: moreItemCustomStyle
+    });
+  }
+  function renderMoreIcon() {
+    return /*#__PURE__*/React.createElement(ActionIcon, {
+      renderIcon: () => /*#__PURE__*/React.createElement("div", {
+        className: moreIconClass
+      }, /*#__PURE__*/React.createElement(MoreIcon, null)),
+      customStyle: actionIconCustomStyle
+    });
+  }
+  const secondaryActions = renderHandler(renderSecondaryActions)();
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MessageActions, {
+    actions: allActions,
+    renderMoreIcon: renderMoreIcon,
+    defaultShowCount: defaultShowCount,
+    morePopupCustomStyle: morePopupCustomStyle
+  }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
+    className: secondaryActionsClass
+  }, secondaryActions) : null);
+}
+IMMessageActions.propTypes = imMessageActionsPropTypes;
+IMMessageActions.defaultProps = imMessageActionsDefaultProps;

package/es/IMMessageActions/css/IMMessageActions.module.css

@@ -0,0 +1,23 @@
+.varClass {
+  --imMessageActions-secondaryActions_margin: var(--imlib_size_5);
+  --imMessageActions-action_icon_size: var(--imlib_size_15);
+}
+
+[dir=ltr] .moreIcon svg {
+  transform: rotate(90deg);
+}
+
+[dir=rtl] .moreIcon svg {
+  transform: rotate(-90deg);
+}
+
+.secondaryActions {
+  composes: varClass;
+  margin-top: var(--imMessageActions-secondaryActions_margin);
+}
+
+.icon {
+  composes: varClass;
+  width: var(--imMessageActions-action_icon_size);
+  height: var(--imMessageActions-action_icon_size);
+}

package/es/IMMessageActions/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const moreIconClass = compileClassNames({
+    [style.moreIcon]: true
+  });
+  const secondaryActionsClass = compileClassNames({
+    [style.secondaryActions]: true
+  });
+  const iconClass = compileClassNames({
+    [style.icon]: true
+  });
+  return {
+    moreIconClass,
+    secondaryActionsClass,
+    iconStyle: {
+      base: iconClass
+    }
+  };
+}

package/es/IMMessageActions/index.js

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

package/es/IMMessageActions/props/defaultProps.js

@@ -0,0 +1,12 @@
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
+import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+const imMessageActionsDefaultProps = {
+  customStyle: dummyObject,
+  actionIconCustomStyle: dummyObject,
+  morePopupCustomStyle: dummyObject,
+  moreItemCustomStyle: dummyObject,
+  defaultShowCount: actionsDefaultShowCount,
+  actions: dummyArray
+};
+export default imMessageActionsDefaultProps;

package/es/IMMessageActions/props/propTypes.js

@@ -0,0 +1,30 @@
+/** ** Libraries *** */
+import PropTypes from "prop-types";
+
+/** ** Constants *** */
+import { defaultMessageActions } from "@zohoim/chat-components-utils/es/constants/messageActionConstants";
+const {
+  REPLY,
+  COPY,
+  DOWNLOAD,
+  CREATE_TICKET,
+  RESEND,
+  DELETE,
+  FORWARD
+} = defaultMessageActions;
+const imMessageActionsPropTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
+    displayText: PropTypes.string,
+    renderFunction: PropTypes.func,
+    iconTitle: PropTypes.string
+  })).isRequired,
+  defaultShowCount: PropTypes.number,
+  actionIconCustomStyle: PropTypes.object,
+  morePopupCustomStyle: PropTypes.object,
+  moreItemCustomStyle: PropTypes.object,
+  onSelect: PropTypes.func,
+  customStyle: PropTypes.object,
+  renderSecondaryActions: PropTypes.func
+};
+export default imMessageActionsPropTypes;

package/es/IMMessageAvatar/IMMessageAvatar.js

@@ -0,0 +1,45 @@
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import MessageAvatar from '../MessageAvatar/MessageAvatar';
+import IMIntegrationIcon from '../IMIntegrationIcon/IMIntegrationIcon';
+
+/** ** Constants *** */
+import imMessageAvatarDefaultProps from './props/defaultProps';
+import imMessageAvatarPropTypes from './props/propTypes';
+export default function IMMessageAvatar(props) {
+  const {
+    src,
+    alternateSrc,
+    title,
+    avatarSize,
+    name,
+    customStyle,
+    integrationName,
+    iconSize,
+    iconCustomStyle,
+    isCustomIcon,
+    renderCustomIcon
+  } = props;
+  function renderIcon() {
+    return /*#__PURE__*/React.createElement(IMIntegrationIcon, {
+      integrationName: integrationName,
+      size: iconSize,
+      customStyle: iconCustomStyle,
+      isCustom: isCustomIcon,
+      renderIcon: renderCustomIcon
+    });
+  }
+  return /*#__PURE__*/React.createElement(MessageAvatar, {
+    src: src,
+    alternateSrc: alternateSrc,
+    title: title,
+    size: avatarSize,
+    name: name,
+    renderIcon: renderIcon,
+    customStyle: customStyle
+  });
+}
+IMMessageAvatar.defaultProps = imMessageAvatarDefaultProps;
+IMMessageAvatar.propTypes = imMessageAvatarPropTypes;

package/es/IMMessageAvatar/index.js

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

package/es/IMMessageAvatar/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imMessageActionsDefaultProps = {
+  customStyle: dummyObject,
+  iconCustomStyle: dummyObject,
+  isCustomIcon: false,
+  title: 'RAVI KUMAR',
+  name: 'RAVI KUMAR'
+};
+export default imMessageActionsDefaultProps;

package/es/IMMessageAvatar/props/propTypes.js

@@ -0,0 +1,28 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+const imMessageAvatarPropTypes = {
+  src: PropTypes.string,
+  alternateSrc: PropTypes.string,
+  title: PropTypes.string,
+  avatarSize: PropTypes.string,
+  name: PropTypes.string,
+  customStyle: PropTypes.object,
+  integrationName: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
+  iconSize: PropTypes.string,
+  iconCustomStyle: PropTypes.object,
+  isCustomIcon: PropTypes.bool,
+  renderCustomIcon: PropTypes.string
+};
+export default imMessageAvatarPropTypes;

package/es/IMMessageStatus/IMMessageStatus.js

@@ -0,0 +1,69 @@
+/* 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 imMessageStatusDefaultProps from './props/defaultProps';
+import imMessageStatusPropTypes from './props/propTypes';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+
+/** ** Methods *** */
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMMessageStatus.module.css';
+
+/** ** Icons *** */
+import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
+import TickIcon from '../icons/iconSrc/messageStatus/Tick';
+import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
+import FailedIcon from '../icons/iconSrc/messageStatus/Failed';
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const messageStatusIconMapping = {
+  [OUTGOING]: ClockIcon,
+  [SAVED]: TickIcon,
+  [QUEUED]: TickIcon,
+  [SENT]: DoubleTickIcon,
+  [DELIVERED]: DoubleTickIcon,
+  [READ]: DoubleTickIcon,
+  [UNSENT]: FailedIcon,
+  [FAILED]: FailedIcon
+};
+export default function IMMessageStatus(props) {
+  const {
+    messageStatus,
+    customStyle,
+    title
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    statusClass
+  } = cssJSLogic(props, newStyle);
+
+  /* Render Icon */
+  const IconComponent = messageStatusIconMapping[messageStatus];
+  return IconComponent ? /*#__PURE__*/React.createElement("div", {
+    className: statusClass,
+    "data-title": title
+  }, /*#__PURE__*/React.createElement(IconComponent, null)) : null;
+}
+IMMessageStatus.propTypes = imMessageStatusPropTypes;
+IMMessageStatus.defaultProps = imMessageStatusDefaultProps;
+IMMessageStatus.displayName = 'IMMessageStatus';

package/es/IMMessageStatus/css/IMMessageStatus.module.css

@@ -0,0 +1,12 @@
+.messageStatus {
+  /*USe this class name status customization*/
+  color: #61667a;
+}
+
+.readStatus{
+  color: #0a73eb;
+}
+
+.failedStatus{
+  color: #de3535
+}

package/es/IMMessageStatus/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+/** ** Methods *** */
+import { compileClassNames } from "@zohodesk/utils";
+
+/** ** Constants *** */
+import messageStatusConstants from "@zohoim/chat-components-utils/es/constants/messageStatusConstants";
+const {
+  READ,
+  UNSENT,
+  FAILED
+} = messageStatusConstants;
+export default function cssJSLogic(props, style) {
+  const isRead = props.messageStatus === READ;
+  const isFailed = props.messageStatus === FAILED || props.messageStatus === UNSENT;
+  const statusClass = compileClassNames({
+    [style.messageStatus]: isRead || isFailed ? false : true,
+    [style.readStatus]: isRead,
+    [style.failedStatus]: isFailed
+  });
+  return {
+    statusClass
+  };
+}

package/es/IMMessageStatus/index.js

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

package/es/IMMessageStatus/props/defaultProps.js

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

package/es/IMMessageStatus/props/propTypes.js

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const imMessageStatusPropTypes = {
+  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]).isRequired,
+  customStyle: PropTypes.object,
+  title: PropTypes.string
+};
+export default imMessageStatusPropTypes;