@capillarytech/creatives-library 7.17.94 → 7.17.96

package/containers/Ebill/index.js

@@ -956,7 +956,6 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
         }
         temp.injectedEvents = {};
         _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         

package/containers/MobilePush/Edit/index.js

@@ -1779,7 +1779,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
         }
         _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;

package/package.json

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

package/v2Components/CapDeviceContent/index.js

@@ -8,6 +8,7 @@ import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
 import CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import CapLink from "@capillarytech/cap-ui-library/CapLink";
 import CapError from "@capillarytech/cap-ui-library/CapError";
@@ -150,7 +151,7 @@ const CapDeviceContent = (props) => {
 
   return (
     <>
-      <div className="creatives-device-content">
+      <CapRow className="creatives-device-content">
         <CapLink
           title={isAndroid
               ? formatMessage(messages.copyContentFromIOS)
@@ -158,15 +159,15 @@ const CapDeviceContent = (props) => {
           className="inapp-copy-content"
           onClick={onCopyTitleAndContent}
           />
-        <div className="creatives-inapp-title">
-          <div
+        <CapRow className="creatives-inapp-title">
+          <CapColumn
             className="inapp-content-main"
           >
             <CapHeading type="h5" className="inapp-title">
               {formatMessage(messages.title)}
             </CapHeading>
             {getTagList(0)} {/* here 0 signifies the tags for template title */}
-          </div>
+          </CapColumn>
           <CapInput
             id="inapp-title-name-input"
             onChange={onTitleChange}
@@ -175,9 +176,9 @@ const CapDeviceContent = (props) => {
             size="default"
             isRequired
           />
-        </div>
-        <div className="creatives-inapp-media">
-          <div className="inapp-content-media">
+        </CapRow>
+        <CapRow className="creatives-inapp-media">
+          <CapRow className="inapp-content-media">
             <CapHeading type="h5" className="inapp-media-header">
               {formatMessage(messages.mediaLabel)}
             </CapHeading>
@@ -188,17 +189,17 @@ const CapDeviceContent = (props) => {
               onChange={onTemplateMediaTypeChange}
               className="inapp-media-radio"
             />
-          </div>
-        </div>
-        <div className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
-          <div
+          </CapRow>
+        </CapRow>
+        <CapRow className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
+          <CapColumn
             className="inapp-message-header"
           >
             <CapHeading type="h5" className="inapp-message-header-style">
               {formatMessage(messages.message)}
             </CapHeading>
             {getTagList(1)} {/* here 1 signifies the tags for template message */}
-          </div>
+          </CapColumn>
           <TextArea
             id="inapp-create-template-message-input"
             className="inapp-create-template-message-input"
@@ -234,11 +235,11 @@ const CapDeviceContent = (props) => {
               />
             </>
           )}
-        </div>
-      </div>
-      <div className="inapp-action-link">
+        </CapRow>
+      </CapRow>
+      <CapRow className="inapp-action-link">
         <CapCheckbox onChange={() => setAddActionLink(!addActionLink)} checked={addActionLink} />
-        <div className="inapp-render-heading">
+        <CapRow className="inapp-render-heading">
           <CapHeader
             title={<CapRow type="flex">
               <CapHeading type="h4">
@@ -248,7 +249,7 @@ const CapDeviceContent = (props) => {
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
-            <div className="inapp-action-deep-link">
+            <CapRow className="inapp-action-deep-link">
               <CapHeading type="h4">
                 {formatMessage(messages.actionDeepLink)}
               </CapHeading>
@@ -259,11 +260,11 @@ const CapDeviceContent = (props) => {
                 value={deepLinkValue}
                 onChange={(value) => { setDeepLinkValue(value); }}
               />
-            </div>
+            </CapRow>
           )}
-        </div>
-      </div>
-      <div className="inapp-cta-button">
+        </CapRow>
+      </CapRow>
+      <CapRow className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
           title={<CapRow type="flex">
@@ -294,7 +295,7 @@ const CapDeviceContent = (props) => {
             deepLink={deepLink || []}
           />
         )}
-      </div>
+      </CapRow>
     </>
   );
 };

package/v2Components/CapDeviceContent/index.scss

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

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

@@ -33,37 +33,47 @@ describe('Test CapDeviceContent', () => {
     fireEvent.click(copyLink);
     expect(copyLink).toBeInTheDocument();
   });
-  it('test case for CapDeviceContent component Ios pane', () => {
-    renderComponent(
-      {...deviceContentProps,
-        panes: "iOS",
-        buttonType: 'CTA',
-        setTemplateMediaType: jest.fn(),
-        setButtonType: jest.fn(),
-        setCtaData: jest.fn(),
-        setTemplateMessage: jest.fn(),
-        setTemplateMessageError: jest.fn(),
-        setTitle: jest.fn(),
-        templateMediType: 'IMAGE',
-        addActionLink: true,
-        ctaData: [
-          {
-            index: 0,
-            ctaType: "WEBSITE",
-            text: "test",
-            urlType: "DEEP_LINK",
-            url: "",
-            isSaved: true,
-            label: "Test_1",
-          },
-        ] });
-    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
+  it("test case for CapDeviceContent component Ios pane", () => {
+    renderComponent({
+      ...deviceContentProps,
+      panes: "iOS",
+      buttonType: "CTA",
+      setTemplateMediaType: jest.fn(),
+      setButtonType: jest.fn(),
+      setCtaData: jest.fn(),
+      setTemplateMessage: jest.fn(),
+      setTemplateMessageError: jest.fn(),
+      setTitle: jest.fn(),
+      templateMediType: "IMAGE",
+      addActionLink: true,
+      ctaData: [
+        {
+          index: 0,
+          ctaType: "WEBSITE",
+          text: "test",
+          urlType: "DEEP_LINK",
+          url: "link",
+          isSaved: true,
+        },
+      ],
+      deepLink: [
+        {
+          label: "Test_1",
+          value: "link",
+        },
+      ],
+    });
+    const msgBox = screen.getAllByPlaceholderText(
+      /Please input in-app notification message content/i
+    );
     msgBox[0].focus();
-    fireEvent.change(msgBox[0], { target: {value: 'val'}});
-    fireEvent.change(msgBox[0], { target: {value: ''}});
-    const titleBox = screen.getAllByPlaceholderText(/Please input message title name/i);
+    fireEvent.change(msgBox[0], { target: { value: "val" } });
+    fireEvent.change(msgBox[0], { target: { value: "" } });
+    const titleBox = screen.getAllByPlaceholderText(
+      /Please input message title name/i
+    );
     titleBox[0].focus();
-    fireEvent.change(titleBox[0], { target: {value: 'val'}});
+    fireEvent.change(titleBox[0], { target: { value: "val" } });
     const img = screen.getByText(/image/i);
     fireEvent.click(img);
     const none = screen.getByText(/None/i);

package/v2Components/CapInAppCTA/index.js

@@ -43,7 +43,8 @@ export const CapInAppCTA = (props) => {
 
   const [urlError, setUrlError] = useState(false);
   const [buttonError, setButtonError] = useState(false);
-  const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState("");
+  const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState(ctaData[0]?.url || "");
+  const selectedDeepLink = deepLink?.find(link => link?.value === ctaData[0]?.url);
 
   const updateHelper = (type, value, index) => {
     let clonedCta = cloneDeep(ctaData[index]);
@@ -94,12 +95,11 @@ export const CapInAppCTA = (props) => {
   const onDeepLinkSelect = (value) => {
     setCtaDeepLinkValue(value);
     let errorMessage = false;
-    if (!isUrl(value.key)) {
+    if (!isUrl(value)) {
       errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
     }
     setUrlError(errorMessage);
-    updateHelper('url', value.key, 0); // 0 is an index
-    updateHelper('label', value.label, 0); // 0 is an index
+    updateHelper('url', value, 0); // 0 is an index
   };
 
   const ctaSaveDisabled = (index) => {
@@ -120,7 +120,7 @@ export const CapInAppCTA = (props) => {
   const renderedContent = () => {
     const renderArray = [];
     ctaData?.forEach((cta) => {
-      const { index, text, url, urlType, isSaved, label } = cta || {};
+      const { index, text, url, urlType, isSaved } = cta || {};
       //this is to display buttons after they are saved, in both create and edit mode.
       if (isSaved) {
         renderArray.push(
@@ -145,7 +145,7 @@ export const CapInAppCTA = (props) => {
                 : <CapTag className="cta-type-label">{formatMessage(messages.urlExternalLink)}</CapTag>}
             </CapColumn>
             <CapColumn>
-              {urlType === DEEP_LINK ? label : ''}
+              {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
             </CapColumn>
             {(
               <CapRow className="cta-action-grp">
@@ -219,7 +219,6 @@ export const CapInAppCTA = (props) => {
                   options={deepLink || []}
                   onChange={onDeepLinkSelect}
                   value={ctaDeepLinkValue}
-                  labelInValue
                 />
               </>
 

package/v2Components/FormBuilder/index.js

@@ -214,9 +214,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.setState({usingTabContainer: true});
         }
       }
-      // if (nextProps.currentTab) {
-      //   this.setState({currentTab: nextProps.currentTab});
-      // }
+      //In Context of MPUSH currentTab represents whether its Android or IOS tab , 1 for Android and 2 for IOS
+      if (nextProps.currentTab && _.get(this.props, 'schema.channel') === MOBILE_PUSH) {
+        this.setState({currentTab: nextProps.currentTab});
+      }
     } else if (!_.isEmpty(nextProps.formData) &&
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&

package/v2Containers/CreativesContainer/index.js

@@ -589,59 +589,16 @@ export class Creatives extends React.Component {
         }
         break;
       case constants.MOBILE_PUSH:
-        if (get(template, "value.versions.base")) {
-          const mobilpushTemplate = template.value;
-          templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
-          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
-          if (type === LOYALTY) {
-            templateData.licenseCode = get(mobilpushTemplate, 'definition.licenseCode');
-            templateData.templateId = get(mobilpushTemplate, '_id');
-          }
-          const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
-          if (!isEmpty(androidContent)) {
-            if (type !== LOYALTY) {
-              delete androidContent.cuid;
-              delete androidContent.luid;
-              delete androidContent.communicationId;
-            }
-            const custom = {};
-            forEach(androidContent.custom, (customKeyValue) => {
-              custom[customKeyValue.key] = customKeyValue.value;
-            } );
-            androidContent.custom = custom;
-            templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(mobilpushTemplate, 'definition.mode', '').toUpperCase();
-            templateData.androidContent.deviceType = 'ANDROID';
-          }
-          const iosContent = get(mobilpushTemplate, 'versions.base.IOS');
-          if (!isEmpty(iosContent)) {
-            if (type !== LOYALTY) {
-              delete iosContent.cuid;
-              delete iosContent.luid;
-              delete iosContent.communicationId;
-            }
-            const custom = {};
-            forEach(iosContent.custom, (customKeyValue) => {
-              custom[customKeyValue.key] = customKeyValue.value;
-            } );
-            iosContent.custom = custom;
-            templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
-            templateData.iosContent.deviceType = 'IOS';
-          }
-          templateData.messageSubject = mobilpushTemplate.name ? mobilpushTemplate.name : "messageSubject";
-        }
-        break;
       case constants.INAPP:
-        if (get(template, "value.versions.base.content")) {
-          const inAppTemplate = template.value;
-          templateData.accountId = get(inAppTemplate, 'definition.accountId');
+        if (get(template, "value.versions.base")) {
+          const channelTemplate = template.value;
+          templateData.accountId = get(channelTemplate, 'definition.accountId');
           const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
           if (type === LOYALTY) {
-            templateData.licenseCode = get(inAppTemplate, 'definition.licenseCode');
-            templateData.templateId = get(inAppTemplate, '_id');
+            templateData.licenseCode = get(channelTemplate, 'definition.licenseCode');
+            templateData.templateId = get(channelTemplate, '_id');
           }
-          const androidContent = get(inAppTemplate, 'versions.base.content.ANDROID');
+          const androidContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.ANDROID') : get(channelTemplate, 'versions.base.ANDROID');
           if (!isEmpty(androidContent)) {
             if (type !== LOYALTY) {
               delete androidContent.cuid;
@@ -654,10 +611,10 @@ export class Creatives extends React.Component {
             });
             androidContent.custom = custom;
             templateData.androidContent = androidContent;
-            templateData.androidContent.type = get(inAppTemplate, 'definition.mode', '').toUpperCase();
+            templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
           }
-          const iosContent = get(inAppTemplate, 'versions.base.content.IOS');
+          const iosContent = channel === constants.INAPP ? get(channelTemplate, 'versions.base.content.IOS') : get(channelTemplate, 'versions.base.IOS');
           if (!isEmpty(iosContent)) {
             if (type !== LOYALTY) {
               delete iosContent.cuid;
@@ -670,10 +627,10 @@ export class Creatives extends React.Component {
             });
             iosContent.custom = custom;
             templateData.iosContent = iosContent;
-            templateData.iosContent.type = get(inAppTemplate, 'definition.mode').toUpperCase();
+            templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = IOS.toUpperCase();
           }
-          templateData.messageSubject = inAppTemplate?.name ? inAppTemplate?.name : "messageSubject";
+          templateData.messageSubject = channelTemplate?.name ? channelTemplate?.name : "messageSubject";
         }
         break;
       case constants.WECHAT:
@@ -960,6 +917,7 @@ export class Creatives extends React.Component {
         };
         break;
       case constants.MOBILE_PUSH:
+      case constants.INAPP:
         gtmDetails = {
           ...gtmDetails,
 
@@ -967,13 +925,6 @@ export class Creatives extends React.Component {
           imageAdded: androidType === 'IMAGE' || iosType === 'IMAGE',
         };
         break;
-      case constants.INAPP:
-        gtmDetails = {
-          ...gtmDetails,
-          content: `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`,
-          imageAdded: androidType === IMAGE || iosType === IMAGE,
-        };
-        break;
       case constants.LINE:
         gtmDetails = Object.assign({
           ...gtmDetails,

package/v2Containers/InApp/constants.js

@@ -48,7 +48,6 @@ export const INITIAL_CTA_DATA = [
     urlType: DEEP_LINK,
     url: "",
     isSaved: false,
-    label: "",
   },
 ];
 
@@ -118,7 +117,7 @@ export const BUTTON_RADIO_OPTIONS = [
           <CapHeading type="h4">
             <FormattedMessage {...messages.btnTypeCTA} />
           </CapHeading>
-          <CapLabel><FormattedMessage {...messages.ctaDesc} /></CapLabel>
+          <CapLabel><FormattedMessage {...messages.ctaDescription} /></CapLabel>
         </div>
       </>
     ),

package/v2Containers/InApp/index.js

@@ -67,10 +67,7 @@ export const InApp = (props) => {
   const { formatMessage } = intl;
   const [titleAndroid, setTitleAndroid] = useState("");
   const [titleIos, setTitleIos] = useState("");
-  const [templateMediaTypeAndroid, setTemplateMediaTypeAndroid] = useState(
-    INAPP_MEDIA_TYPES.TEXT
-  );
-  const [templateMediaTypeIos, setTemplateMediaTypeIos] = useState(
+  const [templateMediaType, setTemplateMediaType] = useState(
     INAPP_MEDIA_TYPES.TEXT
   );
   const [templateName, setTemplateName] = useState("");
@@ -106,7 +103,8 @@ export const InApp = (props) => {
     INAPP_BUTTON_TYPES.NONE
   );
   const [buttonTypeIos, setButtonTypeIos] = useState(INAPP_BUTTON_TYPES.NONE);
-  const isBtnTypeCta = buttonTypeAndroid === INAPP_BUTTON_TYPES.CTA;
+  const isBtnTypeCtaAndroid = buttonTypeAndroid === INAPP_BUTTON_TYPES.CTA;
+  const isBtnTypeCTaIos = buttonTypeIos === INAPP_BUTTON_TYPES.CTA;
 
   //gets account details
   useEffect(() => {
@@ -165,28 +163,27 @@ export const InApp = (props) => {
       } = androidContent;
       setTitleAndroid(androidTitle);
       setTemplateMessageAndroid(androidMessage);
-      setTemplateMediaTypeAndroid(
+      setTemplateMediaType(
         androidExpandableDetails?.style === BIG_TEXT
           ? INAPP_MEDIA_TYPES.TEXT
           : INAPP_MEDIA_TYPES.IMAGE
       );
       setInAppImageSrcAndroid(androidExpandableDetails?.image);
-      setDeepLinkValueAndroid(androidCta.actionLink);
+      setDeepLinkValueAndroid(androidCta?.actionLink);
       setAddActionLinkAndroid(!isEmpty(androidCta) && true);
       setButtonTypeAndroid(
-        androidExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE
+        androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
       );
-      if (androidExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && androidExpandableDetails?.buttons.length > 0) {
+      if (androidExpandableDetails?.ctas?.length > 0) {
         setCtaDataAndroid(
-          androidExpandableDetails?.buttons?.map((cta) => {
-            const { index, type, text, url = "", label } = cta;
+          androidExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
             const obj = {
               index,
-              text,
-              url,
+              text: actionText,
+              url: actionLink,
               urlType: type,
               isSaved: true,
-              label,
             };
             return obj;
           })
@@ -201,22 +198,21 @@ export const InApp = (props) => {
       } = iosContent;
       setTitleIos(iosTitle);
       setTemplateMessageIos(iosMessage);
-      setTemplateMediaTypeIos(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+      setTemplateMediaType(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
       setInAppImageSrcIos(iosExpandableDetails?.image);
-      setButtonTypeIos(iosExpandableDetails?.buttonType || INAPP_BUTTON_TYPES.NONE);
+      setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
       setAddActionLinkIos(!isEmpty(iosCta) && true);
       setDeepLinkValueIos(iosCta?.actionLink);
-      if (iosExpandableDetails?.buttonType === INAPP_BUTTON_TYPES.CTA && iosExpandableDetails?.buttons.length > 0) {
+      if (iosExpandableDetails?.ctas?.length > 0) {
         setCtaDataIos(
-          iosExpandableDetails?.buttons?.map((cta) => {
-            const { index, type, text, url = "", label } = cta;
+          iosExpandableDetails?.ctas?.map((cta, index) => {
+            const { type, actionText, actionLink = "" } = cta;
             const obj = {
               index,
-              text,
-              url,
+              text: actionText,
+              url: actionLink,
               urlType: type,
               isSaved: true,
-              label,
             };
             return obj;
           })
@@ -314,7 +310,6 @@ export const InApp = (props) => {
       }
     }
   };
-
   // tag Code end
 
   const onTemplateNameChange = ({ target: { value } }) => {
@@ -335,7 +330,6 @@ export const InApp = (props) => {
     }
   };
 
-
   const PANES = [
     {
       content: (
@@ -357,8 +351,8 @@ export const InApp = (props) => {
           setButtonType={setButtonTypeAndroid}
           accountId={accountId}
           accessToken={accessToken}
-          templateMediaType={templateMediaTypeAndroid}
-          setTemplateMediaType={setTemplateMediaTypeAndroid}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
           title={titleAndroid}
           setTitle={setTitleAndroid}
           templateMessageError={templateMessageErrorAndroid}
@@ -400,8 +394,8 @@ export const InApp = (props) => {
           setButtonType={setButtonTypeIos}
           accountId={accountId}
           accessToken={accessToken}
-          templateMediaType={templateMediaTypeIos}
-          setTemplateMediaType={setTemplateMediaTypeIos}
+          templateMediaType={templateMediaType}
+          setTemplateMediaType={setTemplateMediaType}
           title={titleIos}
           setTitle={setTitleIos}
           templateMessageError={templateMessageErrorIos}
@@ -468,7 +462,7 @@ export const InApp = (props) => {
     let ctaData = {};
     if (panes === ANDROID) {
       ctaData = ctaDataAndroid;
-      switch (templateMediaTypeAndroid) {
+      switch (templateMediaType) {
         case INAPP_MEDIA_TYPES.IMAGE:
           mediaPreview.inAppImageSrcAndroid = inAppImageSrcAndroid;
           break;
@@ -477,7 +471,7 @@ export const InApp = (props) => {
       }
     } else {
       ctaData = ctaDataIos;
-      switch (templateMediaTypeIos) {
+      switch (templateMediaType) {
         case INAPP_MEDIA_TYPES.IMAGE:
           mediaPreview.inAppImageSrcIos = inAppImageSrcIos;
           break;
@@ -493,7 +487,7 @@ export const InApp = (props) => {
             mediaPreview,
             templateTitle,
             templateMsg,
-            ...(isBtnTypeCta && {
+            ...((isBtnTypeCtaAndroid || isBtnTypeCTaIos) && {
               ctaData,
             }),
           },
@@ -519,20 +513,24 @@ export const InApp = (props) => {
       return true;
     }//for ios
     //if media type is image and the mediaType file is not uploaded
-    if (panes === ANDROID && !(templateMediaTypeAndroid === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+    if (panes === ANDROID && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
       return true;
     }
-    if (panes === IOS && !(templateMediaTypeIos === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+    if (panes === IOS && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
       return true;
     }
     //cta
-    if (isBtnTypeCta) {
-      if (panes === ANDROID && ctaDataAndroid[0]?.isSaved) {
+    if (isBtnTypeCtaAndroid) {
+      if (ctaDataAndroid[0]?.isSaved) {
         //if button type is cta and 1st button is saved
         return false;
       }
-      if (panes === IOS && ctaDataIos[0]?.isSaved) {
-         //if button type is cta and 1st button is saved
+      //if button type is cta and there are no buttons saved
+      return true;
+    }
+    if (isBtnTypeCTaIos) {
+      if (ctaDataIos[0]?.isSaved) {
+        //if button type is cta and 1st button is saved
         return false;
       }
       //if button type is cta and there are no buttons saved
@@ -543,37 +541,28 @@ export const InApp = (props) => {
 
   const getCtaPayload = (type) =>
   (type === ANDROID ? ctaDataAndroid : ctaDataIos).map((cta) => {
-    const { index, text, urlType, url, label } = cta;
+    const { text, urlType, url } = cta;
     return {
-      index,
       type: urlType,
-      text,
-      url,
-      label,
+      actionText: text,
+      actionLink: url,
     };
   });
 
   const createPayload = () => {
     let androidMediaParams = {};
     let iosMediaParams = {};
-    const buttonType = panes === ANDROID ? buttonTypeAndroid : buttonTypeIos;
     const commonDevicePayload = {
       luid: "{{luid}}",
       cuid: "{{cuid}}",
       communicationId: "{{communicationId}}",
     };
-    switch (templateMediaTypeAndroid) {
+    switch (templateMediaType) {
       case INAPP_MEDIA_TYPES.IMAGE:
         androidMediaParams = {
           image: getCdnUrl({url: inAppImageSrcAndroid, channelName: INAPP }),
           style: BIG_PICTURE,
         };
-        break;
-      default:
-        break;
-    }
-    switch (templateMediaTypeIos) {
-      case INAPP_MEDIA_TYPES.IMAGE:
         iosMediaParams = {
           image: getCdnUrl({url: inAppImageSrcIos, channelName: INAPP }),
           style: BIG_PICTURE,
@@ -601,9 +590,8 @@ export const InApp = (props) => {
                 style: BIG_TEXT,
                 message: templateMessageAndroid,
                 ...androidMediaParams,
-                ...(isBtnTypeCta && {
-                  buttonType,
-                  buttons: getCtaPayload(ANDROID),
+                ...(isBtnTypeCtaAndroid && {
+                  ctas: getCtaPayload(ANDROID),
                 }),
               },
               custom: [],
@@ -618,9 +606,8 @@ export const InApp = (props) => {
                 style: BIG_TEXT,
                 message: templateMessageIos,
                 ...iosMediaParams,
-                ...(isBtnTypeCta && {
-                  buttonType,
-                  buttons: getCtaPayload(IOS),
+                ...(isBtnTypeCTaIos && {
+                  ctas: getCtaPayload(IOS),
                 }),
               },
               custom: [],
@@ -633,7 +620,7 @@ export const InApp = (props) => {
       definition: {
         accountId: id,
         licenseCode: sourceAccountIdentifier,
-        mode: "CREATE",
+        mode: templateMediaType,
       },
     };
     return data;
@@ -686,7 +673,6 @@ export const InApp = (props) => {
     );
   };
 
-
   const onDoneCallback = () => {
     if (isFullMode) {
       if (isEditFlow) {

package/v2Containers/InApp/index.scss

@@ -37,7 +37,7 @@
 .inapp-footer {
   background-color: $CAP_WHITE;
   bottom: 0;
-  position: fixed;
+  // position: fixed;
   width: 100%;
   padding: $CAP_SPACE_20 0;
   z-index: 1;

package/v2Containers/InApp/messages.js

@@ -91,8 +91,8 @@ export default defineMessages({
     id: `${prefix}.btnTypeCTA`,
     defaultMessage: "Call to action",
   },
-  ctaDesc: {
-    id: `${prefix}.ctaDesc`,
+  ctaDescription: {
+    id: `${prefix}.ctaDescription`,
     defaultMessage:
       "Create a button that lets customers take an action",
   },

package/v2Containers/MobilePush/Edit/index.js

@@ -768,10 +768,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     formData[0].base = true;
     // formData[0].tabKey = '1';
     // formData[1].tabKey = '2';
-
     this.setState({templateCta}, () => {
       this.getSchemaForFormData(formData, schema);
-      this.setState({tabCount, formData, editData: data, currentTab: 1}, () => {
+      this.setState({tabCount, formData, editData: data}, () => {
         this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
       });
     });
@@ -1469,7 +1468,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
         }
         _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;

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;
@@ -523,6 +528,7 @@
 .message-container{
   border-bottom: solid 0.5px #D6D6D6;
 }
+
 .main-content{
   overflow: hidden;
 }