@capillarytech/creatives-library 2.0.81 → 2.0.82

package/components/FormBuilder/index.js

@@ -1803,7 +1803,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      this.props.onChange(formData, this.state.tabCount, currentTab);
+      this.props.onChange(formData, this.state.tabCount, currentTab, val);
     }
   }
 
@@ -1845,7 +1845,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (!event) {
       return;
     }
-
     const tab = this.state.tabCount;
     // const parent = this._reactInternalInstance._currentElement._owner._instance;
     if (event === 'onTabChange') {
@@ -1855,7 +1854,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (this.props.isNewVersionFlow) {
           const formData = _.cloneDeep(this.state.formData);
           let activeTabIndex = '1';
-          const elems = document.getElementsByClassName("ant-tabs-tab");
+          const elems = document.querySelectorAll(`.cap-tabs-${val.id} .ant-tabs-tab`);
 
           for (let i = 0; i < elems.length; i += 1) {
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
@@ -1875,7 +1874,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           });
         } else {
           let activeTabIndex = '1';
-          const elems = document.getElementsByClassName("ant-tabs-tab");
+          const elems = document.querySelectorAll(`.cap-tabs-${val.id} .ant-tabs-tab`);
 
           for (let i = 0; i < elems.length; i += 1) {
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
@@ -3168,6 +3167,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         return (
           <Tabs
+            className={`cap-tabs-${container.id}`}
             activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}

package/containers/WeChat/actions.js

@@ -44,9 +44,3 @@ export function getTemplateDetails(id) {
     type: types.GET_TEMPLATE_DETAILS_REQUEST, id,
   };
 }
-export function setTemplateDetails(templateDetails) {
-  return {
-    type: types.GET_TEMPLATE_DETAILS_SUCCESS,
-    data: templateDetails,
-  };
-}

package/containers/WeChat/index.js

@@ -4,14 +4,13 @@
  *
  */
 
-import PropTypes from 'prop-types';
-
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Helmet from 'react-helmet';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
+// import { CapButton, CapSelect } from '@capillarytech/cap-react-ui-library';
 import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
 import { makeSelectTemplates } from '../Templates/selectors';
@@ -22,12 +21,10 @@ import * as actions from './actions';
 import FormBuilder from '../../components/FormBuilder';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import * as globalActions from '../../containers/Cap/actions';
-import * as templateActions from '../../containers/Templates/actions';
 import {getMessageObject} from '../../utils/messageUtils';
 // import SlideBox from '../../components/SlideBox';
 // import PageHeader from '../../components/PageHeader';
 import './_wechat.scss';
-import callNativeEvent from '../../utils/callNativeEvent';
 
 // const Option = Select.Option;
 
@@ -404,7 +401,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
           sortBy: 'Most Recent',
           wecrmId: this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id,
           wecrmToken: this.props.Templates.selectedWeChatAccount.configs.wecrm_token,
-          originalId: this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier,
         };
         this.props.actions.getDefaultWeChatTemplates('wechat', params);
       } else {
@@ -437,7 +433,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.isGetFormData) {
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       this.getFormData();
     }
     console.log('MetaEntity nextprops ', nextProps.metaEntities);
@@ -485,7 +481,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
         this.setState({isEdit: true});
       }
       if (this.state.isEdit && _.isEmpty(this.state.editTemplateData) && !_.isEmpty(nextProps.WeChat.weChatTemplates)) {
-        const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {_id: nextProps.params.id});
+        const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {"_id": nextProps.params.id});
         this.setState({editTemplateData: nextProps.WeChat.weChatTemplates[templateIndex]}, () => {
           if (_.isEmpty(this.state.baseSchema)) {
             this.setState({ baseSchema: _.cloneDeep(this.state.schema)}, () => {
@@ -545,7 +541,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
           sortBy: 'Most Recent',
           wecrmId: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_app_id,
           wecrmToken: nextProps.WeChat.selectedWeChatAccount.configs.wecrm_token,
-          originalId: nextProps.WeChat.selectedWeChatAccount.sourceAccountIdentifier,
         };
         this.props.actions.getDefaultWeChatTemplates('wechat', params);
       }
@@ -602,11 +597,11 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
   componentWillUnmount() {
     console.log('removed listener create');
     window.removeEventListener("message", this.handleFrameTasks);
-    this.props.templateActions.resetTemplate();
     this.resetState();
   }
 
   onFormDataChange(formData) {
+    console.log('Form Data Change ', formData);
     let selectedWechatTemplateIndex = -1;
     let selectedTemplate = {};
     let selectedTemplateData = {};
@@ -645,7 +640,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       selectedWechatTemplateIndex = _.findIndex(this.props.WeChat.weChatDefaultTemplate, {template_id: formData['wechat-template']});
       selectedTemplate = this.props.WeChat.weChatDefaultTemplate[selectedWechatTemplateIndex];
     }
-
     if (!_.isEqual(formData['wechat-template'], this.state.formData['wechat-template'])) {
       this.updateSchema = true;
     }
@@ -698,8 +692,8 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
     console.log('posting final result', this.state.formData, this.state.editTemplateData);
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
     const data = {
-      template_id: this.state.editTemplateData.versions.base.template_id,
-      Title: this.state.editTemplateData.versions.base.Title,
+      "template_id": this.state.editTemplateData.versions.base.template_id,
+      "Title": this.state.editTemplateData.versions.base.Title,
       Tag: [],
       url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
       TopColor: "#000000",
@@ -710,7 +704,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       content: this.state.editTemplateData.versions.base.content,
       isInternalUrl: this.state.formData['is-internal-url'],
       creative_template_id: this.state.editTemplateData._id,
-      touser: "{{wechat_open_id}}",
     };
     _.forEach(this.state.selectedTemplateTags, (templateTag) => {
       const tagName = templateTag.substr(0, templateTag.indexOf('.'));
@@ -1153,15 +1146,10 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
 
   setTemplateOptions(weChatData) {
     console.log('Set Templates ', weChatData);
-    //const {schema, baseSchema} = this.state;
-    const schema = _.cloneDeep(this.state.schema);
-    const baseSchema = _.cloneDeep(this.state.baseSchema);
+    const {schema, baseSchema} = this.state;
+    // const schema = _.cloneDeep(this.state.schema);
+    // const baseSchema = _.cloneDeep(this.state.baseSchema);
     const baseSchemaTemplateOptionEmpty = (!_.isEmpty(baseSchema) && _.isEmpty(baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options));
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
-    if (!_.isEmpty(baseSchema)) {
-      baseSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options = [];
-    
-    } 
     _.forEach(weChatData, (template) => {
       schema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[1].options.push({
         key: (template.versions) ? template.versions.base.template_id : template.template_id,
@@ -1296,7 +1284,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       myField.value += myValue;
     }
     const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    myField.dispatchEvent(event);
   }
 
   internalUrlChecked() {
@@ -1558,10 +1546,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
     //     value: 'Test3',
     //   },
     // ];
-    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
-    if (this.props.supportedTags) {
-      tags = this.props.supportedTags;
-    }
     return (
       <Spin
         tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
@@ -1570,6 +1554,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
         <Helmet
           title="WeChat"
         />
+        {/* <CapSelect options={options} /> */}
         <Row className="wechat-container">
           <Col>
             <FormBuilder
@@ -1583,7 +1568,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
               formData={_.cloneDeep(this.state.formData)}
               onFormValidityChange={this.setFormValidity}
               location= {this.props.location}
-              tags={tags}
+              tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
               tagModule={this.props.getDefaultTags}
               injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
               isEdit={this.state.isEdit}
@@ -1614,8 +1599,6 @@ WeChat.propTypes = {
   isGetFormData: PropTypes.bool,
   getLibraryFormData: PropTypes.func,
   getDefaultTags: PropTypes.string,
-  templateData: PropTypes.object,
-  templateActions: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1628,7 +1611,6 @@ function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
-    templateActions: bindActionCreators(templateActions, dispatch),
   };
 }
 

package/package.json

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

package/v2Containers/Email/index.js

@@ -604,15 +604,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
       const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
       win.postMessage(msgString, '*');
+    } else if (data === "unsubscribe") {
+      const anchor = `<a href='{{${data}}}'>${data}</a>`;
+      this.state.editorInstanse.insertHtml(`${anchor}`);
     } else {
-      if (data === "unsubscribe") {
-        const anchor = `<a href='{{${data}}}'>${data}</a>`;
-        this.state.editorInstanse.insertHtml(`${anchor}`);
-      } else {
-        this.state.editorInstanse.insertHtml(`{{${data}}}`);
-      }
-      //this.resetCkEditorInstance(currentTab, formData, true, data);
+      this.state.editorInstanse.insertHtml(`{{${data}}}`);
     }
+      //this.resetCkEditorInstance(currentTab, formData, true, data);
   }
 
   onImageSelect = () => {
@@ -866,7 +864,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
 
     this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
-      this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      if (this.props.isFullMode) {
+        this.props.showTemplateName({formData, onFormDataChange: this.onFormDataChange});
+      }
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
         // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
         //   formData[this.state.currentTab - 1].activeTab = language;
@@ -1214,7 +1214,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const baseData = {};
       const baseLanguage = props.currentOrgDetails.basic_details.base_language;
       this.supportedLanguages = this.getSupportedLanguages(props);
-      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})];
+      const languageObject = this.supportedLanguages[_.findIndex(this.supportedLanguages, {iso_code: baseLanguage})] || {iso_code: 'en', lang_id: 1, language: "English"};
       baseData.activeTab = baseLanguage;
       baseData[languageObject.iso_code] = {};
       baseData[languageObject.iso_code].is_drag_drop = false;

package/v2Containers/MobilePush/Create/index.js

@@ -151,7 +151,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   };
 
-  onFormDataChange = (formData, tabCount) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
     if (!isEmpty(templateCta)) {
@@ -187,6 +187,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (this.props.isFullMode && this.props.defaultData && isEmpty(formData['template-name'])) {
       newFormData['template-name'] = get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged}, () => {
       if (this.props.isFullMode) {
         this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
@@ -1169,6 +1174,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   addSecondoryCta = (flag, formData, schemaField) => {
     const id = schemaField.id;
     const schema = cloneDeep(this.state.schema);
+    const formDataCopy = cloneDeep(formData);
     const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
     const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
     const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
@@ -1270,7 +1276,24 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       });
     });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(inputFields, {identifier: 'add-sec-cta-2'});
+      inputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, inputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, () => { this.injectEvents(schema); });
+    }
   };
   copyIphoneContent = () => {
     const formData = cloneDeep(this.state.formData);

package/v2Containers/MobilePush/Edit/index.js

@@ -189,7 +189,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     });
   };
-  onFormDataChange = (formData, tabCount, currentTab) => {
+  onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     console.log('Form data changed is ', formData, tabCount, currentTab);
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
@@ -218,6 +218,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.isFullMode && this.props.defaultData && _.isEmpty(formData['template-name'])) {
       newFormData['template-name'] = _.get(this.props, "defaultData['template-name']");
     }
+    if (inputField && inputField.id === "add-sec-cta") {
+      if (!newFormData[0]["add-sec-cta"]) {
+        newFormData[0]["add-sec-cta-2"] = false;
+      }
+    }
     this.setState({formData: newFormData, tabCount}, () => {
       this.props.showTemplateName({formData: this.state.formData, onFormDataChange: this.onFormDataChange});
     });
@@ -1604,6 +1609,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   addSecondoryCta = (flag, formData, field, inputSchema, currentTab) => {
     const id = field.id;
     const tabIndex = currentTab || this.state.currentTab;
+    const formDataCopy = cloneDeep(formData);
     const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
     const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
@@ -1619,13 +1625,32 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const deleteCount = indexOfNextField - fieldIndex;
       newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
     }
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
-    if (inputSchema) {
+    if (id === "add-sec-cta") {
+      //The following block of code enables and disables add secondary button based on the primary button
+      const indexOfSecondary = findIndex(newInputFields, {identifier: 'add-sec-cta-2'});
+      newInputFields[indexOfSecondary].cols[0].disabled = !formData[this.state.currentTab - 1][id];
+      //Calling the following function to unset the data set under secondary button
+      if (!formData[this.state.currentTab - 1][id]) {
+        formDataCopy[this.state.currentTab - 1]['add-sec-cta-2'] = false;
+      }
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      //Calling set state here to update the state and schema before manually triggering secondarycta update
+      this.setState(
+        {schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true},
+        () => {
+          this.injectEvents(schema);
+          this.addSecondoryCta(true, formDataCopy, newInputFields[indexOfSecondary].cols[0]);
+        });
+    } else {
+      set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+      if (inputSchema) {
+        return schema;
+      }
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+      this.injectEvents(schema);
       return schema;
     }
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-    return schema;
+    return true;
   };
 
   addSecondoryCtaIos = (flag, formData, schemaField) => {

package/v2Containers/MobilePush/initialSchema.js

@@ -441,6 +441,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",
@@ -1323,6 +1324,7 @@ export const response = {
                                       id: "add-sec-cta-2",
                                       metaType: "label",
                                       dynamicTab: false,
+                                      disabled: true,
                                       label: "Add secondary button to notification",
                                       styling: "semantic",
                                       type: "checkbox",