@zohoim/chat-components 0.0.19 → 0.0.21

package/es/Theme/themeVariables/pureDark/greenTheme.js

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#252e27',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#999'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
     imPermaLink: {
       url_color: '#45a159'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -68,13 +61,6 @@ export default {
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
@@ -91,8 +77,10 @@ export default {
       read_color: '#45a159',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryGreen,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#312821',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#999'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
     imPermaLink: {
       url_color: '#ff801f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -68,13 +61,6 @@ export default {
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
@@ -91,8 +77,10 @@ export default {
       read_color: '#ff801f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryOrange,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2f2424',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#999'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
     imPermaLink: {
       url_color: '#e94f4f'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -68,13 +61,6 @@ export default {
       url_color: primaryRed,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
@@ -91,8 +77,10 @@ export default {
       read_color: '#e94f4f',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryRed,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -4,7 +4,6 @@ import { imIntegrationIcon, imTtIcon, messagetextColor } from '../commonThemeCol
 export default {
   library: 'chat_components',
   variables: {
-    // ActionIcon: {},
     actionIconWrapper: {
       color: actionIconWrapperColor,
       bg_color: '#2e2922',
@@ -20,11 +19,8 @@ export default {
       fileName_color: '#e2e4e6',
       fileName_color_failed: failedColor,
       fileSize_color: '#999',
-      fileSize_color_failed: failedColor
+      fileSize_color_failed: '#788190'
     },
-    // AttachmentIcon: {},
-    // Audio: {},
-    // AudioBubble: {},
     articleBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -38,28 +34,25 @@ export default {
     imAutoMessageInfo: {
       text_color: '#999'
     },
-    // IMInfoBubble: {},
     imIntegrationIcon,
     imTtIcon,
-    // IMMessage: {},
-    // IMMessageContent: {},
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
     imMessageMeta: {
       time_color: '#999'
     },
     imPermaLink: {
       url_color: '#d79835'
     },
-    // IMReplyBubble: {},
-    // IMTextBubble: {},
     imageBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
       alt_text_color: '#e2e4e6',
-      alt_text_color_failed: failedColor
+      alt_text_color_failed: failedColor,
+      border_color: '#161515',
+      border_color_failed: failedBdr
     },
-    // IMReplyBubble: {},
-    // InfoBubble: {},
-    // LazyLoadImage: {},
     locationBubble: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -68,13 +61,6 @@ export default {
       url_color: primaryYellow,
       url_color_failed: failedUrlColor
     },
-    // MediaBubbleWrapper: {},
-    // Message: {},
-    // MessageAction: {},
-    // MessageActions: {},
-    // MessageActionsMore: {},
-    // MessageActionsWrapper: {},
-    // MessageAvatar: {},
     messageBox: {
       incoming_bg_color: incomingBubbleBgColor,
       outgoing_bg_color: outgoingBubbleBgColor,
@@ -91,8 +77,10 @@ export default {
       read_color: '#d79835',
       failed_color: messageStatusFailedColor
     },
-    // MoreActionItem: {},
-    // ReplyBubble: {},
+    replyBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    },
     replyBubbleContent: {
       bg_color: '#212121',
       bg_color_failed: failedBg,
@@ -118,8 +106,10 @@ export default {
       see_more_color_failed: failedUrlColor,
       url_color: primaryYellow,
       url_color_failed: failedUrlColor
-    } // Video: {},
-    // VideoBubble: {}
-
+    },
+    videoBubble: {
+      border_color: '#161515',
+      border_color_failed: failedBdr
+    }
   }
 };

package/es/Theme/utils/getThemeConfigurations.js

@@ -15,7 +15,7 @@ import pureDarkOrange from '../themeVariables/pureDark/orangeTheme';
 import pureDarkRed from '../themeVariables/pureDark/redTheme';
 import pureDarkYellow from '../themeVariables/pureDark/yellowTheme';
 const modeMapping = {
-  [modeConstants.LIGHT]: 'default',
+  [modeConstants.LIGHT]: 'light',
   [modeConstants.DARK]: 'dark',
   [modeConstants.PURE_DARK]: 'pureDark'
 };

package/es/Video/css/Video.module.css

@@ -1,4 +1,5 @@
 .video {
   max-height: 100% ;
   width: 100% ;
+  border-radius: 3px;
 }

package/es/VideoBubble/VideoBubble.js

@@ -18,6 +18,9 @@ import style from './css/VideoBubble.module.css';
 import { Box } from '@zohodesk/components/es/Layout';
 import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Video from '../Video/Video';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
 export default function VideoBubble(props) {
   const {
     customStyle,
@@ -32,18 +35,25 @@ export default function VideoBubble(props) {
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    videoBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
   const renderMedia = useCallback(_ref => {
     let {
       fileURL,
       fileType
     } = _ref;
     return /*#__PURE__*/React.createElement(Box, {
-      className: newStyle.videoBubble
+      className: videoBubbleClass
     }, /*#__PURE__*/React.createElement(Video, _extends({
       fileType: fileType,
       fileURL: fileURL
     }, videoProps)));
-  }, [videoProps, newStyle.videoBubble]);
+  }, [videoProps, videoBubbleClass]);
   return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
     mediaDetails: videoDetails,
     renderMedia: renderMedia

package/es/VideoBubble/css/VideoBubble.module.css

@@ -1,4 +1,12 @@
-.videoBubble {
+.videoWrapper {
   width: var(--zd_size360) ;
   max-width: 100% ;
+  height: var(--zd_size193) ;
+  background-color: #000;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_videoBubble_border_color);
+}
+
+.videoWrapperFailed{
+  border-color: var(--imlib_chat_components_videoBubble_border_color_failed);
 }

package/es/VideoBubble/css/cssJSLogic.js

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

package/es/icons/factory/common/reply.svg

@@ -0,0 +1,6 @@
+<svg id='reply' viewBox='0 0 40 40'>
+  <path
+    class='path-0'
+    d='m17.42,33.06c-.39,0-.77-.13-1.09-.39L2.51,21.35c-.41-.33-.64-.83-.64-1.35s.23-1.02.64-1.35l13.83-11.31c.52-.43,1.22-.51,1.83-.22.61.29.98.88.98,1.56v5.61c12.4.03,17.81,10.94,18.73,14.79h0c.18.75-.13,1.5-.79,1.9-.65.4-1.48.34-2.07-.15-7.56-6.34-13.96-5.65-15.88-5.24v5.74c0,.67-.38,1.27-.98,1.56-.24.11-.49.17-.74.17Zm-13.41-13.06l13.14,10.75v-5.24c0-.89.6-1.65,1.47-1.85,1.99-.45,8.98-1.35,17.12,5.17-1.43-4.56-6.94-12.59-16.81-12.55,0,0,0,0-.01,0-.44,0-.87-.18-1.19-.5-.36-.36-.57-.86-.57-1.38v-5.15l-13.14,10.75Zm31.92,9.54h0s0,0,0,0Z'
+  />
+</svg>

package/es/icons/iconSrc/common/Reply.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import Icon from '@zohodesk/icon/es/Icon/Icon';
+export default function IconComponent(props) {
+  return /*#__PURE__*/React.createElement(Icon, props, /*#__PURE__*/React.createElement("svg", {
+    id: "reply",
+    viewBox: "0 0 40 40"
+  }, " ", /*#__PURE__*/React.createElement("path", {
+    className: "path-0",
+    d: "m17.42,33.06c-.39,0-.77-.13-1.09-.39L2.51,21.35c-.41-.33-.64-.83-.64-1.35s.23-1.02.64-1.35l13.83-11.31c.52-.43,1.22-.51,1.83-.22.61.29.98.88.98,1.56v5.61c12.4.03,17.81,10.94,18.73,14.79h0c.18.75-.13,1.5-.79,1.9-.65.4-1.48.34-2.07-.15-7.56-6.34-13.96-5.65-15.88-5.24v5.74c0,.67-.38,1.27-.98,1.56-.24.11-.49.17-.74.17Zm-13.41-13.06l13.14,10.75v-5.24c0-.89.6-1.65,1.47-1.85,1.99-.45,8.98-1.35,17.12,5.17-1.43-4.56-6.94-12.59-16.81-12.55,0,0,0,0-.01,0-.44,0-.87-.18-1.19-.5-.36-.36-.57-.86-.57-1.38v-5.15l-13.14,10.75Zm31.92,9.54h0s0,0,0,0Z"
+  }), " "));
+}
+IconComponent.propTypes = Icon.propTypes;

package/es/icons/iconSrc/common/index.js

@@ -1 +1,2 @@
-export { default as Article } from './Article';
+export { default as Article } from './Article';
+export { default as Reply } from './Reply';

package/es/im/IMIntegrationIcon/IMIntegrationIcon.js

@@ -1,15 +1,6 @@
 /** ** Libraries *** */
-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/TtLine'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
-
+import React, { useCallback } from 'react';
+import Icon from '@zohodesk/icons/es/Icon';
 /** ** CSS *** */
 
 import style from './css/IMIntegrationIcon.module.css';
@@ -25,21 +16,18 @@ import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/const
 const {
   WHATSAPP,
   TELEGRAM,
-  INSTAGRAM,
-  ASAP,
+  IM_TALK,
   WECHAT,
   TWILLIO,
   LINE
 } = integrationConstants;
-const integrationIconMapping = {
-  [WHATSAPP]: WhatsappIcon,
-  [TELEGRAM]: TelegramIcon,
-  [INSTAGRAM]: InstagramIcon,
-  [ASAP]: ASAPIcon,
-  [WECHAT]: WeChatIcon,
-  [TWILLIO]: TwillioIcon,
-  [LINE]: LineIcon // [TWITTER]: TwitterIcon
-
+const fontIconMap = {
+  [TWILLIO]: 'ZD-TT-imtwillio',
+  [WHATSAPP]: 'ZD-TT-whatsApp',
+  [TELEGRAM]: 'ZD-TT-imTelegram',
+  [WECHAT]: 'ZD-TT-imWeChat',
+  [LINE]: 'ZD-TT-imLine',
+  [IM_TALK]: 'ZD-TT-imASAP'
 };
 export default function IMIntegrationIcon(props) {
   const {
@@ -56,25 +44,23 @@ export default function IMIntegrationIcon(props) {
   /* css classnames added based on logic */
 
   const {
-    iconWrapperClass,
-    iconClass
+    iconWrapperClass
   } = cssJSLogic({
     integrationName,
     size
   }, newStyle);
-  const iconStyle = useMemo(() => ({
-    base: iconClass
-  }), [iconClass]);
   const renderDefaultIcon = useCallback(() => {
-    const IntegrationIcon = integrationIconMapping[integrationName] || null;
-    return IntegrationIcon ? /*#__PURE__*/React.createElement("div", {
+    const iconName = fontIconMap[integrationName];
+    return iconName ? /*#__PURE__*/React.createElement("div", {
       className: iconWrapperClass,
       "data-title": title,
       onClick: onClick
-    }, /*#__PURE__*/React.createElement(IntegrationIcon, {
-      customStyle: iconStyle
+    }, /*#__PURE__*/React.createElement(Icon, {
+      iconClass: newStyle.fontIcon,
+      name: iconName,
+      size: "12"
     })) : null;
-  }, [integrationName, title, onClick, iconWrapperClass, iconStyle]);
+  }, [integrationName, title, onClick, iconWrapperClass, newStyle.fontIcon]);
   return renderCustomIcon ? renderCustomIcon({
     integrationName
   }) : renderDefaultIcon();

package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -13,36 +13,6 @@
   border-radius: 50%;
 }
 
-.integrationIcon :global(.path-0),
-.twillioIcon :global(.cls-1),
-.asapIcon :global(.cls-1),
-.weChatIcon :global(.cls-1),
-.weChatIcon :global(.path-0),
-.lineIcon :global(.cls-1) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
-}
-
-.integrationIcon :global(.path-1),
-.twillioIcon :global(.path-0),
-.twillioIcon :global(.path-1),
-.twillioIcon :global(.path-2),
-.twillioIcon :global(.path-3),
-.twillioIcon :global(.path-4),
-.asapIcon :global(.path-0),
-.asapIcon :global(.path-1),
-.asapIcon :global(.path-2),
-.weChatIcon :global(.cls-2),
-.weChatIcon :global(.path-2),
-.weChatIcon :global(.path-3),
-.weChatIcon :global(.path-4),
-.lineIcon :global(.cls-2),
-.lineIcon :global(.path-0),
-.lineIcon :global(.path-1),
-.lineIcon :global(.path-2),
-.lineIcon :global(.path-3) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
-}
-
 .small {
   width: var(--integrationIcon-small_height);
   height: var(--integrationIcon-small_width);
@@ -88,3 +58,11 @@
 .asapIcon {
   background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
 }
+
+.fontIcon :global .path1::before {
+  color:  var(--imlib_chat_components_imIntegrationIcon_path0_color);;
+}
+
+.fontIcon :global .path2::before {
+  color:var(--imlib_chat_components_imIntegrationIcon_path1_color);
+}

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

@@ -8,7 +8,7 @@ const {
   WHATSAPP,
   TELEGRAM,
   INSTAGRAM,
-  ASAP,
+  IM_TALK,
   WECHAT,
   TWILLIO,
   LINE
@@ -21,7 +21,7 @@ export default function cssJSLogic(props, style) {
   const isWhatsAppIcon = integrationName === WHATSAPP;
   const isTelegramIcon = integrationName === TELEGRAM;
   const isInstagramIcon = integrationName === INSTAGRAM;
-  const isASAPIcon = integrationName === ASAP;
+  const isIMTalkIcon = integrationName === IM_TALK;
   const isWeChatIcon = integrationName === WECHAT;
   const isTwillioIcon = integrationName === TWILLIO;
   const isLineIcon = integrationName === LINE; // const isTwitterIcon = integrationName === TWITTER;
@@ -35,7 +35,7 @@ export default function cssJSLogic(props, style) {
     [style.whatsappIcon]: isWhatsAppIcon,
     [style.telegramIcon]: isTelegramIcon,
     [style.instagramIcon]: isInstagramIcon,
-    [style.asapIcon]: isASAPIcon,
+    [style.asapIcon]: isIMTalkIcon,
     [style.weChatIcon]: isWeChatIcon,
     [style.twillioIcon]: isTwillioIcon,
     [style.lineIcon]: isLineIcon // [style.twitterIcon]: isTwitterIcon