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

Add empty state Campaigns card.

This commit is contained in:
Gan Eng Chin 2022-12-16 01:13:32 +08:00
parent 2e8b5227e4
commit 30d316886c
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
4 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss Normal file
View File

@ -0,0 +1,27 @@
.woocommerce-marketing-campaigns-card {
.woocommerce-marketing-campaigns-card-body-empty-content {
width: 50%;
margin: auto;
text-align: center;
svg {
fill: $studio-woocommerce-purple-50;
background-color: #f6f7f7;
border-radius: 28px;
margin-bottom: $gap-smallest;
}
div.woocommerce-marketing-campaigns-card-body-empty-content-title {
font-size: 13px;
font-weight: 600;
line-height: 16px;
color: $gray-900;
margin-bottom: $gap-smallest;
}
div {
color: $gray-700;
margin-bottom: $gap-smallest;
}
}
}

42
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx Normal file
View File

@ -0,0 +1,42 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Card, CardHeader, CardBody } from '@wordpress/components';
import { Icon, megaphone } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { CardHeaderTitle } from '~/marketing/components';
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>
);
};

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

@ -0,0 +1 @@
export { Campaigns } from './Campaigns';

3
plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
View File

@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data';
* Internal dependencies * Internal dependencies
*/ */
import { getAdminSetting } from '~/utils/admin-settings'; import { getAdminSetting } from '~/utils/admin-settings';
import { Campaigns } from './Campaigns';
import { Channels } from './Channels'; import { Channels } from './Channels';
import { InstalledExtensions } from './InstalledExtensions'; import { InstalledExtensions } from './InstalledExtensions';
import { DiscoverTools } from './DiscoverTools'; import { DiscoverTools } from './DiscoverTools';
@ -23,6 +24,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
return ( return (
<div className="woocommerce-marketing-overview-multichannel"> <div className="woocommerce-marketing-overview-multichannel">
{ /* TODO: show Campaigns card only when there is at least one registered channel. */ }
<Campaigns />
<Channels /> <Channels />
<InstalledExtensions /> <InstalledExtensions />
{ shouldShowExtensions && <DiscoverTools /> } { shouldShowExtensions && <DiscoverTools /> }