From 30d316886c568aabcbe5a540b8a510da548b6c72 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 16 Dec 2022 01:13:32 +0800
Subject: [PATCH] Add empty state Campaigns card.

---
 .../Campaigns/Campaigns.scss                  | 27 ++++++++++++
 .../Campaigns/Campaigns.tsx                   | 42 +++++++++++++++++++
 .../overview-multichannel/Campaigns/index.ts  |  1 +
 .../MarketingOverviewMultichannel.tsx         |  3 ++
 4 files changed, 73 insertions(+)
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/index.ts

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
new file mode 100644
index 00000000000..fe59d585b14
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
@@ -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;
+		}
+	}
+}
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
new file mode 100644
index 00000000000..4e4d2f93ea8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -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>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/index.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/index.ts
new file mode 100644
index 00000000000..fcceee0efe2
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/index.ts
@@ -0,0 +1 @@
+export { Campaigns } from './Campaigns';
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
index cffa5655873..780445ffebd 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
@@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data';
  * Internal dependencies
  */
 import { getAdminSetting } from '~/utils/admin-settings';
+import { Campaigns } from './Campaigns';
 import { Channels } from './Channels';
 import { InstalledExtensions } from './InstalledExtensions';
 import { DiscoverTools } from './DiscoverTools';
@@ -23,6 +24,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 
 	return (
 		<div className="woocommerce-marketing-overview-multichannel">
+			{ /* TODO: show Campaigns card only when there is at least one registered channel. */ }
+			<Campaigns />
 			<Channels />
 			<InstalledExtensions />
 			{ shouldShowExtensions && <DiscoverTools /> }