From 7a223de4a7fb6fcc34c01c4d5806ce5b8f72acff Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Wed, 18 Dec 2024 11:01:40 +0100
Subject: [PATCH] Add Help Center section in the overview tab

---
 .../css/components/screens/_settings.scss     |  8 +--
 .../Screens/Overview/TabOverview.js           | 62 +++++++++++++++++--
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index b98a5f7e1..de3f778b2 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -11,10 +11,6 @@
 }
 
 // Todo List and Feature Items
-.ppcp-r-tab-overview-todo {
-	margin: 0 0 48px 0;
-}
-
 .ppcp-r-todo-item {
 	position: relative;
 	display: flex;
@@ -231,6 +227,10 @@
 }
 
 // Settings Card and Block Styles
+.ppcp-r-settings-card {
+	margin: 0 0 48px 0;
+}
+
 .ppcp-r-settings-card__content {
 	> .ppcp-r-settings-block {
 		&:not(:last-child) {
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
index 102426d0a..b9321fa69 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -72,16 +72,16 @@ const TabOverview = () => {
 				className="ppcp-r-tab-overview-features"
 				title={ __( 'Features', 'woocommerce-paypal-payments' ) }
 				description={
-					<div>
+					<>
 						<p>
 							{ __(
-								'Enable additional features…',
+								'Enable additional features and capabilities on your WooCommerce store.',
 								'woocommerce-paypal-payments'
 							) }
 						</p>
 						<p>
 							{ __(
-								'Click Refresh…',
+								'Click Refresh to update your current features after making changes.',
 								'woocommerce-paypal-payments'
 							) }
 						</p>
@@ -101,7 +101,7 @@ const TabOverview = () => {
 										'woocommerce-paypal-payments'
 								  ) }
 						</Button>
-					</div>
+					</>
 				}
 				contentItems={ features.map( ( feature ) => (
 					<FeatureSettingsBlock
@@ -125,6 +125,60 @@ const TabOverview = () => {
 					/>
 				) ) }
 			/>
+
+			<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: '#',
+								},
+							],
+						} }
+					/>,
+					<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: '#',
+								},
+							],
+						} }
+					/>,
+				] }
+			/>
 		</div>
 	);
 };