@capillarytech/creatives-library 2.0.79 → 2.0.81

package/containers/EmailWrapper/index.js

@@ -0,0 +1,238 @@
+/*
+ *
+ * EmailWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import _ from 'lodash';
+import { CapRadioCard, CapHeader, CapNotification, CapInput, CapUploader, CapSpin, CapButton} from '@capillarytech/cap-ui-library';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import {selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector} from '../Templates/selectors';
+import * as templatesActionsCreators from '../Templates/actions';
+import Email from '../Email';
+import CmsTemplatesComponent from '../../components/CmsTemplatesComponent';
+import messages from './messages';
+export class EmailWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.emailUploader = React.createRef();
+    this.state = {
+      templateName: '',
+      routeParams: {
+        pathname: `/email/create`,
+        query: { module: 'library', type: 'embedded'},
+      },
+      modeContent: {
+
+      },
+      // selectedCreateMode: '',
+
+    };
+    this.modes = [
+      {
+        title: <FormattedMessage {...messages.zipUpload}/>,
+        content: <FormattedMessage {...messages.zipUploadDesc}/>,
+        value: 'upload',
+        // onClick: () => {
+        //   this.emailUploader.current.click();
+        // },
+      },
+      {
+        title: <FormattedMessage {...messages.useEditor}/>,
+        content: <FormattedMessage {...messages.useEditorDesc}/>,
+        value: 'editor',
+      },
+    ];
+  }
+
+  componentDidUpdate() {
+    const {modeContent} = this.state;
+   // const isValid = this.isValid();
+    const {emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate, templatesActions} = this.props;
+    if (step === "modeSelection" && !this.state.selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
+      //document.getElementById('upload-email-template').click();
+    } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
+      if (emailCreateMode === "editor" && !CmsTemplates) {
+        templatesActions.getEdmDefaultTemplates();
+      }
+    } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
+      if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
+        this.setCreateMode('upload');
+      } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
+        this.handleEdmDefaultTemplateSelection(modeContent.id);
+      }
+    }
+  }
+
+
+  componentWillUnmount() {
+    this.props.onResetStep();
+    this.props.templatesActions.resetTemplateData();
+  }
+  onTemplateNameChange = (ev) => {
+    this.setState({templateName: ev.target.value});
+  }
+  onChange = (e) => {
+    this.props.onEmailModeChange( e.target.value );
+  };
+  //isValid = () => !_.isEmpty(this.state.templateName)
+  setCreateMode = (emailCreateMode) => {
+    this.setState({selectedCreateMode: emailCreateMode});
+  }
+  handleZipUploadError = () => {
+    const message = {
+      key: "email-upload-error",
+      message: this.props.intl.formatMessage(messages.invalidUploadFileError2),
+      description: this.props.intl.formatMessage(messages.invalidUploadFileErrorDesc2),
+    };
+    CapNotification.error(message);
+  }
+  handleFileUpload = (file) => {
+    const { templatesActions, intl, showNextStep, isUploading } = this.props;
+    if (!isUploading) {
+      const fileExtension = file.name.split('.').pop();
+      const supportedZipFormats = ['zip'];
+
+
+      if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+        templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
+          this.setState({modeContent: { file}}, showNextStep);
+        }, this.handleZipUploadError);
+      } else if (fileExtension === 'html' || fileExtension === 'htm') {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const text = reader.result;
+          this.setState({modeContent: { file}}, () => {
+            templatesActions.handleHtmlUpload(text);
+          });
+
+          // showNextStep();
+        };
+        reader.readAsText(file.originFileObj);
+      } else {
+        const message = {
+          key: "email-upload-error",
+          message: intl.formatMessage(messages.invalidUploadFileError),
+          description: intl.formatMessage(messages.invalidUploadFileErrorDesc),
+        };
+        CapNotification.error(message);
+      }
+    }
+  };
+
+  handleEdmDefaultTemplateSelection = (id) => {
+    const {CmsTemplates, templatesActions } = this.props;
+    const data = _.find(CmsTemplates, {_id: id});
+
+    templatesActions.setEdmTemplate(data);
+    this.setState({
+      selectedCreateMode: 'editor'});
+  };
+  useFileUpload = ({file}) => {
+    this.setState({modeContent: {}}, () => {
+      this.handleFileUpload(file);
+    });
+  }
+  useEditor = (id) => {
+    this.setState({modeContent: {id}}, this.props.showNextStep);
+  }
+
+  isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
+  render() {
+    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent} = this.props;
+    const {templateName, modeContent} = this.state;
+    const isShowEmailCreate = this.isShowEmailCreate();
+    return (
+      <div>
+        <CapSpin spinning={emailCreateMode === "upload" ? this.props.isUploading : false} >
+          {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
+            <div>
+              {isFullMode &&
+              <CapInput
+                label={<FormattedMessage {...messages.creativeName}/>}
+                onChange={this.onTemplateNameChange}
+                value={templateName}
+                labelPosition="top"/>
+              }
+              <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
+              <CapRadioCard
+                panes={this.modes}
+                onChange={this.onChange}
+                selected={emailCreateMode}
+              />
+              <div>
+                {emailCreateMode === "upload" &&
+                <div style={{ marginLeft: '8px'}}>
+                  <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                    <CapButton>Upload</CapButton>
+                  </CapUploader>
+                  {!_.isEmpty(EmailLayout) &&
+                    <div>{_.get(modeContent, "file.name")}</div>
+                  }
+                </div>
+              }
+              </div>
+            </div>
+          :
+            <div>
+              {isShowEmailCreate && <Email
+                setIsLoadingContent={setIsLoadingContent}
+                key="email-create-template"
+                location={this.state.routeParams}
+                route={{ name: 'email' }}
+                params={{}}
+                isGetFormData={isGetFormData}
+                getFormdata={getFormdata}
+                getFormSubscriptionData={getFormdata}
+                getDefaultTags={type}
+                defaultData={{templateName}}
+                cap={cap}
+            />}
+              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
+            </div>
+        }
+        </CapSpin>
+      </div>
+    );
+  }
+}
+
+EmailWrapper.propTypes = {
+  onEmailModeChange: PropTypes.func.isRequired,
+  isGetFormData: PropTypes.bool,
+  type: PropTypes.string,
+  emailCreateMode: PropTypes.string,
+  EmailLayout: PropTypes.object,
+  templatesActions: PropTypes.object,
+  CmsTemplates: PropTypes.arrayOf(PropTypes.object),
+  SelectedEdmDefaultTemplate: PropTypes.object,
+  step: PropTypes.string,
+  showNextStep: PropTypes.func,
+  getFormdata: PropTypes.func,
+  intl: intlShape,
+  cap: PropTypes.object,
+  onResetStep: PropTypes.func,
+  isFullMode: PropTypes.bool,
+  isUploading: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+};
+
+const mapStateToProps = createStructuredSelector({
+  EmailLayout: selectEmailLayout(),
+  CmsTemplates: selectCmsTemplates(),
+  SelectedEdmDefaultTemplate: selectEdmEditor(),
+  isUploading: uploadSelector(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    templatesActions: bindActionCreators(templatesActionsCreators, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(EmailWrapper)));

package/containers/EmailWrapper/messages.js

@@ -0,0 +1,57 @@
+/*
+ * EmailWrapper Messages
+ *
+ * This contains all the text for the EmailWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.EmailWrapper.header',
+    defaultMessage: 'This is EmailWrapper container !',
+  },
+  useEditor: {
+    id: 'app.containers.EmailWrapper.useEditor',
+    defaultMessage: 'Create using editor',
+  },
+  useEditorDesc: {
+    id: 'app.containers.EmailWrapper.useEditorDesc',
+    defaultMessage: 'Create using in-built template',
+  },
+  zipUpload: {
+    id: 'app.containers.EmailWrapper.zipUpload',
+    defaultMessage: 'Upload zip file',
+  },
+  zipUploadDesc: {
+    id: 'app.containers.EmailWrapper.zipUploadDesc',
+    defaultMessage: 'Upload compressed file (Zip) containing HTML & images',
+  },
+  creativeName: {
+    id: 'app.containers.EmailWrapper.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  createMode: {
+    id: 'app.containers.EmailWrapper.createMode',
+    defaultMessage: 'How do you want to create ?',
+  },
+  invalidUploadFileError: {
+    id: `app.containers.EmailWrapper.invalidUploadFileError`,
+    defaultMessage: `File cannot be uploaded.`,
+  },
+  invalidUploadFileErrorDesc: {
+    id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
+    defaultMessage: `Please select another file with valid file format.`,
+  },
+  invalidUploadFileError2: {
+    id: `app.containers.EmailWrapper.invalidUploadFileError`,
+    defaultMessage: `File upload failed`,
+  },
+  invalidUploadFileErrorDesc2: {
+    id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
+    defaultMessage: `Please select another file with valid file contents`,
+  },
+  upload: {
+    id: `app.containers.EmailWrapper.upload`,
+    defaultMessage: `Upload`,
+  },
+});

package/containers/EmailWrapper/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * EmailWrapper reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function emailWrapperReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default emailWrapperReducer;

package/containers/EmailWrapper/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/containers/EmailWrapper/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the emailWrapper state domain
+ */
+const selectEmailWrapperDomain = () => (state) => state.get('emailWrapper');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by EmailWrapper
+ */
+
+const makeSelectEmailWrapper = () => createSelector(
+  selectEmailWrapperDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectEmailWrapper;
+export {
+  selectEmailWrapperDomain,
+};

package/containers/EmailWrapper/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('EmailWrapper actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/containers/EmailWrapper/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import { EmailWrapper } from '../index';
+
+describe('<EmailWrapper />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/EmailWrapper/tests/reducer.test.js

@@ -0,0 +1,9 @@
+
+import { fromJS } from 'immutable';
+import emailWrapperReducer from '../reducer';
+
+describe('emailWrapperReducer', () => {
+  it('returns the initial state', () => {
+    expect(emailWrapperReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/containers/EmailWrapper/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/EmailWrapper/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectEmailWrapperDomain } from '../selectors';
+
+// const selector = makeSelectEmailWrapperDomain();
+
+describe('makeSelectEmailWrapperDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/Line/Create/index.js

@@ -679,7 +679,7 @@ export class Line extends Component {
     console.log("schema line", schema);
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
       schema.standalone.sections.splice(0, 1);
-    } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.mode !== 'undefined') {
+    } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.module !== 'undefined') {
       delete schema.standalone;
     } else {
       schema.standalone.sections.splice(1, 1);

package/containers/MobilePush/Create/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the create state domain
  */
-const selectPushMessageCreateDomain = () => (state) => state.get('create');
+const selectPushMessageCreateDomain = () => (state) => state.get('mobileCreate');
 
 /**
  * Other specific selectors

package/containers/MobilePush/Edit/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the create state domain
  */
-const selectMobilePushEditDomain = () => (state) => state.get('edit');
+const selectMobilePushEditDomain = () => (state) => state.get('mobileEdit');
 
 /**
  * Other specific selectors