@capillarytech/creatives-library 3.0.21 → 3.0.23

package/package.json

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

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -1,5 +1,5 @@
 $classPrefix: email-preview-v2;
-.#{$classPrefix}{
+.#{$classPrefix}:not(.email-mobile-preview-container){
     #emailPreivew-container {
         position: relative;
         // padding: 0 24px 0 24px;
@@ -77,6 +77,7 @@ $classPrefix: email-preview-v2;
                 position: absolute;
                 top: 10.3%;
                 height: 100%;
+                left: unset;
               }
             }
             padding: 0 0px 0 24px;

package/v2Containers/Assets/Gallery/index.js

@@ -38,6 +38,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       page: 1,
       perPageLimit: 25,
       totalCount: 0,
+      searchLoader: false,
     };
     this.uploadImages = this.uploadImages.bind(this);
     this.openFileDialog = this.openFileDialog.bind(this);
@@ -205,7 +206,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   }
 
   searchAsset(value) {
-    this.setState({searchText: value}, () => {
+    this.setState({searchText: value, searchLoader: true}, () => {
       this.delay(() => {
         const params = {
           name: this.state.searchText,
@@ -214,6 +215,9 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           params.sortBy = this.state.sortBy;
         }
         this.getAllAssets({params, resetPage: true});
+        this.setState({
+          searchLoader: false,
+        });
       }, 1000);
     });
   }
@@ -299,6 +303,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   }
   getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip}) => {
     const currentChannel = 'gallery';
+    const { searchLoader, searchText } = this.state;
     const cardDataList = templates.length ? _.map(templates, (template) => {
       const templateData =
         {
@@ -334,14 +339,20 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
         {!isLoading && <div>
-          {!_.isEmpty(templates) || !_.isEmpty(this.state.searchText) ? <div className="pagination-container">
+          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className="pagination-container">
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
-            {!_.isEmpty(this.state.searchText) && _.isEmpty(templates) && (
+            {!_.isEmpty(searchText) && _.isEmpty(templates) && (
               <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
                 <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
               </div>
             )}
-          </div> : <CapIllustration {...this.getIllustrationProps} />}</div>
+          </div> : (
+            _.isEmpty(templates) &&
+            _.isEmpty(searchText) &&
+            !searchLoader &&
+            <CapIllustration {...this.getIllustrationProps} />
+          )}
+        </div>
         }
       </CapSpin>
 

package/v2Containers/Templates/index.js

@@ -563,7 +563,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
                 </InlineDiv>
               </CapHeading>
-            </div> : ["mobilepush"].includes(this.state.channel.toLowerCase()) && _.isEmpty(templates) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+            </div> : (
+              ["mobilepush"].includes(this.state.channel.toLowerCase()) &&
+              _.isEmpty(templates) &&
+              _.isEmpty(this.state.searchText) &&
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
+                <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              </div>
+            )
           }
         </div>
         }
@@ -1646,6 +1653,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
     const creativesParams = this.getCreativesParams();
+    const templates = this.props.TemplatesList || [];
     const {route} = this.props;
     const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
@@ -1654,7 +1662,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
         <CapRow>
-          <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
+          <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
             {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
           </Pagination>
           {/* {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && // old UI GRID