@capillarytech/creatives-library 2.0.10 → 2.0.11

package/components/CapTagList/index.js

@@ -8,13 +8,13 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 // import styled from 'styled-components';
-import { CapTree, CapSpin, CapModal, CapTreeNode, CapInputSearch } from '@capillarytech/cap-ui-library';
+import { CapTree, CapSpin, CapModal, CapTreeNode, CapButton, CapPopover, CapSelect, CapInput } from '@capillarytech/cap-ui-library';
 import _ from 'lodash';
 // import { CapInput } from '@capillarytech/cap-react-ui-library/basic/input';
 import { injectIntl, intlShape } from 'react-intl';
-import { CapButton, CapPopover, CapSelect, CapInput } from '@capillarytech/cap-react-ui-library';
 import messages from './messages';
 
+const {Search} = CapInput;
 class CapTagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {
@@ -184,7 +184,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           onVisibleChange={this.togglePopoverVisibility}
           content={<div>
             <CapSpin tip="Getting tags..." spinning={this.props.loading}>
-              <CapInputSearch style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <CapTree

package/containers/CreativesContainer/SlideBoxContent.js

@@ -6,6 +6,7 @@ import TemplatePreview from '../../components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
+import EmailPreview from '../../components/EmailPreview';
 import * as constants from './constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -25,6 +26,8 @@ function SlideBoxContent(props) {
       getFormData,
       messageDetails,
       onCreateNew,
+      toggleShowSlideBox,
+      showSlideBox,
     } = props;
   const query = { type: 'embedded', module: 'library' };
   const creativesLocationProps = {
@@ -36,12 +39,16 @@ function SlideBoxContent(props) {
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
+  let isPreview = false;
+  let isEmailPreview = false;
   if (templateData) {
     const channel = templateData.type;
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
     isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
+    isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
+    isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
   }
 
   return (
@@ -55,13 +62,25 @@ function SlideBoxContent(props) {
         createNew={onCreateNew}
         />
         )}
-      {slidBoxContent === 'preview' && (
+      {isPreview && (
       <TemplatePreview
         content={templateData.versions.base['sms-editor']}
         channel={templateData.type.toLowerCase()}
         charCounterEnabled
       />
         )}
+      {isEmailPreview && (
+        <EmailPreview
+          content={templateData.base.html_content}
+          device={this.state.device}
+          header={templateData.base.subject}
+          location={this.props.location}
+          show={showSlideBox}
+          handleClose={toggleShowSlideBox}
+          changePreviewDevice={this.changePreviewDevice}
+              />
+      )
+      }
       {isEditSms && (
       <SmsEdit
         location={creativesLocationProps}
@@ -125,5 +144,7 @@ SlideBoxContent.propTypes = {
   getFormData: PropTypes.func,
   messageDetails: PropTypes.object,
   onCreateNew: PropTypes.func,
+  toggleShowSlideBox: PropTypes.func,
+  showSlideBox: PropTypes.bool,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/index.js

@@ -146,6 +146,8 @@ class Creatives extends React.Component {
               getFormData={this.getFormData}
               onCreateNew={this.onCreateNew}
               isGetFormData={isGetFormData}
+              toggleShowSlideBox={this.toggleShowSlideBox}
+              showSlideBox={showSlideBox}
             />
           }
           footer={

package/package.json

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