From 3f56382cf17f5f4bf66e51b88e19e81aac187291 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 9 Dec 2022 02:19:36 +0800
Subject: [PATCH 1/6] Code refactor with CenteredSpinner.

(cherry picked from commit 52166434658e68e25f2d1536448a56376e67ac1e)
---
 .../CenteredSpinner/CenteredSpinner.scss        |  4 ++++
 .../CenteredSpinner/CenteredSpinner.tsx         | 17 +++++++++++++++++
 .../components/CenteredSpinner/index.ts         |  1 +
 .../client/marketing/components/index.js        |  1 +
 .../DiscoverTools/DiscoverTools.scss            |  8 --------
 .../DiscoverTools/DiscoverTools.tsx             | 10 ++++++----
 6 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.scss
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.tsx
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/index.ts

diff --git a/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.scss b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.scss
new file mode 100644
index 00000000000..de66e759c34
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.scss
@@ -0,0 +1,4 @@
+.woocommerce-centered-spinner {
+	display: flex;
+	justify-content: center;
+}
diff --git a/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.tsx b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.tsx
new file mode 100644
index 00000000000..19ec4959533
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/CenteredSpinner.tsx
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Spinner } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import './CenteredSpinner.scss';
+
+export const CenteredSpinner = () => {
+	return (
+		<div className="woocommerce-centered-spinner">
+			<Spinner />
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/index.ts b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/index.ts
new file mode 100644
index 00000000000..cb45370f30c
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CenteredSpinner/index.ts
@@ -0,0 +1 @@
+export { CenteredSpinner } from './CenteredSpinner';
diff --git a/plugins/woocommerce-admin/client/marketing/components/index.js b/plugins/woocommerce-admin/client/marketing/components/index.js
index c514c3ca633..9131b5f57a5 100644
--- a/plugins/woocommerce-admin/client/marketing/components/index.js
+++ b/plugins/woocommerce-admin/client/marketing/components/index.js
@@ -5,3 +5,4 @@ export { default as Slider } from './slider';
 export { default as ReadBlogMessage } from './ReadBlogMessage';
 export { CollapsibleCard, CardBody, CardDivider } from './CollapsibleCard';
 export { PluginCardBody } from './PluginCardBody';
+export { CenteredSpinner } from './CenteredSpinner';
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.scss
index c11516aec58..ab21090dc41 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.scss
@@ -1,11 +1,3 @@
-.woocommerce-marketing-discover-tools-card {
-	// place the spinner in the center of the card.
-	.woocommerce-spinner {
-		display: block;
-		margin: auto;
-	}
-}
-
 .woocommerce-marketing-discover-tools-card-body-empty-content {
 	width: 50%;
 	margin: auto;
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx
index ca79f53b085..a116640fbe0 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/DiscoverTools.tsx
@@ -5,12 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { Icon, trendingUp } from '@wordpress/icons';
 import { recordEvent } from '@woocommerce/tracks';
-import { Spinner } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
-import { CollapsibleCard, CardBody } from '~/marketing/components';
+import {
+	CollapsibleCard,
+	CardBody,
+	CenteredSpinner,
+} from '~/marketing/components';
 import { useRecommendedPlugins } from './useRecommendedPlugins';
 import { PluginsTabPanel } from './PluginsTabPanel';
 import './DiscoverTools.scss';
@@ -30,7 +33,7 @@ export const DiscoverTools = () => {
 		if ( isInitializing ) {
 			return (
 				<CardBody>
-					<Spinner />
+					<CenteredSpinner />
 				</CardBody>
 			);
 		}
@@ -72,7 +75,6 @@ export const DiscoverTools = () => {
 
 	return (
 		<CollapsibleCard
-			className="woocommerce-marketing-discover-tools-card"
 			header={ __( 'Discover more marketing tools', 'woocommerce' ) }
 		>
 			{ renderCardContent() }

From 0fe028d8c2b61a3fb8dba8ff08daaa845b53facc Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 9 Dec 2022 19:30:24 +0800
Subject: [PATCH 2/6] Code refactor with CardHeaderTitle component.

This component will be used in other components later.

(cherry picked from commit 995fb7e02d80b721376562727416317534ca177d)
---
 .../components/CardHeaderTitle/CardHeaderTitle.scss  |  6 ++++++
 .../components/CardHeaderTitle/CardHeaderTitle.tsx   | 12 ++++++++++++
 .../marketing/components/CardHeaderTitle/index.ts    |  1 +
 .../components/CollapsibleCard/CollapsibleCard.scss  |  4 ----
 .../components/CollapsibleCard/CollapsibleCard.tsx   |  3 ++-
 .../client/marketing/components/index.js             |  1 +
 6 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
 create mode 100644 plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts

diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
new file mode 100644
index 00000000000..b5b6e6ced57
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.scss
@@ -0,0 +1,6 @@
+.woocommerce-marketing-card-header-title {
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 28px;
+	letter-spacing: 0;
+}
diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
new file mode 100644
index 00000000000..6861b8fbe0f
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/CardHeaderTitle.tsx
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import './CardHeaderTitle.scss';
+
+export const CardHeaderTitle: React.FC = ( { children } ) => {
+	return (
+		<div className="woocommerce-marketing-card-header-title">
+			{ children }
+		</div>
+	);
+};
diff --git a/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts
new file mode 100644
index 00000000000..424e3f75a78
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/components/CardHeaderTitle/index.ts
@@ -0,0 +1 @@
+export { CardHeaderTitle } from './CardHeaderTitle';
diff --git a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
index 5c1aef987c1..4303cbd3e65 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.scss
@@ -1,9 +1,5 @@
 .woocommerce-collapsible-card {
 	.components-card-header {
-		font-size: 20px;
-		font-weight: 400;
-		line-height: 28px;
-		letter-spacing: 0;
 		cursor: pointer;
 	}
 }
diff --git a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
index c0a767b1738..c7044810222 100644
--- a/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
@@ -17,6 +17,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
+import { CardHeaderTitle } from '~/marketing/components';
 import './CollapsibleCard.scss';
 
 type CollapsibleCardProps = {
@@ -48,7 +49,7 @@ const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
 			) }
 		>
 			<CardHeader onClick={ handleClick }>
-				<div>{ header }</div>
+				<CardHeaderTitle>{ header }</CardHeaderTitle>
 				<Button
 					isSmall
 					icon={ collapsed ? chevronDown : chevronUp }
diff --git a/plugins/woocommerce-admin/client/marketing/components/index.js b/plugins/woocommerce-admin/client/marketing/components/index.js
index 9131b5f57a5..186698cc0b4 100644
--- a/plugins/woocommerce-admin/client/marketing/components/index.js
+++ b/plugins/woocommerce-admin/client/marketing/components/index.js
@@ -5,4 +5,5 @@ export { default as Slider } from './slider';
 export { default as ReadBlogMessage } from './ReadBlogMessage';
 export { CollapsibleCard, CardBody, CardDivider } from './CollapsibleCard';
 export { PluginCardBody } from './PluginCardBody';
+export { CardHeaderTitle } from './CardHeaderTitle';
 export { CenteredSpinner } from './CenteredSpinner';

From 8873252c456c4aa60779928fcdff2eb9eeae0b5f Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 10 Dec 2022 00:25:56 +0800
Subject: [PATCH 3/6] Rename type Plugin to InstalledPlugin.

(cherry picked from commit 56dbf53a357492a5b1054e3a3d0247c553a6b8be)
---
 .../client/marketing/hooks/useInstalledPlugins.ts             | 4 ++--
 .../InstalledExtensions/InstalledExtensions.tsx               | 4 ++--
 plugins/woocommerce-admin/client/marketing/types/Plugin.ts    | 2 +-
 plugins/woocommerce-admin/client/marketing/types/index.ts     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/hooks/useInstalledPlugins.ts b/plugins/woocommerce-admin/client/marketing/hooks/useInstalledPlugins.ts
index 94dd9905dda..88c39ac3e68 100644
--- a/plugins/woocommerce-admin/client/marketing/hooks/useInstalledPlugins.ts
+++ b/plugins/woocommerce-admin/client/marketing/hooks/useInstalledPlugins.ts
@@ -7,10 +7,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { STORE_KEY } from '~/marketing/data/constants';
-import { Plugin } from '~/marketing/types';
+import { InstalledPlugin } from '~/marketing/types';
 
 export type UseInstalledPlugins = {
-	installedPlugins: Plugin[];
+	installedPlugins: InstalledPlugin[];
 	activatingPlugins: string[];
 	activateInstalledPlugin: ( slug: string ) => void;
 	loadInstalledPluginsAfterActivation: ( slug: string ) => void;
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/InstalledExtensions/InstalledExtensions.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/InstalledExtensions/InstalledExtensions.tsx
index 8fb7100b83d..f445fa7a69b 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/InstalledExtensions/InstalledExtensions.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/InstalledExtensions/InstalledExtensions.tsx
@@ -15,7 +15,7 @@ import {
 	ProductIcon,
 	PluginCardBody,
 } from '~/marketing/components';
-import { Plugin } from '~/marketing/types';
+import { InstalledPlugin } from '~/marketing/types';
 import { useInstalledPlugins } from '~/marketing/hooks';
 
 export const InstalledExtensions = () => {
@@ -26,7 +26,7 @@ export const InstalledExtensions = () => {
 		return null;
 	}
 
-	const getButton = ( plugin: Plugin ) => {
+	const getButton = ( plugin: InstalledPlugin ) => {
 		if ( plugin.status === 'installed' ) {
 			return (
 				<Button
diff --git a/plugins/woocommerce-admin/client/marketing/types/Plugin.ts b/plugins/woocommerce-admin/client/marketing/types/Plugin.ts
index 2d77fdff422..707694e8234 100644
--- a/plugins/woocommerce-admin/client/marketing/types/Plugin.ts
+++ b/plugins/woocommerce-admin/client/marketing/types/Plugin.ts
@@ -1,4 +1,4 @@
-export type Plugin = {
+export type InstalledPlugin = {
 	slug: string;
 	icon: string;
 	name: string;
diff --git a/plugins/woocommerce-admin/client/marketing/types/index.ts b/plugins/woocommerce-admin/client/marketing/types/index.ts
index 48bf19df237..77e43b01553 100644
--- a/plugins/woocommerce-admin/client/marketing/types/index.ts
+++ b/plugins/woocommerce-admin/client/marketing/types/index.ts
@@ -1 +1 @@
-export { Plugin } from './Plugin';
+export { InstalledPlugin } from './Plugin';

From d2529221100b00122fbf3ef0da208d73a004c221 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 10 Dec 2022 00:27:05 +0800
Subject: [PATCH 4/6] Rename file Plugin to InstalledPlugin.

(cherry picked from commit 0229354da0b125357242a14696306007ec558bd9)
---
 .../client/marketing/types/{Plugin.ts => InstalledPlugin.ts}    | 0
 plugins/woocommerce-admin/client/marketing/types/index.ts       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename plugins/woocommerce-admin/client/marketing/types/{Plugin.ts => InstalledPlugin.ts} (100%)

diff --git a/plugins/woocommerce-admin/client/marketing/types/Plugin.ts b/plugins/woocommerce-admin/client/marketing/types/InstalledPlugin.ts
similarity index 100%
rename from plugins/woocommerce-admin/client/marketing/types/Plugin.ts
rename to plugins/woocommerce-admin/client/marketing/types/InstalledPlugin.ts
diff --git a/plugins/woocommerce-admin/client/marketing/types/index.ts b/plugins/woocommerce-admin/client/marketing/types/index.ts
index 77e43b01553..b98d52b3e95 100644
--- a/plugins/woocommerce-admin/client/marketing/types/index.ts
+++ b/plugins/woocommerce-admin/client/marketing/types/index.ts
@@ -1 +1 @@
-export { InstalledPlugin } from './Plugin';
+export { InstalledPlugin } from './InstalledPlugin';

From 6baa40307138ff0ca5a83497a50ad6f4568b8518 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 10 Dec 2022 00:33:10 +0800
Subject: [PATCH 5/6] Move and rename type Plugin to RecommendedPlugin.

---
 .../DiscoverTools/PluginsTabPanel.tsx                  | 10 +++++-----
 .../DiscoverTools/useRecommendedPlugins.ts             |  5 +++--
 .../types.ts => types/RecommendedPlugin.ts}            |  2 +-
 .../woocommerce-admin/client/marketing/types/index.ts  |  1 +
 4 files changed, 10 insertions(+), 8 deletions(-)
 rename plugins/woocommerce-admin/client/marketing/{overview-multichannel/DiscoverTools/types.ts => types/RecommendedPlugin.ts} (90%)

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/PluginsTabPanel.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/PluginsTabPanel.tsx
index 8528e199672..8a689f4f2c7 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/PluginsTabPanel.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/PluginsTabPanel.tsx
@@ -15,9 +15,9 @@ import { flatMapDeep, uniqBy } from 'lodash';
  */
 import { CardDivider, PluginCardBody } from '~/marketing/components';
 import { useInstalledPlugins } from '~/marketing/hooks';
+import { RecommendedPlugin } from '~/marketing/types';
 import { getInAppPurchaseUrl } from '~/lib/in-app-purchase';
 import { createNoticesFromResponse } from '~/lib/notices';
-import { Plugin } from './types';
 import './DiscoverTools.scss';
 
 /**
@@ -30,7 +30,7 @@ import './DiscoverTools.scss';
  * 1. Get an array of unique subcategories from the list of plugins.
  * 2. Map the subcategories schema into tabs schema.
  */
-const getTabs = ( plugins: Plugin[] ) => {
+const getTabs = ( plugins: RecommendedPlugin[] ) => {
 	const pluginSubcategories = uniqBy(
 		flatMapDeep( plugins, ( p ) => p.subcategories ),
 		( subcategory ) => subcategory.slug
@@ -44,7 +44,7 @@ const getTabs = ( plugins: Plugin[] ) => {
 
 type PluginsTabPanelType = {
 	isLoading: boolean;
-	plugins: Plugin[];
+	plugins: RecommendedPlugin[];
 	onInstallAndActivate: ( pluginSlug: string ) => void;
 };
 
@@ -72,7 +72,7 @@ export const PluginsTabPanel = ( {
 	 *
 	 * @param  plugin Plugin to be installed and activated.
 	 */
-	const installAndActivate = async ( plugin: Plugin ) => {
+	const installAndActivate = async ( plugin: RecommendedPlugin ) => {
 		setCurrentPlugin( plugin.product );
 
 		try {
@@ -103,7 +103,7 @@ export const PluginsTabPanel = ( {
 					)
 				);
 
-				const renderButton = ( plugin: Plugin ) => {
+				const renderButton = ( plugin: RecommendedPlugin ) => {
 					const buttonDisabled = !! currentPlugin || isLoading;
 
 					if ( plugin.direct_install ) {
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
index 6cb2556e9eb..e8865fd4888 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/useRecommendedPlugins.ts
@@ -7,7 +7,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { STORE_KEY } from '~/marketing/data/constants';
-import { Plugin } from './types';
+import { RecommendedPlugin } from '~/marketing/types';
 
 const selector = 'getRecommendedPlugins';
 const category = 'marketing';
@@ -24,7 +24,8 @@ export const useRecommendedPlugins = () => {
 	return useSelect( ( select ) => {
 		const { getRecommendedPlugins, hasFinishedResolution } =
 			select( STORE_KEY );
-		const plugins = getRecommendedPlugins< Plugin[] >( category );
+		const plugins =
+			getRecommendedPlugins< RecommendedPlugin[] >( category );
 		const isLoading = ! hasFinishedResolution( selector, [ category ] );
 
 		return {
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/types.ts b/plugins/woocommerce-admin/client/marketing/types/RecommendedPlugin.ts
similarity index 90%
rename from plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/types.ts
rename to plugins/woocommerce-admin/client/marketing/types/RecommendedPlugin.ts
index 4c7eb88f922..434675a8bd0 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/DiscoverTools/types.ts
+++ b/plugins/woocommerce-admin/client/marketing/types/RecommendedPlugin.ts
@@ -8,7 +8,7 @@ type Tag = {
 	name: string;
 };
 
-export type Plugin = {
+export type RecommendedPlugin = {
 	title: string;
 	description: string;
 	url: string;
diff --git a/plugins/woocommerce-admin/client/marketing/types/index.ts b/plugins/woocommerce-admin/client/marketing/types/index.ts
index b98d52b3e95..146295d936e 100644
--- a/plugins/woocommerce-admin/client/marketing/types/index.ts
+++ b/plugins/woocommerce-admin/client/marketing/types/index.ts
@@ -1 +1,2 @@
 export { InstalledPlugin } from './InstalledPlugin';
+export { RecommendedPlugin } from './RecommendedPlugin';

From d70fb07f318d435c6ced719628d329266d3195d6 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Tue, 13 Dec 2022 21:35:01 +0800
Subject: [PATCH 6/6] Modify PluginCardBody to accept className, and change
 description type.

---
 .../components/PluginCardBody/PluginCardBody.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
index 1e67edeb3ed..6b0b4acd0c8 100644
--- a/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
+++ b/plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -5,6 +10,7 @@ import { CardBody } from '~/marketing/components';
 import './PluginCardBody.scss';
 
 type PluginCardBodyProps = {
+	className?: string;
 	icon: JSX.Element;
 	name: string;
 
@@ -13,7 +19,7 @@ type PluginCardBodyProps = {
 	 */
 	pills?: Array< JSX.Element >;
 
-	description: string;
+	description: React.ReactNode;
 	button?: JSX.Element;
 };
 
@@ -21,6 +27,7 @@ type PluginCardBodyProps = {
  * Renders a CardBody layout component to display plugin info and button.
  */
 export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
+	className,
 	icon,
 	name,
 	pills,
@@ -28,7 +35,12 @@ export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
 	button,
 } ) => {
 	return (
-		<CardBody className="woocommerce_marketing_plugin_card_body">
+		<CardBody
+			className={ classnames(
+				'woocommerce_marketing_plugin_card_body',
+				className
+			) }
+		>
 			<div className="woocommerce_marketing_plugin_card_body__icon">
 				{ icon }
 			</div>