@capillarytech/creatives-library 2.0.79 → 2.0.81

package/containers/WeChat/messages.js

@@ -0,0 +1,73 @@
+/*
+ * WeChat Messages
+ *
+ * This contains all the text for the WeChat component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.WeChat.header',
+    defaultMessage: 'WeChat',
+  },
+  'Template mapping': {
+    id: 'app.containers.WeChat.templateMapping',
+    defaultMessage: 'Template mapping',
+  },
+  'Discard': {
+    id: 'app.containers.WeChat.discard',
+    defaultMessage: 'Discard',
+  },
+  'Cancel': {
+    id: 'app.containers.WeChat.cancel',
+    defaultMessage: 'Cancel',
+  },
+  'Save': {
+    id: 'app.containers.WeChat.save',
+    defaultMessage: 'Save',
+  },
+  'Account Id': {
+    id: 'app.containers.WeChat.accountId',
+    defaultMessage: 'Account Id',
+  },
+  'Select Wechat Account': {
+    id: 'app.containers.WeChat.selectWechatAccount',
+    defaultMessage: 'Select Wechat Account',
+  },
+  'Template': {
+    id: 'app.containers.WeChat.template',
+    defaultMessage: 'Template',
+  },
+  'Select Wechat Template': {
+    id: 'app.containers.WeChat.selectWechatTemplate',
+    defaultMessage: 'Select Wechat Template',
+  },
+  'Link': {
+    id: 'app.containers.WeChat.link',
+    defaultMessage: 'Link',
+  },
+  'Is this internal url': {
+    id: 'app.containers.WeChat.isInternalUrl',
+    defaultMessage: 'Is this internal url',
+  },
+  "Tags": {
+    id: 'app.containers.WeChat.tagsLabel',
+    defaultMessage: "Tags",
+  },
+  "gettingTemplateData": {
+    id: 'app.containers.WeChat.gettingTemplateData',
+    defaultMessage: "Getting Template Data..",
+  },
+  "wechatEditSuccess": {
+    id: 'app.containers.WeChat.wechatEditSuccess',
+    defaultMessage: "WeChat template unmapped successfully",
+  },
+  "wechatCreateSuccess": {
+    id: 'app.containers.WeChat.wechatCreateSuccess',
+    defaultMessage: "WeChat template mapped successfully",
+  },
+  "somethingWentWrong": {
+    id: 'app.containers.WeChat.somethingWentWrong',
+    defaultMessage: "Something Went Wrong!!",
+  },
+});

package/containers/WeChat/reducer.js

@@ -0,0 +1,74 @@
+/*
+ *
+ * WeChat reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  weChatDefaultTemplate: fromJS({}),
+  fetchingDefaultTemplates: false,
+  errorFetchingDefaultTempalte: false,
+});
+
+function weChatReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.GET_WECHAT_DEFAULT_TEMPLATES_REQUEST:
+      return state
+        .set('fetchingDefaultTemplates', true)
+        .set('weChatDefaultTemplate', fromJS({}))
+        .set('weChatTemplates', fromJS({}))
+        .set('errorFetchingDefaultTempalte', false);
+    case types.GET_WECHAT_DEFAULT_TEMPLATES_SUCCESS:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('weChatDefaultTemplate', fromJS(action.data))
+        .set('weChatTemplates', fromJS(action.templateData));
+    case types.GET_WECHAT_DEFAULT_TEMPLATES_FAILURE:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('errorFetchingDefaultTempalte', true);
+    case types.CREATE_TEMPLATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false);
+    case types.CREATE_TEMPLATE_SUCCESS:
+      return state.set('createTemplateInProgress', false)
+        .set('createResponse', action.data)
+        .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300));
+    case types.CREATE_TEMPLATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true);
+    case types.CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('createResponse', {});
+    case types.GET_WECRM_ACCOUNTS_REQUEST:
+      return state
+        .set('fetchingWeCrmAccounts', true)
+        .set('weCrmAccountFetchingError', false);
+    case types.GET_WECRM_ACCOUNTS_SUCCESS:
+      return state
+        .set('fetchingWeCrmAccounts', false)
+        .set('weCrmAccounts', fromJS(action.data));
+    case types.GET_WECRM_ACCOUNTS_FAILURE:
+      return state
+        .set('fetchingWeCrmAccounts', false)
+        .set('weCrmAccountFetchingError', true);
+    case types.GET_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case types.GET_TEMPLATE_DETAILS_SUCCESS:
+      return state.set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', action.data);
+    case types.GET_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    case types.SET_WECHAT_ACCOUNT:
+      return state
+        .set('selectedWeChatAccount', fromJS(action.weChatAccount));
+    default:
+      return state;
+  }
+}
+
+export default weChatReducer;

package/containers/WeChat/sagas.js

@@ -0,0 +1,86 @@
+import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import * as types from './constants';
+
+export function* getDefaultWeChatTemplates(params) {
+  try {
+    console.log('Saga param ', params.channel, params.queryParams);
+    const result = yield call(Api.getAllTemplates, {channel: params.channel, queryParams: params.queryParams});
+    yield put({ type: types.GET_WECHAT_DEFAULT_TEMPLATES_SUCCESS, data: result.response.unMapped, templateData: result.response.mapped});
+  } catch (error) {
+    yield put({ type: types.GET_WECHAT_DEFAULT_TEMPLATES_FAILURE, error });
+  }
+}
+
+export function* createTemplate(template) {
+  try {
+    const result = yield call(Api.createWeChatTemplate, template);
+    // const sidebar = result.response.sidebar;
+    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '' });
+  } catch (error) {
+    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error });
+  }
+}
+
+export function* fetchWeCrmAccounts() {
+  try {
+    const result = yield call(Api.fetchWeCrmAccounts);
+    yield [
+      put({
+        type: types.GET_WECRM_ACCOUNTS_SUCCESS,
+        data: result.response,
+      }),
+    ];
+  } catch (error) {
+    yield [
+      put({
+        type: types.GET_WECRM_ACCOUNTS_FAILURE,
+        data: error,
+      }),
+    ];
+  }
+}
+
+export function* getTemplateDetails(id) {
+  try {
+    console.log('saga get Template details', id);
+    const result = yield call(Api.getTemplateDetails, id);
+    // const sidebar = result.response.sidebar;
+    yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+  } catch (error) {
+    yield put({ type: types.GET_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+function* watchGetDefaultWechatTemplates() {
+  const watcher = yield takeLatest(types.GET_WECHAT_DEFAULT_TEMPLATES_REQUEST, getDefaultWeChatTemplates);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchCreateTemplate() {
+  const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchFetchWeCrmAccounts() {
+  const watcher = yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchGetDefaultWechatTemplates,
+  watchCreateTemplate,
+  watchFetchWeCrmAccounts,
+  watchGetTemplateDetails,
+];

package/containers/WeChat/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the weChat state domain
+ */
+const selectWeChatDomain = () => (state) => state.get('weChat');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by WeChat
+ */
+
+const makeSelectWeChat = () => createSelector(
+  selectWeChatDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectWeChat;
+export {
+  selectWeChatDomain,
+};

package/containers/WeChat/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('WeChat actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/{components/SmsPreviewV2 → containers/WeChat}/tests/index.test.js

@@ -1,9 +1,9 @@
 // import React from 'react';
 // import { shallow } from 'enzyme';
 
-// import SmsPreviewV2 from '../index';
+// import { WeChat } from '../index';
 
-describe('<SmsPreviewV2 />', () => {
+describe('<WeChat />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(false);
   });

package/containers/WeChat/tests/reducer.test.js

@@ -0,0 +1,9 @@
+
+import { fromJS } from 'immutable';
+import weChatReducer from '../reducer';
+
+describe('weChatReducer', () => {
+  it('returns the initial state', () => {
+    expect(weChatReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/containers/WeChat/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/WeChat/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectWeChatDomain } from '../selectors';
+
+// const selector = makeSelectWeChatDomain();
+
+describe('makeSelectWeChatDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/index.js

@@ -23,9 +23,9 @@ import CallTask from './v2Containers/CallTask/index';
 import callTaskReducer from './v2Containers/CallTask/reducer';
 import callTaskSaga from './v2Containers/CallTask/sagas';
 
-import WeChat from './containers/WeChat/MapTemplates';
-import wechatReduce from './containers/WeChat/MapTemplates/reducer';
-import wechatSaga from './containers/WeChat/MapTemplates/sagas';
+import WeChat from './v2Containers/WeChat/MapTemplates';
+import wechatReduce from './v2Containers/WeChat/MapTemplates/reducer';
+import wechatSaga from './v2Containers/WeChat/MapTemplates/sagas';
 
 import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
@@ -96,4 +96,5 @@ export { CapContainer,
   MobilePushEditContainer,
   TemplatesV2Container,
   CreativesContainer,
+  WeChat,
 };

package/package.json

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

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)) {
@@ -155,11 +155,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     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');
       }
     }
 
@@ -351,14 +351,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 +1019,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: [

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/Create/selectors.js

@@ -1,9 +1,10 @@
 import { createSelector } from 'reselect';
+import { fromJS } from 'immutable';
 
 /**
  * Direct selector to the create state domain
  */
-const selectPushMessageCreateDomain = () => (state) => state.get('mobileCreate');
+const selectPushMessageCreateDomain = () => (state) => state.get('mobileCreate') || fromJS({});
 /**
  * Other specific selectors
  */

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)) {
@@ -194,11 +194,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     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"]) {
@@ -239,7 +239,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 +512,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 +546,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 +609,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 +725,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 +800,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 +998,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 +1062,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 +1584,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,8 +1595,9 @@ 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;
   };