From f5799c87217f43910b4917d2a517f40026161beb Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sun, 18 Dec 2022 19:34:16 +0800
Subject: [PATCH] Display campaign data in table in Campaigns card.

---
 .../Campaigns/Campaigns.tsx                   | 37 +++++++-
 .../Campaigns/useCampaigns.ts                 | 93 +++++++++++++++++--
 2 files changed, 122 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
index 5ecccc2a6e7..79c2a3c3cad 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -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>
+	);
 };
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
index 979e15d5532..2c5d66742ed 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
@@ -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',
+			},
+		],
+	};
+};