@capillarytech/creatives-library 2.0.40 → 2.0.42

package/components/EmailPreviewV2/_emailPreviewV2.scss

@@ -49,8 +49,6 @@ $classPrefix: email-preview-v2;
                 position: absolute;
                 top: 10.3%;
                 left: 14%;
-                width: 100%;
-                height: 100%;
                 overflow: auto;
                 display: -webkit-box;
                 display: -ms-flexbox;

package/components/EmailPreviewV2/index.js

@@ -12,8 +12,8 @@ import {isEmpty} from 'lodash';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { CapSpin } from '@capillarytech/cap-ui-library';
-
+import { CapSpin, CapSlideBox } from '@capillarytech/cap-ui-library';
+import moment from 'moment';
 import messages from './messages';
 import './_emailPreviewV2.scss';
 import tabletBody from '../../assets/iPad.svg';
@@ -57,6 +57,27 @@ class EmailPreviewV2 extends React.Component {
   changePreviewDevice = (ev) => {
     this.setState({currentDevice: ev.currentTarget.id});
   }
+  getPreview = ({device, messageContainerName, templateContent}) => {
+    return (
+      <div className={device === devices.desktop ? '' : "shell align-center"}>
+        {device === devices.tablet ?
+          <img src={tabletBody} alt="capillary" width="520" /> : ''}
+        {device === devices.mobile ?
+          <img src={mobileBody} alt="capillary" width="85%" /> : ''}
+        <div className={messageContainerName}>
+          <iframe srcDoc={templateContent} {...deviceAspectRatio[device]} >
+            <p><FormattedMessage {...messages.noIframeSupport}/></p>
+          </iframe>
+        </div>
+      </div>
+    )
+  }
+  showAllDevices = () => {
+    this.setState({showSlideBox: true});
+  }
+  hideAllDevices = () => {
+    this.setState({showSlideBox: false})l
+  }
   render() {
     let messageContainerName = '';
     const {currentDevice} = this.state;
@@ -97,6 +118,11 @@ class EmailPreviewV2 extends React.Component {
               </div>
             </div>
           </div>
+            {this.props.templateData &&
+            [<p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
+              <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
+            ]
+        }
         </CapSpin>
       </div>
 

package/components/EmailPreviewV2/messages.js

@@ -26,5 +26,16 @@ export default defineMessages({
     id: 'app.components.EmailPreviewV2.noIframeSupport',
     defaultMessage: 'Your browser does not support iframes.',
   },
-
+  showAllDevices: {
+    id: 'app.components.EmailPreviewV2.showAllDevices',
+    defaultMessage: 'Show all devices',
+  },
+  lastModified: {
+    id: 'app.components.PreviewSideBar.lastModified',
+    defaultMessage: 'Last Modified On',
+  },
+  uploadedBy: {
+    id: 'app.components.PreviewSideBar.uploadedBy',
+    defaultMessage: 'Last Modified By',
+  },
 });

package/components/FormBuilder/index.js

@@ -305,7 +305,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
-  handleCloseModal = (data) => {
+  handleCloseModal = () => {
     const event = this.state.currentEvent;
     if (!_.isEmpty(this.state.currentEvent)) {
       switch (event) {
@@ -947,7 +947,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   skipTags(tag) {
-    const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]"];
+    const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d","Link_to_[a-zA-z]"];
 
     //const regexGroups = [];
     let skipped = false;

package/containers/CreativesContainer/SlideBoxContent.js

@@ -38,7 +38,7 @@ function SlideBoxContent(props) {
       isFullMode,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
-  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library', isLanguageSupport: true };
+  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
   const creativesLocationProps = {
     pathname: `/sms/edit`,
     query,
@@ -80,7 +80,7 @@ function SlideBoxContent(props) {
         content={templateData.versions.base['sms-editor']}
         channel={templateData.type.toLowerCase()}
         charCounterEnabled
-        templateData={this.props.templateData}
+        templateData={templateData}
       />
         )}
       {isEmailPreview && (

package/containers/CreativesContainer/index.js

@@ -51,7 +51,9 @@ class Creatives extends React.Component {
   };
   onPreviewTemplate = (template) => {
     const templateData = template;
-    templateData.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.templateUserList));
+    const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
+    const userId = parseInt(template.updatedBy, 10);
+    templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
     this.setState({ slidBoxContent: 'preview', templateData });
   };
   onEditTemplate = () => {

package/containers/Email/index.js

@@ -1639,86 +1639,73 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     let langTab = 0;
     const schema = _.cloneDeep(this.state.schema);
     const formData = _.cloneDeep(passedData);
-    for (let idx = 0; idx < addLanguageLength; idx += 1) {
-      let newActiveTab = this.state.settingLanguage ? this.state.settingLanguage.iso_code : 'en';
-      if (asyncLanguages) {
-        newActiveTab = asyncLanguages[idx].iso_code;
-        data = asyncLanguages[idx];
-      }
-      langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
-      if (langTab === -1) {
-        formData[`${this.state.currentTab - 1}`].selectedLanguages.push(newActiveTab);
+    if (!_.isEmpty(schema)) {
+      for (let idx = 0; idx < addLanguageLength; idx += 1) {
+        let newActiveTab = this.state.settingLanguage ? this.state.settingLanguage.iso_code : 'en';
+        if (asyncLanguages) {
+          newActiveTab = asyncLanguages[idx].iso_code;
+          data = asyncLanguages[idx];
+        }
         langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
-      }
-      const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
-      tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
-
-      const tabIndex = (selectedLanguage) + 1;
-      const containers = schema.containers.slice();
-      const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
-      const tabContentSection = tabContent.inputFields[0].cols[0];
-      const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
-      const firstPane = _.cloneDeep(panes[0]);
-      const sections = [];
-      _.forEach(firstPane.sections, (section) => {
-        let sect = _.cloneDeep(section);
-
-        if (sect.type === 'col-label') {
-          sect = this.cloneColLabel(sect, tabIndex);
-        } else if (sect.type === 'multicols') {
-          sect = this.cloneMultiCol(sect, tabIndex);
-        } else if (sect.type === 'parent') {
-          sect = this.cloneParent(sect, tabIndex);
+        if (langTab === -1) {
+          formData[`${this.state.currentTab - 1}`].selectedLanguages.push(newActiveTab);
+          langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
         }
-
-        sections.push(sect);
-        return true;
-      });
-
-      tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
-      tabContentSection.value = `${data.language}`;
-
-      _.forEach(sections[0].inputFields[0].cols, (inputField) => {
-        if (this.map[inputField.id] === undefined) {
-          if (inputField.id.indexOf('template-content') > -1) {
-            this.map[inputField.id] = this.map['template-content'];
-          } else if (inputField.id.indexOf('edmeditor2') > -1) {
-            this.map[inputField.id] = this.map.edmeditor2;
+        const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
+        tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;  
+        const tabIndex = (selectedLanguage) + 1;
+        const containers = schema.containers.slice();
+        const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
+        const tabContentSection = tabContent.inputFields[0].cols[0];
+        const panes = containers[`${this.state.currentTab - 1}`].panes.slice();
+        const firstPane = _.cloneDeep(panes[0]);
+        const sections = [];
+        _.forEach(firstPane.sections, (section) => {
+          let sect = _.cloneDeep(section);
+          if (sect.type === 'col-label') {
+            sect = this.cloneColLabel(sect, tabIndex);
+          } else if (sect.type === 'multicols') {
+            sect = this.cloneMultiCol(sect, tabIndex);
+          } else if (sect.type === 'parent') {
+            sect = this.cloneParent(sect, tabIndex);
           }
+          sections.push(sect);
+          return true;
+        });
+        tabContentSection.id = `${tabContentSection.id}${tabIndex}`;
+        tabContentSection.value = `${data.language}`;
+        _.forEach(sections[0].inputFields[0].cols, (inputField) => {
+          if (this.map[inputField.id] === undefined) {
+            if (inputField.id.indexOf('template-content') > -1) {
+              this.map[inputField.id] = this.map['template-content'];
+            } else if (inputField.id.indexOf('edmeditor2') > -1) {
+              this.map[inputField.id] = this.map.edmeditor2;
+            }
+          }
+        });
+        firstPane.sections = sections;
+        firstPane.sectionsHeaders = [tabContent];
+        // panes.push(firstPane);
+        schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
+        // schema.containers[0].tabContent.sections.push(tabContent);
+      }
+      //this.props.templatesActions.getEdmDefaultTemplates();
+      const container = schema.containers[this.state.currentTab - 1];
+      const temp = container;
+      if (this.state.addLanguageType === "upload") {
+        temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
+        temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
+        temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
+      }
+      temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
+      if (schema) {
+        this.setState({schema, isSchemaChanged: true, tabKey});
+        if (this.state.addLanguageType !== "upload") {
+          this.setState({addLanguageType: ''});
         }
-      });
-      firstPane.sections = sections;
-      firstPane.sectionsHeaders = [tabContent];
-
-      // panes.push(firstPane);
-
-      schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
-      // schema.containers[0].tabContent.sections.push(tabContent);
-    }
-    //this.props.templatesActions.getEdmDefaultTemplates();
-    const container = schema.containers[this.state.currentTab - 1];
-    const temp = container;
-
-    if (this.state.addLanguageType === "upload") {
-      temp.panes[langTab].sections[0].inputFields[0].cols[0].colStyle = {display: ""};
-      temp.panes[langTab].sections[0].inputFields[0].cols[1].colStyle = {display: "none"};
-      temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[3].cols[0].style = {display: "none"};
-    }
-    temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
-    if (schema) {
-      this.setState({schema, isSchemaChanged: true, tabKey});
-      if (this.state.addLanguageType !== "upload") {
-        this.setState({addLanguageType: ''});
+        //this.toggleEdmEmailTemplateSelection();
       }
-      //this.toggleEdmEmailTemplateSelection();
     }
-    // const mode = this.state.addLanguageMode;
-    // switch (mode) {
-    //   case "upload":
-    //
-    //   default:
-    //     break;
-    // }
   }
 
   openPreviewMode = (selectedAsset) => {
@@ -2453,9 +2440,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
-    if (isLoading) {
-      this.props.creativesContainerActions.hideCreativesContanerLoader();
-    }
+    // if (isLoading) {
+    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
+    // }
     return isLoading;
   }
   renderConfirmationModal() {

package/containers/EmailWrapper/index.js

@@ -24,7 +24,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       templateName: '',
       routeParams: {
         pathname: `/email/create`,
-        query: { module: 'library', type: 'embedded', isEdmSupport: true, isLanguageSupport: true},
+        query: { module: 'library', type: 'embedded', isEdmSupport: true},
       },
       modeContent: {
 

package/containers/Sms/Create/index.js

@@ -236,9 +236,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
-    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
-    result.base.msg_count = msgObj.msgCount;
-
+    if (this.state.isValid) {
+      const msgObj = charCount.updateCharCount(baseData['sms-editor']);
+      result.base.msg_count = msgObj.msgCount;
+    }
     const response = {
       action: "getFormData",
       value: result,
@@ -246,7 +247,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       validity: this.state.isFormValid,
       type: 'SMS',
     };
-    this.setState({checkValidation: true, loading: true});
+    this.setState({checkValidation: true});
 
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
@@ -910,9 +911,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
-    if (isLoading && this.state.loadingStatus >= 2) {
-      this.props.creativesContainerActions.hideCreativesContanerLoader();
-    }
+    // if (isLoading && this.state.loadingStatus >= 2) {
+    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
+    // }
     return isLoading;
   }
   render() {

package/containers/Sms/Edit/index.js

@@ -283,9 +283,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const result = {};
     result.base = baseData;
-    const msgObj = updateCharCount(baseData['sms-editor']);
-    result.base.msg_count = msgObj.msgCount;
-
+    if (this.state.isFormValid) {
+      const msgObj = updateCharCount(baseData['sms-editor']);
+      result.base.msg_count = msgObj.msgCount;
+    }
     const response = {
       action: "getFormData",
       value: result,
@@ -293,7 +294,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       validity: this.state.isFormValid,
       type: 'SMS',
     };
-    this.setState({checkValidation: true, loading: true});
+    this.setState({checkValidation: true});
 
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
@@ -896,9 +897,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 3;
     }
-    if (isLoading && this.state.loadingStatus >= 3) {
-      this.props.creativesContainerActions.hideCreativesContanerLoader();
-    }
+    // if (isLoading && this.state.loadingStatus >= 3) {
+    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
+    // }
     return isLoading;
   }
   render() {

package/containers/Templates/index.js

@@ -119,7 +119,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           channel = '';
       }
       this.setState({ channel });
-      this.props.actions.getUserList();
+      if (_.isEmpty(this.props.Templates.userList)) {
+        this.props.actions.getUserList();
+      }
     }
   }
 

package/package.json

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