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

Display campaign data in table in Campaigns card.

This commit is contained in:
Gan Eng Chin 2022-12-18 19:34:16 +08:00
parent af4f79ab28
commit f5799c8721
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 122 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Button, Card, CardHeader, CardBody } from '@wordpress/components';
import { Icon, megaphone } from '@wordpress/icons';
import { Table } from '@woocommerce/components';
/**
* Internal dependencies
@ -63,5 +64,39 @@ export const Campaigns = () => {
);
}
return <div>TODO: campaigns here.</div>;
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<Table
title={ __( 'Campaigns', 'woocommerce' ) }
showMenu={ false }
headers={ [
{
key: 'campaign',
label: __( 'Campaign', 'woocommerce' ),
},
{
key: 'cost',
label: __( 'Cost', 'woocommerce' ),
},
] }
ids={ data.map( ( el ) => el.id ) }
rows={ data.map( ( el ) => {
return [
{ display: <div>{ el.title }</div> },
{ display: el.cost },
];
} ) }
rowsPerPage={ 5 }
totalRows={ data.length }
/>
</Card>
);
};

93
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
View File

@ -1,10 +1,10 @@
// TODO: testing for loading state.
export const useCampaigns = () => {
return {
loading: true,
data: [],
};
};
// // TODO: testing for loading state.
// export const useCampaigns = () => {
// return {
// loading: true,
// data: [],
// };
// };
// TODO: testing for empty data.
// export const useCampaigns = () => {
@ -13,3 +13,82 @@ export const useCampaigns = () => {
// data: [],
// };
// };
// TODO: testing with campaigns data.
export const useCampaigns = () => {
return {
loading: false,
data: [
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-01',
title: 'Performance Max 01',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-02',
title: 'Performance Max 02',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-03',
title: 'Performance Max 03',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-04',
title: 'Performance Max 04',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-05',
title: 'Performance Max 05',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-06',
title: 'Performance Max 06',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
{
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
id: 'gla-campaign-07',
title: 'Performance Max 07',
description: 'New Zealand',
cost: '$50',
manageUrl: 'https://www.google.com/manage-campaign',
},
],
};
};