@capillarytech/creatives-library 2.0.89 → 2.0.91

package/v2Containers/CreativesContainer/index.js

@@ -279,6 +279,9 @@ class Creatives extends React.Component {
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
+  onValidationFail = () => {
+    this.setState({ isGetFormData: false });
+  }
   discardMessage = () => {
     this.setState({ isDiscardMessage: true });
   }
@@ -342,34 +345,35 @@ class Creatives extends React.Component {
 
     return showDone;
   }
+  templateNameComponentHeader = ({formData, onFormDataChange, name}) => (
+    <CapHeader
+      inline
+      title={name}
+      description={<CapLink
+        title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
+        onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
+    }/>)
+  templateNameComponentInput = ({formData, onFormDataChange, name}) => (<CapInput
+
+    value={name}
+    suffix={<span/>}
+    onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
+    onChange={(ev) => {
+      const value = ev.currentTarget.value;
+      const newFormData = {...formData, 'template-name': value};
+      onFormDataChange(newFormData);
+    }}
+    />)
   showTemplateName = ({formData, onFormDataChange}) => { //gets called from email/index after template data is fetched
     const {slidBoxContent, currentChannel, isEditName} = this.state;
     const channel = currentChannel.toUpperCase();
     if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
+      this.templateContainerDetails = {formData, onFormDataChange};
       if (name && !isEditName) {
-        const TemplateNameComponent = () => (
-          <CapHeader
-            inline
-            title={name}
-            description={<CapLink
-              title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
-              onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
-          }/>);
-        this.setState({templateNameComponent: TemplateNameComponent});
+        this.setState({showTemplateNameComponentEdit: false});
       } else if (isEditName) {
-        const TemplateNameComponent = () => (<CapInput
-          key="cap-input-template-name"
-          value={name}
-          suffix={<span/>}
-          onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
-          onChange={(ev) => {
-            const value = ev.currentTarget.value;
-            const newFormData = {...formData, 'template-name': value};
-            onFormDataChange(newFormData);
-          }}
-          />);
-        this.setState({templateNameComponent: TemplateNameComponent});
+        this.setState({showTemplateNameComponentEdit: true});
       }
     }
   }
@@ -390,8 +394,18 @@ class Creatives extends React.Component {
 
     return isShowContinueFooter;
   }
+  templateNameRenderProp = () => {
+    const {showTemplateNameComponentEdit, currentChannel, slidBoxContent} = this.state;
+    const {templateContainerDetails} = this;
+    const {formData, onFormDataChange} = templateContainerDetails;
+    const channel = currentChannel.toUpperCase();
+    if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
+      const name = get(formData, 'template-name');
+      return showTemplateNameComponentEdit ? this.templateNameComponentInput({formData, onFormDataChange, name}) : this.templateNameComponentHeader({formData, onFormDataChange, name});
+    }
+  }
   render() {
-    const {templateNameComponent, slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
     const {isFullMode, creativesMode, cap, isUploading} = this.props;
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
@@ -407,7 +421,8 @@ class Creatives extends React.Component {
               creativesMode={creativesMode}
               isFullMode={isFullMode}
               isLoadingContent={isLoadingContent}
-              showTemplateName={templateNameComponent}
+              shouldShowTemplateName={this.templateContainerDetails}
+              templateNameRenderProp={this.templateNameRenderProp}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
             />
           }
@@ -440,6 +455,7 @@ class Creatives extends React.Component {
               onMobilepushModeChange={this.onMobilepushModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
+              onValidationFail={this.onValidationFail}
             />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/CreativesContainer/messages.js

@@ -16,7 +16,7 @@ export default defineMessages({
   },
   "lastUpdated": {
     id: 'app.containers.Creatives.lastUpdated',
-    defaultMessage: 'Last updated:',
+    defaultMessage: 'Last updated: {date} by {user}',
   },
   "by": {
     id: 'app.containers.Creatives.by',

package/v2Containers/Email/index.js

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Row, Col, Popover, Modal } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard } from '@capillarytech/cap-ui-library';
+import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard, CapNotification } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
@@ -216,6 +216,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (this.props.location.query.type === 'embedded') {
     //   this.showNext();
     // }
+    const {isFullMode, isGetFormData} = nextProps;
+    if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData)) {
+      //when create button is clicked in full mode
+      this.startValidation(true);
+    }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
     }
@@ -632,7 +637,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       } else {
         message = getMessageObject('success', this.props.intl.formatMessage(messages.emailCreateSuccess), true);
       }
-      this.props.globalActions.addMessageToQueue(message);
+      CapNotification.success({message});
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
@@ -944,13 +949,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   shouldStartValidation = () => {
     this.setState((prevState) => ({ cmsDataCount: prevState.cmsDataCount + 1}), () => {
       if (this.state.targetSaveCount === this.state.cmsDataCount) {
-        this.setState({startValidation: true});
+        //gets called when org is edm editor enabled, whenever the edm data get saved
+        this.startValidation(this.props.isGetFormData);
       }
     });
   }
-
+  startValidation = (shouldSave) => {
+    if (!this.state.startValidation && shouldSave) {
+      this.setState({startValidation: true});
+    }
+  }
   stopValidation = () => {
-    this.setState({startValidation: false});
+    this.setState({startValidation: false}, this.props.onValidationFail);
   }
   saveValidationData = () => {
     let saveCount = 0;
@@ -965,7 +975,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       });
       if (saveCount === 0) {
-        this.setState({startValidation: true});
+        this.startValidation();
         return;
       }
       this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
@@ -2310,16 +2320,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   saveFormData = (passedData) => {
-    //Logic to save in db etc
-    // const isValidated = this.validateFormData(formData);
-    //
-    // if (!isValidated) {
-    //   return;
-    // }
-    //if (!this.state.startValidation) {
-    //  this.saveValidationData();
-    //  return;
-    //}
+    //saveFormData gets called only when validation result is true
+
 
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
@@ -2682,6 +2684,7 @@ Email.propTypes = {
   injectedTags: PropTypes.object,
   defaultData: PropTypes.object,
   showTemplateName: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/Email/sagas.js

@@ -1,18 +1,21 @@
 import { take, cancel, call, put, takeLatest, takeEvery } from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
+import {CapNotification} from '@capillarytech/cap-ui-library';
 import * as Api from '../../services/api';
 import * as types from './constants';
 
-
 export function* createTemplate(template) {
   let errorMsg;
   try {
     const result = yield call(Api.createEmailTemplate, template);
-    if (result.message || result.status.code === 500) {
+    if (result.status.code === 500) {
       errorMsg = result.message;
+      CapNotification.error({message: errorMsg, key: 'create-email-template-error'});
+      yield put({ type: types.CREATE_TEMPLATE_FAILURE, errorMsg });
+    } else {
+      yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+      yield template.onCreateTemplateComplete(result.response);
     }
-    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
-    yield template.onCreateTemplateComplete(result.response);
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }

package/v2Containers/EmailWrapper/index.js

@@ -158,7 +158,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {showTemplateName, emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent} = this.props;
+    const {showTemplateName, emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent, onValidationFail} = this.props;
     const {templateName, modeContent} = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
@@ -211,6 +211,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 defaultData={{'template-name': templateName}}
                 cap={cap}
                 showTemplateName={showTemplateName}
+                onValidationFail={onValidationFail}
             />}
               {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
             </div>
@@ -240,6 +241,7 @@ EmailWrapper.propTypes = {
   isUploading: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
   showTemplateName: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Create/_smsCreate.scss

@@ -12,47 +12,3 @@
   }
 }
 
-.ant-breadcrumb{
-  color: #707070;
-  font-family: open-sans;
-  line-height: 16px;
-  font-size: 12px;
-  padding-left: 8px;
-}
-.ant-checkbox{
-  vertical-align: middle !important;
-}
-
-#template-name.ant-input{
-  font-size: 20px !important;
-  // font-family: proxima-nova, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-}
-.ant-tabs-bar{
-  margin-bottom: 0 !important;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-.ant-tabs-tabpane{
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  margin-top: -0.2%;
-  min-height: calc(70vh);
-}
-
-.ant-tabs-extra-content{
-  flex: 1;
-  align-self: flex-end;
-}
-
-.version-popover {
-  line-height: 24px;
-  cursor: pointer;
-}
-
-.version-popover:hover{
-  background-color: #ecf6fd;
-}

package/v2Containers/Sms/Create/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapSpin } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -25,6 +25,7 @@ import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
+import {SMS} from '../../CreativesContainer/constants';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -137,8 +138,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       this.startValidation();
     }
     if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
-      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);
+      const message = (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong);
+      CapNotification.error({key: 'createTemplateError', message });
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
@@ -209,8 +210,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Created Successfully';
+      CapNotification.success({key: 'createMessageSuccess', message});
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       if (this.props.isFullMode) {
@@ -279,7 +280,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         cancelTemplate: this.cancelTemplate,
       },
       "save-button": {
-        saveFormData: this.saveFormData,
+        saveFormData: this.validateAndSaveFormData,
       },
       "sms-editor": {
         onChange: this.onTemplateContentChange,
@@ -879,20 +880,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showModal: false});
   }
 
-  saveFormData(formData) {
+  validateAndSaveFormData = () => {
+    this.setState({startValidation: true});
+  }
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveFormData() {
     //Logic to save in db etc
-    const validatedFormData = this.getFormData();
-
-    if (!validatedFormData.validity) {
-      return;
-    }
-
+    const formData = _.cloneDeep(this.state.formData);
     const obj = {};
     obj.versions = {
       base: {},
       history: [],
     };
-    obj.type = validatedFormData.type;
+    obj.type = SMS;
     for (let index = 0; index < this.state.tabCount; index += 1 ) {
       obj.versions.history.push(formData[index]);
       // if (formData[index])

package/v2Containers/Sms/Edit/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { Row, Col, Spin } from 'antd';
+import { CapRow, CapColumn, CapSpinner, CapNotification } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -161,8 +161,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Edited Successfully';
+      CapNotification.success({key: 'messageCreateSuccess', message });
       this.props.actions.clearEditResponse();
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
@@ -173,8 +173,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (nextProps.Edit.editTemplateError && !_.isEqual(nextProps.Edit.editTemplateError, this.props.Edit.editTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong);
+      CapNotification.error({key: 'templateEditFailed', message});
     }
   }
 
@@ -228,8 +228,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Edited Successfully';
+      CapNotification.success({key: 'editTemplateSuccess', message});
       this.props.actions.clearEditResponse();
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
@@ -351,7 +351,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         cancelTemplate: this.cancelTemplate,
       },
       "save-button": {
-        saveFormData: this.saveFormData,
+        saveFormData: this.validateAndSaveFormData,
       },
       "sms-editor": {
         onChange: this.onTemplateContentChange,
@@ -889,22 +889,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   handleCancelModal = () => {
     this.setState({showModal: false});
   }
-
-  saveFormData(formData) {
+  validateAndSaveFormData = () => {
+    this.setState({startValidation: true});
+  }
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveFormData() {
     //Logic to save in db etc
+    //saveFormData gets called only when validation result is true
 
-    const obj = _.cloneDeep(this.state.editData);
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    for (let index = 0; index < this.state.tabCount; index += 1 ) {
-      obj.versions.history.push(formData[index]);
-    }
-    obj.name = formData['template-name'];
-    obj.versions.base = formData.base;
+    const editData = _.cloneDeep(this.state.editData);
+    const formData = _.cloneDeep(this.state.formData);
+    editData.name = formData['template-name'];
+    editData.versions.base = formData.base;
 
-    this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
+    this.props.actions.editTemplate(editData, this.onUpdateTemplateComplete);
   }
   isSmsLoading = () => {
     //let {isLoading} = this.props;
@@ -932,18 +932,18 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     return (
       <div className="sms-email-container">
-        <Spin tip={tipText} spinning={spinning}>
-          {/*<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
-            <Col offset={1}>
+        <CapSpinner tip={tipText} spinning={spinning}>
+          {/*<CapRow style={{marginBottom: '16px', marginLeft: '-40px'}}>
+            <CapColumn offset={1}>
               <Breadcrumb>
                 <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
                 <Breadcrumb.Item>Creatives</Breadcrumb.Item>
                 <Breadcrumb.Item>SMS</Breadcrumb.Item>
               </Breadcrumb>
-            </Col>
-          </Row>*/}
-          <Row>
-            <Col>
+            </CapColumn>
+          </CapRow>*/}
+          <CapRow>
+            <CapColumn>
               <FormBuilder
                 isFullMode={this.props.isFullMode}
                 refs={this.componentRefs}
@@ -968,10 +968,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onContextChange={this.handleOnTagsContextChange}
                 handleCancelModal={this.handleCancelModal}
                 router={this.props.router}
+                startValidation={this.state.startValidation}
+                stopValidation={this.stopValidation}
               />
-            </Col>
-          </Row>
-        </Spin>
+            </CapColumn>
+          </CapRow>
+        </CapSpinner>
       </div>
     );
   }

package/v2Containers/Sms/initialSchema.js

@@ -235,24 +235,24 @@ export const response = {
                             "saveFormData",
                           ],
                         },
-                        {
-                          id: "discard-button",
-                          metaType: "submit-button",
+                        // {
+                        //   id: "discard-button",
+                        //   metaType: "submit-button",
 
-                          type: "button",
-                          buttonType: "secondary",
-                          value: "Discard changes",
-                          customComponent: false,
-                          standalone: true,
-                          styling: "semantic",
-                          order: 3,
-                          fluid: true,
-                          submitAction: "discardValues",
-                          onlyDisplay: true,
-                          supportedEvents: [
-                            "discardValues",
-                          ],
-                        },
+                        //   type: "button",
+                        //   buttonType: "secondary",
+                        //   value: "Discard changes",
+                        //   customComponent: false,
+                        //   standalone: true,
+                        //   styling: "semantic",
+                        //   order: 3,
+                        //   fluid: true,
+                        //   submitAction: "discardValues",
+                        //   onlyDisplay: true,
+                        //   supportedEvents: [
+                        //     "discardValues",
+                        //   ],
+                        // },
 
 
                       ],