@capillarytech/creatives-library 2.0.26 → 2.0.28

package/containers/EmailWrapper/actions.js

@@ -0,0 +1,15 @@
+/*
+ *
+ * EmailWrapper actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}

package/containers/EmailWrapper/constants.js

@@ -0,0 +1,7 @@
+/*
+ *
+ * EmailWrapper constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/EmailWrapper/DEFAULT_ACTION';

package/containers/EmailWrapper/index.js

@@ -0,0 +1,187 @@
+/*
+ *
+ * EmailWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import _ from 'lodash';
+import {CapInput, CapRadioCard, CapHeader} from '@capillarytech/cap-ui-library';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import {selectEmailLayout, selectCmsTemplates, selectEdmEditor} 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.state = {
+      routeParams: {
+        pathname: `/email/create`,
+        query: {},
+      },
+      modeContent: {
+
+      },
+
+    };
+    this.modes = [
+      {
+        title: <FormattedMessage {...messages.zipUpload}/>,
+        content: <FormattedMessage {...messages.zipUploadDesc}/>,
+        value: 'upload',
+      },
+      {
+        title: <FormattedMessage {...messages.useEditor}/>,
+        content: <FormattedMessage {...messages.useEditorDesc}/>,
+        value: 'editor',
+      },
+    ];
+  }
+  componentDidUpdate() {
+    const {emailCreateMode, EmailLayout, CmsTemplates, step} = this.props;
+    if (step === "modeSelection") {
+      if (emailCreateMode === 'upload' && !EmailLayout) {
+        document.getElementById('filename').click();
+      } else if (emailCreateMode === "editor" && !CmsTemplates) {
+        this.props.templatesActions.getEdmDefaultTemplates();
+      }
+    } else if (step === "createTemplate") {
+      const {modeContent} = this.state;
+      if (emailCreateMode === 'upload' && !EmailLayout) {
+        this.handleFileUpload(modeContent.e, modeContent.files);
+      } else if (emailCreateMode === "editor" && !CmsTemplates) {
+        this.handleEdmDefaultTemplateSelection(modeContent.id);
+      }
+    }
+  }
+  onChange = (e) => {
+    this.props.onEmailModeChange( e.target.value );
+  };
+  handleFileUpload = (e, files) => {
+    const {location, templatesActions } = this.props;
+    if (files.length === 0) {
+      return;
+    }
+    const fileExtension = files[0].name.split('.').pop();
+    const supportedZipFormats = ['zip'];
+    const module = location.query.module || 'default';
+    const isLanguageSupport = location.query.isLanguageSupport || true;
+    const isEdmSupport = (location.query.isEdmSupport !== "false") || false;
+
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      templatesActions.handleZipUpload(files[0]);
+      document.getElementById("filename").value = "";
+    } else if (fileExtension === 'html' || fileExtension === 'htm') {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const text = reader.result;
+        templatesActions.handleHtmlUpload(text);
+        document.getElementById("filename").value = "";
+        const type = location.query.type;
+        this.setState({routeParams: {
+          pathname: `/email/create`,
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+        }});
+      };
+      reader.readAsText(files[0]);
+    } else {
+      // const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
+      // this.props.globalActions.addMessageToQueue(message);
+    }
+  };
+
+  handleEdmDefaultTemplateSelection = (id) => {
+    const {CmsTemplates, templatesActions } = this.props;
+    const data = _.find(CmsTemplates, {_id: id});
+    const module = 'default'; //location.query.module || 'default';
+    const isLanguageSupport = true; //location.query.isLanguageSupport || true;
+    const isEdmSupport = true; //(location.query.isEdmSupport !== "false") || false;
+
+    templatesActions.setEdmTemplate(data);
+    const getQuery = {module, isLanguageSupport, isEdmSupport};
+    this.setState({routeParams: {
+      pathname: `/email/create`,
+      query: getQuery,
+    }});
+  };
+  useFileUpload = (e, {files}) => {
+    this.setState({modeContent: {e, files}});
+  }
+  useEditor = (id) => {
+    this.setState({modeContent: {id}});
+  }
+  render() {
+    const {emailCreateMode, isGetFormData, getFormData, type, EmailLayout, CmsTemplates, SelectedEdmDefaultTemplate} = this.props;
+    const isShowEmailCreate = (emailCreateMode === "upload" && EmailLayout !== null) || (emailCreateMode === "editor" && SelectedEdmDefaultTemplate);
+    return (
+      <div>
+        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.useFileUpload(event, {files: event.target.files})} />
+
+        {!emailCreateMode ?
+          <div>
+            <CapInput
+              label={<FormattedMessage {...messages.creativeName}/>}
+              labelPosition="top"/>
+            <CapHeader type="h4"><FormattedMessage {...messages.createMode}/></CapHeader>
+            <CapRadioCard
+              panes={this.modes}
+              onChange={this.onChange}
+              selected={emailCreateMode}
+          />
+          </div>
+          :
+          <div>
+            {isShowEmailCreate && <Email
+              key="email-create-template"
+              location={this.state.routeParams}
+              route={{ name: 'email' }}
+              params={{}}
+              isGetFormData={isGetFormData}
+              getFormdata={getFormData}
+              getFormSubscriptionData={getFormData}
+              getDefaultTags={type}
+          />}
+            {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
+
+
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+EmailWrapper.propTypes = {
+  onEmailModeChange: PropTypes.func.isRequired,
+  isGetFormData: PropTypes.bool,
+  getFormData: PropTypes.func,
+  type: PropTypes.string,
+  emailCreateMode: PropTypes.string,
+  EmailLayout: PropTypes.object,
+  location: PropTypes.object,
+  route: PropTypes.object,
+  templatesActions: PropTypes.object,
+  CmsTemplates: PropTypes.arrayOf(PropTypes.object),
+  SelectedEdmDefaultTemplate: PropTypes.object,
+  step: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  EmailLayout: selectEmailLayout(),
+  CmsTemplates: selectCmsTemplates(),
+  SelectedEdmDefaultTemplate: selectEdmEditor(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    templatesActions: bindActionCreators(templatesActionsCreators, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(EmailWrapper)));

package/containers/EmailWrapper/messages.js

@@ -0,0 +1,37 @@
+/*
+ * 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 ?',
+  },
+});

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/Templates/messages.js

@@ -258,4 +258,8 @@ export default defineMessages({
     id: `${scope}.creativesTemplatesSave`,
     defaultMessage: `Edit`,
   },
+  "continue": {
+    id: `${scope}.continue`,
+    defaultMessage: `Continue`,
+  },
 });

package/containers/Templates/selectors.js

@@ -35,6 +35,26 @@ const selectTemplateContent = () => createSelector(
   }
 );
 
+const selectEmailLayout = () => createSelector(makeSelectTemplates(), (templates) => {
+  const {selectedEmailLayout, sendingFile} = templates;
+  if (!sendingFile) {
+    return selectedEmailLayout;
+  }
+  return null;
+});
+
+const selectCmsTemplates = () => createSelector(makeSelectTemplates(), (templates) => {
+  const {getCmsTemplatesInProgress, cmsTemplates} = templates;
+  if (!getCmsTemplatesInProgress) {
+    return cmsTemplates;
+  }
+  return null;
+});
+
+const selectEdmEditor = () => createSelector(makeSelectTemplates(), (templates) => {
+  const {edmTemplate} = templates;
+  return edmTemplate || null;
+});
 export {
-  makeSelectTemplates, makeSelectTemplatesResponse, selectTemplateContent,
+  makeSelectTemplates, makeSelectTemplatesResponse, selectTemplateContent, selectEmailLayout, selectCmsTemplates, selectEdmEditor,
 };

package/package.json

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