@capillarytech/creatives-library 8.0.229 → 8.0.230

package/package.json

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

package/v2Components/CapPageSpinner/index.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { CapLabel, CapRow, CapSpin } from "@capillarytech/cap-ui-library";
+import React from "react";
+import { injectIntl } from "react-intl";
+import messages from './messages';
+import "./index.scss";
+
+export const CapPageSpinner = (props) => {
+
+    return (
+        <CapRow className="cap-custom-page-spinner">
+            <CapSpin spinning={props.spinning}>
+                {props.children}
+            </CapSpin>
+            {props.spinning && <CapLabel className="cap-custom-page-spinner-text">{props.intl.formatMessage(messages.text)}</CapLabel>}
+        </CapRow>
+    );
+};
+
+CapPageSpinner.propTypes = {
+    spinning: PropTypes.bool,
+    children: PropTypes.node,
+    intl: PropTypes.object.isRequired,
+};
+
+CapPageSpinner.defaultProps = {
+    spinning: false,
+    children: null,
+};
+
+ export default injectIntl(CapPageSpinner);

package/v2Components/CapPageSpinner/index.scss

@@ -0,0 +1,23 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.cap-custom-page-spinner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 1.25rem;
+  text-align: center;
+  gap: 0.5rem;
+  
+  .cap-custom-page-spinner-text {
+    color: $FONT_COLOR_02;
+    font-size: $FONT_SIZE_L;
+  }
+
+  .ant-spin.ant-spin-spinning {
+    height: 1.5rem;
+    width: 1.5rem;
+    position: relative;
+  }
+}

package/v2Components/CapPageSpinner/messages.js

@@ -0,0 +1,13 @@
+/*
+ * CapPageSpinner Messages
+ *
+ * This contains all the text for the CapPageSpinner component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  text: {
+    id: 'creatives.componentsV2.CapPageSpinner.text',
+    defaultMessage: 'Loading More Templates',
+  },
+});

package/v2Components/CardGrid/index.js

@@ -38,7 +38,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
         <CapSpin spinning={this.props.isLoading} tip={this.props.loadingTip}>
-          <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+          <div className={this.props.enablePagination ? 'v2-pagination-container' : ''}>
             <CapRow gutter={this.props.gutterSize}>
               { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
                 <CapColumn style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>

package/v2Components/CmsTemplatesComponent/index.js

@@ -40,7 +40,7 @@ function CmsTemplatesComponent(props) {
   }, []);
 
   return (<CapSpin spinning={props.cmsTemplatesLoader}>
-    <div className="pagination-container">
+    <div className="v2-pagination-container">
       <CapCustomCardList cardList={cardDataList} type="Email" />
     </div>
   </CapSpin>);

package/v2Components/Pagination/_pagination.scss

@@ -1,5 +1,5 @@
-.pagination-container{
-  height: calc(100vh - 182px);
+.v2-pagination-container{
+  height: calc(100vh - 25rem);
   overflow-y: auto;
   overflow-x: hidden;
 }

package/v2Components/Pagination/index.js

@@ -34,8 +34,6 @@ Pagination.propTypes = {
   templateInProgress: PropTypes.bool,
 };
 
-Pagination.defaultProps = {
-  paginationContainer: "pagination-container",
-};
+Pagination.defaultProps = {};
 
 export default Pagination;

package/v2Containers/Assets/Gallery/index.js

@@ -31,6 +31,7 @@ import injectReducer from '../../../utils/injectReducer';
 import { v2GallerySagas } from './sagas';
 import v2GalleryReducer from './reducer';
 import { GALLERY_ALLOWED_EXTENSION } from './constants';
+import CapPageSpinner from '../../../v2Components/CapPageSpinner';
 
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -323,7 +324,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   deleteAsset(asset) {
     this.props.actions.deleteAssetById(asset._id, asset.type);
   }
-  getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip}) => {
+  getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip, isInitialLoading}) => {
     const currentChannel = 'gallery';
     const { searchLoader, searchText } = this.state;
     const cardDataList = templates?.length ? _.map(templates, (template) => {
@@ -369,9 +370,8 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }) : [];
     return (<div>
       {filterContent}
-      <CapCustomSkeleton loader={isLoading}>
-        {!isLoading && <div>
-          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
+        {!(isInitialLoading && isLoading) && <div>
+          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`v2-pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
             {!_.isEmpty(searchText) && _.isEmpty(templates) && (
               <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
@@ -386,7 +386,8 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           )}
         </div>
         }
-      </CapCustomSkeleton>
+        {<CapCustomSkeleton loader={isInitialLoading && isLoading} />}
+        {<CapPageSpinner spinning={!isInitialLoading && isLoading} />}
 
     </div>);
   }
@@ -498,7 +499,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
               </div>
             </div>
           </div> :
-          <Pagination onPageChange={() => { this.getAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+          <Pagination onPageChange={() => { this.getAllAssets({getNextPage: true}); }}>
             {/* <CardGrid
               listItem={this.prepareData()}
               filterContent={filterContent}
@@ -506,7 +507,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
               onItemClick={this.handleOnHoverItem}
               enablePagination
             /> */}
-            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: assetList, filterContent, handlers: {selectAsset: this.selectAsset}})}
+            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: assetList, filterContent, handlers: {selectAsset: this.selectAsset}, isInitialLoading: this.state.page === 1 && isLoading})}
 
           </Pagination>
           }

package/v2Containers/Email/index.js

@@ -2616,7 +2616,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }) : [];
     return (<div>
       <CapSpin spinning={isLoading} tip={loadingTip}>
-        {!_.isEmpty(templates) && <div className="pagination-container">
+        {!_.isEmpty(templates) && <div className="v2-pagination-container">
           <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
         </div>}
       </CapSpin>
@@ -2734,7 +2734,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     return (
       <div key="creatives-email-add-image-container">
         {this.getFilterContent()}
-        <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+        <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }}>
           {(!fetchingAllAssets && (!fetchAllAssetSuccess || (fetchAllAssetSuccess && !assetList.length))) ? (
             <FormattedMessage {...messages.noImgInGallery}/>
           ) : this.getTemplateDataForGrid({

package/v2Containers/Line/Container/Drawer/index.js

@@ -95,7 +95,7 @@ export const LineDrawer = ({
                 onChange={(e) => searchTemplate(e.target.value)}
                 onClear={() => searchTemplate('')}
             />
-            <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }} paginationSelector="pagination-container">
+            <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }}>
                 {
                     !cardDataList.length
                     ? (
@@ -105,7 +105,7 @@ export const LineDrawer = ({
                     )
                     : null
                 }
-                <div className="pagination-container">
+                <div className="v2-pagination-container">
                     <CapCustomCardList
                         key={'LINE-card-list'}
                         cardList={cardDataList}

package/v2Containers/Line/Container/_lineCreate.scss

@@ -18,7 +18,7 @@
 .knSUjl .component-wrapper .cap-tab-v2.ant-tabs-line {
   height: auto;
 }
-.pagination-container {
+.v2-pagination-container {
   .LINE {
     .ant-card-body {
       background-color: $CAP_G09;
@@ -75,7 +75,7 @@
   margin-bottom: $CAP_SPACE_12;
 }
 
-.pagination-container.gallery-upload {
+.v2-pagination-container.gallery-upload {
   height: calc(100vh - 60px);
 
   .cap-custom-card-list-col {

package/v2Containers/Templates/_templates.scss

@@ -9,9 +9,8 @@
 
 @media screen and (max-width: 1172px) {
   .creatives-templates-list.full-mode{
-    .pagination-container {
+    .v2-pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(3n+3) { //every 4th child
             margin-right: unset;
@@ -24,9 +23,8 @@
 
 @media screen and (min-width: 1172px) {
   .creatives-templates-list.full-mode{
-    .pagination-container {
+    .v2-pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(4n+4) { //every 4th child
             margin-right: unset;
@@ -57,10 +55,7 @@
     }
   }
 
-  .pagination-container {
-    .cap-custom-card-list-row {
-      padding-bottom: 10rem;
-    }
+  .v2-pagination-container {
     .FACEBOOK {
       .ant-card-body {
         background-color: $CAP_G09;
@@ -663,8 +658,8 @@
     background-image: url("https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg");
   }
 }
-.pagination-container{
-  height: calc(100vh - 182px);
+.v2-pagination-container-half{
+  height: calc(100vh - 22rem);
   overflow-y: auto;
   overflow-x: hidden;
 }

package/v2Containers/Templates/index.js

@@ -155,6 +155,7 @@ import { makeSelectRcs } from '../Rcs/selectors';
 import { getRcsStatusType } from '../Rcs/utils';
 import { v2MobilePushSagas } from '../MobilePushNew/sagas';
 import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
+import CapPageSpinner from '../../v2Components/CapPageSpinner';
 const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
 
 const { timeTracker } = GA;
@@ -1190,7 +1191,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     ) : <>{children}</>
   };
 
-  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip, previewTemplateId }) => {
+  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, isInitialLoading,  loadingTip, previewTemplateId }) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
@@ -1742,21 +1743,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const getAllTemplatesInProgress = get(this.props, 'Templates.getAllTemplatesInProgress');
 
     const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates) || !this.state.hostName;
-
     const noApprovedWhatsappZaloTemplates = filteredEmptyAndFullModeAs(false) && !isEmpty(this.state?.hostName);
     const showWhatsappIllustration = accountWithNoHostWhatsapp(WHATSAPP_LOWERCASE);
     const showZaloIllustration = accountWithNoHostZalo(ZALO_LOWERCASE)
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    return (<div>
+return (<div>
       {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
-      <CapCustomSkeleton loader={isLoading || getAllTemplatesInProgress}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
-            <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
+            <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
               <CapCustomCardList
                 key={`${currentChannel}-card-list`}
                 cardList={cardDataList}
@@ -1825,9 +1824,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
+          {<CapCustomSkeleton loader={isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
+          {<CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
         </div>
         }
-      </CapCustomSkeleton>
     </div>);
   }
   filterLineTemplates = (templates) => {
@@ -2900,6 +2900,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
+
+  getInitialLoading = () => {
+    const isLoadingValue = this.isLoading();
+    const templates = this.props.TemplatesList || [];
+    const hasTemplates = !isEmpty(templates) || this.state.templatesCount > 0;
+    const isInitialLoading = isLoadingValue && this.state.page === 1 && !hasTemplates;
+    
+    return isInitialLoading;
+  }
  
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
@@ -3244,6 +3253,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const pageHeader = "";
     const pageHeaderDvs = "";
     const isLoading = this.isLoading();
+    const isInitialLoading = this.getInitialLoading();
     let previewHeader = this.props.intl.formatMessage(messages.preview);
     // const previewHeader = (this.state.channel.toLowerCase() === 'email' ? <h3>{this.props.intl.formatMessage(messages.emailPreview)}</h3> : <h3>{this.props.intl.formatMessage(messages.ebillPreview)}</h3>);
     if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
@@ -3533,11 +3543,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onPageChange={
                 templates.length ? this.onPaginationChange : () => {}
               }
-              paginationSelector="pagination-container"
             >
               {this.getTemplateDataForGrid({
                 previewTemplateId: this.state.zaloPreviewItemId,
                 isLoading,
+                isInitialLoading,
                 loadingTip,
                 channel: this.state.channel,
                 templates: this.state.searchingZaloTemplate