From c17f336acc29d6479ac97edd7da60a01fec7d120 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Thu, 2 Feb 2023 17:47:42 +0800
Subject: [PATCH] Code refactor for Campaigns card.

---
 .../Campaigns/Campaigns.scss                  |  42 ++--
 .../Campaigns/Campaigns.tsx                   | 205 +++++++++---------
 2 files changed, 119 insertions(+), 128 deletions(-)

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 7324369f139..190849bd5d7 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
@@ -1,39 +1,35 @@
 .woocommerce-marketing-campaigns-card {
-	.woocommerce-marketing-campaigns-card-body {
+	&__content {
 		width: 50%;
 		margin: auto;
 		text-align: center;
+	}
 
-		svg {
-			background-color: $studio-gray-0;
-			border-radius: 28px;
-			margin-bottom: $gap-smallest;
-		}
+	&__content-icon {
+		background-color: $studio-gray-0;
+		border-radius: 28px;
+		margin-bottom: $gap-smallest;
 
 		&--error {
-			svg {
-				fill: $alert-red;
-			}
+			fill: $alert-red;
 		}
 
 		&--empty {
-			svg {
-				fill: $studio-woocommerce-purple-50;
-			}
+			fill: $studio-woocommerce-purple-50;
 		}
+	}
 
-		&__title {
-			font-size: 13px;
-			font-weight: 600;
-			line-height: 16px;
-			color: $gray-900;
-			margin-bottom: $gap-smallest;
-		}
+	&__content-title {
+		font-size: 13px;
+		font-weight: 600;
+		line-height: 16px;
+		color: $gray-900;
+		margin-bottom: $gap-smallest;
+	}
 
-		&__description {
-			color: $gray-700;
-			margin-bottom: $gap-smallest;
-		}
+	&__content-description {
+		color: $gray-700;
+		margin-bottom: $gap-smallest;
 	}
 
 	.woocommerce-marketing-campaign-logo {
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 5f7fe7405be..57dd3893ad9 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -26,76 +26,130 @@ export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
 	const { loading, data } = useCampaigns();
 
-	if ( loading ) {
-		return (
-			<Card>
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Campaigns', 'woocommerce' ) }
-					</CardHeaderTitle>
-				</CardHeader>
+	const getContent = () => {
+		if ( loading ) {
+			return (
 				<CardBody>
 					<CenteredSpinner />
 				</CardBody>
-			</Card>
-		);
-	}
+			);
+		}
 
-	if ( ! data ) {
-		return (
-			<Card className="woocommerce-marketing-campaigns-card">
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Campaigns', 'woocommerce' ) }
-					</CardHeaderTitle>
-				</CardHeader>
-				<CardBody className="woocommerce-marketing-campaigns-card-body woocommerce-marketing-campaigns-card-body--error">
-					<Icon icon={ cancelCircleFilled } size={ 32 } />
-					<div className="woocommerce-marketing-campaigns-card-body__title">
+		if ( ! data ) {
+			return (
+				<CardBody className="woocommerce-marketing-campaigns-card__content">
+					<Icon
+						className="woocommerce-marketing-campaigns-card__content-icon woocommerce-marketing-campaigns-card__content-icon--error"
+						icon={ cancelCircleFilled }
+						size={ 32 }
+					/>
+					<div className="woocommerce-marketing-campaigns-card__content-title">
 						{ __( 'An unexpected error occurred.', 'woocommerce' ) }
 					</div>
-					<div className="woocommerce-marketing-campaigns-card-body__description">
+					<div className="woocommerce-marketing-campaigns-card-body__content-description">
 						{ __(
 							'Please try again later. Check the logs if the problem persists. ',
 							'woocommerce'
 						) }
 					</div>
 				</CardBody>
-			</Card>
-		);
-	}
+			);
+		}
 
-	if ( data.length === 0 ) {
-		return (
-			<Card className="woocommerce-marketing-campaigns-card">
-				<CardHeader>
-					<CardHeaderTitle>
-						{ __( 'Campaigns', 'woocommerce' ) }
-					</CardHeaderTitle>
-				</CardHeader>
-				<CardBody className="woocommerce-marketing-campaigns-card-body woocommerce-marketing-campaigns-card-body--empty">
-					<Icon icon={ megaphone } size={ 32 } />
-					<div className="woocommerce-marketing-campaigns-card-body__title">
+		if ( data.length === 0 ) {
+			return (
+				<CardBody className="woocommerce-marketing-campaigns-card__content">
+					<Icon
+						className="woocommerce-marketing-campaigns-card__content-icon woocommerce-marketing-campaigns-card__content-icon--empty"
+						icon={ megaphone }
+						size={ 32 }
+					/>
+					<div className="woocommerce-marketing-campaigns-card__content-title">
 						{ __(
 							'Advertise with marketing campaigns',
 							'woocommerce'
 						) }
 					</div>
-					<div className="woocommerce-marketing-campaigns-card-body__description">
+					<div className="woocommerce-marketing-campaigns-card__content-description">
 						{ __(
 							'Easily create and manage marketing campaigns without leaving WooCommerce.',
 							'woocommerce'
 						) }
 					</div>
 				</CardBody>
-			</Card>
-		);
-	}
+			);
+		}
 
-	const perPage = 5;
-	const total = data.length;
-	const start = ( page - 1 ) * perPage;
-	const pagedData = data.slice( start, start + perPage );
+		const perPage = 5;
+		const total = data.length;
+		const start = ( page - 1 ) * perPage;
+		const pagedData = data.slice( start, start + perPage );
+
+		return (
+			<>
+				<Table
+					caption={ __( 'Campaigns', 'woocommerce' ) }
+					headers={ [
+						{
+							key: 'campaign',
+							label: __( 'Campaign', 'woocommerce' ),
+						},
+						{
+							key: 'cost',
+							label: __( 'Cost', 'woocommerce' ),
+							isNumeric: true,
+						},
+					] }
+					rows={ pagedData.map( ( el ) => {
+						return [
+							{
+								display: (
+									<Flex gap={ 4 }>
+										<FlexItem className="woocommerce-marketing-campaign-logo">
+											<img
+												src={ el.icon }
+												alt={ el.channelName }
+												width="16"
+												height="16"
+											/>
+										</FlexItem>
+										<FlexBlock>
+											<Flex direction="column" gap={ 1 }>
+												<FlexItem className="woocommerce-marketing-campaign-title">
+													<Link href={ el.manageUrl }>
+														{ el.title }
+													</Link>
+												</FlexItem>
+												{ el.description && (
+													<FlexItem className="woocommerce-marketing-campaign-description">
+														{ el.description }
+													</FlexItem>
+												) }
+											</Flex>
+										</FlexBlock>
+									</Flex>
+								),
+							},
+							{ display: el.cost },
+						];
+					} ) }
+				/>
+				{ total > perPage && (
+					<CardFooter className="woocommerce-marketing-campaigns-card-footer">
+						<Pagination
+							showPerPagePicker={ false }
+							perPage={ perPage }
+							page={ page }
+							total={ total }
+							onPageChange={ ( newPage: number ) => {
+								setPage( newPage );
+							} }
+						/>
+					</CardFooter>
+				) }
+			</>
+		);
+	};
 
 	return (
 		<Card className="woocommerce-marketing-campaigns-card">
@@ -104,66 +158,7 @@ export const Campaigns = () => {
 					{ __( 'Campaigns', 'woocommerce' ) }
 				</CardHeaderTitle>
 			</CardHeader>
-			<Table
-				caption={ __( 'Campaigns', 'woocommerce' ) }
-				headers={ [
-					{
-						key: 'campaign',
-						label: __( 'Campaign', 'woocommerce' ),
-					},
-					{
-						key: 'cost',
-						label: __( 'Cost', 'woocommerce' ),
-						isNumeric: true,
-					},
-				] }
-				rows={ pagedData.map( ( el ) => {
-					return [
-						{
-							display: (
-								<Flex gap={ 4 }>
-									<FlexItem className="woocommerce-marketing-campaign-logo">
-										<img
-											src={ el.icon }
-											alt={ el.channelName }
-											width="16"
-											height="16"
-										/>
-									</FlexItem>
-									<FlexBlock>
-										<Flex direction="column" gap={ 1 }>
-											<FlexItem className="woocommerce-marketing-campaign-title">
-												<Link href={ el.manageUrl }>
-													{ el.title }
-												</Link>
-											</FlexItem>
-											{ el.description && (
-												<FlexItem className="woocommerce-marketing-campaign-description">
-													{ el.description }
-												</FlexItem>
-											) }
-										</Flex>
-									</FlexBlock>
-								</Flex>
-							),
-						},
-						{ display: el.cost },
-					];
-				} ) }
-			/>
-			{ total > perPage && (
-				<CardFooter className="woocommerce-marketing-campaigns-card-footer">
-					<Pagination
-						showPerPagePicker={ false }
-						perPage={ perPage }
-						page={ page }
-						total={ total }
-						onPageChange={ ( newPage: number ) => {
-							setPage( newPage );
-						} }
-					/>
-				</CardFooter>
-			) }
+			{ getContent() }
 		</Card>
 	);
 };