@capillarytech/creatives-library 2.0.9 → 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/Cap/reducer.js

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
 
-function capReducer(state = fromJS(initialState), action) {
+function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
     case types.LOGIN_REQUEST:
       return state.set('login_progress', true);
@@ -95,11 +95,12 @@ function capReducer(state = fromJS(initialState), action) {
         layouts: [],
         tags: [],
       });
-    case types.HIDE_TAGS:
+    case types.HIDE_TAGS: {
       const metaEntities = {tags: {}, layouts: state.get('metaEntities').layouts};
       metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
+    }
     default:
       return state;
   }

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

@@ -123,8 +123,7 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: true });
   };
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox} = this.state;
-    const { templateData } = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData} = this.state;
     return (
       <div className={classnames(`${classPrefix}`)}>
         <CapSlideBox
@@ -147,6 +146,8 @@ class Creatives extends React.Component {
               getFormData={this.getFormData}
               onCreateNew={this.onCreateNew}
               isGetFormData={isGetFormData}
+              toggleShowSlideBox={this.toggleShowSlideBox}
+              showSlideBox={showSlideBox}
             />
           }
           footer={

package/containers/Email/index.js

@@ -2523,14 +2523,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           if (containerInputFieldCol.id === 'add-language-button' && !ifLangSupported) {
             const newContainerInputFieldCol = containerInputFieldCol;
-            newContainerInputFieldCol.colStyle.display = "none";
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
             hideLang = true;
           } else if (containerInputFieldCol.id === 'add-language-button') {
             hideLang = true;
           }
           if (containerInputFieldCol.id === "mark-final-version-label") {
             const newContainerInputFieldCol = containerInputFieldCol;
-            newContainerInputFieldCol.colStyle.display = "none";
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
           }
           // if (containerInputFieldCol.id === "tab-options-popover") {
           //   const newContainerInputFieldCol = containerInputFieldCol;

package/package.json

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