@capillarytech/creatives-library 7.17.97-alpha.0 → 7.17.98

package/package.json

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

package/v2Components/CapDeviceContent/index.js

@@ -65,6 +65,9 @@ const CapDeviceContent = (props) => {
     tags,
     onTagSelect,
     handleOnTagsContextChange,
+    templateDescErrorHandler,
+    templateTitleError,
+    setTemplateTitleError,
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -73,7 +76,7 @@ const CapDeviceContent = (props) => {
   const isMediaTypeImage = INAPP_MEDIA_TYPES.IMAGE === templateMediaType;
   const isBtnTypeCta = buttonType === INAPP_BUTTON_TYPES.CTA;
   const onTemplateMessageChange = ({ target: { value } }) => {
-    let error = '';
+    let error = templateDescErrorHandler(value);
     if (value === '') {
       error = formatMessage(messages.emptyTemplateMessageErrorMessage);
     }
@@ -118,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 } }) => {
@@ -175,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/FormBuilder/index.js

@@ -929,7 +929,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         // Check if template subject present in form data from Loyalty, DVS, Timeline
         if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
-          if ((data && data.trim() === '') || !data) {
+          if (data && data.trim() === '') {
             errorData[index] = true;
             isValid = false;
           } else {

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,35 +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?.buttons?.map((cta) => {
-          const { index, type, text, url = "", label } = cta;
-          const ctaObject = {
-            index,
-            text,
-            url,
-            urlType: type,
-            isSaved: true,
-            label,
-          };
-          return ctaObject;
-        }),
+        ctaData: getCtaObject(androidContent?.expandableDetails?.ctas),
       };
       const iosPreviewContent = {
         templateTitle: iosContent?.title,
         templateMsg: iosContent?.message,
         mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.image },
-        ctaData: iosContent?.expandableDetails?.buttons?.map((cta) => {
-          const { index, type, text, url = "", label } = cta;
-          const ctaObject = {
-            index,
-            text,
-            url,
-            urlType: type,
-            isSaved: true,
-            label,
-          };
-          return ctaObject;
-        }),
+        ctaData: getCtaObject(iosContent?.expandableDetails?.ctas),
       };
       content = {
         inAppPreviewContent: device === ANDROID.toLowerCase() ? androidPreviewContent : iosPreviewContent,

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -38,7 +38,7 @@
               }
       
               .inapp-content-POPUP-ANDROID {
-                margin-top: $CAP_SPACE_12;
+                margin-top: $CAP_SPACE_08;
                 margin-right: $CAP_SPACE_08;
                 margin-left: $CAP_SPACE_08;
                 width: 178px;
@@ -81,7 +81,7 @@
                 left: 26%;
                 bottom: -21px;
                 text-align: center;
-                top: 22%;
+                top: 22px;
               }
       
               .inapp-image-HEADER-ANDROID {
@@ -221,7 +221,7 @@
       
               .inapp-content-FULLSCREEN-ANDROID {
                 width: 186px;
-                height: 144px;
+                max-height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;
@@ -440,7 +440,7 @@
       
               .inapp-content-FULLSCREEN-iOS {
                 width: 186px;
-                height: 144px;
+                max-height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -808,6 +808,9 @@ export function SlideBoxContent(props) {
           query,
           search: '',
         }}
+        getFormData={getFormData}
+        isGetFormData={isGetFormData}
+        templateData={templateData}
       />
       )}
 

package/v2Containers/CreativesContainer/index.js

@@ -291,12 +291,14 @@ export class Creatives extends React.Component {
             type: channel,
             name: templateData.messageSubject,
             versions: {
-              content: {
-                ANDROID: templateData.androidContent,
-                IOS: templateData.iosContent,
+              base: {
+                content: {
+                  ANDROID: templateData?.androidContent,
+                  IOS: templateData?.iosContent,
+                },
               },
             },
-            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+            definition: {accountId: templateData?.accountId, mode: mode?.toLowerCase()},
           };
           break;
         }

package/v2Containers/Email/index.js

@@ -2069,13 +2069,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[0].selectedLanguages = [];
       let tabKey;
       if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
-        const templateSubject = formData?.['template-subject'];
-        const baseSubject = data?.base?.subject;
-        if (templateSubject === '') {
-          formData['template-subject'] = '';
-        } else if (!templateSubject && baseSubject) {
-          formData['template-subject'] = baseSubject;
-        }
+        formData['template-subject'] = data.base.subject ? data.base.subject : '';
         const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
         let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
 

package/v2Containers/InApp/constants.js

@@ -1,5 +1,15 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import {
+  CAP_ORANGE,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_ORANGE01,
+  CAP_GREEN01,
+  CAP_GREEN02,
+  CAP_PALE_GREY,
+  FONT_COLOR_05,
+} from '@capillarytech/cap-ui-library/styled/variables';
 import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import { WEBSITE } from "../../v2Components/CapInAppCTA/constants";
@@ -123,3 +133,28 @@ export const BUTTON_RADIO_OPTIONS = [
     ),
   },
 ];
+
+export const INAPP_LAYOUT_DETAILS = {
+  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,9 +120,12 @@ export const InApp = (props) => {
         configs = {},
         name = "",
       } = accountObj;
+      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 }));
+      setPanes(isAndroidSupported ? ANDROID : IOS);
       setDeepLink(keys);
       setAccountId(sourceAccountIdentifier);
       setAccessToken(configs.accessToken || "");
@@ -147,7 +154,7 @@ export const InApp = (props) => {
       name = "",
       versions = {},
       createdAt = "",
-    } = isFullMode ? editData.templateDetails || {} : templateData || {};
+    } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
     if (editContent && !isEmpty(editContent)) {
       setEditFlow(true);
@@ -155,68 +162,60 @@ export const InApp = (props) => {
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
       const androidContent = editContent?.ANDROID;
-      const {
-        title: androidTitle,
-        message: androidMessage,
-        cta: androidCta,
-        expandableDetails: androidExpandableDetails,
-      } = androidContent;
-      setTitleAndroid(androidTitle);
-      setTemplateMessageAndroid(androidMessage);
-      setTemplateMediaType(
-        androidExpandableDetails?.style === BIG_TEXT
-          ? INAPP_MEDIA_TYPES.TEXT
-          : INAPP_MEDIA_TYPES.IMAGE
-      );
-      setInAppImageSrcAndroid(androidExpandableDetails?.image);
-      setDeepLinkValueAndroid(androidCta?.actionLink);
-      setAddActionLinkAndroid(!isEmpty(androidCta) && true);
-      setButtonTypeAndroid(
-        androidExpandableDetails?.ctas?.length ? 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 (!isEmpty(androidContent)) {
+        const {
+          title: androidTitle = '',
+          message: androidMessage = '',
+          ctas: androidCta = {},
+          expandableDetails: androidExpandableDetails = {},
+        } = androidContent || {};
+        const {
+          style: androidStyle,
+          image: androidImage,
+          ctas: androidCtas,
+        } = androidExpandableDetails || {};
+        const androidCtaLength = androidCtas?.length;
+        setTitleAndroid(androidTitle);
+        setTemplateMessageAndroid(androidMessage);
+        setTemplateMediaType(
+          androidStyle === BIG_TEXT
+            ? INAPP_MEDIA_TYPES.TEXT
+            : INAPP_MEDIA_TYPES.IMAGE
         );
+        setInAppImageSrcAndroid(androidImage);
+        setDeepLinkValueAndroid(androidCta[0]?.actionLink);
+        setAddActionLinkAndroid(!isEmpty(androidCta) && true);
+        setButtonTypeAndroid(
+          androidCtaLength ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
+        );
+        if (androidCtaLength > 0) {
+          setCtaDataAndroid(getCtaObject(androidCtas));
+        }
       }
       const iosContent = editContent?.IOS;
-      const {
-        title: iosTitle,
-        message: iosMessage,
-        cta: iosCta,
-        expandableDetails: iosExpandableDetails,
-      } = iosContent;
-      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);
-      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;
-          })
-        );
+      if (!isEmpty(iosContent)) {
+        const {
+          title: iosTitle = '',
+          message: iosMessage = '',
+          ctas: iosCta = {},
+          expandableDetails: iosExpandableDetails = {},
+        } = iosContent || {};
+        const {
+          style: iosStyle,
+          image: iosImage,
+          ctas: iosCtas,
+        } = iosExpandableDetails || {};
+        const iosCtaLength = iosCtas?.length;
+        setTitleIos(iosTitle);
+        setTemplateMessageIos(iosMessage);
+        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[0]?.actionLink);
+        if (iosCtaLength > 0) {
+          setCtaDataIos(getCtaObject(iosCtas));
+        }
       }
     }
   }, [editData.templateDetails || templateData]);
@@ -359,6 +358,8 @@ export const InApp = (props) => {
           templateMessage={templateMessageAndroid}
           setTemplateMessage={setTemplateMessageAndroid}
           setTemplateMessageError={setTemplateMessageErrorAndroid}
+          templateTitleError={templateTitleErrorAndroid}
+          setTemplateTitleError={setTemplateTitleErrorAndroid}
           addActionLink={addActionLinkAndroid}
           setAddActionLink={setAddActionLinkAndroid}
           deepLink={deepLink}
@@ -373,6 +374,8 @@ export const InApp = (props) => {
       ),
       tab: <FormattedMessage {...messages.Android} />,
       key: ANDROID,
+      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: (
@@ -402,6 +405,8 @@ export const InApp = (props) => {
           templateMessage={templateMessageIos}
           setTemplateMessage={setTemplateMessageIos}
           setTemplateMessageError={setTemplateMessageErrorIos}
+          templateTitleError={templateTitleErrorIos}
+          setTemplateTitleError={setTemplateTitleErrorIos}
           addActionLink={addActionLinkIos}
           setAddActionLink={setAddActionLinkIos}
           deepLink={deepLink}
@@ -411,10 +416,12 @@ export const InApp = (props) => {
           tags={tags}
           onTagSelect={onTagSelect}
           handleOnTagsContextChange={handleOnTagsContextChange}
+          templateDescErrorHandler={templateDescErrorHandler}
         />
       ),
       tab: <FormattedMessage {...messages.Ios} />,
       key: IOS,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED,
     },
   ];
 
@@ -499,24 +506,35 @@ export const InApp = (props) => {
     );
   };
 
-  const isDisableDone = () => {
+  const isDisableDone = (device) => {
+    const isIosDevice = device === IOS;
+    const isAndroidDevice = device === ANDROID;
     //if template name is not entered
-    if (templateName.trim() === '') {
+    if (isFullMode && templateName.trim() === '') {
       return true;
     }
     //if template message is not entered
     //for android
-    if (panes === ANDROID && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+    if (isAndroidDevice && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
       return true;
     }
-    if (panes === IOS && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+    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 (isIosDevice && (titleIos.trim() === '' || templateTitleErrorIos)) {
       return true;
     }//for ios
     //if media type is image and the mediaType file is not uploaded
-    if (panes === ANDROID && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+    if (isAndroidDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
       return true;
     }
-    if (panes === IOS && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+    if (isIosDevice && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
       return true;
     }
     //cta
@@ -581,7 +599,7 @@ export const InApp = (props) => {
       versions: {
         base: {
           content: {
-            ANDROID: {
+            ANDROID: !isDisableDone(ANDROID) ? {
               ...commonDevicePayload,
               title: titleAndroid,
               message: templateMessageAndroid,
@@ -595,9 +613,11 @@ export const InApp = (props) => {
                 }),
               },
               custom: [],
-              cta: deepLinkValueAndroid ? {type: DEEP_LINK, actionLink: deepLinkValueAndroid} : {},
-            },
-            IOS: {
+              ...(deepLinkValueAndroid && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
+              }),
+            } : {},
+            IOS: !isDisableDone(IOS) ? {
               ...commonDevicePayload,
               title: titleIos,
               message: templateMessageIos,
@@ -611,8 +631,10 @@ export const InApp = (props) => {
                 }),
               },
               custom: [],
-              cta: deepLinkValueIos ? {type: DEEP_LINK, actionLink: deepLinkValueIos} : {},
-            },
+              ...(deepLinkValueIos && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
+              }),
+            } : {},
           },
         },
       },
@@ -696,7 +718,7 @@ export const InApp = (props) => {
           {isFullMode && createModeContent}
           {/* device tab */}
           <CapTab
-            panes={PANES}
+            panes={PANES.filter((devicePane) => devicePane?.isSupported === true)}
             onChange={(value) => {
               setPanes(value);
             }}
@@ -710,12 +732,12 @@ export const InApp = (props) => {
           {getPreviewSection()}
         </CapColumn>
       </CapRow>
-      <div className="inapp-footer">
+      <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
         {
           <>
             <CapButton
               onClick={onDoneCallback()}
-              disabled={isDisableDone()}
+              disabled={isDisableDone(panes)}
               className="inapp-create-btn"
             >
               {isEditFlow ? (
@@ -725,7 +747,11 @@ export const InApp = (props) => {
                   <FormattedMessage {...globalMessages.done} />
                 )
               ) : (
-                <FormattedMessage {...messages.create} />
+                isFullMode ? (
+                  <FormattedMessage {...messages.create} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
               )}
             </CapButton>
           </>

package/v2Containers/InApp/index.scss

@@ -37,7 +37,6 @@
 .inapp-footer {
   background-color: $CAP_WHITE;
   bottom: 0;
-  // position: fixed;
   width: 100%;
   padding: $CAP_SPACE_20 0;
   z-index: 1;
@@ -45,4 +44,7 @@
   .ant-btn {
     margin-right: $CAP_SPACE_16;
   }
+}
+.inapp-footer-lib {
+  position: fixed;
 }

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/index.js

@@ -49,6 +49,7 @@ import {
   CapInfoNote,
   CapImage,
   CapStatus,
+  CapColoredTag,
 } from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
@@ -108,6 +109,7 @@ import {
   HOST_TWILIO,
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
+import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
@@ -823,7 +825,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
           queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
-        if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE.includes](this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
@@ -1004,22 +1006,73 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       );
 
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
-      const templateData =
-        {
-          key: `${currentChannel}-card-${template?.name}`,
-          title: <span title={template?.name} >{template?.name}</span>,
-          extra: [
-            <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' }}
-                type="eye"
-                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>,
-        };
+      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: (
+          <span title={template?.name}>
+            {template?.name}
+            {currentChannel === INAPP && (
+              <CapRow>
+                <CapColoredTag
+                  tagColor={INAPP_LAYOUT_DETAILS[inappBodyType]?.tagColor}
+                  tagTextColor={
+                    INAPP_LAYOUT_DETAILS[inappBodyType]?.tagTextColor
+                  }
+                  tagHeight="1.25rem"
+                  tagFontSize="12px"
+                >
+                  {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>
+              ) : (
+                ""
+              )
+            }
+          >
+            <CapIcon
+              className={`view-${channelLowerCase}`}
+              style={{ marginRight: "16px" }}
+              type="eye"
+              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>
+        ),
+      };
       const {
         versions: {
           base: {