@capillarytech/creatives-library 2.0.84 → 2.0.85

package/components/EmailMobilePreview/index.scss

@@ -1,55 +0,0 @@
-$classPrefix: email-mobile-preview-container;
-.#{$classPrefix}{
-    #emailPreivew-container {
-        position: relative;
-        // padding: 0 24px 0 24px;
-        overflow-y: auto;
-        // font-family: 'proxima-nova';
-        overflow: hidden;
-        #emailPreivew-content-wrapper{
-          width: 100%;
-          height: 90%;
-          // display: table;
-    
-          #emailPreivew-content {
-            .device-wrapper {
-              display: inline-flex;
-              margin-bottom: 8px;
-              margin-top: 16px;
-              .device-name {
-                padding: 6px 24px;
-                background: #E6F0FB;
-                border: 2px solid #E6F0FB;
-                font-family: "open-sans";
-                line-height: 20px;
-                font-size: 14px;
-                color: #4E92E5;
-                cursor: pointer;
-              }
-              .active {
-                background: #FFFFFF !important;
-                border: 2px solid #E6F0FB;
-              }
-    
-            }
-            .email-preview-container{
-
-              .mobile-message-container {
-                position: absolute;
-                top: 10.3%;
-                left: 24%;
-                overflow: auto;
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: flex;
-              }
-            }
-            padding: 0 0px 0 24px;
-            // display: table-cell;
-            // vertical-align: middle;
-            text-align: center;
-            margin-bottom: 36px;
-          }
-        }
-      }
-}

package/components/EmailPreviewV2/_emailPreviewV2.scss

@@ -1,69 +0,0 @@
-$classPrefix: email-preview-v2;
-.#{$classPrefix}{
-    #emailPreivew-container {
-        position: relative;
-        // padding: 0 24px 0 24px;
-        overflow-y: auto;
-        // font-family: 'proxima-nova';
-        overflow: hidden;
-
-        #email-iframe {
-          width: -webkit-fill-available;
-        }
-        #emailPreivew-content-wrapper{
-          width: 100%;
-          height: 90%;
-          // display: table;
-    
-          #emailPreivew-content {
-            .device-wrapper {
-              display: inline-flex;
-              margin-bottom: 8px;
-              margin-top: 16px;
-              .device-name {
-                padding: 6px 24px;
-                background: #E6F0FB;
-                border: 2px solid #E6F0FB;
-                font-family: "open-sans";
-                line-height: 20px;
-                font-size: 14px;
-                color: #4E92E5;
-                cursor: pointer;
-              }
-              .active {
-                background: #FFFFFF !important;
-                border: 2px solid #E6F0FB;
-              }
-    
-            }
-            .email-preview-container{
-              .tablet-message-container {
-                position: absolute;
-                top: 9%;
-                left: 10%;
-                width: 100%;
-                height: 100%;
-                overflow: auto;
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: flex;
-              }
-              .mobile-message-container {
-                position: absolute;
-                top: 10.3%;
-                left: 14%;
-                overflow: auto;
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: flex;
-              }
-            }
-            padding: 0 0px 0 24px;
-            // display: table-cell;
-            // vertical-align: middle;
-            text-align: center;
-            margin-bottom: 36px;
-          }
-        }
-      }
-}

package/components/EmailPreviewV2/index.js

@@ -1,132 +0,0 @@
-/**
-*
-* EmailPreviewV2
-*
-*/
-
-import React from 'react';
-// import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import {isEmpty} from 'lodash';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { CapSpin } from '@capillarytech/cap-ui-library';
-import moment from 'moment';
-import messages from './messages';
-import './_emailPreviewV2.scss';
-import tabletBody from '../../assets/iPad.svg';
-import mobileBody from '../../assets/mobile.png';
-
-import {selectTemplateContent} from '../../containers/Templates/selectors';
-import * as templateActions from '../../containers/Templates/actions';
-
-const deviceAspectRatio = {
-  desktop: {
-    height: "500",
-    width: "1024",
-  },
-  tablet: {
-    height: "600",
-    width: "520",
-  },
-  mobile: {
-    height: "600",
-    width: "320",
-  },
-};
-const devices = {
-  mobile: 'mobile',
-  desktop: 'desktop',
-  tablet: 'tablet',
-};
-class EmailPreviewV2 extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentDevice: props.device || devices.desktop,
-    };
-  }
-  componentWillMount() {
-    const {templateData, templateContent} = this.props;
-    if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
-      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});
-  }
-  render() {
-    let messageContainerName = '';
-    const {currentDevice} = this.state;
-    const {templateContent} = this.props;
-
-    if (currentDevice === devices.tablet) {
-      messageContainerName = 'tablet-message-container';
-    } else if (currentDevice === devices.mobile) {
-      messageContainerName = 'mobile-message-container';
-    }
-    return (
-      <div className="email-preview-v2">
-        <CapSpin spinning={!templateContent}>
-          <div id="emailPreivew-container">
-            <div id="emailPreivew-content-wrapper">
-              <div id="emailPreivew-content">
-                <div className="device-wrapper">
-                  <div id={devices.desktop} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.desktop ? 'active' : ''}`}><FormattedMessage {...messages.desktop}/></div>
-                  <div id={devices.tablet} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.tablet ? 'active' : ''}`}><FormattedMessage {...messages.tablet}/></div>
-                  <div id={devices.mobile} onClick={this.changePreviewDevice} className={`device-name ${currentDevice === devices.mobile ? 'active' : ''}`}><FormattedMessage {...messages.mobile}/></div>
-                </div>
-                <div className="email-preview-container">
-                  <div className={currentDevice === devices.desktop ? '' : "shell align-center"}>
-                    {currentDevice === devices.tablet ?
-                      <img src={tabletBody} alt="capillary" width="520" /> : ''}
-                    {currentDevice === devices.mobile ?
-                      <img src={mobileBody} alt="capillary" width="85%" /> : ''}
-                    <div className={messageContainerName}>
-                      <iframe id="email-iframe" srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
-                        <p><FormattedMessage {...messages.noIframeSupport}/></p>
-                      </iframe>
-                    </div>
-                  </div>
-
-
-                </div>
-              </div>
-            </div>
-          </div>
-          {this.props.templateData &&
-            [
-              <p className="preview-info" key="lastModified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
-              <p style={{marginBottom: '8px'}} key="uploadedBy" className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
-            ]
-        }
-        </CapSpin>
-      </div>
-
-    );
-  }
-
-}
-
-EmailPreviewV2.propTypes = {
-  templateContent: PropTypes.string,
-  templateData: PropTypes.object,
-  templateActions: PropTypes.object,
-  device: PropTypes.string,
-};
-
-const mapStateToProps = (state, props) => createStructuredSelector({
-  templateContent: props.templateData ? selectTemplateContent() : () => props.templateContent, // when props has templateContent that means preview with content
-});
-function mapDispatchToProps(dispatch) {
-  return {
-    templateActions: bindActionCreators(templateActions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EmailPreviewV2);

package/components/EmailPreviewV2/messages.js

@@ -1,41 +0,0 @@
-/*
- * EmailPreviewV2 Messages
- *
- * This contains all the text for the EmailPreviewV2 component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'app.components.EmailPreviewV2.header',
-    defaultMessage: 'This is the EmailPreviewV2 component !',
-  },
-  desktop: {
-    id: 'app.components.EmailPreviewV2.desktop',
-    defaultMessage: 'Desktop',
-  },
-  tablet: {
-    id: 'app.components.EmailPreviewV2.tablet',
-    defaultMessage: 'Tablet',
-  },
-  mobile: {
-    id: 'app.components.EmailPreviewV2.mobile',
-    defaultMessage: 'Mobile',
-  },
-  noIframeSupport: {
-    id: 'app.components.EmailPreviewV2.noIframeSupport',
-    defaultMessage: 'Your browser does not support iframes.',
-  },
-  showAllDevices: {
-    id: 'app.components.EmailPreviewV2.showAllDevices',
-    defaultMessage: 'Show all devices',
-  },
-  lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
-    defaultMessage: 'Last Modified On',
-  },
-  uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
-    defaultMessage: 'Last Modified By',
-  },
-});

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import EmailPreviewV2 from '../index';
-
-describe('<EmailPreviewV2 />', () => {
-  it('<EmailPreviewV2 /> without the templateData', () => {
-    const compoent = shallow(<EmailPreviewV2 templateData={{_id: 'test'}}/>);
-    expect(compoent).toMatchSnapshot();
-  });
-});

package/components/MobilePushPreviewV2/index.js

@@ -1,120 +0,0 @@
-/**
-*
-* 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/components/MobilePushPreviewV2/messages.js

@@ -1,13 +0,0 @@
-/*
- * 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/components/MobilePushPreviewV2/tests/index.test.js

@@ -1,10 +0,0 @@
-// 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/components/NewCallTask/_newCallTask.scss

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

package/components/NewCallTask/index.js

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

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

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