@capillarytech/creatives-library 2.0.47 → 2.0.48

package/components/FormBuilder/index.js

@@ -98,6 +98,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   componentWillReceiveProps(nextProps) {
     const type = this.props.location.query.type;
+    const isLibraryModule = this.props.location.query.module === "library";
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
     }
@@ -116,7 +117,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // }
     if (nextProps.isEdit) {
       if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
-        if (type === 'embedded') { //TODO: has to be checked and changed.
+        if (type === 'embedded' && !isLibraryModule) { //TODO: has to be checked and changed.
           this.setState({checkValidation: true, formData: nextProps.formData}, () => {
             this.validateForm();
           });

package/containers/CreativesContainer/SlideBoxContent.js

@@ -38,7 +38,7 @@ function SlideBoxContent(props) {
       isFullMode,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
-  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
+  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library', isLanguageSupport: true};
   const creativesLocationProps = {
     pathname: `/sms/edit`,
     query,

package/containers/CreativesContainer/index.js

@@ -153,15 +153,14 @@ class Creatives extends React.Component {
     }
   };
   resetStep = () => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       let newState = {
         templateStep: 1,
-      }
-      
+      };
       if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
-        newState= { ...newState, emailCreateMode: null };
+        newState = { ...newState, emailCreateMode: null };
       }
-      return newState;  
+      return newState;
     });
   }
   handleCloseSlideBox = () => {
@@ -198,10 +197,10 @@ class Creatives extends React.Component {
     const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
     return isCreate;
   }
-  shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel 
+  shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
     const {slidBoxContent, templateStep, currentChannel, emailCreateMode} = this.state;
     let isShowContinueFooter = false;
-    if (this.props.EmailLayout !== null) {
+    if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
       const currentStep = this.creativesTemplateSteps[templateStep];
       let isEmailCreate = slidBoxContent === 'createTemplate';
       isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));

package/containers/Email/index.js

@@ -2556,6 +2556,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             <Col>
               { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?
                 <FormBuilder
+                  isFullMode={this.props.isFullMode}
                   schema={schema}
                   onSubmit={this.saveFormData}
                   onChange={this.onFormDataChange}

package/containers/EmailWrapper/index.js

@@ -10,9 +10,9 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
-import { CapRadioCard, CapHeader, CapNotification, CapInput} from '@capillarytech/cap-ui-library';
+import { CapRadioCard, CapHeader, CapNotification, CapInput, CapUploader, CapSpin, CapButton} from '@capillarytech/cap-ui-library';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import {selectEmailLayout, selectCmsTemplates, selectEdmEditor} from '../Templates/selectors';
+import {selectEmailLayout, selectCmsTemplates, selectEdmEditor, uploadSelector} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../components/CmsTemplatesComponent';
@@ -38,9 +38,9 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
         title: <FormattedMessage {...messages.zipUpload}/>,
         content: <FormattedMessage {...messages.zipUploadDesc}/>,
         value: 'upload',
-        onClick: () => {
-          this.emailUploader.current.click();
-        },
+        // onClick: () => {
+        //   this.emailUploader.current.click();
+        // },
       },
       {
         title: <FormattedMessage {...messages.useEditor}/>,
@@ -63,8 +63,6 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
       if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
         this.setCreateMode('upload');
-
-        //this.handleFileUpload(modeContent.e, modeContent.files);
       } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
         this.handleEdmDefaultTemplateSelection(modeContent.id);
       }
@@ -94,29 +92,28 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  handleFileUpload = (e, files) => {
+  handleFileUpload = (file) => {
     const { templatesActions, intl, showNextStep } = this.props;
-    if (files.length === 0) {
-      return;
-    }
-    //this.setCreateMode('upload');
-    const fileExtension = files[0].name.split('.').pop();
+    const validUpload = false;
+    const fileExtension = file.name.split('.').pop();
     const supportedZipFormats = ['zip'];
-    //TODO: has to be changed based on props.
 
 
     if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
-      templatesActions.handleZipUpload(files[0], showNextStep, this.handleZipUploadError);
-      this.emailUploader.current.value = "";
+      templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
+        this.setState({modeContent: { file}}, showNextStep);
+      }, this.handleZipUploadError);
     } else if (fileExtension === 'html' || fileExtension === 'htm') {
       const reader = new FileReader();
       reader.onload = () => {
         const text = reader.result;
-        templatesActions.handleHtmlUpload(text);
-        showNextStep();
-        this.emailUploader.current.value = "";
+        this.setState({modeContent: { file}}, () => {
+          templatesActions.handleHtmlUpload(text);
+        });
+
+        // showNextStep();
       };
-      reader.readAsText(files[0]);
+      reader.readAsText(file.originFileObj);
     } else {
       const message = {
         message: intl.formatMessage(messages.invalidUploadFileError),
@@ -124,6 +121,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       };
       CapNotification.error(message);
     }
+    return validUpload;
   };
 
   handleEdmDefaultTemplateSelection = (id) => {
@@ -134,69 +132,69 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     this.setState({
       selectedCreateMode: 'editor'});
   };
-  useFileUpload = (e, {files}) => {
-    this.handleFileUpload(e, files);
-    this.setState({modeContent: {e, files}});
+  useFileUpload = ({file}) => {
+    this.setState({modeContent: {}}, () => {
+      this.handleFileUpload(file);
+    });
   }
   useEditor = (id) => {
     this.setState({modeContent: {id}}, this.props.showNextStep);
   }
-  resetEmailOptions = (ev) => {
-    ev.preventDefault();
-    if (this.props.emailCreateMode === "upload" && _.isEmpty(this.state.modeContent.files)) {
-      this.props.onEmailModeChange( "" );
-    }
-  }
+
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode} = this.props;
-    const {templateName} = this.state;
+    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout} = this.props;
+    const {templateName, modeContent} = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
       <div>
-        <input
-          type="file"
-          key="upload-email-template"
-          id="upload-email-template"
-          ref={this.emailUploader}
-          style={{ display: 'none'}}
-          accept=".zip, .html, .htm"
-          onChange={(event) => this.useFileUpload(event, {files: event.target.files})}
-          />
-
-        {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
-          <div>
-            {isFullMode && <CapInput
-              label={<FormattedMessage {...messages.creativeName}/>}
-              onChange={this.onTemplateNameChange}
-              value={templateName}
-              labelPosition="top"/>}
-            <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
-            <CapRadioCard
-              panes={this.modes}
-              onChange={this.onChange}
-              selected={emailCreateMode}
-          />
-          </div>
+        <CapSpin spinning={emailCreateMode === "upload" ? this.props.isUploading : false} >
+          {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
+            <div>
+              {isFullMode &&
+              <CapInput
+                label={<FormattedMessage {...messages.creativeName}/>}
+                onChange={this.onTemplateNameChange}
+                value={templateName}
+                labelPosition="top"/>
+              }
+              <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
+              <CapRadioCard
+                panes={this.modes}
+                onChange={this.onChange}
+                selected={emailCreateMode}
+              />
+              <div>
+                {emailCreateMode === "upload" &&
+                <div>
+                  <CapUploader onChange={this.useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
+                    <CapButton>Upload</CapButton>
+                  </CapUploader>
+                  {!_.isEmpty(EmailLayout) &&
+                    <div>{_.get(modeContent, "file.name")}</div>
+                  }
+                </div>
+              }
+              </div>
+            </div>
           :
-          <div>
-            {isShowEmailCreate && <Email
-              key="email-create-template"
-              location={this.state.routeParams}
-              route={{ name: 'email' }}
-              params={{}}
-              isGetFormData={isGetFormData}
-              getFormdata={getFormdata}
-              getFormSubscriptionData={getFormdata}
-              getDefaultTags={type}
-              defaultData={{templateName}}
-              cap={cap}
-          />}
-            {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
-
-
-          </div>
+            <div>
+              {isShowEmailCreate && <Email
+                key="email-create-template"
+                location={this.state.routeParams}
+                route={{ name: 'email' }}
+                params={{}}
+                isGetFormData={isGetFormData}
+                getFormdata={getFormdata}
+                getFormSubscriptionData={getFormdata}
+                getDefaultTags={type}
+                defaultData={{templateName}}
+                cap={cap}
+            />}
+              {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
+            </div>
         }
+        </CapSpin>
       </div>
     );
   }
@@ -218,12 +216,14 @@ EmailWrapper.propTypes = {
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
   isFullMode: PropTypes.bool,
+  isUploading: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
   EmailLayout: selectEmailLayout(),
   CmsTemplates: selectCmsTemplates(),
   SelectedEdmDefaultTemplate: selectEdmEditor(),
+  isUploading: uploadSelector(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/EmailWrapper/messages.js

@@ -50,4 +50,8 @@ export default defineMessages({
     id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
     defaultMessage: `Please select another file with valid file contents`,
   },
+  upload: {
+    id: `app.containers.EmailWrapper.upload`,
+    defaultMessage: `Upload`,
+  },
 });

package/containers/Sms/Create/index.js

@@ -947,6 +947,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           <Row>
             <Col>
               <FormBuilder
+                isFullMode={this.props.isFullMode}
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}

package/containers/Sms/Edit/index.js

@@ -950,6 +950,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           <Row>
             <Col>
               <FormBuilder
+                isFullMode={this.props.isFullMode}
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/components/EmailMobilePreview/index.js

@@ -1,108 +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 '../EmailPreviewV2/messages';
-import './index.scss';
-import mobileBody from '../../assets/mobile.png';
-
-import {selectTemplateContent} from '../../containers/Templates/selectors';
-import * as templateActions from '../../containers/Templates/actions';
-
-const deviceAspectRatio = {
-  mobile: {
-    height: "500",
-    width: "300",
-  },
-};
-
-class EmailMobilePreview extends React.Component {
-  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
-    }
-  }
-
-  getPreview = ({device, messageContainerName, templateContent}) => (
-    <div className={"shell align-center"}>
-      <img src={mobileBody} alt="capillary" width="85%" height="400px" />
-      <div className={messageContainerName}>
-        <iframe srcDoc={templateContent} {...deviceAspectRatio[device]} >
-          <p><FormattedMessage {...messages.noIframeSupport}/></p>
-        </iframe>
-      </div>
-    </div>
-  );
-
-  render() {
-    const messageContainerName = 'mobile-message-container';
-    const {currentDevice} = this.state;
-    const { templateContent } = this.props;
-
-    return (
-      <div className="email-preview-v2">
-
-        <CapSpin spinning={!templateContent}>
-          <div id="emailPreivew-container">
-            <div id="emailPreivew-content-wrapper">
-              <div id="emailPreivew-content">
-                <div className="email-preview-container">
-                  <div className={"shell align-center"}>
-                    <img src={mobileBody} alt="capillary" width="85%" />
-                    <div className={messageContainerName}>
-                      <iframe srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
-                        <p><FormattedMessage {...messages.noIframeSupport}/></p>
-                      </iframe>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          {this.props.templateData &&
-            [
-              <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
-              <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
-            ]
-          }
-        </CapSpin>
-      </div>
-
-    );
-  }
-
-}
-
-EmailMobilePreview.propTypes = {
-  templateContent: PropTypes.string,
-  templateData: PropTypes.object,
-  templateActions: PropTypes.object,
-};
-
-EmailMobilePreview.defaultProps = {
-  showDeviceSelection: true,
-};
-
-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)(EmailMobilePreview);

package/components/EmailMobilePreview/index.scss

@@ -1,66 +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;
-        #emailPreivew-content-wrapper{
-          width: 100%;
-          height: 90%;
-          overflow: auto;
-          // 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/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,
-];