@capillarytech/creatives-library 2.0.34 → 2.0.36

package/components/PreviewSideBar/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import moment from "moment";
-import { CapButton } from '@capillarytech/cap-react-ui-library';
+import { CapButton } from '@capillarytech/cap-ui-library';
 // import styled from 'styled-components';
 
 import { FormattedMessage } from 'react-intl';

package/components/TemplatePreview/index.js

@@ -10,7 +10,7 @@ import React from 'react';
 import _ from 'lodash';
 import { injectIntl, intlShape} from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn} from '@capillarytech/cap-react-ui-library'
+import {CapColumn} from '@capillarytech/cap-ui-library'
 import './_templatePreview.scss';
 import * as charCount from '../../utils/smsCharCount';
 import {updateCharCount} from '../../utils/smsCharCountV2';

package/containers/Assets/Gallery/index.js

@@ -14,7 +14,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
+import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
 import { Spin, Popover, Select } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';

package/containers/CreativesContainer/SlideBoxContent.js

@@ -35,9 +35,10 @@ function SlideBoxContent(props) {
       onEmailNextStep,
       cap,
       onResetStep,
+      isFullMode,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
-  const query = { type: 'embedded', module: 'library' };
+  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library', isLanguageSupport: true };
   const creativesLocationProps = {
     pathname: `/sms/edit`,
     query,
@@ -62,9 +63,9 @@ function SlideBoxContent(props) {
 
   return (
     <CreativesWrapper>
-      {slidBoxContent === 'templates' && (
+      {!isFullMode && slidBoxContent === 'templates' && (
       <TemplatesV2
-        isFullMode={false}
+        isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
         handlePeviewTemplate={onPreviewTemplate}
         location={location}
@@ -117,7 +118,7 @@ function SlideBoxContent(props) {
         type={type}
         step={templateStep}
         showNextStep={onEmailNextStep}
-        isFullMode={false}
+        isFullMode={isFullMode}
         cap={cap}
         onResetStep={onResetStep}
       />
@@ -159,5 +160,6 @@ SlideBoxContent.propTypes = {
   onEmailNextStep: PropTypes.func,
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
+  isFullMode: PropTypes.bool,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxHeader.js

@@ -8,7 +8,7 @@ const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
 function SlideBoxHeader(props) {
-  const { slidBoxContent, messages, templateData, onShowTemplates, creativesMode } = props;
+  const { slidBoxContent, messages, templateData, onShowTemplates, creativesMode, isFullMode } = props;
   return (
     <div>
       {slidBoxContent === 'templates' && (
@@ -33,7 +33,7 @@ function SlideBoxHeader(props) {
       {slidBoxContent === 'editTemplate' && (
       <CapHeader
         title={<FormattedMessage {...messages.editMessageContent} />}
-        prefix={creativesMode !== 'edit' &&
+        prefix={creativesMode !== 'edit' && !isFullMode &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />
           </PrefixWrapper>
@@ -43,7 +43,7 @@ function SlideBoxHeader(props) {
       {slidBoxContent === 'createTemplate' && (
       <CapHeader
         title={<FormattedMessage {...messages.createMessageContent} />}
-        prefix={
+        prefix={!isFullMode &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />
           </PrefixWrapper>
@@ -59,5 +59,6 @@ SlideBoxHeader.propTypes = {
   templateData: PropTypes.object,
   onShowTemplates: PropTypes.func,
   creativesMode: PropTypes.string,
+  isFullMode: PropTypes.bool,
 };
 export default SlideBoxHeader;

package/containers/CreativesContainer/actions.js

@@ -6,6 +6,8 @@
 
 import {
   DEFAULT_ACTION,
+  HIDE_CONTAINER_LOADER,
+  SHOW_CONTANER_LOADER,
 } from './constants';
 
 export function defaultAction() {
@@ -13,3 +15,13 @@ export function defaultAction() {
     type: DEFAULT_ACTION,
   };
 }
+export function showCreativesContainerLoader() {
+  return {
+    type: SHOW_CONTANER_LOADER,
+  };
+}
+export function hideCreativesContanerLoader() {
+  return {
+    type: HIDE_CONTAINER_LOADER,
+  };
+}

package/containers/CreativesContainer/constants.js

@@ -7,3 +7,5 @@
 export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
 export const EMAIL = "EMAIL";
 export const SMS = "SMS";
+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

@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl';
 import classnames from 'classnames';
 import {isEmpty} from 'lodash';
 import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
+import * as actions from './actions';
 import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
@@ -15,6 +17,7 @@ import * as constants from './constants';
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
+import {isLoading as isLoadingSelector} from './selectors';
 
 const classPrefix = 'add-creatives-section';
 class Creatives extends React.Component {
@@ -156,9 +159,9 @@ class Creatives extends React.Component {
 
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep} = this.state;
-    const {isFullMode, creativesMode, cap} = this.props;
+    const {isFullMode, creativesMode, cap, isLoading} = this.props;
     return (
-      <div className={classnames(`${classPrefix}`)}>
+      <div className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
         <CapSlideBox
           header={
             <SlideBoxHeader
@@ -167,6 +170,7 @@ class Creatives extends React.Component {
               templateData={templateData}
               onShowTemplates={this.onShowTemplates}
               creativesMode={creativesMode}
+              isFullMode={isFullMode}
             />
           }
           content={
@@ -193,7 +197,7 @@ class Creatives extends React.Component {
               cap={cap}
             />
           }
-          footer={
+          footer={!isFullMode && !isLoading &&
             <SlideBoxFooter
               messages={this.props.messages}
               onSave={this.saveMessage}
@@ -227,11 +231,16 @@ Creatives.propTypes = {
   templateActions: PropTypes.object,
   globalActions: PropTypes.object,
   cap: PropTypes.object,
+  isLoading: PropTypes.bool,
 };
+const mapStatesToProps = () => createStructuredSelector({
+  isLoading: isLoadingSelector(),
+});
 function mapDispatchToProps(dispatch) {
   return {
     templateActions: bindActionCreators(templateActions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
+    actions: bindActionCreators(actions, dispatch),
   };
 }
-export default connect(null, mapDispatchToProps)(injectIntl(Creatives));
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/containers/CreativesContainer/reducer.js

@@ -7,14 +7,20 @@
 import { fromJS } from 'immutable';
 import {
   DEFAULT_ACTION,
+  SHOW_CONTANER_LOADER,
+  HIDE_CONTAINER_LOADER,
 } from './constants';
 
-const initialState = fromJS({});
+const initialState = fromJS({containerLoader: true});
 
 function creativesContainerReducer(state = initialState, action) {
   switch (action.type) {
     case DEFAULT_ACTION:
       return state;
+    case SHOW_CONTANER_LOADER:
+      return state.set('containerLoader', true);
+    case HIDE_CONTAINER_LOADER:
+      return state.set('containerLoader', false);
     default:
       return state;
   }

package/containers/CreativesContainer/selectors.js

@@ -18,8 +18,13 @@ const makeSelectCreativesContainer = () => createSelector(
   selectCreativesContainerDomain(),
   (substate) => substate.toJS()
 );
+const isLoading = () => createSelector(
+  makeSelectCreativesContainer(),
+  (substate) => substate.containerLoader
+);
 
 export default makeSelectCreativesContainer;
 export {
   selectCreativesContainerDomain,
+  isLoading,
 };

package/containers/Email/index.js

@@ -9,9 +9,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Row, Col, Spin, Popover, Modal, Select } from 'antd';
+import { Row, Col, Popover, Modal, Select } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
+import { CapButton, CapInput, CapSpin } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
@@ -31,6 +31,7 @@ import EmailPreview from '../../components/EmailPreview';
 import ImagePreview from '../../components/ImagePreview';
 import CardGrid from '../../components/CardGrid';
 import Pagination from '../../components/Pagination';
+import * as creativesContainerActions from '../CreativesContainer/actions';
 
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -595,17 +596,31 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
 
     if (isDragDrop && isEdmSupport) {
-      const msg = {
-        action: "InsertToCursor",
-        content: `{{${data}}}`,
-      };
+      let msg = {};
+      if (data === "unsubscribe") {
+        const anchor = `<a href='{{${data}}}'>${data}</a>`;
+        msg = {
+          action: "InsertToCursor",
+          content: `${anchor}`,
+        };
+      } else {
+        msg = {
+          action: "InsertToCursor",
+          content: `{{${data}}}`,
+        };
+      }
       const msgString = JSON.stringify(msg);
       const langId = formData[this.state.currentTab - 1].activeTab;
       const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
       const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
       win.postMessage(msgString, '*');
     } else {
-      this.state.editorInstanse.insertHtml(`{{${data}}}`);
+      if (data === "unsubscribe") {
+        const anchor = `<a href='{{${data}}}'>${data}</a>`;
+        this.state.editorInstanse.insertHtml(`${anchor}`);
+      } else {
+        this.state.editorInstanse.insertHtml(`{{${data}}}`);
+      }
       //this.resetCkEditorInstance(currentTab, formData, true, data);
     }
   }
@@ -2306,7 +2321,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.props.getFormSubscriptionData(response);
       }
       parent.postMessage(JSON.stringify(response), "*");
-      this.setState({gettingFormData: false, startValidation: false});
+      this.setState({gettingFormData: false, startValidation: false, loading: true});
       return;
     }
     const formData = _.cloneDeep(passedData);
@@ -2438,6 +2453,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
+    if (isLoading) {
+      this.props.creativesContainerActions.hideCreativesContanerLoader();
+    }
     return isLoading;
   }
   renderConfirmationModal() {
@@ -2540,24 +2558,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       <div className="email-container">
 
         {/* <PageHeader pageHeading={pageHeading} /> */}
-        <Spin tip={loaderText} spinning={isLoading}>
+        <CapSpin tip={loaderText} spinning={isLoading}>
 
           <Row>
             <Col>
-              {/* <input type="file" id="filename" style={{ display: 'none'}} accept="text/html" onChange={(event) => this.openFile(event)} /><br/> */}
-              {/* <CKEditor
-                content={this.state.content}
-                config={{}}
-                events={this.state.events}
-              /> */}
-              {/* { (!this.props.Email.fetchingCmsSettings && !this.props.Email.fetchingCmsSettingsError &&
-                !_.isEmpty(this.props.Email.CmsSettings) && this.props.Email.CmsSettings.url) ?
-                  <EDMEditor
-                    content={'Hello World'}
-                    getEditorInstanse={this.getEditorInstanse}
-                    edmSrc={this.props.Email.CmsSettings.url}
-                  /> : ''
-              } */}
               { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?
                 <FormBuilder
                   schema={schema}
@@ -2600,7 +2604,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               /> : ''}
             </Col>
           </Row>
-        </Spin>
+        </CapSpin>
         {!_.isEmpty(this.state.formData[(this.state.currentTab - 1)]) && <EmailPreview
           header={previewHeader}
           content={this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab] ? this.state.formData[(this.state.currentTab - 1)][this.state.formData[(this.state.currentTab - 1)].activeTab][`template-content`] : ''}
@@ -2641,6 +2645,7 @@ Email.propTypes = {
   getDefaultTags: PropTypes.string,
   currentOrgDetails: PropTypes.object,
   isLoadingMetaEntities: PropTypes.bool,
+  creativesContainerActions: PropTypes.object,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({
@@ -2656,6 +2661,7 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
     templatesActions: bindActionCreators(templatesActions, dispatch),
+    creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }
 

package/containers/EmailWrapper/index.js

@@ -10,7 +10,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
-import { CapRadioCard, CapHeader, CapNotification} from '@capillarytech/cap-ui-library';
+import { CapRadioCard, CapHeader, CapNotification, CapInput} from '@capillarytech/cap-ui-library';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {selectEmailLayout, selectCmsTemplates, selectEdmEditor} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
@@ -127,7 +127,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap} = this.props;
+    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode} = this.props;
     const {templateName} = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
@@ -136,11 +136,11 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
         {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
           <div>
-            {/* <CapInput
+            {isFullMode && <CapInput
               label={<FormattedMessage {...messages.creativeName}/>}
               onChange={this.onTemplateNameChange}
               value={templateName}
-              labelPosition="top"/> */}
+              labelPosition="top"/>}
             <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
             <CapRadioCard
               panes={this.modes}
@@ -187,6 +187,7 @@ EmailWrapper.propTypes = {
   intl: intlShape,
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
+  isFullMode: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Login/components/LoginForm/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Form, Icon } from 'antd';
-import { CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
+import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {