From 08661353eb15d1b074ba1c0da02e993433e6f497 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 20 Dec 2022 01:17:30 +0800
Subject: [PATCH] Add CampaignsCardHeader component with modal.

---
 .../Campaigns/Campaigns.scss                  |  9 +++
 .../Campaigns/Campaigns.tsx                   | 32 ++--------
 .../Campaigns/CampaignsCardHeader.tsx         | 59 +++++++++++++++++++
 3 files changed, 73 insertions(+), 27 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
index 4e664f425b0..d2eb4e2cda9 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
@@ -50,3 +50,12 @@
 		border-top: none;
 	}
 }
+
+.woocommerce-marketing-create-campaign-modal {
+	&__question-label {
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 17px;
+		margin-bottom: 16px;
+	}
+}
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 e7448cea653..244b5b206d9 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -4,9 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
-	Button,
 	Card,
-	CardHeader,
 	CardBody,
 	CardFooter,
 	Flex,
@@ -19,9 +17,10 @@ import { Pagination, Table } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import { CardHeaderTitle, CenteredSpinner } from '~/marketing/components';
+import { CenteredSpinner } from '~/marketing/components';
 import { useCampaigns } from './useCampaigns';
 import './Campaigns.scss';
+import { CampaignsCardHeader } from './CampaignsCardHeader';
 
 export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
@@ -30,14 +29,7 @@ export const Campaigns = () => {
 	if ( loading ) {
 		return (
 			<Card>
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Campaigns', 'woocommerce' ) }
-					</CardHeaderTitle>
-					<Button variant="secondary">
-						{ __( 'Create new campaign', 'woocommerce' ) }
-					</Button>
-				</CardHeader>
+				<CampaignsCardHeader />
 				<CardBody>
 					<CenteredSpinner />
 				</CardBody>
@@ -48,14 +40,7 @@ export const Campaigns = () => {
 	if ( data.length === 0 ) {
 		return (
 			<Card className="woocommerce-marketing-campaigns-card">
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Campaigns', 'woocommerce' ) }
-					</CardHeaderTitle>
-					<Button variant="secondary">
-						{ __( 'Create new campaign', 'woocommerce' ) }
-					</Button>
-				</CardHeader>
+				<CampaignsCardHeader />
 				<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
 					<Icon icon={ megaphone } size={ 32 } />
 					<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
@@ -82,14 +67,7 @@ export const Campaigns = () => {
 
 	return (
 		<Card className="woocommerce-marketing-campaigns-card">
-			<CardHeader>
-				<CardHeaderTitle>
-					{ __( 'Campaigns', 'woocommerce' ) }
-				</CardHeaderTitle>
-				<Button variant="secondary">
-					{ __( 'Create new campaign', 'woocommerce' ) }
-				</Button>
-			</CardHeader>
+			<CampaignsCardHeader />
 			<Table
 				caption={ __( 'Campaigns', 'woocommerce' ) }
 				headers={ [
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx
new file mode 100644
index 00000000000..e6f46ac3378
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { Button, CardHeader, Modal, Icon } from '@wordpress/components';
+import { chevronUp, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { CardHeaderTitle } from '~/marketing/components';
+
+export const CampaignsCardHeader = () => {
+	const [ open, setOpen ] = useState( false );
+	const [ collapsed, setCollapsed ] = useState( true );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	return (
+		<CardHeader>
+			<CardHeaderTitle>
+				{ __( 'Campaigns', 'woocommerce' ) }
+			</CardHeaderTitle>
+			<Button variant="secondary" onClick={ openModal }>
+				{ __( 'Create new campaign', 'woocommerce' ) }
+			</Button>
+			{ open && (
+				<Modal
+					className="woocommerce-marketing-create-campaign-modal"
+					title={ __( 'Create a new campaign', 'woocommerce' ) }
+					onRequestClose={ closeModal }
+				>
+					<div className="woocommerce-marketing-create-campaign-modal__question-label">
+						{ __(
+							'Where would you like to promote your products?',
+							'woocommerce'
+						) }
+					</div>
+					{ /* TODO: list of campaign type here. */ }
+					<Button
+						variant="link"
+						onClick={ () => setCollapsed( ! collapsed ) }
+					>
+						{ __(
+							'Add channels for other campaign types',
+							'woocommerce'
+						) }
+						<Icon
+							icon={ collapsed ? chevronDown : chevronUp }
+							size={ 24 }
+						/>
+					</Button>
+					{ /* TODO: list of recommended channels here. */ }
+				</Modal>
+			) }
+		</CardHeader>
+	);
+};