@capillarytech/creatives-library 2.0.80 → 2.0.82

package/components/FormBuilder/index.js

@@ -595,6 +595,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorData[parseInt(index)][`message-editor${selector}`] = false;
                 } else {
                   errorData[parseInt(index)][`message-editor${selector}`] = true;
+                  errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
                   isValid = false;
                 }
               }
@@ -921,7 +922,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     this.setState({isFormValid : isValid, errorData});
     
-    this.props.onFormValidityChange(isValid);
+    this.props.onFormValidityChange(isValid, errorData);
     return isValid;
   }
 
@@ -1802,7 +1803,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      this.props.onChange(formData, this.state.tabCount, currentTab);
+      this.props.onChange(formData, this.state.tabCount, currentTab, val);
     }
   }
 
@@ -1844,7 +1845,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (!event) {
       return;
     }
-
     const tab = this.state.tabCount;
     // const parent = this._reactInternalInstance._currentElement._owner._instance;
     if (event === 'onTabChange') {
@@ -1854,7 +1854,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (this.props.isNewVersionFlow) {
           const formData = _.cloneDeep(this.state.formData);
           let activeTabIndex = '1';
-          const elems = document.getElementsByClassName("ant-tabs-tab");
+          const elems = document.querySelectorAll(`.cap-tabs-${val.id} .ant-tabs-tab`);
 
           for (let i = 0; i < elems.length; i += 1) {
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
@@ -1874,7 +1874,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           });
         } else {
           let activeTabIndex = '1';
-          const elems = document.getElementsByClassName("ant-tabs-tab");
+          const elems = document.querySelectorAll(`.cap-tabs-${val.id} .ant-tabs-tab`);
 
           for (let i = 0; i < elems.length; i += 1) {
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
@@ -3167,6 +3167,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         return (
           <Tabs
+            className={`cap-tabs-${container.id}`}
             activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}

package/package.json

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

package/v2Containers/Email/index.js

@@ -604,15 +604,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
       const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
       win.postMessage(msgString, '*');
+    } else if (data === "unsubscribe") {
+      const anchor = `<a href='{{${data}}}'>${data}</a>`;
+      this.state.editorInstanse.insertHtml(`${anchor}`);
     } else {
-      if (data === "unsubscribe") {
-        const anchor = `<a href='{{${data}}}'>${data}</a>`;
-        this.state.editorInstanse.insertHtml(`${anchor}`);
-      } else {
-        this.state.editorInstanse.insertHtml(`{{${data}}}`);
-      }
-      //this.resetCkEditorInstance(currentTab, formData, true, data);
+      this.state.editorInstanse.insertHtml(`{{${data}}}`);
     }
+      //this.resetCkEditorInstance(currentTab, formData, true, data);
   }
 
   onImageSelect = () => {
@@ -866,7 +864,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
 
     this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
-      this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      }
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
         // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
         //   formData[this.state.currentTab - 1].activeTab = language;
@@ -1214,7 +1214,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const baseData = {};
       const baseLanguage = props.currentOrgDetails.basic_details.base_language;
       this.supportedLanguages = this.getSupportedLanguages(props);
-      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
+      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})] || {iso_code: 'en', lang_id: 1, language: "English"};
       baseData.activeTab = baseLanguage;
       baseData[languageObject.iso_code] = {};
       baseData[languageObject.iso_code].is_drag_drop = false;

package/v2Containers/MobilePush/Create/index.js

@@ -110,7 +110,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    if (nextProps.iosCtasData) {
+    if (nextProps.iosCtasData && isEmpty(this.state.templateCta)) {
       this.setState({showIosCtaTable: true});
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
@@ -151,15 +151,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   };
 
-  onFormDataChange = (formData, tabCount) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
     if (!isEmpty(templateCta)) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = templateCta.name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = templateCta.ctaTemplateDetails[0].buttonText;
+      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
+      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
       delete newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`];
-      if (templateCta.ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = templateCta.ctaTemplateDetails[1].buttonText;
+      if (get(templateCta, 'ctaTemplateDetails[1]')) {
+        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = get(templateCta, 'ctaTemplateDetails[1].buttonText');
       }
     }
 
@@ -187,6 +187,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (this.props.isFullMode && this.props.defaultData && isEmpty(formData['template-name'])) {
       newFormData['template-name'] = get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged}, () => {
       if (this.props.isFullMode) {
         this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
@@ -351,14 +356,46 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       validity: this.state.isFormValid,
       type: templateData.type,
     };
-    this.setState({checkValidation: true});
+    this.setState({checkValidation: true}, this.showError);
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
     return response;
   };
-  setFormValidity = (isFormValid) => {
-    this.setState({isFormValid});
+  showError = () => {
+    const {intl} = this.props;
+    const {errorData} = this.state;
+    const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
+    if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
+      let tab = this.state.currentTab;
+      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
+      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      let isTagErrorExist = false;
+      if (isAndroidInvalid) {
+        tab = 1;
+        errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
+        const invalidTags = errorData[0]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      } else if (isIosInvalid) {
+        tab = 2;
+        errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
+        const invalidTags = errorData[1]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      }
+      if (tab !== this.state.currentTab || isTagErrorExist) {
+        CapNotification.error(errorMessage);
+      }
+    }
+  }
+  setFormValidity = (isFormValid, errorData) => {
+    const newState = {isFormValid, errorData};
+    this.setState(newState);
   };
   getTransformedData = (formData) => {
     const obj = {};
@@ -987,7 +1024,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
             ],
           });
-          if (selectedConfig && (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56")) {
+          const selectedConfigTemplateCtaId = get(selectedConfig, 'ctaTemplateDetails[0].id');
+          // the option to select deeplink and externa link should not come for these ctas
+          if (selectedConfigTemplateCtaId && (selectedConfigTemplateCtaId.id !== "3heicig" && selectedConfigTemplateCtaId.id !== "6eigf4f" && selectedConfigTemplateCtaId.id !== "c97d0ed")) {
             inputFields.splice(fieldIndex + 2, 0, {
               rowClassName: "mobile-push-row",
               cols: [
@@ -1135,6 +1174,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   addSecondoryCta = (flag, formData, schemaField) => {
     const id = schemaField.id;
     const schema = cloneDeep(this.state.schema);
+    const formDataCopy = cloneDeep(formData);
     const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
     const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
     const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
@@ -1236,7 +1276,24 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       });
     });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(inputFields, {identifier: 'add-sec-cta-2'});
+      inputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, inputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    }
   };
   copyIphoneContent = () => {
     const formData = cloneDeep(this.state.formData);

package/v2Containers/MobilePush/Create/messages.js

@@ -246,4 +246,20 @@ export default defineMessages({
     id: 'app.containers.MobilePush.Create.uploadImageSizeErrorDescription',
     defaultMessage: 'File size cannot be more than 3mb',
   },
+  "validationError": {
+    id: 'app.containers.MobilePush.Create.validationError',
+    defaultMessage: 'Validation error',
+  },
+  "invalidIosMessage": {
+    id: 'app.containers.MobilePush.Create.invalidIosMessage',
+    defaultMessage: 'Validation failed for IOS',
+  },
+  "invalidAndroidMessage": {
+    id: 'app.containers.MobilePush.Create.invalidAndroidMessage',
+    defaultMessage: 'Validation failed for Android',
+  },
+  "invalidTags": {
+    id: 'app.containers.MobilePush.Create.invalidTags',
+    defaultMessage: 'Invalid tags',
+  },
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -14,7 +14,7 @@ import { notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import _, {get, findIndex, set, forEach, cloneDeep} from 'lodash';
-import { CapSpin, CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons} from '@capillarytech/cap-ui-library';
+import { CapSpin, CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons, CapNotification} from '@capillarytech/cap-ui-library';
 import styled from 'styled-components';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse, makeSelectIosCta} from "./selectors";
 import {makeSelectMetaEntities, setInjectedTags, isLoadingMetaEntities} from "../../Cap/selectors";
@@ -168,7 +168,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.setState({formData});
       this.props.actions.clearAsset();
     }
-    if (nextProps.iosCtasData) {
+    if (nextProps.iosCtasData && _.isEmpty(this.state.templateCta)) {
       this.setState({showIosCtaTable: true});
     }
     if (nextProps.Edit.editTemplateError && !_.isEqual(nextProps.Edit.editTemplateError, this.props.Edit.editTemplateError)) {
@@ -189,16 +189,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     });
   };
-  onFormDataChange = (formData, tabCount, currentTab) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     console.log('Form data changed is ', formData, tabCount, currentTab);
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
     if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = templateCta.name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = templateCta.ctaTemplateDetails[0].buttonText;
+      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
+      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
       delete newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`];
-      if (templateCta.ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = templateCta.ctaTemplateDetails[1].buttonText;
+      if (get(templateCta, 'ctaTemplateDetails[1]')) {
+        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = get(templateCta, 'ctaTemplateDetails[1].buttonText');
       }
     }
     if (newFormData["mobilepush-accounts"] !== this.state.formData["mobilepush-accounts"]) {
@@ -218,6 +218,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.isFullMode && this.props.defaultData && _.isEmpty(formData['template-name'])) {
       newFormData['template-name'] = _.get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount}, () => {
       this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
     });
@@ -239,7 +244,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     // if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
     //   inputId = `${inputId}${tabIndex || this.state.currentTab}`;
     // }
-    const newInputFields = this.getLinkTypeFields({inputFieldsArgs: inputFields, fieldIndex, deepLinkOptions, formData, field});
+    const newInputFields = this.getLinkTypeFields({inputFieldsArgs: inputFields, fieldIndex, deepLinkOptions, formData, field, tab: currentTab});
     set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
 
     if (currentTab) { // identifying where ist called from setEditData or by event handler
@@ -512,7 +517,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         actionLabel: ios['secondary-cta-1-action'],
         actionLabel2: ios['secondary-cta-1-action2'],
         type: ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL"),
-        actionLink: ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? ios['cta-deeplink-secondary-cta-1-select2'] : ios['cta-deeplink-secondary-cta-1-text2']),
+        actionLink: ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? ios['cta-deeplink-secondary-cta-1-select2'] : ios['cta-deeplink-secondary-cta-1-text']),
         ioscdeepLinkName: this.getLinkName(ios['cta-deeplink-secondary-cta-1-select']),
         templateCtaId,
       };
@@ -546,9 +551,41 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     return undefined;
   };
+  showError = () => {
+    const {intl} = this.props;
+    const {errorData} = this.state;
+    const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
+    let isTagErrorExist = false;
+    if (!_.isEmpty(this.state.formData) && !this.state.isFormValid) {
+      let tab = this.state.currentTab;
+      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
+      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      if (isAndroidInvalid) {
+        tab = 1;
+        errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
+        const invalidTags = errorData[0]['invalid-tags'];
+        if (!_.isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      } else if (isIosInvalid) {
+        tab = 2;
+        errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
+        const invalidTags = errorData[1]['invalid-tags'];
+        if (!_.isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      }
 
-  setFormValidity = (isFormValid) => {
-    this.setState({isFormValid});
+      if (tab !== this.state.currentTab || isTagErrorExist) {
+        CapNotification.error(errorMessage);
+      }
+    }
+  }
+  setFormValidity = (isFormValid, errorData) => {
+    const newState = {isFormValid, errorData};
+    this.setState(newState);
   };
 
   getMappedEvent = (id, event) => {
@@ -577,7 +614,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       validity: this.state.isFormValid,
     };
     console.log('GetForm Data ', response);
-    this.setState({checkValidation: true});
+    this.setState({checkValidation: true}, this.showError);
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
@@ -693,14 +730,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         ios.image = iosData.expandableDetails.image;
       }
       if (iosData.expandableDetails && iosData.expandableDetails.ctas && iosData.expandableDetails.ctas.length) {
-        iosData['add-sec-cta-ios'] = true;
+        ios['add-sec-cta-ios'] = true;
         if (iosData.expandableDetails.ctas[0].type) {
           ios['cta-deeplink-secondary-cta-1'] = iosData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
         }
         if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK") {
           ios['cta-deeplink-secondary-cta-1-select2'] = iosData.expandableDetails.ctas[0].actionLink;
         } else {
-          ios['cta-deeplink-secondary-cta-1-text2'] = iosData.expandableDetails.ctas[0].actionLink;
+          ios['cta-deeplink-secondary-cta-1-text'] = iosData.expandableDetails.ctas[0].actionLink;
         }
         ios['secondary-cta-1-label'] = iosData.expandableDetails.ctas[0].actionText;
         if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK" && ios['cta-deeplink-secondary-cta-1-select2']) {
@@ -768,7 +805,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       if (formData[1]['secondary-cta-1-action']) {
         formData[1]['add-sec-cta-ios'] = true;
 
-        schema = this.showSelectedIosCta(schema, {id: 'add-sec-cta-ios'}, 2, undefined, formData[1]['cta-deeplink-secondary-cta-1']);
+        schema = this.showSelectedIosCta(schema, {id: 'add-sec-cta-ios'}, 2, this.state.templateCta, formData[1]['cta-deeplink-secondary-cta-1']);
         schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink-secondary-cta-1'}, 2, schema);
         schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink-secondary-cta-1-select2'}, 2, schema);
       }
@@ -966,7 +1003,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
             ],
           });
-          if (selectedConfig && (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56")) {
+          const selectedConfigTemplateCtaId = get(selectedConfig, 'ctaTemplateDetails[0].id');
+          // the option to select deeplink and externa link should not come for these ctas
+          if (selectedConfigTemplateCtaId && (selectedConfigTemplateCtaId.id !== "3heicig" && selectedConfigTemplateCtaId.id !== "6eigf4f" && selectedConfigTemplateCtaId.id !== "c97d0ed")) {
             inputFields.splice(fieldIndex + 2, 0, {
               rowClassName: "mobile-push-row",
               identifier: `cta-deeplink-${inputId}`,
@@ -1028,10 +1067,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     });
-    if (!inputSchema) {
-      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-      this.injectEvents(schema);
-    }
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
     return schema;
   };
 
@@ -1553,7 +1589,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const fieldIndex = findIndex(inputFields, {identifier: id});
     let newInputFields;
     if (formData[tabIndex - 1][id]) {
-      newInputFields = this.getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions});
+      newInputFields = this.getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab: currentTab});
     } else {
       const identifier = (tabIndex - 1) ? 'add-sec-cta-ios' : 'add-sec-cta';
       const indexOfNextField = findIndex(inputFields, {identifier});
@@ -1564,14 +1600,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (inputSchema) {
       return schema;
     }
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => {
+      this.injectEvents(schema);
+    });
     return schema;
   };
 
   addSecondoryCta = (flag, formData, field, inputSchema, currentTab) => {
     const id = field.id;
     const tabIndex = currentTab || this.state.currentTab;
+    const formDataCopy = cloneDeep(formData);
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
@@ -1587,13 +1625,32 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const deleteCount = indexOfNextField - fieldIndex;
       newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
     }
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
-    if (inputSchema) {
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(newInputFields, {identifier: 'add-sec-cta-2'});
+      newInputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, newInputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      if (inputSchema) {
+        return schema;
+      }
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+      this.injectEvents(schema);
       return schema;
     }
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-    return schema;
+    return true;
   };
 
   addSecondoryCtaIos = (flag, formData, schemaField) => {

package/v2Containers/MobilePush/Edit/messages.js

@@ -247,7 +247,23 @@ export default defineMessages({
     defaultMessage: 'IOS template is not configured, Save without IOS template',
   },
   "selectActionButton": {
-    id: 'app.containers.MobilePush.Create.mobilePush',
+    id: 'app.containers.MobilePush.Edit.mobilePush',
     defaultMessage: 'Select action buttons',
   },
+  "validationError": {
+    id: 'app.containers.MobilePush.Edit.validationError',
+    defaultMessage: 'Validation error',
+  },
+  "invalidIosMessage": {
+    id: 'app.containers.MobilePush.Edit.invalidIosMessage',
+    defaultMessage: 'Validation failed for IOS',
+  },
+  "invalidAndroidMessage": {
+    id: 'app.containers.MobilePush.Edit.invalidAndroidMessage',
+    defaultMessage: 'Validation failed for Android',
+  },
+  "invalidTags": {
+    id: 'app.containers.MobilePush.Create.invalidTags',
+    defaultMessage: 'Invalid tags',
+  },
 });

package/v2Containers/MobilePush/commonMethods.js

@@ -2,15 +2,16 @@ import {get, filter, cloneDeep} from 'lodash';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import messages from './Create/messages';
-function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions, tab}) {
+  const currentTab = tab || this.state.currentTab;
   const newInputFields = cloneDeep(inputFields);
   newInputFields.splice(fieldIndex + 1, 0, {
     rowClassName: 'mobile-push-row',
-    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,
 
     cols: [
       {
-        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}`,
         type: "radioGroup",  //Resembles component to be used
         metaType: "text",
         datatype: "string",
@@ -33,12 +34,12 @@ function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
   newInputFields.splice(fieldIndex + 2, 0, {
     rowClassName: 'mobile-push-row',
     id: 'cta-deeplink-select-section',
-    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+    identifier: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,
 
     cols: [
 
       {
-        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+        id: `cta-deeplink${currentTab > 1 ? currentTab : ''}-select`,
         placeholder: "Select DeepLink",
         type: "select",  //Resembles component to be used
         options: deepLinkOptions,
@@ -153,10 +154,11 @@ function getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
   });
   return newInputFields;
 }
-function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field}) {
+function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field, tab}) {
+  const currentTab = tab || this.state.currentTab;
   const inputFields = cloneDeep(inputFieldsArgs);
   const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-  const deeplinkValue = formData[this.state.currentTab - 1][field.id];
+  const deeplinkValue = formData[currentTab - 1][field.id];
   const componentIndex = fieldIndex + 1;
   const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${field.id}-select` : `${field.id}-text`;
   if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {

package/v2Containers/MobilePush/initialSchema.js

@@ -441,6 +441,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",
@@ -1323,6 +1324,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",