From a3d95f23c2d4509672e4184ff9d8dacc78418fb7 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 24 Jan 2025 13:07:32 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20sub-components?=
 =?UTF-8?q?=20in=20overview=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Screens/Settings/Tabs/TabOverview.js      | 300 +++++++++---------
 1 file changed, 152 insertions(+), 148 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
index cb7314425..da4fa5012 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
@@ -22,8 +22,34 @@ import {
 } from '../../../ReusableComponents/Icons';
 
 const TabOverview = () => {
-	const [ isRefreshing, setIsRefreshing ] = useState( false );
+	return (
+		<div className="ppcp-r-tab-overview">
+			{ todosData.length > 0 && (
+				<SettingsCard
+					className="ppcp-r-tab-overview-todo"
+					title={ __(
+						'Things to do next',
+						'woocommerce-paypal-payments'
+					) }
+					description={ __(
+						'Complete these tasks to keep your store updated with the latest products and services.',
+						'woocommerce-paypal-payments'
+					) }
+				>
+					<TodoSettingsBlock todosData={ todosData } />
+				</SettingsCard>
+			) }
 
+			<OverviewFeatures />
+			<OverviewHelp />
+		</div>
+	);
+};
+
+export default TabOverview;
+
+const OverviewFeatures = () => {
+	const [ isRefreshing, setIsRefreshing ] = useState( false );
 	const { merchant, features: merchantFeatures } = useMerchantInfo();
 	const { refreshFeatureStatuses, setActiveModal } =
 		useDispatch( STORE_NAME );
@@ -49,6 +75,7 @@ const TabOverview = () => {
 
 	const refreshHandler = async () => {
 		setIsRefreshing( true );
+
 		try {
 			const result = await refreshFeatureStatuses();
 			if ( result && ! result.success ) {
@@ -87,156 +114,133 @@ const TabOverview = () => {
 	};
 
 	return (
-		<div className="ppcp-r-tab-overview">
-			{ todosData.length > 0 && (
-				<SettingsCard
-					className="ppcp-r-tab-overview-todo"
-					title={ __(
-						'Things to do next',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Complete these tasks to keep your store updated with the latest products and services.',
-						'woocommerce-paypal-payments'
-					) }
-				>
-					<TodoSettingsBlock todosData={ todosData } />
-				</SettingsCard>
-			) }
-
-			<SettingsCard
-				className="ppcp-r-tab-overview-features"
-				title={ __( 'Features', 'woocommerce-paypal-payments' ) }
-				description={
-					<>
-						<p>
-							{ __(
-								'Enable additional features and capabilities on your WooCommerce store.',
-								'woocommerce-paypal-payments'
-							) }
-						</p>
-						<p>
-							{ __(
-								'Click Refresh to update your current features after making changes.',
-								'woocommerce-paypal-payments'
-							) }
-						</p>
-						<Button
-							variant="tertiary"
-							onClick={ refreshHandler }
-							disabled={ isRefreshing }
-						>
-							<Icon icon={ reusableBlock } size={ 18 } />
-							{ isRefreshing
-								? __(
-										'Refreshing…',
-										'woocommerce-paypal-payments'
-								  )
-								: __(
-										'Refresh',
-										'woocommerce-paypal-payments'
-								  ) }
-						</Button>
-					</>
-				}
-				contentItems={ features.map( ( feature ) => {
-					return (
-						<FeatureSettingsBlock
-							key={ feature.id }
-							title={ feature.title }
-							description={ feature.description }
-							actionProps={ {
-								buttons: feature.buttons
-									.filter(
-										( button ) =>
-											! button.showWhen || // Learn more buttons
-											( feature.enabled &&
-												button.showWhen ===
-													'enabled' ) ||
-											( ! feature.enabled &&
-												button.showWhen === 'disabled' )
-									)
-									.map( ( button ) => ( {
-										...button,
-										url: button.urls
-											? merchant?.isSandbox
-												? button.urls.sandbox
-												: button.urls.live
-											: button.url,
-									} ) ),
-								isBusy: isRefreshing,
-								enabled: feature.enabled,
-								notes: feature.notes,
-								badge: feature.enabled
-									? {
-											text: __(
-												'Active',
-												'woocommerce-paypal-payments'
-											),
-											type: TITLE_BADGE_POSITIVE,
-									  }
-									: undefined,
-							} }
-						/>
-					);
-				} ) }
-			/>
-
-			<SettingsCard
-				className="ppcp-r-tab-overview-help"
-				title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
-				description={ __(
-					'Access detailed guides and responsive support to streamline setup and enhance your experience.',
-					'woocommerce-paypal-payments'
-				) }
-				contentItems={ [
+		<SettingsCard
+			className="ppcp-r-tab-overview-features"
+			title={ __( 'Features', 'woocommerce-paypal-payments' ) }
+			description={
+				<>
+					<p>
+						{ __(
+							'Enable additional features and capabilities on your WooCommerce store.',
+							'woocommerce-paypal-payments'
+						) }
+					</p>
+					<p>
+						{ __(
+							'Click Refresh to update your current features after making changes.',
+							'woocommerce-paypal-payments'
+						) }
+					</p>
+					<Button
+						variant="tertiary"
+						onClick={ refreshHandler }
+						disabled={ isRefreshing }
+					>
+						<Icon icon={ reusableBlock } size={ 18 } />
+						{ isRefreshing
+							? __( 'Refreshing…', 'woocommerce-paypal-payments' )
+							: __( 'Refresh', 'woocommerce-paypal-payments' ) }
+					</Button>
+				</>
+			}
+			contentItems={ features.map( ( feature ) => {
+				return (
 					<FeatureSettingsBlock
-						key="documentation"
-						title={ __(
-							'Documentation',
-							'woocommerce-paypal-payments'
-						) }
-						description={ __(
-							'Find detailed guides and resources to help you set up, manage, and optimize your PayPal integration.',
-							'woocommerce-paypal-payments'
-						) }
+						key={ feature.id }
+						title={ feature.title }
+						description={ feature.description }
 						actionProps={ {
-							buttons: [
-								{
-									type: 'tertiary',
-									text: __(
-										'View full documentation',
-										'woocommerce-paypal-payments'
-									),
-									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/ ',
-								},
-							],
+							buttons: feature.buttons
+								.filter(
+									( button ) =>
+										! button.showWhen || // Learn more buttons
+										( feature.enabled &&
+											button.showWhen === 'enabled' ) ||
+										( ! feature.enabled &&
+											button.showWhen === 'disabled' )
+								)
+								.map( ( button ) => ( {
+									...button,
+									url: button.urls
+										? merchant?.isSandbox
+											? button.urls.sandbox
+											: button.urls.live
+										: button.url,
+								} ) ),
+							isBusy: isRefreshing,
+							enabled: feature.enabled,
+							notes: feature.notes,
+							badge: feature.enabled
+								? {
+										text: __(
+											'Active',
+											'woocommerce-paypal-payments'
+										),
+										type: TITLE_BADGE_POSITIVE,
+								  }
+								: undefined,
 						} }
-					/>,
-					<FeatureSettingsBlock
-						key="support"
-						title={ __( 'Support', 'woocommerce-paypal-payments' ) }
-						description={ __(
-							'Need help? Access troubleshooting tips or contact our support team for personalized assistance.',
-							'woocommerce-paypal-payments'
-						) }
-						actionProps={ {
-							buttons: [
-								{
-									type: 'tertiary',
-									text: __(
-										'View support options',
-										'woocommerce-paypal-payments'
-									),
-									url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help ',
-								},
-							],
-						} }
-					/>,
-				] }
-			/>
-		</div>
+					/>
+				);
+			} ) }
+		/>
 	);
 };
 
-export default TabOverview;
+const OverviewHelp = () => {
+	return (
+		<SettingsCard
+			className="ppcp-r-tab-overview-help"
+			title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
+			description={ __(
+				'Access detailed guides and responsive support to streamline setup and enhance your experience.',
+				'woocommerce-paypal-payments'
+			) }
+			contentItems={ [
+				<FeatureSettingsBlock
+					key="documentation"
+					title={ __(
+						'Documentation',
+						'woocommerce-paypal-payments'
+					) }
+					description={ __(
+						'Find detailed guides and resources to help you set up, manage, and optimize your PayPal integration.',
+						'woocommerce-paypal-payments'
+					) }
+					actionProps={ {
+						buttons: [
+							{
+								type: 'tertiary',
+								text: __(
+									'View full documentation',
+									'woocommerce-paypal-payments'
+								),
+								url: 'https://woocommerce.com/document/woocommerce-paypal-payments/ ',
+							},
+						],
+					} }
+				/>,
+				<FeatureSettingsBlock
+					key="support"
+					title={ __( 'Support', 'woocommerce-paypal-payments' ) }
+					description={ __(
+						'Need help? Access troubleshooting tips or contact our support team for personalized assistance.',
+						'woocommerce-paypal-payments'
+					) }
+					actionProps={ {
+						buttons: [
+							{
+								type: 'tertiary',
+								text: __(
+									'View support options',
+									'woocommerce-paypal-payments'
+								),
+								url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help ',
+							},
+						],
+					} }
+				/>,
+			] }
+		/>
+	);
+};