@capillarytech/creatives-library 2.0.81 → 2.0.83

package/containers/CreativesContainer/index.js

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

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

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

package/containers/CreativesContainer/reducer.js

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

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

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

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

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

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

@@ -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(true);
-  });
-});

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

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

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

package/containers/EmailWrapper/constants.js

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