@capillarytech/creatives-library 7.17.181 → 7.17.183-alpha.0

package/package.json

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

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -343,6 +343,9 @@ describe("Creatives testing template creation", () => {
     });
     await userEvent.click(galleryBtn);
     delay(10000);
+    expect(
+      screen.getByText(/loading gallery.../i)
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', {
         name: /close/i,

package/v2Containers/Assets/Gallery/index.js

@@ -13,7 +13,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
+import { CapHeading, CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
 import { Popover } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';
@@ -24,7 +24,6 @@ import {getMessageObject} from '../../../utils/messageUtils';
 import * as commonUtil from '../../../utils/common';
 import Pagination from '../../../v2Components/Pagination';
 import imageGalleryIllustration from '../images/imageGalleryIllustration.svg';
-import CapCustomSkeleton from '../../../v2Components/CapCustomSkeleton';
 import './_gallery.scss';
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -350,7 +349,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }) : [];
     return (<div>
       {filterContent}
-      <CapCustomSkeleton loader={isLoading}>
+      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
         {!isLoading && <div>
           {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
@@ -367,7 +366,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           )}
         </div>
         }
-      </CapCustomSkeleton>
+      </CapSpin>
 
     </div>);
   }

package/v2Containers/Templates/index.js

@@ -30,7 +30,7 @@ import {
   CapIcon,
   CapRadioCard,
   CapPopover,
-  CapSkeleton,
+  CapSpin,
   CapCustomCard,
   CapRow,
   CapSlideBox,
@@ -89,7 +89,6 @@ import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-import CapCustomSkeleton from '../../v2Components/CapCustomSkeleton';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
   CHANNEL_EDIT_TRACK_MAPPING,
@@ -635,7 +634,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               paramsDefault.username = name;
               paramsDefault.oa_id = sourceAccountIdentifier;
               paramsDefault.token = token;
-              paramsDefault.host = hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName;
+              paramsDefault.host = hostName || this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
             }
           } else {
             paramsDefault.wecrmId = wecrm_app_id;
@@ -867,7 +866,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.username = name;
         queryParams.oa_id = sourceAccountIdentifier;
         queryParams.token = token;
-        queryParams.host = hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName;
+        queryParams.host = hostName || this.props.Templates?.senderDetails?.hostName ||this.state.hostName;
       }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
@@ -1386,7 +1385,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
-      <CapCustomSkeleton loader={isLoading}>
+      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
@@ -1451,7 +1450,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
         </div>
         }
-      </CapCustomSkeleton>
+      </CapSpin>
     </div>);
   }
   filterLineTemplates = (templates) => {
@@ -2658,7 +2657,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (channel === WECHAT && !commonUtil.hasWechatFeatureEnabled()) {
       showNoAccountHeader = true;
     }
-    return (<CapSkeleton loading={fetchingWeCrmAccounts} active paragraph={{ rows: 10 }}>
+    return (<CapSpin spinning={fetchingWeCrmAccounts}>
       {showNoAccountHeader ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
@@ -2679,7 +2678,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         />
       </div>
       }
-    </CapSkeleton>);
+    </CapSpin>);
   };
 
   setAccountSelectionMode = () => {