@capillarytech/creatives-library 2.0.70 → 2.0.72

package/v2Containers/EmailWrapper/index.js

@@ -0,0 +1,258 @@
+/*
+ *
+ * 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 styled from 'styled-components';
+import { CapRadioCard, CapNotification, CapInput, CapUploader, CapSpin, CapButton} from '@capillarytech/cap-ui-library';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+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';
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: 16px;
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
+      }
+    }
+    
+  }
+`;
+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 {showTemplateName, 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"
+                />
+              }
+              <CardContainer>
+                <CapRadioCardWithLabel
+                  panes={this.modes}
+                  onChange={this.onChange}
+                  selected={emailCreateMode}
+                  label={<FormattedMessage {...messages.createMode}/>}
+                />
+              </CardContainer>
+              <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}
+                isFullMode={isFullMode}
+                defaultData={{'template-name': templateName}}
+                cap={cap}
+                showTemplateName={showTemplateName}
+            />}
+              {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,
+  showTemplateName: 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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/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/v2Containers/LanguageProvider/actions.js

@@ -0,0 +1,17 @@
+/*
+ *
+ * LanguageProvider actions
+ *
+ */
+
+import {
+  CHANGE_LOCALE,
+} from './constants';
+
+export function changeLocale(languageLocale) {
+  console.log('trying to change locale', languageLocale);
+  return {
+    type: CHANGE_LOCALE,
+    locale: languageLocale,
+  };
+}

package/v2Containers/LanguageProvider/constants.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * LanguageProvider constants
+ *
+ */
+
+export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';
+export const DEFAULT_LOCALE = 'en';

package/v2Containers/LanguageProvider/index.js

@@ -0,0 +1,46 @@
+/*
+ *
+ * LanguageProvider
+ *
+ * this component connects the redux state language locale to the
+ * IntlProvider component and i18n messages (loaded from `app/translations`)
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { IntlProvider } from 'react-intl';
+
+import { makeSelectLocale } from './selectors';
+
+export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <IntlProvider locale={this.props.locale} key={this.props.locale} messages={this.props.messages[this.props.locale]}>
+        {React.Children.only(this.props.children)}
+      </IntlProvider>
+    );
+  }
+}
+
+LanguageProvider.propTypes = {
+  locale: PropTypes.string,
+  messages: PropTypes.object,
+  children: PropTypes.element.isRequired,
+};
+
+
+const mapStateToProps = createSelector(
+  makeSelectLocale(),
+  (locale) => ({ locale })
+);
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LanguageProvider);

package/v2Containers/LanguageProvider/reducer.js

@@ -0,0 +1,30 @@
+/*
+ *
+ * LanguageProvider reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+
+import {
+  CHANGE_LOCALE,
+} from './constants';
+import {
+  DEFAULT_LOCALE,
+} from '../Cap/constants'; // eslint-disable-line
+
+const initialState = fromJS({
+  locale: DEFAULT_LOCALE,
+});
+
+function languageProviderReducer(state = initialState, action) {
+  switch (action.type) {
+    case CHANGE_LOCALE:
+      return state
+        .set('locale', action.locale);
+    default:
+      return state;
+  }
+}
+
+export default languageProviderReducer;

package/v2Containers/LanguageProvider/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the languageToggle state domain
+ */
+const selectLanguage = (state) => state.get('language');
+
+/**
+ * Select the language locale
+ */
+
+const makeSelectLocale = () => createSelector(
+  selectLanguage,
+  (languageState) => languageState.get('locale')
+);
+
+export {
+  selectLanguage,
+  makeSelectLocale,
+};

package/v2Containers/LanguageProvider/tests/actions.test.js

@@ -0,0 +1,19 @@
+import {
+  changeLocale,
+} from '../actions';
+
+import {
+  CHANGE_LOCALE,
+} from '../constants';
+
+describe('LanguageProvider actions', () => {
+  describe('Change Local Action', () => {
+    it('has a type of CHANGE_LOCALE', () => {
+      const expected = {
+        type: CHANGE_LOCALE,
+        locale: 'de',
+      };
+      expect(changeLocale('de')).toEqual(expected);
+    });
+  });
+});

package/v2Containers/LanguageProvider/tests/index.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { Provider } from 'react-redux';
+import { browserHistory } from 'react-router';
+
+import ConnectedLanguageProvider, { LanguageProvider } from '../index';
+import configureStore from '../../../store';
+
+import { translationMessages } from '../../../i18n';
+
+const messages = defineMessages({
+  someMessage: {
+    id: 'some.id',
+    defaultMessage: 'This is some default message',
+    en: 'This is some en message',
+  },
+});
+
+describe('<LanguageProvider />', () => {
+  it('should render its children', () => {
+    const children = (<h1>Test</h1>);
+    const renderedComponent = shallow(
+      <LanguageProvider messages={messages} locale="en">
+        {children}
+      </LanguageProvider>
+    );
+    expect(renderedComponent.contains(children)).toBe(true);
+  });
+});
+
+describe('<ConnectedLanguageProvider />', () => {
+  let store;
+
+  beforeAll(() => {
+    store = configureStore({}, browserHistory);
+  });
+
+  it('should render the default language messages', () => {
+    const renderedComponent = mount(
+      <Provider store={store}>
+        <ConnectedLanguageProvider messages={translationMessages}>
+          <FormattedMessage {...messages.someMessage} />
+        </ConnectedLanguageProvider>
+      </Provider>
+    );
+    expect(renderedComponent.contains(<FormattedMessage {...messages.someMessage} />)).toBe(true);
+  });
+});

package/v2Containers/LanguageProvider/tests/reducer.test.js

@@ -0,0 +1,20 @@
+import { fromJS } from 'immutable';
+
+import languageProviderReducer from '../reducer';
+import {
+  CHANGE_LOCALE,
+} from '../constants';
+
+describe('languageProviderReducer', () => {
+  it('returns the initial state', () => {
+    expect(languageProviderReducer(undefined, {})).toEqual(fromJS({
+      locale: 'en',
+    }));
+  });
+
+  it('changes the locale', () => {
+    expect(languageProviderReducer(undefined, { type: CHANGE_LOCALE, locale: 'de' }).toJS()).toEqual({
+      locale: 'de',
+    });
+  });
+});

package/v2Containers/LanguageProvider/tests/selectors.test.js

@@ -0,0 +1,15 @@
+import { fromJS } from 'immutable';
+
+import {
+  selectLanguage,
+} from '../selectors';
+
+describe('selectLanguage', () => {
+  it('should select the global state', () => {
+    const globalState = fromJS({});
+    const mockedState = fromJS({
+      language: globalState,
+    });
+    expect(selectLanguage(mockedState)).toEqual(globalState);
+  });
+});