@capillarytech/creatives-library 2.0.82 → 2.0.83

package/v2Components/FormBuilder/messages.js

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

package/v2Components/FormBuilder/tests/index.test.js

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

package/v2Components/Header/index.js

@@ -0,0 +1,46 @@
+/**
+*
+* Header
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
+
+function Header(props) {
+  return (
+    <div>
+      <CapRow className="template-form-header">
+        <CapColumn span={10}>
+          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+};
+
+export default Header;

package/v2Components/Header/messages.js

@@ -0,0 +1,25 @@
+/*
+ * Header Messages
+ *
+ * This contains all the text for the Header component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.Header.header',
+    defaultMessage: 'This is the Header component !',
+  },
+  preview: {
+    id: 'app.components.Header.preview',
+    defaultMessage: 'Preview',
+  },
+  cancel: {
+    id: 'app.components.Header.cancel',
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: 'app.components.Header.save',
+    defaultMessage: 'Save',
+  },
+});

package/v2Components/Header/tests/index.test.js

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

package/v2Components/ImagePreview/_imagePreview.scss

@@ -0,0 +1,63 @@
+.modal-image-preview-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.56);
+  z-index: 10002;
+
+  #image-preview-container {
+    position: relative;
+    left: 40vw;
+    width: 60vw;
+    height: 100vh;
+    background: rgba(255,255,255,1);
+    // padding: 0 24px 0 24px;
+    overflow-y: auto;
+    // font-family: 'proxima-nova';
+
+    .image-preview-header {
+      display: inline-flex;
+      width: 100%;
+      padding: 16px 24px;
+      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
+      margin-bottom: 6px;
+      height: 56px;
+      align-items: center;
+      .heading-title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 600;
+        width: 97%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:first-letter{
+          text-transform: capitalize;
+        }
+      }
+      .close-image-preview{
+        cursor: pointer;
+      }
+    }
+
+    #image-preview-content {
+      padding: 0 0px 0 24px;
+    }
+  }
+}
+
+.show-image-preview {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
+}
+.hide-image-preview {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s;
+}

package/v2Components/ImagePreview/index.js

@@ -0,0 +1,52 @@
+/**
+*
+* ImagePreview
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { injectIntl, intlShape } from 'react-intl';
+import { Spin } from 'antd';
+import messages from './messages';
+import './_imagePreview.scss';
+
+class ImagePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={this.props.show ? "modal-image-preview-wrapper show-image-preview" : "modal-image-preview-wrapper hide-image-preview"}>
+        <div id="image-preview-container">
+          <div className="image-preview-header">
+            <div className="heading-title">
+              {this.props.header}
+            </div>
+            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
+              <i className="material-icons close-image-preview">close</i>
+            </div>
+          </div>
+
+          <div id="image-preview-content">
+            <Spin tip={this.props.intl.formatMessage(messages.loadingImage)} spinning={this.props.isLoading}>
+              {this.props.content}
+            </Spin>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ImagePreview.propTypes = {
+  header: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]).isRequired,
+  content: PropTypes.element.isRequired,
+  show: PropTypes.bool,
+  handleClose: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ImagePreview);

package/v2Components/ImagePreview/messages.js

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

package/v2Components/ImagePreview/tests/index.test.js

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

package/v2Components/MobilePushPreviewV2/index.js

@@ -0,0 +1,120 @@
+/**
+*
+* PreviewSideBar
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { CapButton } from '@capillarytech/cap-ui-library';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Button } from 'antd';
+import { get, map, isEmpty} from 'lodash';
+import TemplatePreview from '../TemplatePreview';
+import '../PreviewSideBar/_previewsidebar.scss';
+import messages from './messages';
+const ButtonGroup = Button.Group;
+
+class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.goToEdit = this.goToEdit.bind(this);
+    this.goToDuplicate = this.goToDuplicate.bind(this);
+    this.changeDevice = this.changeDevice.bind(this);
+    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent');
+    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent');
+    let device = "android";
+    if (hasAndroid) {
+      device = 'android';
+    } else if (hasIos) {
+      device = 'ios';
+    }
+    this.state = {
+      device,
+      content: this.setContent(props.templateData, device),
+    };
+  }
+
+  setContent = (templateData, device) => {
+    const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+    const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+
+    const data = device === "android" ? androidContent : iosContent;
+    const content = {
+      header: data.title,
+      bodyText: data.message,
+      bodyImage: data.expandableDetails && data.expandableDetails.image,
+      actions: [],
+      appName: templateData.appName,
+    };
+    if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
+      if (device === "android" ) {
+        content.actions = map(data.expandableDetails.ctas, (cta) => ({label: cta.actionText}));
+      } else {
+        content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
+      }
+    }
+    return content;
+  }
+  goToDuplicate() {
+    this.props.onDuplicateClick(this.props.templateData);
+    this.props.handleClose();
+  }
+  changeDevice(ev) {
+    const device = ev.target.value;
+    const content = this.setContent(this.props.templateData, device);
+    this.setState({device, content });
+  }
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
+  }
+  render() {
+    const {templateData, channel} = this.props;
+
+    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+
+    const {device, content} = this.state;
+
+    return (
+
+      <div>
+        <div className="devices">
+          {!isEmpty(templateData) && hasAndroid && hasIos &&
+          <ButtonGroup onClick={this.changeDevice}>
+            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
+            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
+          </ButtonGroup>}
+        </div>
+        <TemplatePreview
+          device={device === "android" ? "android" : "iphone"}
+          channel={channel}
+          content={content || ''}
+          templateData={templateData}
+              >
+        </TemplatePreview>
+
+
+      </div>
+
+
+    );
+  }
+
+}
+
+MobilePushPreviewV2.propTypes = {
+  templateData: PropTypes.object.isRequired,
+  channel: PropTypes.string.isRequired,
+  showPreview: PropTypes.bool,
+  handleClose: PropTypes.func,
+  onEditClick: PropTypes.func,
+  onDuplicateClick: PropTypes.func,
+  location: PropTypes.object,
+  embedded: PropTypes.bool,
+};
+
+export default MobilePushPreviewV2;

package/v2Components/MobilePushPreviewV2/messages.js

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

package/v2Components/MobilePushPreviewV2/tests/index.test.js

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

package/v2Components/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/v2Components/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/v2Components/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/v2Components/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/v2Components/PageHeader/_pageHeader.scss

@@ -0,0 +1,22 @@
+.pageHeader{
+  .pageHeader-wrapper{
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    .title-container {
+      padding-left: 0px !important;
+
+      .title {
+        font-size: 24px;
+        line-height: 32px;
+        color: #323B4E;
+        font-family: 'Proxima-Nova';
+        font-weight: 600;
+      }
+    }
+    .action-buttons{
+      text-align: right;
+      padding-right: 0 !important;
+    }
+  }
+}

package/v2Components/PageHeader/index.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+
+import { Grid } from 'semantic-ui-react';
+import './_pageHeader.scss';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+
+class PageHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <Grid className="pageHeader">
+        <Grid.Row className="pageHeader-wrapper">
+          <Grid.Column width={8} className="title-container">
+            <h2 className="title">{this.props.pageHeading}</h2>
+          </Grid.Column>
+          <Grid.Column className="action-buttons" width={8}>
+            {this.props.actionComponents}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    );
+  }
+}
+
+PageHeader.propTypes = {
+  // Need Formatted Message in pageHeading Props
+  pageHeading: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  actionComponents: PropTypes.element,
+};
+
+export default PageHeader;

package/v2Components/PageHeader/messages.js

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