@capillarytech/creatives-library 2.0.69 → 2.0.71

package/v2Containers/Cap/selectors.js

@@ -0,0 +1,85 @@
+// makeSelectLocationState expects a plain JS object for the routing state
+import { createSelector } from 'reselect';
+import _ from 'lodash';
+const selectCapDomain = (state) => state.get('cap');
+
+const makeSelectAuthenticated = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.toJS()
+);
+
+const makeSelectMessage = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('messages').toJS()
+);
+
+const makeSelectMetaEntities = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('metaEntities')
+);
+
+const isLoadingMetaEntities = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingSchema')
+);
+const setInjectedTags = () => createSelector(
+  selectCapDomain,
+  (globalState) => {
+    let injectedTags = globalState.get('injectedTags') || {};
+    const metaEntities = globalState.get('metaEntities') || {};
+    const customTags = metaEntities.tags && metaEntities.tags.custom ? metaEntities.tags.custom : {};
+    console.log("selector cap: ", injectedTags, customTags, metaEntities);
+    return (injectedTags = _.merge({}, injectedTags, customTags));
+  }
+);
+
+const makeSelectLocationState = () => {
+  let prevRoutingState;
+  let prevRoutingStateJS;
+
+  return (state) => {
+    const routingState = state.get('route'); // or state.route
+
+    if (!routingState.equals(prevRoutingState)) {
+      prevRoutingState = routingState;
+      prevRoutingStateJS = routingState.toJS();
+    }
+
+    return prevRoutingStateJS;
+  };
+};
+
+const makeSelectOrgId = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('orgID')
+);
+
+const makeSelectUser = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('user')
+);
+const selectCurrentOrgDetails = () => createSelector(
+  selectCapDomain,
+  (globalState) => {
+    const currentOrgDetails = globalState.get('currentOrgDetails');
+    return currentOrgDetails ? currentOrgDetails.toJS() : null;
+  }
+);
+
+const makeSelectFetchingSchema = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingSchema')
+);
+
+export {
+  makeSelectLocationState,
+  makeSelectAuthenticated,
+  makeSelectMessage,
+  makeSelectOrgId,
+  makeSelectMetaEntities,
+  makeSelectUser,
+  selectCurrentOrgDetails,
+  isLoadingMetaEntities,
+  makeSelectFetchingSchema,
+  setInjectedTags,
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Cap from '../index';
+
+describe('<Cap />', () => {
+  it('should render its children', () => {
+    const children = (<h1>Test</h1>);
+    const renderedComponent = shallow(
+      <Cap>
+        {children}
+      </Cap>
+    );
+    expect(renderedComponent.contains(children)).toBe(true);
+  });
+});

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

@@ -0,0 +1,28 @@
+import { fromJS } from 'immutable';
+
+import { makeSelectLocationState } from 'containers/Cap/selectors';
+
+describe('makeSelectLocationState', () => {
+  it('should select the route as a plain JS object', () => {
+    const route = fromJS({
+      locationBeforeTransitions: null,
+    });
+    const mockedState = fromJS({
+      route,
+    });
+    expect(makeSelectLocationState()(mockedState)).toEqual(route.toJS());
+  });
+
+  it('should return cached js routeState for same concurrent calls', () => {
+    const route = fromJS({
+      locationBeforeTransitions: null,
+    });
+    const mockedState = fromJS({
+      route,
+    });
+    const selectLocationState = makeSelectLocationState();
+
+    const firstRouteStateJS = selectLocationState(mockedState);
+    expect(selectLocationState(mockedState)).toBe(firstRouteStateJS);
+  });
+});

package/v2Containers/ChannelTemplates/actions.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * ChannelTemplates actions
+ *
+ */
+
+import * as types from './constants';
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function getTemplates(channel) {
+  return {
+    type: types.GET_TEMPLATES_REQUEST,
+    channel,
+  };
+}

package/v2Containers/ChannelTemplates/constants.js

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

package/v2Containers/ChannelTemplates/index.js

@@ -0,0 +1,48 @@
+/*
+ *
+ * ChannelTemplates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import makeSelectChannelTemplates from './selectors';
+import * as actions from './actions';
+import messages from './messages';
+
+
+export class ChannelTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  componentDidMount() {
+    debugger;
+    this.props.actions.getTemplates(this.props.channel);
+  }
+  render() {
+    return (
+      <CardGrid
+        cardDataList={[]}
+      />
+    );
+  }
+}
+
+ChannelTemplates.propTypes = {
+  actions: PropTypes.object.isRequired,
+  channel: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  ChannelTemplates: makeSelectChannelTemplates(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelTemplates);

package/v2Containers/ChannelTemplates/messages.js

@@ -0,0 +1,13 @@
+/*
+ * ChannelTemplates Messages
+ *
+ * This contains all the text for the ChannelTemplates component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.ChannelTemplates.header',
+    defaultMessage: 'This is ChannelTemplates container !',
+  },
+});

package/v2Containers/ChannelTemplates/reducer.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * ChannelTemplates reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  loadingTemplates: true,
+  smsTemplates: [],
+  emailTemplates: [],
+  wechatTemplates: [],
+  mobilepushTemplates: [],
+});
+
+function channelTemplatesReducer(state = initialState, action) {
+  const channelTemplates = `${action.channel}Templates`;
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.GET_TEMPLATES_REQUEST:
+      return state.set('loadingTemplates', true);
+    case types.GET_TEMPLATES_SUCESS:
+      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
+    case types.GET_TEMPLATES_FAILURE:
+      return state.set('loadingTemplates', false).set('error', action.error);
+    default:
+      return state;
+  }
+}
+
+export default channelTemplatesReducer;

package/v2Containers/ChannelTemplates/sagas.js

@@ -0,0 +1,32 @@
+import { take, takeLatest, call, put, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+
+
+import * as types from './constants';
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+function* getTemplates(action) {
+  try {
+    const req = {
+      channel: action.channel,
+      queryParams: action.query,
+    };
+    const res = call(Api.getAllTemplates, req);
+    put({type: types.GET_TEMPLATES_SUCESS, templates: res.response, channel: action.channel});
+  } catch (error) {
+    put({type: types.GET_TEMPLATES_FAILURE, error});
+  }
+}
+function* getTemplatesWatcher() {
+  const watcher = yield takeLatest(types.GET_TEMPLATES_REQUEST, getTemplates);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+// All sagas to be loaded
+export default [
+  defaultSaga,
+  getTemplatesWatcher,
+];

package/v2Containers/ChannelTemplates/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the channelTemplates state domain
+ */
+const selectChannelTemplatesDomain = () => (state) => state.get('templates');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by ChannelTemplates
+ */
+
+const makeSelectChannelTemplates = () => createSelector(
+  selectChannelTemplatesDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectChannelTemplates;
+export {
+  selectChannelTemplatesDomain,
+};

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

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

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

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

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

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

package/v2Containers/ChannelTemplates/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/ChannelTemplates/tests/selectors.test.js

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -0,0 +1,257 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import TemplatesV2 from '../TemplatesV2';
+import TemplatePreview from '../../components/TemplatePreview';
+import SmsCreate from '../Sms/Create';
+import SmsEdit from '../Sms/Edit';
+import Email from '../Email';
+import EmailWrapper from '../EmailWrapper';
+import MobilepushWrapper from '../MobilepushWrapper';
+import EmailPreviewV2 from '../../components/EmailPreviewV2';
+import MobilePushPreview from '../../components/MobilePushPreviewV2';
+import CallTask from '../CallTask';
+import MobliPushEdit from '../MobilePush/Edit';
+import * as constants from './constants';
+const CreativesWrapper = styled.div`
+  .ant-popover,
+  .ant-notification,
+  .ant-modal-wrap {
+    z-index: 10003;
+  }
+`;
+function SlideBoxContent(props) {
+  const {
+      slidBoxContent,
+      onSelectTemplate,
+      onPreviewTemplate,
+      templateData,
+      location,
+      isGetFormData,
+      getFormData,
+      messageDetails,
+      onCreateNew,
+      currentChannel,
+      onChannelChange,
+      onEmailModeChange,
+      emailCreateMode,
+      onMobilepushModeChange,
+      mobilePushCreateMode,
+      templateStep,
+      onCreateNextStep,
+      cap,
+      onResetStep,
+      isFullMode,
+      onCallTaskSubmit,
+      setIsLoadingContent,
+      showTemplateName,
+    } = props;
+  const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
+  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
+  const creativesLocationProps = {
+    pathname: `/sms/edit`,
+    query,
+    search: '',
+  };
+  let channel = currentChannel;//for create mode
+  const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
+  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
+  let isEditSms = false;
+  let isEditEmailWithId = false;
+  let isEmailEditWithContent = false;
+  let isPreview = false;
+  let isEmailPreview = false;
+  let isMpushPreview = false;
+  let isEditCallTask = false;
+  let isEditMPush = false;
+  const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
+  if (templateData && channel) {
+    channel = templateData.type;// for edit mode with template data
+    isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
+    isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
+    isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
+    isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
+    isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
+    isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
+    isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
+    isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
+  }
+
+  return (
+    <CreativesWrapper>
+      {!isFullMode && slidBoxContent === 'templates' && (
+      <TemplatesV2
+        isFullMode={isFullMode}
+        onSelectTemplate={onSelectTemplate}
+        handlePeviewTemplate={onPreviewTemplate}
+        location={location}
+        createNew={onCreateNew}
+        channel={channel.toLowerCase()}
+        onChannelChange={onChannelChange}
+        onCallTaskSubmit={onCallTaskSubmit}
+        cap={cap}
+        />
+        )}
+      {isPreview && (
+      <TemplatePreview
+        content={templateData.versions.base['sms-editor']}
+        channel={templateData.type.toLowerCase()}
+        charCounterEnabled
+        templateData={templateData}
+        showCount
+      />
+        )}
+      {isEmailPreview && (
+        <EmailPreviewV2
+          templateData={templateData}
+         />
+      )
+      }
+      {isMpushPreview &&
+        <MobilePushPreview templateData={templateData} channel={channel}/>
+      }
+      {isEditSms && (
+      <SmsEdit
+        setIsLoadingContent={setIsLoadingContent}
+        location={creativesLocationProps}
+        isFullMode={isFullMode}
+        route={{ name: 'sms' }}
+        params={{id: templateData._id}}
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        templateData={templateData}
+        // subscriptionTemplateDetails={templateData} // used only in library mode
+          />
+        )}
+      {
+        isEditCallTask &&
+          <CallTask
+            mode={'edit'}
+            templateData={templateData}
+            onCallTaskSubmit={onCallTaskSubmit}
+        />
+      }
+      {
+         isCreateCallTask &&
+         <CallTask
+           mode={'create'}
+           onCallTaskSubmit={onCallTaskSubmit}
+        />
+       }
+      {isCreateSms && (
+      <SmsCreate
+        setIsLoadingContent={setIsLoadingContent}
+        location={creativesLocationProps}
+        route={{ name: 'sms' }}
+        isComponent
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+          />
+        )}
+      {isEmailCreate && (
+      <EmailWrapper
+        key="creatives-email-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onEmailModeChange={onEmailModeChange}
+        emailCreateMode={emailCreateMode}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+        showTemplateName={showTemplateName}
+      />
+        )}
+      {(isEditEmailWithId || isEmailEditWithContent) && (
+      <Email
+        key="cretives-container-email-edit"
+        setIsLoadingContent={setIsLoadingContent}
+        location={{
+          pathname: `/email/edit`,
+          query: { type: 'embedded', module: 'library'},
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+        cap={cap}
+        showTemplateName={showTemplateName}
+          />
+        )}
+      {isEditMPush &&
+        <MobliPushEdit
+          getFormLibraryData={getFormData}
+          setIsLoadingContent={setIsLoadingContent}
+          location={{
+            pathname: `/mobilepush/edit/`,
+            query,
+          }}
+          params={{id: templateData._id}}
+          isFullMode={isFullMode}
+          isGetFormData={isGetFormData}
+          route={{ name: 'mobilepush' }}
+          templateData={templateData}
+          showTemplateName={showTemplateName}
+        />
+        }
+      {isCreateMPush &&
+      <MobilepushWrapper
+        key="creatives-mobilepush-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onMobilepushModeChange={onMobilepushModeChange}
+        mobilePushCreateMode={mobilePushCreateMode}
+        isGetFormData={isGetFormData}
+        getFormData={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+        showTemplateName={showTemplateName}
+        query={query}/>
+        }
+    </CreativesWrapper>
+  );
+}
+SlideBoxContent.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSelectTemplate: PropTypes.func,
+  onPreviewTemplate: PropTypes.func,
+  templateData: PropTypes.object,
+  location: PropTypes.object,
+  isGetFormData: PropTypes.bool,
+  getFormData: PropTypes.func,
+  messageDetails: PropTypes.object,
+  onCreateNew: PropTypes.func,
+  onChannelChange: PropTypes.func,
+  currentChannel: PropTypes.string,
+  onEmailModeChange: PropTypes.func,
+  emailCreateMode: PropTypes.string,
+  templateStep: PropTypes.string,
+  onCreateNextStep: PropTypes.func,
+  cap: PropTypes.object,
+  onResetStep: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
+  isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
+  showTemplateName: PropTypes.func,
+};
+export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { CapButton } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+import messages from './messages';
+function SlideBoxFooter(props) {
+  const { slidBoxContent, onSave, onEditTemplate, onCreateNextStep, isFullMode} = props;
+  return (
+    <div>
+      <div>
+        {props.shouldShowDoneFooter() && (
+          <div>
+            <CapButton onClick={onSave}>
+              {isFullMode ?
+                <FormattedMessage {...messages.creativesTemplatesSaveFullMode}/>
+              :
+                <FormattedMessage {...messages.creativesTemplatesSave} />
+              }
+            </CapButton>
+            {/* {isFullMode && <CapButton type="secondary" onClick={onDiscard}><FormattedMessage {...messages.creativesTemplatesDiscard}/></CapButton>} */}
+          </div>)}
+        {props.shouldShowContinueFooter() &&
+          <CapButton onClick={onCreateNextStep}>
+            <FormattedMessage {...messages.continue} />
+          </CapButton>
+          }
+        {slidBoxContent === 'preview' && (
+          <CapButton onClick={onEditTemplate} type="secondary">
+            <FormattedMessage {...messages.creativesTemplatesEdit} />
+          </CapButton>
+          )}
+      </div>
+    </div>
+  );
+}
+SlideBoxFooter.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSave: PropTypes.func,
+  onEditTemplate: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
+  shouldShowContinueFooter: PropTypes.func,
+  shouldShowDoneFooter: PropTypes.func,
+  isFullMode: PropTypes.bool,
+};
+export default SlideBoxFooter;