@capillarytech/creatives-library 2.0.53 → 2.0.56

package/components/CallTaskPreview/_callTaskPreview.scss

@@ -0,0 +1,17 @@
+.call-task-preview {
+  .call-task-subject-container {
+    padding: 8px;
+    background: #444;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .call-task-message-container {
+    overflow-y: auto;
+    height: 150px;
+    width: 100%;
+    font-size: 12px;
+    background: #eee;
+    padding: 8px;
+  }
+}

package/components/CallTaskPreview/index.js

@@ -0,0 +1,37 @@
+/**
+*
+* CallTaskPreview
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeaderPng from './images/Header.png';
+import FooterPng from './images/Footer.png';
+
+import './_callTaskPreview.scss';
+
+class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const { subject, messageBody } = this.props;
+    return (
+      <div className="call-task-preview">
+        <img style={{ width: '100%' }} src={HeaderPng} alt="header" />
+        <div className="call-task-subject-container">
+          {subject}
+        </div>
+        <div className="call-task-message-container">
+          {messageBody}
+        </div>
+        <img style={{ width: '100%' }} src={FooterPng} alt="footer" />
+      </div>
+    );
+  }
+}
+
+CallTaskPreview.propTypes = {
+  subject: PropTypes.string,
+  messageBody: PropTypes.string,
+};
+
+export default CallTaskPreview;

package/components/CallTaskPreview/messages.js

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

package/components/CallTaskPreview/tests/index.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { shallow } from "enzyme";
+import CallTaskPreview from "../index";
+
+describe("<CallTaskPreview />", () => {
+  it("Test if Call task component renders", () => {
+    const component = shallow(
+      <CallTaskPreview
+        subject="this is test"
+        body="this is test message body"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

package/components/CapTagList/index.js

@@ -81,8 +81,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     tagValue = tagValue.replace("(N)", `${days}`);
     const resultArray = [];
     resultArray.push(tagValue);
-    this.props.onSelect(resultArray);
     this.setState({showModal: false, dynamicDateValue: ''});
+    this.props.onSelect(resultArray);
   };
 
   handleCancel = () => {

package/components/EmailPreviewV2/index.js

@@ -54,7 +54,9 @@ class EmailPreviewV2 extends React.Component {
       this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
     }
   }
-
+  componentWillUnmount() {
+    this.props.templateActions.resetTemplateData();
+  }
   changePreviewDevice = (ev) => {
     this.setState({currentDevice: ev.currentTarget.id});
   }

package/components/NewCallTask/_newCallTask.scss

@@ -0,0 +1,9 @@
+.new-call-task-done-button {
+  margin-top: 24px;
+}
+
+.new-call-task-tagList {
+  position: absolute;
+  right: 0;
+  top: -10px;
+}

package/components/NewCallTask/index.js

@@ -0,0 +1,152 @@
+/**
+*
+* NewCallTask
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CapRow, CapColumn, CapInput, CapButton, CapSpin } from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape } from 'react-intl';
+import TagList from '../../containers/TagList';
+import CallTaskPreview from '../CallTaskPreview';
+import messages from './messages';
+import './_newCallTask.scss';
+
+class NewCallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = this.getInitialState();
+  }
+
+  getInitialState = () => {
+    const { templateData } = this.props;
+    return {
+      subject: templateData && templateData.subject ? templateData.subject : '',
+      messageBody: templateData && templateData.messageBody ? templateData.messageBody : '',
+      description: templateData && templateData.description ? templateData.description : '',
+    };
+  }
+
+  onTagSelect = (data) => {
+    this.insertAtCursor(`{{${data}}}`);
+  }
+
+  setInputRef = (textarea) => {
+    this.textArea = textarea;
+  }
+
+  insertAtCursor = (myValue) => {
+    this.textArea.focus();
+    const textAreaRef = this.textArea.textAreaRef;
+    let pos = textAreaRef.selectionEnd + myValue.length;
+    //IE support
+    let newMessage = textAreaRef.value + myValue;
+    if (document.selection) {
+      this.textArea.focus();
+      const sel = document.selection.createRange();
+      sel.text = myValue;
+    } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others
+      const startPos = textAreaRef.selectionStart;
+      const endPos = textAreaRef.selectionEnd;
+      newMessage = textAreaRef.value.substring(0, startPos) + myValue + textAreaRef.value.substring(endPos, textAreaRef.value.length);
+      pos = startPos + myValue.length;
+    }
+    this.setState({
+      messageBody: newMessage,
+    }, () => {
+      textAreaRef.selectionStart = pos;
+      textAreaRef.selectionEnd = pos;
+    });
+  };
+
+  updateSubject = (e) => {
+    this.setState({
+      subject: e.target.value,
+    });
+  }
+
+  updateMessageBody = (e) => {
+    this.setState({
+      messageBody: e.target.value,
+    });
+  }
+
+  updateDescription = (e) => {
+    this.setState({
+      description: e.target.value,
+    });
+  }
+
+  submitForm = () => {
+    this.props.onCallTaskSubmit(this.state);
+  }
+
+  render() {
+    const { intl, isLoading, metaEntities } = this.props;
+    const { formatMessage } = intl;
+    const { subject, messageBody, description } = this.state;
+    const tags = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
+    return (
+      <CapSpin spinning={isLoading}>
+        <CapRow gutter={16}>
+          <CapColumn span={12}>
+            <div style={{ height: 'calc(100vh - 187px)', overflowY: 'auto', paddingRight: "8px" }}>
+              <div style={{ marginBottom: '34px' }}>
+                <CapInput
+                  label={formatMessage(messages.callTaskTitle)}
+                  onChange={this.updateSubject}
+                  value={subject}
+                  isRequired
+                />
+              </div>
+              <div style={{ position: 'relative', marginBottom: '34px' }}>
+                <TagList
+                  className="new-call-task-tagList"
+                  label={formatMessage(messages.personalisationTags)}
+                  tags={tags}
+                  onTagSelect={this.onTagSelect}
+                />
+                <CapInput.TextArea
+                  setInputRef={this.setInputRef}
+                  label={formatMessage(messages.messageHeader)}
+                  onChange={this.updateMessageBody}
+                  value={messageBody}
+                  isRequired
+                />
+              </div>
+              <CapInput.TextArea
+                label={formatMessage(messages.description)}
+                onChange={this.updateDescription}
+                value={description}
+                isRequired
+                />
+            </div>
+            <CapButton
+              disabled={!subject || !messageBody || !description}
+              className="new-call-task-done-button"
+              onClick={this.submitForm}>
+              {formatMessage(messages.done)}
+            </CapButton>
+          </CapColumn>
+          <CapColumn span={12}>
+            <CallTaskPreview
+              subject={subject}
+              messageBody={messageBody}
+            />
+          </CapColumn>
+        </CapRow>
+      </CapSpin>
+    );
+  }
+}
+
+NewCallTask.propTypes = {
+  intl: intlShape.isRequired,
+  onCallTaskSubmit: PropTypes.func,
+  templateData: PropTypes.object,
+  isLoading: PropTypes.bool,
+  metaEntities: PropTypes.object,
+};
+
+export default injectIntl(NewCallTask);

package/components/NewCallTask/messages.js

@@ -0,0 +1,29 @@
+/*
+ * NewCallTask Messages
+ *
+ * This contains all the text for the NewCallTask component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  callTaskTitle: {
+    id: 'app.components.NewCallTask.callTaskTitle',
+    defaultMessage: 'Call Task title',
+  },
+  messageHeader: {
+    id: 'app.components.NewCallTask.messageHeader',
+    defaultMessage: 'Message',
+  },
+  description: {
+    id: 'app.components.NewCallTask.description',
+    defaultMessage: 'Description',
+  },
+  done: {
+    id: 'app.components.NewCallTask.done',
+    defaultMessage: 'Done',
+  },
+  personalisationTags: {
+    id: 'app.components.NewCallTask.personalisationTags',
+    defaultMessage: 'Personalisation tags',
+  },
+});

package/components/NewCallTask/tests/index.test.js

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

package/containers/CallTask/_callTask.scss

@@ -0,0 +1,5 @@
+.call-task-action-button {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+}

package/containers/CallTask/actions.js

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

package/containers/CallTask/constants.js

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

package/containers/CallTask/index.js

@@ -0,0 +1,141 @@
+/*
+ *
+ * CallTask
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { bindActionCreators } from "redux";
+import { connect } from 'react-redux';
+import {
+  //CapSlideBox,
+  CapButton,
+  //CapIcon,
+  //CapHeader,
+  CapLabel,
+} from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import { makeSelectMetaEntities, isLoadingMetaEntities } from '../Cap/selectors';
+import * as globalActions from '../../containers/Cap/actions';
+import * as actions from "./actions";
+import makeSelectCallTask from './selectors';
+import NewCallTask from '../../components/NewCallTask';
+import messages from './messages';
+import './_callTask.scss';
+
+export class CallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      showCallTaskSlidebox: false,
+      mode: props.mode || '', // supported modes are create | edit
+    };
+  }
+
+  componentDidMount() {
+    const query = {
+      layout: 'SMS',
+      type: 'TAG',
+      context: 'outbound',
+      embedded: 'embedded',
+    };
+    this.props.globalActions.fetchSchemaForEntity(query);
+  }
+
+  showNewCallTask = () => {
+    this.setState({
+      showCallTaskSlidebox: true,
+      mode: 'create',
+    });
+  }
+
+  closeSlideBox = () => {
+    this.setState({
+      showCallTaskSlidebox: false,
+      mode: '',
+    });
+  }
+
+  render() {
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, showContentInSlidebox, onCreateNew } = this.props;
+    const { formatMessage } = intl;
+    const { mode } = this.state;
+    return (
+      <div>
+        {mode ?
+          <NewCallTask
+            metaEntities={metaEntities}
+            isLoading={loadingMetaEntities}
+            mode={mode}
+            templateData={templateData}
+            onCallTaskSubmit={onCallTaskSubmit}
+          />
+          :
+            <div>
+              <CapLabel type="label1">
+                {formatMessage(messages.callTaskInfo)}
+              </CapLabel>
+              <div className="call-task-action-button">
+                <CapButton onClick={showContentInSlidebox ? this.showNewCallTask : onCreateNew}>
+                  {formatMessage(messages.addNewCallTask)}
+                </CapButton>
+              </div>
+              {/* {
+              showCallTaskSlidebox && showContentInSlidebox &&
+              <CapSlideBox
+                header={
+                  <CapHeader
+                    title={formatMessage(messages.newMessage)}
+                    prefix={
+                      <CapIcon style={{ marginRight: '16px' }} type={"back"} onClick={this.closeSlideBox} />
+                    } />
+                }
+                show={showCallTaskSlidebox}
+                size="size-l"
+                handleClose={this.closeSlideBox}
+                content={
+                  <NewCallTask
+                    metaEntities={metaEntities}
+                    isLoading={loadingMetaEntities}
+                    mode={mode}
+                    onCallTaskSubmit={onCallTaskSubmit}
+                  />
+                }
+              />
+            } */}
+            </div>
+        }
+      </div>
+    );
+  }
+}
+
+CallTask.propTypes = {
+  intl: intlShape.isRequired,
+  onCallTaskSubmit: PropTypes.func,
+  mode: PropTypes.string,
+  templateData: PropTypes.object,
+  globalActions: PropTypes.object,
+  metaEntities: PropTypes.object,
+  loadingMetaEntities: PropTypes.bool,
+  showContentInSlidebox: PropTypes.bool,
+  onCreateNew: PropTypes.func,
+};
+
+
+const mapStateToProps = createStructuredSelector({
+  CallTask: makeSelectCallTask(),
+  metaEntities: makeSelectMetaEntities(),
+  loadingMetaEntities: isLoadingMetaEntities(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    globalActions: bindActionCreators(globalActions, dispatch),
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(CallTask));

package/containers/CallTask/messages.js

@@ -0,0 +1,21 @@
+/*
+ * CallTask Messages
+ *
+ * This contains all the text for the CallTask component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  addNewCallTask: {
+    id: 'app.containers.CallTask.addNewCallTask',
+    defaultMessage: 'Add New Call Task',
+  },
+  newMessage: {
+    id: 'app.containers.CallTask.newMessage',
+    defaultMessage: 'New Message',
+  },
+  callTaskInfo: {
+    id: 'app.containers.CallTask.callTaskInfo',
+    defaultMessage: 'Call Tasks are message sent to store staff. The messages are displayed on the Point of Sale (POS) machines for store staff to take action.',
+  },
+});

package/containers/CallTask/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * CallTask reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function callTaskReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default callTaskReducer;

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

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

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

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

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

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

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

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

package/containers/CallTask/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(false).toEqual(false);
+  });
+});

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

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

package/containers/CreativesContainer/SlideBoxContent.js

@@ -8,6 +8,7 @@ import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import EmailPreviewV2 from '../../components/EmailPreviewV2';
+import CallTask from '../CallTask';
 import * as constants from './constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -36,6 +37,7 @@ function SlideBoxContent(props) {
       cap,
       onResetStep,
       isFullMode,
+      onCallTaskSubmit,
       setIsLoadingContent,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
@@ -47,15 +49,18 @@ function SlideBoxContent(props) {
   };
   let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === 'CALLTASK';
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
   let isPreview = false;
   let isEmailPreview = false;
+  let isEditCallTask = 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;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
@@ -73,6 +78,7 @@ function SlideBoxContent(props) {
         createNew={onCreateNew}
         channel={channel.toLowerCase()}
         onChannelChange={onChannelChange}
+        onCallTaskSubmit={onCallTaskSubmit}
         cap={cap}
         />
         )}
@@ -103,6 +109,21 @@ function SlideBoxContent(props) {
         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}
@@ -172,6 +193,7 @@ SlideBoxContent.propTypes = {
   onEmailNextStep: PropTypes.func,
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
   isFullMode: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
 };

package/containers/CreativesContainer/constants.js

@@ -7,5 +7,6 @@
 export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
 export const EMAIL = "EMAIL";
 export const SMS = "SMS";
+export const CALL_TASK = "CALL_TASK";
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/containers/CreativesContainer/index.js

@@ -66,20 +66,37 @@ class Creatives extends React.Component {
   };
 
   onShowTemplates = () => {
-    this.setState({ slidBoxContent: 'templates', showSlideBox: true });
+    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
   };
   onChannelChange = (channel) => {
     this.setState({currentChannel: channel});
   }
   onEmailNextStep = () => {
-    this.setState((prevState) => ({
-      templateStep: prevState.templateStep + 1,
-    }));
+    this.setState((prevState) => {
+      let templateStep = prevState.templateStep + 1;
+      const {emailCreateMode, currentChannel} = prevState;
+      if (currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") {
+        templateStep = prevState.templateStep + 2;
+      }
+
+      return {
+        templateStep,
+      };
+    });
   }
 
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: 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
@@ -111,6 +128,14 @@ class Creatives extends React.Component {
           edit: true,
           type: channel,
         };
+      } else if (channel === constants.CALL_TASK) {
+        creativesTeplateData = {
+          subject: templateData.subject,
+          messageBody: templateData.messageBody,
+          description: templateData.description,
+          edit: true,
+          type: channel,
+        };
       }
       return creativesTeplateData;
     }
@@ -138,6 +163,7 @@ class Creatives extends React.Component {
     }
     return creativesMode;
   }
+
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -180,7 +206,7 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: true });
   };
   shouldShowFooter = () => {
-    const {isFullMode} = this.props;
+    const {isFullMode } = this.props;
     const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -188,7 +214,8 @@ class Creatives extends React.Component {
     if (!isFullMode ) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-      showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview');
+      const isCallTask = channel === 'CALLTASK';
+      showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview') && !isCallTask;
     } else if (channel === constants.EMAIL && isFullMode) {
       const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
       showFooter = isEmailCreate && emailCreateMode;
@@ -250,6 +277,7 @@ class Creatives extends React.Component {
               location={this.props.location}
               messageDetails={this.props.messageDetails}
               getFormData={this.getFormData}
+              onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
               isGetFormData={isGetFormData}
               isFullMode={isFullMode}

package/containers/Email/_email.scss

@@ -77,7 +77,6 @@
   .ant-tabs-extra-content{
     flex: 1;
     align-self: flex-end;
-    padding: 4px;
     height: 42px;
   }
 

package/containers/Email/index.js

@@ -390,7 +390,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const message = getMessageObject('error', (nextProps.Email.createTemplateErrorMessage && nextProps.Email.createTemplateErrorMessage !== '') ? nextProps.Email.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
         this.props.globalActions.addMessageToQueue(message);
       }
-      if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData)) {
+      if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData) && !_.isEmpty(nextProps.Email.cmsData)) {
         const formData = _.cloneDeep(this.state.formData);
         if (nextProps.Email.langId && nextProps.Email.langId !== 'undefined') {
           const langId = nextProps.Email.langId;
@@ -2540,6 +2540,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             onItemClick={this.handleOnItemClick}
             colNumber={2}
             enablePagination
+            isLoading={this.props.Email.fetchingAllAssets}
           />
         </Pagination>
       </div>
@@ -2619,7 +2620,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         />}
         <ImagePreview
           header={imagePreviewHeader}
-          content={imagePreviewContent}
+          content={imagePreviewContent} 
           show={this.state.showImageSelectionBox}
           handleClose={this.handleImagePreviewClose}
           isLoading={this.props.Email.fetchingAllAssets}
@@ -2671,4 +2672,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));

package/containers/Line/Edit/_lineEdit.scss

@@ -19,7 +19,3 @@
   padding: 16px 16px 16px 0;
   border: solid 1px #D6D6D6;
 }
-.ant-radio-wrapper{
-  font-size: 14px;
-  font-family: 'open-sans';
-}

package/containers/MobilePush/Create/_mobilePushCreate.scss

@@ -19,7 +19,3 @@
   padding: 16px 16px 16px 0;
   border: solid 1px #D6D6D6;
 }
-.ant-radio-wrapper{
-  font-size: 14px;
-  font-family: 'open-sans';
-}

package/containers/MobilePush/Edit/_mobilePushCreate.scss

@@ -19,7 +19,3 @@
   padding: 16px 16px 16px 0;
   border: solid 1px #D6D6D6;
 }
-.ant-radio-wrapper{
-  font-size: 14px;
-  font-family: 'open-sans';
-}

package/containers/Sms/Create/_smsCreate.scss

@@ -32,7 +32,6 @@
 .ant-tabs-extra-content{
   flex: 1;
   align-self: flex-end;
-  padding: 4px;
 }
 
 .version-popover {

package/containers/Sms/Edit/actions.js

@@ -37,3 +37,9 @@ export function clearEditResponse() {
     type: types.CLEAR_EDIT_RESPONSE_REQUEST,
   };
 }
+
+export function resetEditTemplate() {
+  return {
+    type: types.RESET_EDIT_TEMPLATE,
+  };
+}

package/containers/Sms/Edit/constants.js

@@ -15,3 +15,4 @@ export const EDIT_TEMPLATE_SUCCESS = 'app/containers/Sms/Edit/EDIT_TEMPLATE_SUCC
 export const EDIT_TEMPLATE_FAILURE = 'app/containers/Sms/Edit/EDIT_TEMPLATE_FAILURE';
 
 export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/containers/Sms/Create/CLEAR_EDIT_RESPONSE_REQUEST';
+export const RESET_EDIT_TEMPLATE = 'app/containers/Sms/Create/RESET_EDIT_TEMPLATE';

package/containers/Sms/Edit/index.js

@@ -194,6 +194,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
+    this.props.actions.resetEditTemplate();
     window.removeEventListener("message", this.handleFrameTasks);
   }
 

package/containers/Sms/Edit/reducer.js

@@ -42,6 +42,8 @@ function editReducer(state = initialState, action) {
       return state.set('getTemplateDetailsInProgress', false);
     case types.CLEAR_EDIT_RESPONSE_REQUEST:
       return state.set('editResponse', {});
+    case types.RESET_EDIT_TEMPLATE:
+      return state.set('templateDetails', {});
     default:
       return state;
   }

package/containers/TagList/index.js

@@ -82,9 +82,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         console.log('Inside ', tag.label);
         mainTags[tag.value] = {
           'tag-header': true,
-          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
-          desc: tag.desc ? tag.desc : tag.label.en,
-          subtags: tag.subtags,
+          "name": tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          "desc": tag.desc ? tag.desc : tag.label.en,
+          "subtags": tag.subtags,
         };
       }
     });

package/containers/TemplatesV2/index.js

@@ -22,6 +22,7 @@ import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/s
 import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
+import CallTask from '../CallTask';
 import './_templatesV2.scss';
 
 const {CapCustomCardList} = CapCustomCard;
@@ -52,6 +53,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     const deafaultPanes = [
       {content: <div></div>, tab: 'Sms', key: 'sms'},
       {content: <div></div>, tab: 'Email', key: 'email'},
+      // {content: <div></div>, tab: 'Call Task', key: 'calltask'},
       // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       // {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
     ];
@@ -94,22 +96,27 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 
     </div>);
   }
+
+  getCallTaskComponent = () => <CallTask onCreateNew={this.props.createNew} onCallTaskSubmit={this.props.onCallTaskSubmit}/>
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
     if (!this.props.isFullMode) {
       query = {type: 'embedded', module: 'library'};
     }
-    return (<Templates
-      key={channel}
-      location={{pathname: `/${channel}`, search: '', query}}
-      route={{name: channel}}
-      router={this.props.router}
-      isFullMode={this.props.isFullMode}
-      createNew={this.props.createNew}
-      onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
-      renderNewCardGrid={this.getTemplateDataForGrid}
-      handlePeviewTemplate={this.props.handlePeviewTemplate}
+    return (channel === 'calltask' ?
+      this.getCallTaskComponent() :
+      <Templates
+        key={channel}
+        location={{pathname: `/${channel}`, search: '', query}}
+        route={{name: channel}}
+        router={this.props.router}
+        isFullMode={this.props.isFullMode}
+        createNew={this.props.createNew}
+        onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+        renderNewCardGrid={this.getTemplateDataForGrid}
+        handlePeviewTemplate={this.props.handlePeviewTemplate}
     />);
   }
 
@@ -121,6 +128,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         if (channel === "mpush") {
           channel = "mobilepush";
         }
+        if (channel === 'call task') {
+          channel = "calltask";
+        }
         pane.content = this.getTemplatesComponent(channel);
         return pane;
       }
@@ -175,6 +185,7 @@ TemplatesV2.propTypes = {
   Templates: PropTypes.object,
   TemplatesList: PropTypes.arrayOf(PropTypes.object),
   handlePeviewTemplate: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
   intl: intlShape,
   onChannelChange: PropTypes.func,
 };

package/index.js

@@ -19,6 +19,10 @@ import Email from './containers/Email/index';
 import emailReducer from './containers/Email/reducer';
 import emailSaga from './containers/Email/sagas';
 
+import CallTask from './containers/CallTask/index';
+import callTaskReducer from './containers/CallTask/reducer';
+import callTaskSaga from './containers/CallTask/sagas';
+
 import WeChat from './containers/WeChat/MapTemplates';
 import wechatReduce from './containers/WeChat/MapTemplates/reducer';
 import wechatSaga from './containers/WeChat/MapTemplates/sagas';
@@ -55,6 +59,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
 const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
 const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
 const EmailContainer = {Email, emailReducer, emailSaga};
+const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
 const WechatContainer = {WeChat, wechatReduce, wechatSaga};
 const MobilePushCreateContainer = {MobilepushCreate, mobilepushCreateReducer, mobilepushCreateSaga};
 const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepushEditSaga};
@@ -68,6 +73,7 @@ export {default as TagListReducer} from './containers/TagList/reducer';
 export {default as TemplatePreview} from './components/TemplatePreview';
 export {default as EmailPreview} from './components/EmailPreview';
 export {default as EmailPreviewV2} from './components/EmailPreviewV2';
+export {default as CallTaskPreview} from './components/CallTaskPreview';
 export {default as EmailMobilePreview} from './components/EmailMobilePreview';
 
 CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
@@ -77,6 +83,7 @@ export { CapContainer,
   SmsCreateContainer,
   SmsEditContainer,
   EmailContainer,
+  CallTaskContainer,
   WechatContainer,
   Cap,
   Templates,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.53",
+  "version": "2.0.56",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "^1.0.86",
+    "@capillarytech/cap-ui-library": "^1.0.96",
     "antd": "^3.15.0",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/routes.js

@@ -607,21 +607,26 @@ export default function createRoutes(store) {
           import('containers/Sms/Edit/reducer'),
           import('containers/Sms/Edit/sagas'),
           import('containers/Email/reducer'),
-          import('containers/Email/sagas')]);
+          import('containers/Email/sagas'),
+          import('containers/CallTask/reducer'),
+          import('containers/CallTask/sagas'),
+        ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer, smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga, emailReducer, emailSaga]) => {
+        importModules.then(([reducer, sagas, component, emailContainerSagas, creativesContainerReducer, smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga, emailReducer, emailSaga, callTaskReducer, callTaskSagas]) => {
           injectReducer('templates', reducer.default);
           injectReducer('create', smsCreateReducer.default);
           injectReducer('creativesContainer', creativesContainerReducer.default);
           injectReducer('edit', smsEditReducer.default);
           injectReducer('email', emailReducer.default);
+          injectReducer('callTask', callTaskReducer.default);
           injectSagas(sagas.default);
           injectSagas(emailContainerSagas.default);
           injectSagas(smsCreateSaga.default);
           injectSagas(smsEditSaga.default);
           injectSagas(emailSaga.default);
+          injectSagas(callTaskSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/styles/containers/layout/_layoutPage.scss

@@ -7,10 +7,9 @@
     margin-right: 0rem !important;
 }
 
-.wrapper{
+.wrapper {
     height: 100%;
     position: relative;
-    font-family: "proxima-nova","open-sans", sans-serif !important;
 }
 
 .main{

package/containers/TemplatesV2/reducer.js

@@ -1,34 +0,0 @@
-/*
- *
- * TemplatesV2 reducer
- *
- */
-
-import { fromJS } from 'immutable';
-import * as types from './constants';
-
-const initialState = fromJS({
-  loadingTemplates: true,
-  smsTemplates: [],
-  emailTemplates: [],
-  wechatTemplates: [],
-  mobilepushTemplates: [],
-});
-
-function templatesV2Reducer(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 templatesV2Reducer;

package/containers/TemplatesV2/sagas.js

@@ -1,32 +0,0 @@
-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 = yield call(Api.getAllTemplates, req);
-    yield put({type: types.GET_TEMPLATES_SUCESS, templates: res.response.templates, channel: action.channel});
-  } catch (error) {
-    yield 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,
-];