@capillarytech/creatives-library 2.0.80 → 2.0.81

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;
   };
 

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")) {