Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add loading state for Campaigns card.

This commit is contained in:
Gan Eng Chin 2022-12-17 21:08:14 +08:00
parent 30d316886c
commit af4f79ab28
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
View File

@ -8,35 +8,60 @@ import { Icon, megaphone } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { CardHeaderTitle } from '~/marketing/components';
import { CardHeaderTitle, CenteredSpinner } from '~/marketing/components';
import { useCampaigns } from './useCampaigns';
import './Campaigns.scss';
export const Campaigns = () => {
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
<Icon icon={ megaphone } size={ 32 } />
<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
{ __(
'Advertise with marketing campaigns',
'woocommerce'
) }
</div>
<div>
{ __(
'Easily create and manage marketing campaigns without leaving WooCommerce.',
'woocommerce'
) }
</div>
</CardBody>
</Card>
);
const { loading, data } = useCampaigns();
if ( loading ) {
return (
<Card>
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CardBody>
<CenteredSpinner />
</CardBody>
</Card>
);
}
if ( data.length === 0 ) {
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
<Icon icon={ megaphone } size={ 32 } />
<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
{ __(
'Advertise with marketing campaigns',
'woocommerce'
) }
</div>
<div>
{ __(
'Easily create and manage marketing campaigns without leaving WooCommerce.',
'woocommerce'
) }
</div>
</CardBody>
</Card>
);
}
return <div>TODO: campaigns here.</div>;
};

15
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts Normal file
View File

@ -0,0 +1,15 @@
// TODO: testing for loading state.
export const useCampaigns = () => {
return {
loading: true,
data: [],
};
};
// TODO: testing for empty data.
// export const useCampaigns = () => {
// return {
// loading: false,
// data: [],
// };
// };