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