@capillarytech/creatives-library 2.0.75 → 2.0.76

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/MobilePush/commonMethods.js

@@ -0,0 +1,249 @@
+import {get, filter, cloneDeep} from 'lodash';
+
+function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+  const newInputFields = cloneDeep(inputFields);
+  newInputFields.splice(fieldIndex + 1, 0, {
+    rowClassName: 'mobile-push-row',
+    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+
+    cols: [
+      {
+        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+        type: "radioGroup",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        options: ["Deeplink", "External Link"],
+        inductiveText: ["A page within mobile app", "An external web page"],
+        value: "Deeplink",
+        required: true,
+        width: 18,
+        offset: 1,
+        errorMessage: "Please select link type",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: ["onChange"],
+      },
+
+    ],
+  });
+  newInputFields.splice(fieldIndex + 2, 0, {
+    rowClassName: 'mobile-push-row',
+    id: 'cta-deeplink-select-section',
+    identifier: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+
+    cols: [
+
+      {
+        id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+        placeholder: "Select DeepLink",
+        type: "select",  //Resembles component to be used
+        options: deepLinkOptions,
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        errorMessage: "Select a deeplink",
+        fluid: true,
+        width: 18,
+        offset: 1,
+        style: {
+          width: '100%',
+
+
+          marginBottom: '16px',
+        },
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: [
+          'onSelect',
+        ],
+      },
+    ],
+  });
+  return newInputFields;
+}
+
+function getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
+  const inputId = `secondary-cta-${get(inputFields[fieldIndex], 'cols[0]').fieldsCount}`;
+  const newInputFields = cloneDeep(inputFields);
+  newInputFields.splice(fieldIndex + 1, 0, {
+    rowClassName: 'mobile-push-row',
+    cols: [
+
+      {
+        id: `${inputId}-label`,
+        label: "Button label",
+        type: "input",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        width: 18,
+        offset: 1,
+        placeholder: "Enter CTA Label here",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        errorMessage: "CTA label cannot be empty.",
+      },
+
+    ],
+  });
+  newInputFields.splice(fieldIndex + 2, 0, {
+    rowClassName: 'mobile-push-row',
+    identifier: `cta-deeplink-${inputId}`,
+    cols: [
+
+      {
+        id: `cta-deeplink-${inputId}`,
+        type: "radioGroup",  //Resembles component to be used
+        metaType: "text",
+        datatype: "string",
+        options: ["Deeplink", "External Link"],
+        inductiveText: ["A page within mobile app", "An external web page"],
+        value: "Deeplink",
+        required: true,
+        width: 18,
+        offset: 1,
+        errorMessage: "Please select link type",
+        fluid: true,
+        styling: "semantic",
+        order: 1,
+
+        customComponent: false,
+        supportedEvents: ["onChange"],
+      },
+    ],
+  });
+  newInputFields.splice(fieldIndex + 3, 0, {
+    rowClassName: 'mobile-push-row',
+    id: 'cta-deeplink-select-section',
+    identifier: `cta-deeplink-${inputId}-select`,
+    cols: [
+
+
+      {
+        id: `cta-deeplink-${inputId}-select`,
+        placeholder: "Select DeepLink",
+        type: "select",  //Resembles component to be used
+        options: deepLinkOptions,
+        errorMessage: "Select a deeplink",
+        metaType: "text",
+        datatype: "string",
+        required: true,
+        fluid: true,
+        width: 18,
+        offset: 1,
+        style: {
+          width: '100%',
+          marginBottom: '16px',
+        },
+        styling: "semantic",
+        order: 1,
+        customComponent: false,
+        supportedEvents: [
+          'onSelect',
+        ],
+      },
+    ],
+  });
+  return newInputFields;
+}
+function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formData, field}) {
+  const inputFields = cloneDeep(inputFieldsArgs);
+  const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
+  const deeplinkValue = formData[this.state.currentTab - 1][field.id];
+  const componentIndex = fieldIndex + 1;
+  const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${field.id}-select` : `${field.id}-text`;
+  if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
+    const deleteCount = get(inputFields, `[${componentIndex}].id`) === "cta-external-link" ? 1 : 0;
+    inputFields.splice(componentIndex, deleteCount, {
+      rowClassName: 'mobile-push-row',
+      id: 'cta-deeplink-select-section',
+      identifier: inputId,
+      cols: [
+
+        {
+          id: inputId,
+          placeholder: "Select DeepLink",
+          type: "select",  //Resembles component to be used
+          options: deepLinkOptions,
+          metaType: "text",
+          datatype: "string",
+          errorMessage: "Select a deeplink",
+          required: true,
+          fluid: true,
+          width: 18,
+          offset: 1,
+          style: {
+            width: '100%',
+
+            marginBottom: '16px',
+          },
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          supportedEvents: [
+            'onSelect',
+          ],
+        },
+      ],
+    });
+  } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
+    const row = {
+      rowClassName: 'mobile-push-row',
+      id: 'cta-external-link',
+      identifier: inputId,
+
+      cols: [
+
+        {
+          id: inputId,
+          placeholder: "External Link",
+          type: "input",  //Resembles component to be used
+          metaType: "text",
+          datatype: "string",
+          errorMessage: "External Link cannot be empty",
+          required: true,
+          fluid: true,
+          width: 18,
+          offset: 1,
+          style: {
+            width: '100%',
+
+            marginBottom: '16px',
+          },
+          styling: "semantic",
+          order: 1,
+          customComponent: false,
+          standalone: false,
+        },
+      ],
+    };
+    if (!inputFields[fieldIndex + 1] || inputFields[componentIndex].id === "cta-deeplink-select-section") {
+      inputFields[componentIndex] = row;
+      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
+        inputFields.splice(componentIndex + 1, 1);
+      }
+      if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
+        let configkeys = filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${field.id}-select`]);
+        if (configkeys[0]) {
+          configkeys = configkeys[0].keys;
+        }
+        if (configkeys.length) {
+          //inputFields = inputFields.slice(0, componentIndex + 1).concat(inputFields.slice( componentIndex + 1 + configkeys.length, inputFields.length));
+
+          inputFields.splice(componentIndex + 1, configkeys.length);
+        }
+      }
+    } else {
+      inputFields.splice(componentIndex, 0, row);
+    }
+  }
+  return inputFields;
+}
+export {
+  getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields,
+};