@capillarytech/creatives-library 0.0.2 → 0.0.3

package/components/CapTagList/index.js

@@ -77,7 +77,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   handleOk = () => {
     const days = this.state.dynamicDateValue;
     let tagValue = this.state.tagValue;
-    tagValue = tagValue.replace("N", `${days}`);
+    tagValue = tagValue.replace("(N)", `${days}`);
     const resultArray = [];
     resultArray.push(tagValue);
     this.props.onSelect(resultArray);
@@ -202,7 +202,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         </CapPopover>
         <Modal
           visible={this.state.showModal}
-          title={"Dynamic Days before Expiry"}
+          title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
           onOk={this.handleOk}
           onCancel={this.handleCancel}
           footer={[

package/components/CapTagList/messages.js

@@ -18,4 +18,8 @@ export default defineMessages({
     id: 'app.components.CapTagList.Cancel',
     defaultMessage: 'Cancel',
   },
+  "Dynamic Days before Expiry": {
+    id: 'app.components.CapTagList.dynamic_days_before_expiry',
+    defaultMessage: 'Dynamic Days before Expiry',
+  },
 });

package/components/CardGrid/index.js

@@ -27,7 +27,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     return (
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+        {this.props.listItem && this.props.listItem.length > 0 && <div className={this.props.enablePagination ? 'pagination-container' : ''}>
           <Row gutter={this.props.gutterSize}>
             { this.props.listItem ? this.props.listItem.map( (item) => (
               <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
@@ -35,7 +35,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
               </Col>
             )) : ''}
           </Row>
-        </div>
+        </div>}
       </div>
     );
   }

package/components/Ckeditor/index.js

@@ -143,7 +143,9 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     );
     console.log('2');
 
-    this.props.getEditorInstanse(this.editorInstance);
+    if (this.props.getEditorInstanse) {
+      this.props.getEditorInstanse(this.editorInstance);
+    }
 
     //Register listener for custom events if any
     this.editorInstance.on('change', this.handleContentChange);

package/components/Edmeditor/index.js

@@ -42,7 +42,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
     console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
     return (
       this.props.edmSrc ?
-        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="700" width="100%"></iframe>)
+        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%"></iframe>)
       : 'aaasass'
     );
   }

package/components/FormBuilder/index.js

@@ -232,7 +232,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       console.log('Inside Tags', nextProps.tags, this.props.tags);
       this.validateForm(nextProps.tags, nextProps.injectedTags);
     }
-    if (nextProps.showModal && !_.isEqual(nextProps.showModal, this.props.showModal)) {
+    if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
       console.log('Inside Modal change ', nextProps.showModal);
       this.setState({showModal: nextProps.showModal});
     }
@@ -277,11 +277,37 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         >
           {this.state.modal.body}
         </Modal>);
+      } else if (this.state.modal.type === "action") {
+        modal = (<Modal
+          visible={this.state.showModal}
+          title={this.state.modal.title}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+          ]}
+          afterClose={this.handleCloseModal}
+        >
+          {this.state.modal.jsx}
+        </Modal>);
       }
     }
     return modal;
   };
 
+  handleCloseModal = (data, e) => {
+    console.log('handle close modal', data, e);
+    const event = this.state.currentEvent;
+    if (!_.isEmpty(this.state.currentEvent)) {
+      switch (event) {
+        case "addLanguage":
+          this.updateFormData(this.state.currentEventData, this.state.currentEventVal, this.state.currentEvent);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
   handleVisibleChange = (popoverVisible) => {
     this.setState({ popoverVisible });
   };
@@ -632,10 +658,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(androidData) && this.state.currentTab === 2){
-          modal.body = "Android template is not configured. Save without Android template";
-          modal.id = "ios";
-          modal.type = 'confirm';
-          this.setState({modal, showModal: true, androidValid, iosValid});
+          this.setState({androidValid, iosValid}, () => {
+            this.props.setModalContent('ios');
+          });
+          // modal.body = "Android template is not configured. Save without Android template";
+          // modal.id = "ios";
+          // modal.type = 'confirm';
           return;
         }
         const iosData = {};
@@ -645,10 +673,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if(_.isEmpty(iosData) && this.state.currentTab === 1){
-          modal.body = "IOS template is not configured, Save without IOS template";
-          modal.id = 'android';
-          modal.type = 'confirm';
-          this.setState({modal, showModal: true, androidValid, iosValid});
+          this.setState({androidValid, iosValid}, () => {
+            this.props.setModalContent('android');
+          });
+          // modal.body = "IOS template is not configured, Save without IOS template";
+          // modal.id = 'android';
+          // modal.type = 'confirm';
+          // this.setState({modal, showModal: true, androidValid, iosValid});
           return;
         }
       }
@@ -1385,7 +1416,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
       formData[currentTab].tabKey = baseLangTabKey;
       if (formData[currentTab].base) {
+        delete formData.base[currentLang];
+        delete formData.base.selectedLanguages.splice(deleteLanguageIndex, 1);
         formData.base.tabKey = baseLangTabKey;
+        formData.base.activeTab = this.props.baseLanguage;
       }
       console.log('After Deleting Form data ', formData);
       this.setState({formData, currentLangTab: this.props.baseLanguage, tabKey: baseLangTabKey}, () => {
@@ -1409,17 +1443,74 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.state.usingTabContainer && !val.standalone) {
       const data1 = data;
       if (event === "addLanguage") {
-        const baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
-        console.log('Add Language Event', data, val, tabIndex, _.cloneDeep(baseTab));
-        baseTab['template-content'] = '';
-        baseTab.iso_code = data.iso_code;
-        baseTab.lang_id = data.lang_id;
-        baseTab.language = data.language;
-        baseTab.tabKey = _.uniqueId();
-        formData[tabIndex].selectedLanguages.push(data.iso_code);
-        formData[tabIndex][data.iso_code] = baseTab;
-        console.log('Add Language Event After', formData);
-        formData[tabIndex].activeTab = data.iso_code;
+        const addLanguageType = this.props.addLanguageType;
+        const currentLang = formData[tabIndex].activeTab;
+        let baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
+        let id = _.uniqueId();
+        let validId = false;
+        switch (addLanguageType) {
+          case "upload":
+            baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
+            console.log('Add Language Event', JSON.stringify(formData), "\n", JSON.stringify(baseTab));
+            baseTab.iso_code = data.iso_code;
+            baseTab.lang_id = data.lang_id;
+            baseTab.language = data.language;
+            while (!validId) {
+              validId = true;
+              for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
+                if (!formData[idx]) {
+                  continue;
+                }
+                if (id === formData[idx].tabKey) {
+                  validId = false;
+                }
+              }
+              if (validId) {
+                break;
+              }
+              id = _.uniqueId();
+            }
+            baseTab.tabKey = id;
+            //formData[tabIndex].selectedLanguages.push(data.iso_code);
+            formData[tabIndex][data.iso_code] = baseTab;
+            console.log('Add Language Event After', formData);
+            formData[tabIndex].activeTab = data.iso_code;
+            formData[tabIndex].tabKey = baseTab.tabKey;
+            break;
+          case "copyPrimaryLanguage":
+          case "useEditor":
+            baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
+            console.log('Add Language Event', data, val, tabIndex, _.cloneDeep(baseTab));
+            //baseTab['template-content'] = '';
+            baseTab.iso_code = data.iso_code;
+            baseTab.lang_id = data.lang_id;
+            baseTab.language = data.language;
+            validId = false;
+            while (!validId) {
+              validId = true;
+              for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
+                if (!formData[idx]) {
+                  continue;
+                }
+                if (id === formData[idx].tabKey) {
+                  validId = false;
+                }
+              }
+              if (validId) {
+                break;
+              }
+              id = _.uniqueId();
+            }
+            baseTab.tabKey = id;
+            formData[tabIndex].selectedLanguages.push(data.iso_code);
+            formData[tabIndex][data.iso_code] = baseTab;
+            console.log('Add Language Event After', formData);
+            formData[tabIndex].activeTab = data.iso_code;
+            formData[tabIndex].tabKey = baseTab.tabKey;
+            break;
+          default:
+            break;
+        }
         const that = this;
         setTimeout(() => {
           that.setState({tabKey: baseTab.tabKey});
@@ -1435,6 +1526,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           formData.base[val.id] = data1;
         } else {
           formData.base[data1.iso_code] = formData[tabIndex][data1.iso_code];
+          formData.base.tabKey = formData[tabIndex].tabKey;
+          formData.base.activeTab = formData[tabIndex].activeTab;
+          formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
         }
       }
     } else {
@@ -1620,13 +1714,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else if (event === 'deleteVersion') {
         if (this.props.schema.channel.toUpperCase() === 'EMAIL') {
           // this.deleteVersion(false, this.state.currentTab);
-          const modalContent = {
-            title: "Alert",
-            body: "Do you really want to delete this version?",
-            type: 'confirm',
-            id: 'email-version-delete-modal',
-          };
-          this.setState({showModal: true, modal: modalContent, currentEvent: val.injectedEvents[event], currentEventData: data });
+          this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
+            this.props.setModalContent('delete-version');
+          });
         } else {
           this.handleConfirmations();
         }
@@ -1653,13 +1743,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         return;
       }
     } else if (event === 'deleteLanguage') {
-      const modalContent = {
-        title: "Alert",
-        body: "Do you really want to delete this language?",
-        type: 'confirm',
-        id: 'email-language-delete-modal',
-      };
-      this.setState({showModal: true, modal: modalContent, currentEvent: val.injectedEvents[event], currentEventData: data });
+      this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
+        this.props.setModalContent('delete-language');
+      });
+      // const modalContent = {
+      //   title: "Alert",
+      //   body: "Do you really want to delete this language?",
+      //   type: 'confirm',
+      //   id: 'email-language-delete-modal',
+      // };
       // debugger;
       // if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
       //   console.log('Base Language');
@@ -1817,6 +1909,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return items;
   }
 
+  handleAddLanguageFlow(data, val, event) {
+    this.setState({currentEventData: data, currentEventVal: val, currentEvent: event}, () => {
+      this.props.setModalContent('add-language', data);
+    });
+  }
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -2538,14 +2636,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
             console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
             const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
-            console.log('ckeditor current lang', currentLang);
+            const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
+            console.log('ckeditor current lang', currentLang, content);
+            if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
+              // content = "";
+            }
             columns.push(
               <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CKEditor
                   id={val.id}
-                  content={(!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '')}
+                  content={content}
                   events={val.events}
-                  getEditorInstanse={val.getEditorInstanse}
+                  getEditorInstanse={(evt) => val.injectedEvents.getEditorInstanse.call(this, evt)}
                   handleContentChange={(event) => this.updateFormData(event, val, 'onContentChange')}
                 />
               </Col>
@@ -2601,7 +2703,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   id={val.id}
                   popOverList={this.props.supportedLanguages}
                   excludeList={this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages}
-                  handlePopOverClick={(data) => this.updateFormData(data, val, "addLanguage")}
+                  handlePopOverClick={(data) => this.handleAddLanguageFlow(data, val, "addLanguage")}
                 />
               </Col>
             );
@@ -2711,6 +2813,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           console.log('tabs rendering pushing pane', paneTabKey, renderedSections, index, pane);
           renderedPanes.push(
             <TabPane
+              forceRender
               tab={
                 <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
                   {
@@ -2874,6 +2977,8 @@ FormBuilder.propTypes = {
   toggleEdmEmailTemplateSelection: PropTypes.func,
   handleEdmDefaultTemplateSelection: PropTypes.func,
   userLocale: PropTypes.string,
+  setModalContent: PropTypes.func,
+  addLanguageType: PropTypes.string,
 };
 
 export default FormBuilder;

package/containers/Ebill/index.js

@@ -622,7 +622,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     }
 
     if (nextProps.Ebill.createTemplateError && !_.isEqual(nextProps.Ebill.createTemplateError, this.props.Ebill.createTemplateError)) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
+      const message = getMessageObject('error', (nextProps.Ebill.createTemplateErrorMessage && nextProps.Ebill.createTemplateErrorMessage !== '') ? nextProps.Ebill.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
 

package/containers/Ebill/reducer.js

@@ -14,16 +14,19 @@ function ebillReducer(state = initialState, action) {
     case types.CREATE_TEMPLATE_REQUEST:
       return state
         .set('createTemplateInProgress', true)
-        .set('createTemplateError', false);
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(""));
     case types.CREATE_TEMPLATE_SUCCESS:
       return state
         .set('createTemplateInProgress', false)
         .set('createResponse', action.data)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg))
         .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300));
     case types.CREATE_TEMPLATE_FAILURE:
       return state
         .set('createTemplateInProgress', false)
-        .set('createTemplateError', true);
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
     case types.GET_TEMPLATE_DETAILS_REQUEST:
       return state
         .set('getTemplateDetailsInProgress', true);

package/containers/Ebill/sagas.js

@@ -5,12 +5,16 @@ import * as types from './constants';
 
 
 export function* createTemplate(template) {
+  let errorMsg = "";
   try {
     console.log('Template data ', template);
     const result = yield call(Api.createEbillTemplate, template);
-    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '' });
+    if ((result.message && typeof result.message === 'string') || result.status.code === 500) {
+      errorMsg = result.message;
+    }
+    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
   } catch (error) {
-    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error });
+    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }
 }
 

package/containers/Email/_email.scss

@@ -51,6 +51,15 @@
     font-style: normal;
     font-weight: 600;
   }
+  .ant-tabs.ant-tabs-top.ant-tabs-line {
+    // overflow: hidden !important;
+  }
+  .ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content-animated {
+    margin-left: 0 !important;
+  }
+  .ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane-inactive {
+    display: none !important;
+  }
   .ant-tabs-bar{
     margin-bottom: 0 !important;
     display: flex;