@capillarytech/creatives-library 2.0.81 → 2.0.83

package/containers/EmailWrapper/index.js

@@ -1,238 +0,0 @@
-/*
- *
- * 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

@@ -1,57 +0,0 @@
-/*
- * 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

@@ -1,23 +0,0 @@
-/*
- *
- * 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

@@ -1,11 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,18 +0,0 @@
-
-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/reducer.test.js

@@ -1,9 +0,0 @@
-
-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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,249 +0,0 @@
-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,
-};