@zohoim/chat-components 0.0.13 → 0.0.15

package/es/im/ArticleBubble/ArticleBubble.js

@@ -0,0 +1,67 @@
+/** ** Libraries *** */
+import React, { useMemo, Fragment } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useArticleBubble from '@zohoim/chat-components-hooks/es/im/ArticleBubble/useArticleBubble';
+/** ** Constants *** */
+
+import articleBubbleDefaultProps from './props/defaultProps';
+import articleBubblePropTypes from './props/propTypes';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+/** ** Styles *** */
+
+import style from './css/ArticleBubble.module.css';
+/** ** Icons *** */
+
+import ArticleIcon from '../../icons/iconSrc/common/Article';
+export default function ArticleBubble(props) {
+  const {
+    customStyle,
+    info,
+    articleDetails,
+    onClick: propOnClick
+  } = props;
+  const {
+    title,
+    summary
+  } = articleDetails;
+  const {
+    onClick,
+    webUrl
+  } = useArticleBubble({
+    articleDetails,
+    onClick: propOnClick
+  });
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconCustomStyle = useMemo(() => ({
+    base: newStyle.articleIcon
+  }), [newStyle.articleIcon]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, /*#__PURE__*/React.createElement(ArticleIcon, {
+    customStyle: iconCustomStyle
+  }), /*#__PURE__*/React.createElement(Box, {
+    className: style.content,
+    flexible: true
+  }, info)), /*#__PURE__*/React.createElement("a", {
+    className: newStyle.articleWrapper,
+    href: webUrl,
+    onClick: onClick,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.title
+  }, title), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.summary
+  }, summary)));
+}
+ArticleBubble.propTypes = articleBubblePropTypes;
+ArticleBubble.defaultProps = articleBubbleDefaultProps;
+ArticleBubble.displayName = 'ArticleBubble';

package/es/im/ArticleBubble/css/ArticleBubble.module.css

@@ -0,0 +1,57 @@
+.articleWrapper {
+  display: block;
+  /* margin: 4px 0 2px; */
+  padding: var(--zd_size8) var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_articleBubble_bg_color);
+  border-radius: 3px;
+  cursor: pointer;
+  border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
+}
+
+.title {
+  color: var(--imlib_chat_components_articleBubble_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
+}
+
+.summary {
+  color: var(--imlib_chat_components_articleBubble_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  max-height: var(--zd_size40) ;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.articleIcon {
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size21)  !important;
+  height: var(--zd_size21)  !important;
+}
+
+.articleIcon :global(.path-0) {
+  /* fill: var(--imlib_chat_components_imIntegrationIcon_path0_color); */
+  fill: rgba(200,203,220,0.7);
+}
+
+.articleIcon :global(.path-1) {
+  /* fill: var(--imlib_chat_components_imIntegrationIcon_path1_color); */
+  fill: #000;
+}
+
+.content{
+  composes: dotted from "../../css/common.module.css";
+}
+
+[dir=ltr] .content{
+  margin-left: var(--zd_size8);
+}
+
+[dir=rtl] .content{
+  margin-right: var(--zd_size8);
+}

package/es/{ArticleBubble → im/ArticleBubble}/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const articleBubbleDefaultProps = {
   customStyle: dummyObject
 };

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

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const articleBubblePropTypes = {
+  articleDetails: PropTypes.shape({
+    summary: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    webUrl: PropTypes.string
+  }).isRequired,
+  customStyle: PropTypes.object,
+  info: PropTypes.string,
+  onClick: PropTypes.func
+};
+export default articleBubblePropTypes;

package/es/im/IMAutoMessageInfo/IMAutoMessageInfo.js

@@ -1,39 +1,29 @@
-/* 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 useIMAutoMessageInfo from '@zohoim/chat-components-hooks/es/im/IMAutoMessageInfo/useIMAutoMessageInfo';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import imAutoMessageInfoDefaultProps from './props/defaultProps';
 import imAutoMessageInfoPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/IMAutoMessageInfo.module.css';
 export default function IMAutoMessageInfo(props) {
   const {
-    autoMessageContent,
-    autoMessageTitle
-  } = useIMAutoMessageInfo(props);
-  const {
+    autoMessageType,
+    autoMessagesI18N,
+    autoMessagesTitleI18N,
     customStyle
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    imAutoMessageInfoClass
-  } = cssJSLogic(props, newStyle);
+  const autoMessageContent = autoMessagesI18N[autoMessageType] || '';
+  const autoMessageTitle = autoMessagesTitleI18N[autoMessageType] || '';
   return autoMessageContent ? /*#__PURE__*/React.createElement("div", {
-    className: imAutoMessageInfoClass,
+    className: newStyle.imAutoMessageInfo,
     "data-title": autoMessageTitle
   }, autoMessageContent) : null;
 }

package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css

@@ -1,12 +1,11 @@
 .varClass {
-  --imAutoMessageInfo-font_size: var(--imlib_size_13);
-  --imAutoMessageInfo-max_width: var(--imlib_size_100);
+  --imAutoMessageInfo-font_size: var(--zd_font_size13);
+  --imAutoMessageInfo-max_width: var(--zd_size100);
   --imAutoMessageInfo-letter_spacing: 0.2px;
 }
 
 .imAutoMessageInfo {
   composes: varClass;
-
   font-size: var(--imAutoMessageInfo-font_size);
   letter-spacing: var(--imAutoMessageInfo-letter_spacing);
   max-width: var(--imAutoMessageInfo-max_width);

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

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imAutoMessageInfoDefaultProps = {
   customStyle: dummyObject
 };

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

@@ -1,6 +1,8 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-import { autoMessageTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+/** ** Constants *** */
+
+import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
 const {
   WELCOMEMSG,
   WORKFLOW_MESSAGE,
@@ -8,19 +10,19 @@ const {
   UN_SUPPORTED_FILE
 } = autoMessageTypes;
 const imAutoMessageInfoPropTypes = {
-  customStyle: PropTypes.object,
-  autoMessageType: PropTypes.oneOf([WELCOMEMSG, WORKFLOW_MESSAGE, WORKFLOW_NOTIFICATION, UN_SUPPORTED_FILE]),
+  autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)).isRequired,
   autoMessagesI18N: PropTypes.shape({
+    [UN_SUPPORTED_FILE]: PropTypes.string,
     [WELCOMEMSG]: PropTypes.string,
     [WORKFLOW_MESSAGE]: PropTypes.string,
-    [WORKFLOW_NOTIFICATION]: PropTypes.string,
-    [UN_SUPPORTED_FILE]: PropTypes.string
-  }),
+    [WORKFLOW_NOTIFICATION]: PropTypes.string
+  }).isRequired,
   autoMessagesTitleI18N: PropTypes.shape({
+    [UN_SUPPORTED_FILE]: PropTypes.string,
     [WELCOMEMSG]: PropTypes.string,
     [WORKFLOW_MESSAGE]: PropTypes.string,
-    [WORKFLOW_NOTIFICATION]: PropTypes.string,
-    [UN_SUPPORTED_FILE]: PropTypes.string
-  })
+    [WORKFLOW_NOTIFICATION]: PropTypes.string
+  }).isRequired,
+  customStyle: PropTypes.object
 };
 export default imAutoMessageInfoPropTypes;

package/es/im/IMInfoBubble/IMInfoBubble.js

@@ -1,29 +1,27 @@
-/* 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 useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import imInfoBubbleDefaultProps from './props/defaultProps';
 import imInfoBubblePropTypes from './props/propTypes';
-
 /** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
+
 import style from './css/IMInfoBubble.module.css';
 export default function IMInfoBubble(props) {
   const {
     customStyle
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     imInfoBubbleClass
   } = cssJSLogic(props, newStyle);

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

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

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/TtLine'; // 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;