@capillarytech/creatives-library 2.0.54 → 2.0.57

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/FormBuilder/index.js

@@ -556,7 +556,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(this.state.formData, (tab, index) => {
         let isCurrentTabValid = true;
         let skipValidation = false;
-        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0))) {
+        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0)) && isOnlyAndroid !== isOnlyIos) { 
+          // skip validation of the tab which is not open in embedded mode
           skipValidation = true;
         }
         if (!isNaN(index) && tab && !skipValidation) {
@@ -2161,7 +2162,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "input":
           if (styling === 'semantic') {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             columns.push(
               <CapColumn key={val.id} span={val.width}>
                 <CapInput
@@ -2173,7 +2174,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={value || ""}
                   disabled={val.disabled}
                 />
               </CapColumn>
@@ -2193,6 +2194,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
         case "textarea":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
           if (styling === 'semantic') {
             columns.push(
               <CapColumn key="input" span={val.width}>
@@ -2204,7 +2206,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   style={val.style ? val.style : {}}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={value || ""}
                   rows={20}
                   disabled={val.disabled}
                   cols={20}
@@ -2518,7 +2520,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key={val.id} span={val.width}>
@@ -2530,7 +2532,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     style={val.style ? val.style : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
-                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    value={value || ""}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}
                   />
@@ -2551,6 +2553,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
           case "textarea":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key="input" span={val.width} offset={val.offset}>
@@ -2564,7 +2567,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    value={textValue || ""}
                     rows={10}
                     cols={2}
                   />

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);
+    });
+  });
+});