@capillarytech/creatives-library 2.0.75 → 2.0.76

package/containers/CreativesContainer/index.js

@@ -0,0 +1,418 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import {
+  CapSlideBox,
+} from '@capillarytech/cap-ui-library';
+import { injectIntl } from 'react-intl';
+import classnames from 'classnames';
+import {isEmpty, get, forEach} from 'lodash';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import * as actions from './actions';
+import {selectEmailLayout, uploadSelector, templateUserList} from '../Templates/selectors';
+import SlideBoxContent from './SlideBoxContent';
+import SlideBoxHeader from './SlideBoxHeader';
+import SlideBoxFooter from './SlideBoxFooter';
+import * as constants from './constants';
+import * as commonUtil from '../../utils/common';
+
+import './index.scss';
+import * as templateActions from '../Templates/actions';
+import * as globalActions from '../Cap/actions';
+import {isLoading as isLoadingSelector} from './selectors';
+
+const classPrefix = 'add-creatives-section';
+class Creatives extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoadingContent: true,
+      templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
+      showSlideBox: true,
+      slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
+      templateData: this.getTemplateData(props.templateData),
+      currentChannel: this.props.channel || 'sms',
+    };
+    this.creativesTemplateSteps = {
+      1: 'modeSelection',
+      2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
+      3: 'createTemplateContent',
+    };
+  }
+  componentWillUnmount() {
+    if (!this.props.isFullMode) {
+      this.props.templateActions.resetTemplateStoreData();
+      this.props.globalActions.clearMetaEntities();
+    }
+  }
+
+
+  onSelectTemplate = (template) => {
+    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+  };
+  onPreviewTemplate = (template) => {
+    const templateData = template;
+    const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
+    const userId = parseInt(template.updatedBy, 10);
+    templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
+    this.setState({ slidBoxContent: 'preview', templateData });
+  };
+  onEditTemplate = () => {
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
+  };
+  onCreateNew = () => {
+    this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
+  };
+
+  onShowTemplates = () => {
+    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
+  };
+  onChannelChange = (channel) => {
+    this.setState({currentChannel: channel});
+  }
+  onCreateNextStep = () => {
+    this.setState((prevState) => {
+      let templateStep = prevState.templateStep + 1;
+      const {emailCreateMode, currentChannel} = prevState;
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+        templateStep = prevState.templateStep + 2;
+      }
+
+      return {
+        templateStep,
+      };
+    });
+  }
+
+  onEmailModeChange = (mode) => {
+    this.setState({ emailCreateMode: mode});
+  }
+  onMobilepushModeChange = (mode) => {
+    this.setState({ mobilePushCreateMode: mode});
+  }
+
+  onCallTaskSubmit = (data) => {
+    this.props.getCreativesData({
+      channel: 'CALL_TASK',
+      ...data,
+    });
+  }
+
+  getTemplateData = (templateData) => { //from consumers to creatives
+    const {isFullMode} = this.props;
+    if (!isFullMode && templateData) { // for component mode
+      const {channel} = templateData;
+      let creativesTeplateData = {type: channel };
+      if (channel === constants.SMS) {
+        const formData = {
+          "sms-editor": templateData.messageBody,
+        };
+        creativesTeplateData = {
+          type: channel,
+          name: "Campaign message SMS content",
+          versions: {
+            base: formData,
+            history: [formData],
+          },
+        };
+      } else if (channel === constants.EMAIL) {
+        const formData = {
+          subject: templateData.emailSubject,
+          html_content: templateData.emailBody,
+          is_drag_drop: templateData.is_drag_drop,
+          lang_id: templateData.lang_id,
+          iso_code: templateData.iso_code,
+          language: templateData.language,
+          drag_drop_id: templateData.drag_drop_id,
+        };
+        creativesTeplateData = {
+          base: formData,
+          edit: true,
+          type: channel,
+        };
+      } else if (channel === constants.CALL_TASK) {
+        creativesTeplateData = {
+          subject: templateData.subject,
+          messageBody: templateData.messageBody,
+          description: templateData.description,
+          edit: true,
+          type: channel,
+        };
+      } else if (channel === constants.MOBILE_PUSH) {
+        const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type');
+        creativesTeplateData = {
+          type: channel,
+          name: templateData.messageSubject,
+          versions: {
+            base: {
+              ANDROID: templateData.androidContent,
+              IOS: templateData.iosContent,
+            },
+          },
+          definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+        };
+      }
+      return creativesTeplateData;
+    }
+    return templateData || null;
+  }
+
+  getCreativesData = (channel, template) => { //from creatives to consumers
+    let templateData = {channel };
+    if (channel === constants.SMS && template.value.base) {
+      templateData.messageBody = template.value.base['sms-editor'];
+    } else if (channel === constants.EMAIL && template.value.base) {
+      const emailBase = template.value.base;
+      templateData = {...templateData, ...emailBase, emailBody: emailBase.html_content, emailSubject: emailBase.subject};
+      delete templateData.html_content;
+      delete templateData.subject;
+    } else if (channel === constants.MOBILE_PUSH && get(template, "value.versions.base")) {
+      const mobilpushTemplate = template.value;
+      templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
+      const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
+      if (!isEmpty(androidContent)) {
+        delete androidContent.cuid;
+        delete androidContent.luid;
+        delete androidContent.communicationId;
+        const custom = {};
+        forEach(androidContent.custom, (customKeyValue) => {
+          custom[customKeyValue.key] = customKeyValue.value;
+        } );
+        androidContent.custom = custom;
+        templateData.androidContent = androidContent;
+        templateData.androidContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.androidContent.deviceType = 'ANDROID';
+      }
+      const iosContent = get(mobilpushTemplate, 'versions.base.IOS');
+      if (!isEmpty(iosContent)) {
+        delete iosContent.cuid;
+        delete iosContent.luid;
+        delete iosContent.communicationId;
+        const custom = {};
+        forEach(iosContent.custom, (customKeyValue) => {
+          custom[customKeyValue.key] = customKeyValue.value;
+        } );
+        iosContent.custom = custom;
+        templateData.iosContent = iosContent;
+        templateData.iosContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.iosContent.deviceType = 'IOS';
+      }
+      templateData.messageSubject = mobilpushTemplate.name;
+    }
+    return templateData;
+  };
+  getSlideBocContent({mode, templateData, isFullMode}) {
+    let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
+    if (mode === 'create' && isFullMode) {
+      creativesMode = 'createTemplate';
+    } else if (mode === 'create' && isEmpty(templateData)) {
+      creativesMode = 'templates';
+    } else if (mode === 'edit') {
+      creativesMode = 'editTemplate';
+    }
+    return creativesMode;
+  }
+
+  getFormData = (template) => {
+    if (template.validity) {
+      this.setState(
+        {
+          isGetFormData: false,
+        },
+        () => {
+          const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
+          const channel = templateData.type;
+          const creativesData = this.getCreativesData(channel, template);// convers data to consumer understandable format
+          this.props.getCreativesData(creativesData);// send data to consumer
+        },
+      );
+    }
+  };
+  setIsLoadingContent = (isLoadingContent) => {
+    if (this.state.isLoadingContent !== isLoadingContent) {
+      this.setState({isLoadingContent });
+    }
+  }
+  resetStep = () => {
+    this.setState((prevState) => {
+      let newState = {
+        templateStep: 1,
+      };
+      if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
+        newState = { ...newState, emailCreateMode: null };
+      }
+      return newState;
+    });
+  }
+  handleCloseSlideBox = () => {
+    this.setState((prevState) => ({
+      ...prevState,
+      templateData: undefined,
+      showSlideBox: false,
+    }), this.props.handleCloseCreatives);
+  };
+  saveMessage = () => {
+    this.setState({ isGetFormData: true });
+  };
+  shouldShowFooter = () => {
+    const {isFullMode } = this.props;
+    const {slidBoxContent, currentChannel, emailCreateMode, templateStep, mobilePushCreateMode} = this.state;
+    const channel = currentChannel.toUpperCase();
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    let showFooter = false;
+    const isMobilepush = channel === constants.MOBILE_PUSH;
+    if (!isFullMode ) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
+      const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+      const isCallTask = channel === constants.CALL_TASK;
+      showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview') && !isCallTask;
+      if (isMobilepush) {
+        showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(mobilePushCreateMode));
+      }
+    } else if (channel === constants.EMAIL && isFullMode) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
+      showFooter = isEmailCreate && emailCreateMode;
+    }
+    if (channel === constants.EMAIL && emailCreateMode === "upload") {
+      showFooter = showFooter && !this.props.isUploading;
+    }
+    if (showFooter) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      }
+    }
+    return showFooter;
+  }
+  shouldShowDoneFooter = () => {
+    const {slidBoxContent, templateStep, currentChannel} = this.state;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    let showDone = false;
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
+      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+    } else if (channel === constants.MOBILE_PUSH) {
+      showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
+    }
+
+    return showDone;
+  }
+  shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
+    const {slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode} = this.state;
+    let isShowContinueFooter = false;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
+        let isEmailCreate = slidBoxContent === 'createTemplate';
+        isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
+        isShowContinueFooter = isEmailCreate && emailCreateMode;
+      }
+    } else if (currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+      isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
+    }
+
+    return isShowContinueFooter;
+  }
+  render() {
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode} = this.state;
+    const {isFullMode, creativesMode, cap, isUploading} = this.props;
+    return (
+      <div className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
+        <CapSlideBox
+          header={
+            <SlideBoxHeader
+              messages={this.props.messages}
+              slidBoxContent={this.state.slidBoxContent}
+              templateData={templateData}
+              onShowTemplates={this.onShowTemplates}
+              creativesMode={creativesMode}
+              isFullMode={isFullMode}
+              isLoadingContent={isLoadingContent}
+              showPrefix={!isUploading} // not show back button when email template is being uploaded
+            />
+          }
+          content={
+            <SlideBoxContent
+              onSelectTemplate={this.onSelectTemplate}
+              onPreviewTemplate={this.onPreviewTemplate}
+              slidBoxContent={slidBoxContent}
+              templateData={templateData}
+              location={this.props.location}
+              messageDetails={this.props.messageDetails}
+              getFormData={this.getFormData}
+              onCallTaskSubmit={this.onCallTaskSubmit}
+              onCreateNew={this.onCreateNew}
+              isGetFormData={isGetFormData}
+              isFullMode={isFullMode}
+              currentChannel={currentChannel.toUpperCase()}
+              onChannelChange={this.onChannelChange}
+              onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
+              emailCreateMode={emailCreateMode}// upload zip || use editor are values
+              templateStep={this.creativesTemplateSteps[templateStep]}
+              onCreateNextStep={this.onCreateNextStep}
+              onResetStep={this.resetStep}
+              cap={cap}
+              setIsLoadingContent={this.setIsLoadingContent}
+              onMobilepushModeChange={this.onMobilepushModeChange}
+              mobilePushCreateMode={mobilePushCreateMode}
+            />
+          }
+          footer={this.shouldShowFooter() &&
+            <SlideBoxFooter
+              messages={this.props.messages}
+              onSave={this.saveMessage}
+              onEditTemplate={this.onEditTemplate}
+              slidBoxContent={slidBoxContent}
+              onCreateNextStep={this.onCreateNextStep}
+              currentChannel={currentChannel.toUpperCase()}
+              templateStep={this.creativesTemplateSteps[templateStep]}
+              emailCreateMode={emailCreateMode}
+              shouldShowContinueFooter={this.shouldShowContinueFooter}
+              shouldShowDoneFooter={this.shouldShowDoneFooter}
+            />
+          }
+          handleClose={this.handleCloseSlideBox}
+          show={showSlideBox}
+          size="size-l"
+        />
+      </div>
+    );
+  }
+}
+
+Creatives.propTypes = {
+  getCreativesData: PropTypes.func,
+  messages: PropTypes.object,
+  messageDetails: PropTypes.object,
+  creativesMode: PropTypes.string,
+  location: PropTypes.object,
+  handleCloseCreatives: PropTypes.func,
+  templateData: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  channel: PropTypes.string,
+  templateActions: PropTypes.object,
+  globalActions: PropTypes.object,
+  cap: PropTypes.object,
+  // isLoading: PropTypes.bool,
+  templateUserList: PropTypes.array,
+  isUploading: PropTypes.bool,
+  EmailLayout: PropTypes.string,
+};
+const mapStatesToProps = () => createStructuredSelector({
+  isLoading: isLoadingSelector(),
+  templateUserList: templateUserList(),
+  EmailLayout: selectEmailLayout(),
+  isUploading: uploadSelector(),
+});
+function mapDispatchToProps(dispatch) {
+  return {
+    templateActions: bindActionCreators(templateActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/containers/CreativesContainer/index.scss

@@ -0,0 +1,27 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: add-creatives-section;
+
+.#{$classPrefix} {
+    &.creatives-library-mode{
+        .sms-create-container,  .sms-email-container{
+            .ant-tabs-top-bar{
+                display: none;
+            }
+        }
+    }
+    .#{$classPrefix}-footer {
+        position: absolute;
+        bottom: 0;
+        left: 1px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        border-top: 1px solid $CAP_G07;
+
+        &.with-creative {
+            width: 100%;
+        }
+    }
+}

package/containers/CreativesContainer/messages.js

@@ -0,0 +1,17 @@
+/*
+ * 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 !',
+  },
+  continue: {
+    id: 'app.containers.EmailWrapper.continue',
+    defaultMessage: 'Continue',
+  },
+});

package/containers/CreativesContainer/reducer.js

@@ -0,0 +1,29 @@
+/*
+ *
+ * CreativesContainer reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+  SHOW_CONTANER_LOADER,
+  HIDE_CONTAINER_LOADER,
+} from './constants';
+
+const initialState = fromJS({containerLoader: true});
+
+function creativesContainerReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    case SHOW_CONTANER_LOADER:
+      return state.set('containerLoader', true);
+    case HIDE_CONTAINER_LOADER:
+      return state.set('containerLoader', false);
+    default:
+      return state;
+  }
+}
+
+export default creativesContainerReducer;

package/containers/CreativesContainer/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/CreativesContainer/selectors.js

@@ -0,0 +1,30 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the creativesContainer state domain
+ */
+const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by CreativesContainer
+ */
+
+const makeSelectCreativesContainer = () => createSelector(
+  selectCreativesContainerDomain(),
+  (substate) => substate.toJS()
+);
+const isLoading = () => createSelector(
+  makeSelectCreativesContainer(),
+  (substate) => substate.containerLoader
+);
+
+export default makeSelectCreativesContainer;
+export {
+  selectCreativesContainerDomain,
+  isLoading,
+};

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

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

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

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

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

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

package/containers/CreativesContainer/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(true);
+  });
+});

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

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

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';