@capillarytech/creatives-library 7.17.97 → 7.17.98

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.97",
+  "version": "7.17.98",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapDeviceContent/index.js

@@ -66,6 +66,8 @@ const CapDeviceContent = (props) => {
     onTagSelect,
     handleOnTagsContextChange,
     templateDescErrorHandler,
+    templateTitleError,
+    setTemplateTitleError,
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -119,7 +121,12 @@ const CapDeviceContent = (props) => {
   };
 
   const onTitleChange = ({ target: { value } }) => {
+    let error = templateDescErrorHandler(value);
+    if (value === '') {
+      error = formatMessage(messages.emptyTemplateMessageErrorMessage);
+    }
     setTitle(value);
+    setTemplateTitleError(error);
   };
 
   const onTemplateMediaTypeChange = ({ target: { value } }) => {
@@ -176,6 +183,11 @@ const CapDeviceContent = (props) => {
             value={title}
             size="default"
             isRequired
+            errorMessage={templateTitleError && (
+              <CapError className="inapp-template-message-error">
+                {templateTitleError}
+              </CapError>
+            )}
           />
         </CapRow>
         <CapRow className="creatives-inapp-media">

package/v2Components/CapDeviceContent/index.scss

@@ -48,7 +48,7 @@
         }
         .cap-custom-image-upload {
             .dragger-button.re-upload {
-                top: 12rem;
+                top: 13rem;
                 position: absolute;
                 right: $CAP_SPACE_20;
                 color: $FONT_COLOR_05;

package/v2Components/CapDeviceContent/tests/index.test.js

@@ -24,7 +24,7 @@ const renderComponent = (props) =>
 
 describe('Test CapDeviceContent', () => {
   it('test case for CapDeviceContent component Android pane', async () => {
-    renderComponent(deviceContentProps);
+    renderComponent({...deviceContentProps, templateDescErrorHandler: jest.fn()});
     const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
     fireEvent.change(msgBox[0], 'val');
     const copyLink = screen.getByRole('link', {
@@ -39,11 +39,13 @@ describe('Test CapDeviceContent', () => {
       panes: "iOS",
       buttonType: "CTA",
       setTemplateMediaType: jest.fn(),
+      setTemplateTitleError: jest.fn(),
       setButtonType: jest.fn(),
       setCtaData: jest.fn(),
       setTemplateMessage: jest.fn(),
       setTemplateMessageError: jest.fn(),
       setTitle: jest.fn(),
+      templateDescErrorHandler: jest.fn(),
       templateMediType: "IMAGE",
       addActionLink: true,
       ctaData: [

package/v2Components/CapInAppCTA/constants.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 
 export const DEEP_LINK = 'DEEP_LINK';
-export const EXTERNAL_LINK = 'EXTERNAL_LINK';
+export const EXTERNAL_URL = 'EXTERNAL_URL';
 export const WEBSITE = 'WEBSITE';
 
 export const CTA_OPTIONS = [
@@ -14,8 +14,8 @@ export const CTA_OPTIONS = [
     tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipDeepLink} />,
   },
   {
-    key: EXTERNAL_LINK,
-    value: EXTERNAL_LINK,
+    key: EXTERNAL_URL,
+    value: EXTERNAL_URL,
     label: <FormattedMessage {...messages.ctaLinkTypeExternal} />,
     tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipExternalLink} />,
   },

package/v2Components/CapInAppCTA/index.js

@@ -25,7 +25,7 @@ import {
 import {
   BTN_MAX_LENGTH,
   DEEP_LINK,
-  EXTERNAL_LINK,
+  EXTERNAL_URL,
   CTA_OPTIONS,
   URL_MAX_LENGTH,
 } from "./constants";
@@ -108,7 +108,7 @@ export const CapInAppCTA = (props) => {
       return true;
     } else if (urlType === DEEP_LINK && (ctaDeepLinkValue === "" || urlError)) {
       return true;
-    } else if (urlType === EXTERNAL_LINK && (url === "" || urlError)) {
+    } else if (urlType === EXTERNAL_URL && (url === "" || urlError)) {
       return true;
     }
   };
@@ -223,7 +223,7 @@ export const CapInAppCTA = (props) => {
               </>
 
             )}
-            {urlType === EXTERNAL_LINK && (
+            {urlType === EXTERNAL_URL && (
               <>
                 <CapHeading type="h4">
                   {formatMessage(messages.urlExternalLink)}

package/v2Components/MobilePushPreviewV2/index.js

@@ -14,6 +14,7 @@ import '../PreviewSideBar/_previewsidebar.scss';
 import { MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
 import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
+import { getCtaObject } from '../../v2Containers/InApp/utils';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -47,33 +48,13 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,
         mediaPreview: { inAppImageSrcAndroid: androidContent?.expandableDetails?.image },
-        ctaData: androidContent?.expandableDetails?.ctas?.map((cta, index) => {
-          const { type = '', actionText = '', actionLink = "" } = cta;
-          const ctaObject = {
-            index,
-            text: actionText,
-            url: actionLink,
-            urlType: type,
-            isSaved: true,
-          };
-          return ctaObject;
-        }),
+        ctaData: getCtaObject(androidContent?.expandableDetails?.ctas),
       };
       const iosPreviewContent = {
         templateTitle: iosContent?.title,
         templateMsg: iosContent?.message,
         mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.image },
-        ctaData: iosContent?.expandableDetails?.ctas?.map((cta, index) => {
-          const { type = '', actionText = '', actionLink = "" } = cta;
-          const ctaObject = {
-            index,
-            text: actionText,
-            url: actionLink,
-            urlType: type,
-            isSaved: true,
-          };
-          return ctaObject;
-        }),
+        ctaData: getCtaObject(iosContent?.expandableDetails?.ctas),
       };
       content = {
         inAppPreviewContent: device === ANDROID.toLowerCase() ? androidPreviewContent : iosPreviewContent,

package/v2Containers/InApp/constants.js

@@ -135,8 +135,26 @@ export const BUTTON_RADIO_OPTIONS = [
 ];
 
 export const INAPP_LAYOUT_DETAILS = {
-  POPUP: { tagColor: CAP_ORANGE01, tagTextColor: CAP_ORANGE, text: 'Pop-up'},
-  HEADER: { tagColor: CAP_PURPLE03, tagTextColor: CAP_PURPLE02, text: 'Header'},
-  FOOTER: { tagColor: CAP_PALE_GREY, tagTextColor: FONT_COLOR_05, text: 'Footer'},
-  FULLSCREEN: { tagColor: CAP_GREEN02, tagTextColor: CAP_GREEN01, text: 'Full screen'},
+  POPUP: {
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+    text: <FormattedMessage {...messages.popup} />,
+  },
+  HEADER: {
+    tagColor: CAP_PURPLE03,
+    tagTextColor: CAP_PURPLE02,
+    text: <FormattedMessage {...messages.header} />,
+  },
+  FOOTER: {
+    tagColor: CAP_PALE_GREY,
+    tagTextColor: FONT_COLOR_05,
+    text: <FormattedMessage {...messages.footer} />,
+  },
+  FULLSCREEN: {
+    tagColor: CAP_GREEN02,
+    tagTextColor: CAP_GREEN01,
+    text: <FormattedMessage {...messages.layoutFullScreen} />,
+  },
 };
+
+export const DEVICE_SUPPORTED = '1';

package/v2Containers/InApp/index.js

@@ -32,6 +32,7 @@ import {
   BIG_PICTURE,
   BIG_TEXT,
   DEEP_LINK,
+  DEVICE_SUPPORTED,
   INAPP_BUTTON_TYPES,
   INAPP_MEDIA_TYPES,
   INAPP_MESSAGE_LAYOUT_TYPES,
@@ -43,6 +44,7 @@ import { INAPP, SMS } from "../CreativesContainer/constants";
 import { ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY } from "../Whatsapp/constants";
 import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { getCdnUrl } from "../../utils/cdnTransformation";
+import { getCtaObject } from "./utils";
 let editContent = {};
 
 export const InApp = (props) => {
@@ -82,6 +84,8 @@ export const InApp = (props) => {
   const [templateMessageIos, setTemplateMessageIos] = useState("");
   const [templateMessageErrorAndroid, setTemplateMessageErrorAndroid] = useState(false);
   const [templateMessageErrorIos, setTemplateMessageErrorIos] = useState(false);
+  const [templateTitleErrorAndroid, setTemplateTitleErrorAndroid] = useState(false);
+  const [templateTitleErrorIos, setTemplateTitleErrorIos] = useState(false);
   const [accountId, setAccountId] = useState("");
   const [accessToken, setAccessToken] = useState("");
   const [accountName, setAccountName] = useState("");
@@ -116,7 +120,8 @@ export const InApp = (props) => {
         configs = {},
         name = "",
       } = accountObj;
-      const isAndroidSupported = configs.android === '1';
+      const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
       //get deep link keys in an array
       const deepLinkKeys = Object.values(JSON.parse(deepLinkObj));
       const keys = deepLinkKeys.map((link) => ({label: link.name, value: link.link, title: link.link }));
@@ -161,36 +166,30 @@ export const InApp = (props) => {
         const {
           title: androidTitle = '',
           message: androidMessage = '',
-          cta: androidCta = {},
+          ctas: androidCta = {},
           expandableDetails: androidExpandableDetails = {},
         } = androidContent || {};
+        const {
+          style: androidStyle,
+          image: androidImage,
+          ctas: androidCtas,
+        } = androidExpandableDetails || {};
+        const androidCtaLength = androidCtas?.length;
         setTitleAndroid(androidTitle);
         setTemplateMessageAndroid(androidMessage);
         setTemplateMediaType(
-          androidExpandableDetails?.style === BIG_TEXT
+          androidStyle === BIG_TEXT
             ? INAPP_MEDIA_TYPES.TEXT
             : INAPP_MEDIA_TYPES.IMAGE
         );
-        setInAppImageSrcAndroid(androidExpandableDetails?.image);
-        setDeepLinkValueAndroid(androidCta?.actionLink);
+        setInAppImageSrcAndroid(androidImage);
+        setDeepLinkValueAndroid(androidCta[0]?.actionLink);
         setAddActionLinkAndroid(!isEmpty(androidCta) && true);
         setButtonTypeAndroid(
-          androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
+          androidCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
         );
-        if (androidExpandableDetails?.ctas?.length > 0) {
-          setCtaDataAndroid(
-            androidExpandableDetails?.ctas?.map((cta, index) => {
-              const { type = '', actionText = '', actionLink = "" } = cta;
-              const obj = {
-                index,
-                text: actionText,
-                url: actionLink,
-                urlType: type,
-                isSaved: true,
-              };
-              return obj;
-            })
-          );
+        if (androidCtaLength > 0) {
+          setCtaDataAndroid(getCtaObject(androidCtas));
         }
       }
       const iosContent = editContent?.IOS;
@@ -198,30 +197,24 @@ export const InApp = (props) => {
         const {
           title: iosTitle = '',
           message: iosMessage = '',
-          cta: iosCta = {},
+          ctas: iosCta = {},
           expandableDetails: iosExpandableDetails = {},
         } = iosContent || {};
+        const {
+          style: iosStyle,
+          image: iosImage,
+          ctas: iosCtas,
+        } = iosExpandableDetails || {};
+        const iosCtaLength = iosCtas?.length;
         setTitleIos(iosTitle);
         setTemplateMessageIos(iosMessage);
-        setTemplateMediaType(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
-        setInAppImageSrcIos(iosExpandableDetails?.image);
-        setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
+        setTemplateMediaType(iosStyle === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+        setInAppImageSrcIos(iosImage);
+        setButtonTypeIos(iosCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
         setAddActionLinkIos(!isEmpty(iosCta) && true);
-        setDeepLinkValueIos(iosCta?.actionLink);
-        if (iosExpandableDetails?.ctas?.length > 0) {
-          setCtaDataIos(
-            iosExpandableDetails?.ctas?.map((cta, index) => {
-              const { type = '', actionText = '', actionLink = "" } = cta;
-              const obj = {
-                index,
-                text: actionText,
-                url: actionLink,
-                urlType: type,
-                isSaved: true,
-              };
-              return obj;
-            })
-          );
+        setDeepLinkValueIos(iosCta[0]?.actionLink);
+        if (iosCtaLength > 0) {
+          setCtaDataIos(getCtaObject(iosCtas));
         }
       }
     }
@@ -365,6 +358,8 @@ export const InApp = (props) => {
           templateMessage={templateMessageAndroid}
           setTemplateMessage={setTemplateMessageAndroid}
           setTemplateMessageError={setTemplateMessageErrorAndroid}
+          templateTitleError={templateTitleErrorAndroid}
+          setTemplateTitleError={setTemplateTitleErrorAndroid}
           addActionLink={addActionLinkAndroid}
           setAddActionLink={setAddActionLinkAndroid}
           deepLink={deepLink}
@@ -379,7 +374,8 @@ export const InApp = (props) => {
       ),
       tab: <FormattedMessage {...messages.Android} />,
       key: ANDROID,
-      isSupported: accountData?.selectedWeChatAccount?.configs?.android === '1',
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED,
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
     },
     {
       content: (
@@ -409,6 +405,8 @@ export const InApp = (props) => {
           templateMessage={templateMessageIos}
           setTemplateMessage={setTemplateMessageIos}
           setTemplateMessageError={setTemplateMessageErrorIos}
+          templateTitleError={templateTitleErrorIos}
+          setTemplateTitleError={setTemplateTitleErrorIos}
           addActionLink={addActionLinkIos}
           setAddActionLink={setAddActionLinkIos}
           deepLink={deepLink}
@@ -418,11 +416,12 @@ export const InApp = (props) => {
           tags={tags}
           onTagSelect={onTagSelect}
           handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
         />
       ),
       tab: <FormattedMessage {...messages.Ios} />,
       key: IOS,
-      isSupported: accountData?.selectedWeChatAccount?.configs?.android === '1',
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED,
     },
   ];
 
@@ -508,23 +507,34 @@ export const InApp = (props) => {
   };
 
   const isDisableDone = (device) => {
+    const isIosDevice = device === IOS;
+    const isAndroidDevice = device === ANDROID;
     //if template name is not entered
     if (isFullMode && templateName.trim() === '') {
       return true;
     }
     //if template message is not entered
     //for android
-    if (device === ANDROID && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+    if (isAndroidDevice && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+      return true;
+    }
+    if (isIosDevice && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+      return true;
+    }//for ios
+
+    //if template title is not entered
+    //for android
+    if (isAndroidDevice && (titleAndroid.trim() === '' || templateTitleErrorAndroid)) {
       return true;
     }
-    if (device === IOS && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+    if (isIosDevice && (titleIos.trim() === '' || templateTitleErrorIos)) {
       return true;
     }//for ios
     //if media type is image and the mediaType file is not uploaded
-    if (device === ANDROID && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+    if (isAndroidDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
       return true;
     }
-    if (device === IOS && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+    if (isIosDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
       return true;
     }
     //cta

package/v2Containers/InApp/messages.js

@@ -96,4 +96,19 @@ export default defineMessages({
     defaultMessage:
       "Create a button that lets customers take an action",
   },
+  popup: {
+    id: `${prefix}.popup`,
+    defaultMessage:
+      "Pop-up",
+  },
+  header: {
+    id: `${prefix}.header`,
+    defaultMessage:
+      "Header",
+  },
+  footer: {
+    id: `${prefix}.footer`,
+    defaultMessage:
+      "Footer",
+  },
 });

package/v2Containers/InApp/tests/index.test.js

@@ -14,6 +14,7 @@ import {
   location1,
 } from './mockData';
 import { metaEntities, getDefaultTags, injectedTags } from '../../Zalo/tests/mockData';
+import { getCtaObject } from '../utils';
 
 const mockActions = {
   getTemplateInfoById: jest.fn(),
@@ -140,3 +141,23 @@ describe('Test activity inApp container', () => {
     expect(copyLink).toBeInTheDocument();
   });
 });
+describe('test for getCtaObject function', () => {
+  it('getCtaObject function', () => {
+    const response = getCtaObject([{ type: "DEEP_LINK", actionText: "btn", actionLink: "url" }]);
+    expect(response).toEqual([{
+      index: 0,
+      text: "btn",
+      url: "url",
+      urlType: "DEEP_LINK",
+      isSaved: true,
+    }]);
+    const responseDefault = getCtaObject([{}]);
+    expect(responseDefault).toEqual([{
+      index: 0,
+      text: "",
+      url: "",
+      urlType: "",
+      isSaved: true,
+    }]);
+  });
+});

package/v2Containers/InApp/tests/mockData.js

@@ -171,7 +171,7 @@ export const accountData = {
                 buttons: [
                   {
                     index: 0,
-                    type: "EXTERNAL_LINK",
+                    type: "EXTERNAL_URL",
                     text: "test",
                     url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                     label: "Test_1",
@@ -196,7 +196,7 @@ export const accountData = {
                 buttons: [
                   {
                     index: 0,
-                    type: "EXTERNAL_LINK",
+                    type: "EXTERNAL_URL",
                     text: "test",
                     url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                     label: "Test_1",
@@ -247,7 +247,7 @@ export const accountData = {
                 buttons: [
                   {
                     index: 0,
-                    type: "EXTERNAL_LINK",
+                    type: "EXTERNAL_URL",
                     text: "test",
                     url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                     label: "Test_1",
@@ -276,7 +276,7 @@ export const accountData = {
                 buttons: [
                   {
                     index: 0,
-                    type: "EXTERNAL_LINK",
+                    type: "EXTERNAL_URL",
                     text: "testios",
                     url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                     label: "",
@@ -671,7 +671,7 @@ export const editData = {
               buttons: [
                 {
                   index: 0,
-                  type: "EXTERNAL_LINK",
+                  type: "EXTERNAL_URL",
                   text: "test",
                   url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                   label: "Test_1",
@@ -697,7 +697,7 @@ export const editData = {
               buttons: [
                 {
                   index: 0,
-                  type: "EXTERNAL_LINK",
+                  type: "EXTERNAL_URL",
                   text: "test",
                   url: "https://nightly.intouch.capillarytech.com/creatives/ui/v2",
                   label: "Test_1",

package/v2Containers/InApp/utils.js

@@ -0,0 +1,12 @@
+export const getCtaObject = (ctaData) =>
+  ctaData?.map((cta, index) => {
+    const { type = "", actionText = "", actionLink = "" } = cta;
+    const obj = {
+      index,
+      text: actionText,
+      url: actionLink,
+      urlType: type,
+      isSaved: true,
+    };
+    return obj;
+  });

package/v2Containers/Templates/_templates.scss

@@ -11,6 +11,7 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
+        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(3n+3) { //every 4th child
             margin-right: unset;
@@ -25,6 +26,7 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
+        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(4n+4) { //every 4th child
             margin-right: unset;
@@ -56,6 +58,9 @@
   }
 
   .pagination-container {
+    .cap-custom-card-list-row {
+      padding-bottom: 10rem;
+    }
     .FACEBOOK {
       .ant-card-body {
         background-color: $CAP_G09;
@@ -524,6 +529,10 @@
   border-bottom: solid 0.5px #D6D6D6;
 }
 
+.main-content{
+  overflow: hidden;
+}
+
 .wechat-filters,
 .line-filters {
   width: 100%;

package/v2Containers/Templates/index.js

@@ -1006,7 +1006,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       );
 
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
-      const inappBodyType = template?.versions?.base?.content?.ANDROID?.bodyType;
+      const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
+      const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
+      const inappBodyType = androidBodyType || iosBodyType;
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
@@ -1015,30 +1017,61 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             {currentChannel === INAPP && (
               <CapRow>
                 <CapColoredTag
-                  tagColor={INAPP_LAYOUT_DETAILS[inappBodyType].tagColor}
+                  tagColor={INAPP_LAYOUT_DETAILS[inappBodyType]?.tagColor}
                   tagTextColor={
-                    INAPP_LAYOUT_DETAILS[inappBodyType].tagTextColor
+                    INAPP_LAYOUT_DETAILS[inappBodyType]?.tagTextColor
                   }
-                  tagHeight="20px"
+                  tagHeight="1.25rem"
                   tagFontSize="12px"
                 >
-                  {INAPP_LAYOUT_DETAILS[inappBodyType].text}
+                  {INAPP_LAYOUT_DETAILS[inappBodyType]?.text}
                 </CapColoredTag>
               </CapRow>
             )}
           </span>
         ),
         extra: [
-          <CapTooltip title={this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <div className='zalo-view-tooltip'>{this.props.intl.formatMessage(messages.zaloPreview)}</div> : ''}>
+          <CapTooltip
+            title={
+              this.state.channel.toLowerCase() === ZALO_LOWERCASE ? (
+                <div className="zalo-view-tooltip">
+                  {this.props.intl.formatMessage(messages.zaloPreview)}
+                </div>
+              ) : (
+                ""
+              )
+            }
+          >
             <CapIcon
               className={`view-${channelLowerCase}`}
-              style={{ marginRight: '16px' }}
+              style={{ marginRight: "16px" }}
               type="eye"
-              onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
+              onClick={() => {
+                if (!this.props.isFullMode || this.props.isDltFromRcs) {
+                  this.props.handlePeviewTemplate(template);
+                } else {
+                  handlers.handlePreviewClick(template);
+                }
+              }}
             />
           </CapTooltip>,
         ],
-        hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
+        hoverOption: (
+          <CapButton
+            className={
+              this.props.isFullMode
+                ? `edit-${channelLowerCase}`
+                : `select-${channelLowerCase}`
+            }
+            onClick={(e) =>
+              handlers.handleEditClick(e, template, undefined, undefined, {
+                account: this.state.selectedAccount,
+              })
+            }
+          >
+            {hoverButtonText}
+          </CapButton>
+        ),
       };
       const {
         versions: {