From 2d27f5e99d7eeaf979d311f77e03957c6695e587 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Wed, 11 Dec 2024 09:23:01 +0100
Subject: [PATCH 01/16] Add todo item icon

---
 .../css/components/screens/_settings.scss     |  8 ++++++
 .../SettingsBlocks/TodoSettingsBlock.js       | 26 +------------------
 2 files changed, 9 insertions(+), 25 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..1d8852152 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -66,6 +66,14 @@
 		@include font(13, 20, 400);
 		color: $color-blueberry;
 	}
+
+	&__icon {
+		border: 1px dashed #949494;
+		background: #fff;
+		border-radius: 50%;
+		width: 32px;
+		height: 32px;
+	}
 }
 
 .ppcp-r-feature-item {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index 4f9b01644..1378c72a5 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -1,6 +1,3 @@
-import { PayPalCheckbox, handleCheckboxState } from '../Fields';
-import data from '../../../utils/data';
-
 const TodoSettingsBlock = ( {
 	todos,
 	setTodos,
@@ -36,34 +33,13 @@ const TodoItem = ( props ) => {
 	return (
 		<div className="ppcp-r-todo-item">
 			<div className="ppcp-r-todo-item__inner">
-				<PayPalCheckbox
-					{ ...{
-						...props,
-						handleCheckboxState,
-					} }
-				/>
+				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
 					{ props.description }
 				</div>
 			</div>
-			<div
-				className="ppcp-r-todo-item__close"
-				onClick={ () =>
-					removeTodo(
-						props.value,
-						props.todosData,
-						props.changeTodos
-					)
-				}
-			>
-				{ data().getImage( 'icon-close.svg' ) }
-			</div>
 		</div>
 	);
 };
 
-const removeTodo = ( todoValue, todosData, changeTodos ) => {
-	changeTodos( todosData.filter( ( todo ) => todo.value !== todoValue ) );
-};
-
 export default TodoSettingsBlock;

From 3ec41d47aeef864d8a144c84de8bd4fb97ede29a Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 11:21:26 +0100
Subject: [PATCH 02/16] Clean up todo component properties

---
 .../css/components/screens/_settings.scss     | 13 +++-
 .../SettingsBlocks/TodoSettingsBlock.js       | 21 +-----
 .../Screens/Overview/TabOverview.js           | 64 +++++++++----------
 3 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
index cf1b48975..4315d3f1a 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss
@@ -18,6 +18,15 @@
 	gap: 18px;
 	width: 100%;
 
+	&:hover {
+		cursor: pointer;
+		.ppcp-r-todo-item__inner {
+			.ppcp-r-todo-item__description {
+				color: $color-text-text;
+			}
+		}
+	}
+
 	&:not(:last-child) {
 		border-bottom: 1px solid $color-gray-400;
 		padding-bottom: 16px;
@@ -67,8 +76,8 @@
 		border: 1px dashed #949494;
 		background: #fff;
 		border-radius: 50%;
-		width: 32px;
-		height: 32px;
+		width: 24px;
+		height: 24px;
 	}
 }
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index 1378c72a5..ea6119d5a 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -1,10 +1,4 @@
-const TodoSettingsBlock = ( {
-	todos,
-	setTodos,
-	todosData,
-	setTodosData,
-	className = '',
-} ) => {
+const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	if ( todosData.length === 0 ) {
 		return null;
 	}
@@ -14,16 +8,7 @@ const TodoSettingsBlock = ( {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData.map( ( todo ) => (
-				<TodoItem
-					name="todo_items"
-					key={ todo.value }
-					value={ todo.value }
-					currentValue={ todos }
-					changeCallback={ setTodos }
-					description={ todo.description }
-					changeTodos={ setTodosData }
-					todosData={ todosData }
-				/>
+				<TodoItem key={ todo.id } title={ todo.title } />
 			) ) }
 		</div>
 	);
@@ -35,7 +20,7 @@ const TodoItem = ( props ) => {
 			<div className="ppcp-r-todo-item__inner">
 				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
-					{ props.description }
+					{ props.title }
 				</div>
 			</div>
 		</div>
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 07e70efea..aaafd98b0 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -12,8 +12,7 @@ import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
 
 const TabOverview = () => {
-	const [ todos, setTodos ] = useState( [] );
-	const [ todosData, setTodosData ] = useState( todosDataDefault );
+	const [ todosData ] = useState( todosDataDefault );
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
 	const { merchant } = useMerchantInfo();
@@ -59,12 +58,7 @@ const TabOverview = () => {
 						'woocommerce-paypal-payments'
 					) }
 				>
-					<TodoSettingsBlock
-						todos={ todos }
-						setTodos={ setTodos }
-						todosData={ todosData }
-						setTodosData={ setTodosData }
-					/>
+					<TodoSettingsBlock todosData={ todosData } />
 				</SettingsCard>
 			) }
 
@@ -183,39 +177,45 @@ const TabOverview = () => {
 	);
 };
 
-// TODO: This list should be refactored into a separate module, maybe utils/thingsToDoNext.js
 const todosDataDefault = [
 	{
-		value: 'paypal_later_messaging',
+		id: 'enable_fastlane',
+		title: __( 'Enable Fastlane', 'woocommerce-paypal-payments' ),
 		description: __(
+			'Accelerate your guest checkout with Fastlane by PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+	},
+	{
+		id: 'enable_credit_debit_cards',
+		title: __(
+			'Enable Credit and Debit Cards on your checkout',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Credit and Debit Cards is now available for Blocks checkout pages.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+	},
+	{
+		id: 'enable_pay_later_messaging',
+		title: __(
 			'Enable Pay Later messaging',
 			'woocommerce-paypal-payments'
 		),
-	},
-	{
-		value: 'capture_authorized_payments',
 		description: __(
-			'Capture authorized payments',
-			'woocommerce-paypal-payments'
-		),
-	},
-	{
-		value: 'enable_google_pay',
-		description: __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
-	},
-	{
-		value: 'paypal_shortcut',
-		description: __(
-			'Add PayPal shortcut to the Cart page',
-			'woocommerce-paypal-payments'
-		),
-	},
-	{
-		value: 'advanced_cards',
-		description: __(
-			'Add Advanced Cards to Blocks Checkout',
+			'Show Pay Later messaging to boost conversion rate and increase cart size.',
 			'woocommerce-paypal-payments'
 		),
+		isCompleted: () => {
+			return false;
+		},
 	},
 ];
 

From bdb72d7ad0b0781b4f1ca1717f4f174b52ec9ab8 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 12:11:31 +0100
Subject: [PATCH 03/16] Add todo item click handler

---
 .../SettingsBlocks/TodoSettingsBlock.js                   | 8 ++++++--
 .../js/Components/Screens/Overview/TabOverview.js         | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index ea6119d5a..876b11702 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -8,7 +8,11 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData.map( ( todo ) => (
-				<TodoItem key={ todo.id } title={ todo.title } />
+				<TodoItem
+					key={ todo.id }
+					title={ todo.title }
+					onClick={ todo.onClick }
+				/>
 			) ) }
 		</div>
 	);
@@ -16,7 +20,7 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 
 const TodoItem = ( props ) => {
 	return (
-		<div className="ppcp-r-todo-item">
+		<div className="ppcp-r-todo-item" onClick={ props.onClick }>
 			<div className="ppcp-r-todo-item__inner">
 				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
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 aaafd98b0..2f9005f12 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -10,6 +10,7 @@ import FeatureSettingsBlock from '../../ReusableComponents/SettingsBlocks/Featur
 import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
 import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
+import { updateQueryString } from '../../../utils/navigation';
 
 const TabOverview = () => {
 	const [ todosData ] = useState( todosDataDefault );
@@ -188,6 +189,10 @@ const todosDataDefault = [
 		isCompleted: () => {
 			return false;
 		},
+		onClick: ( event ) => {
+			event.preventDefault();
+			updateQueryString( { panel: 'payment-methods' } );
+		},
 	},
 	{
 		id: 'enable_credit_debit_cards',

From acfdb3d163dcf49668afb7a5da5090e5a88c1ea2 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 15:54:34 +0100
Subject: [PATCH 04/16] Extract todos data to a file

---
 .../Screens/Overview/TabOverview.js           | 50 +------------------
 .../data/settings/tab-overview-todos-data.js  | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 48 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js

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 ff6a15cb5..7e258eec6 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -11,10 +11,10 @@ import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
 import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
 import Features from './TabSettingsElements/Blocks/Features';
-import { updateQueryString } from '../../../utils/navigation';
+import { todosData } from '../../../data/settings/tab-overview-todos-data';
 
 const TabOverview = () => {
-	const [ todosData ] = useState( todosDataDefault );
+	//const [ todosData ] = useState( todosDataDefault );
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
 	const { merchant } = useMerchantInfo();
@@ -205,50 +205,4 @@ const TabOverview = () => {
 	);
 };
 
-const todosDataDefault = [
-	{
-		id: 'enable_fastlane',
-		title: __( 'Enable Fastlane', 'woocommerce-paypal-payments' ),
-		description: __(
-			'Accelerate your guest checkout with Fastlane by PayPal.',
-			'woocommerce-paypal-payments'
-		),
-		isCompleted: () => {
-			return false;
-		},
-		onClick: ( event ) => {
-			event.preventDefault();
-			updateQueryString( { panel: 'payment-methods' } );
-		},
-	},
-	{
-		id: 'enable_credit_debit_cards',
-		title: __(
-			'Enable Credit and Debit Cards on your checkout',
-			'woocommerce-paypal-payments'
-		),
-		description: __(
-			'Credit and Debit Cards is now available for Blocks checkout pages.',
-			'woocommerce-paypal-payments'
-		),
-		isCompleted: () => {
-			return false;
-		},
-	},
-	{
-		id: 'enable_pay_later_messaging',
-		title: __(
-			'Enable Pay Later messaging',
-			'woocommerce-paypal-payments'
-		),
-		description: __(
-			'Show Pay Later messaging to boost conversion rate and increase cart size.',
-			'woocommerce-paypal-payments'
-		),
-		isCompleted: () => {
-			return false;
-		},
-	},
-];
-
 export default TabOverview;
diff --git a/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
new file mode 100644
index 000000000..a67255793
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
@@ -0,0 +1,50 @@
+import { __ } from '@wordpress/i18n';
+import { selectTab, TAB_IDS } from '../../utils/tabSelector';
+
+export const todosData = [
+	{
+		id: 'enable_fastlane',
+		title: __( 'Enable Fastlane', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Accelerate your guest checkout with Fastlane by PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' );
+		},
+	},
+	{
+		id: 'enable_credit_debit_cards',
+		title: __(
+			'Enable Credit and Debit Cards on your checkout',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Credit and Debit Cards is now available for Blocks checkout pages.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' );
+		},
+	},
+	{
+		id: 'enable_pay_later_messaging',
+		title: __(
+			'Enable Pay Later messaging',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Show Pay Later messaging to boost conversion rate and increase cart size.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+	},
+];

From 23077a14ee808f2dfcc980d52f87adf5d686fb88 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 16:49:38 +0100
Subject: [PATCH 05/16] Add prop id to content component

---
 .../SettingsBlocks/SettingsBlockElements.js   |  6 ++++--
 .../SettingsBlocks/TodoSettingsBlock.js       | 19 ++++++++++++-------
 .../ReusableComponents/SettingsCard.js        |  6 ++++--
 .../Screens/Overview/TabOverview.js           |  1 -
 .../data/settings/tab-overview-todos-data.js  |  3 +++
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
index 296c2c2ad..ec3ba31ae 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
@@ -33,8 +33,10 @@ export const Header = ( { children, className = '' } ) => (
 );
 
 // Card Elements
-export const Content = ( { children } ) => (
-	<div className="ppcp-r-settings-card__content">{ children }</div>
+export const Content = ( { children, id = '' } ) => (
+	<div id={ id } className="ppcp-r-settings-card__content">
+		{ children }
+	</div>
 );
 
 export const ContentWrapper = ( { children } ) => (
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index 876b11702..9ddf59196 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -7,13 +7,18 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 		<div
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
-			{ todosData.map( ( todo ) => (
-				<TodoItem
-					key={ todo.id }
-					title={ todo.title }
-					onClick={ todo.onClick }
-				/>
-			) ) }
+			{ todosData
+				.slice( 0, 5 )
+				.filter( ( todo ) => {
+					return ! todo.isCompleted();
+				} )
+				.map( ( todo ) => (
+					<TodoItem
+						key={ todo.id }
+						title={ todo.title }
+						onClick={ todo.onClick }
+					/>
+				) ) }
 		</div>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
index b7b6b8de4..a72253301 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
@@ -18,8 +18,10 @@ const SettingsCard = ( {
 		if ( contentItems ) {
 			return (
 				<ContentWrapper>
-					{ contentItems.map( ( item, index ) => (
-						<Content key={ index }>{ item }</Content>
+					{ contentItems.map( ( item ) => (
+						<Content key={ item.key } id={ item.key }>
+							{ item }
+						</Content>
 					) ) }
 				</ContentWrapper>
 			);
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 7e258eec6..bb353f410 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -14,7 +14,6 @@ import Features from './TabSettingsElements/Blocks/Features';
 import { todosData } from '../../../data/settings/tab-overview-todos-data';
 
 const TabOverview = () => {
-	//const [ todosData ] = useState( todosDataDefault );
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
 	const { merchant } = useMerchantInfo();
diff --git a/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
index a67255793..3b481b223 100644
--- a/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
+++ b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
@@ -46,5 +46,8 @@ export const todosData = [
 		isCompleted: () => {
 			return false;
 		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'pay_later_messaging' );
+		},
 	},
 ];

From 47b9cfbbdb70acf787590c8a46fa6008bc715f10 Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Fri, 3 Jan 2025 17:41:05 +0100
Subject: [PATCH 06/16] Add todos data

---
 .../SettingsBlocks/TodoSettingsBlock.js       |   2 +-
 .../data/settings/tab-overview-todos-data.js  | 117 ++++++++++++++++++
 2 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index 9ddf59196..3d9f83d46 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -8,7 +8,7 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData
-				.slice( 0, 5 )
+				.slice( 0, 12 )
 				.filter( ( todo ) => {
 					return ! todo.isCompleted();
 				} )
diff --git a/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
index 3b481b223..818f7180f 100644
--- a/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
+++ b/modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js
@@ -50,4 +50,121 @@ export const todosData = [
 			selectTab( TAB_IDS.OVERVIEW, 'pay_later_messaging' );
 		},
 	},
+	{
+		id: 'configure_paypal_subscription',
+		title: __(
+			'Configure a PayPal Subscription',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Connect a subscriptions-type product from WooCommerce with PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log(
+				'Take merchant to product list, filtered with subscription-type products'
+			);
+		},
+	},
+	{
+		id: 'register_domain_apple_pay',
+		title: __(
+			'Register Domain for Apple Pay',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'To enable Apple Pay, you must register your domain with PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'apple_pay' );
+		},
+	},
+	{
+		id: 'add_digital_wallets_to_account',
+		title: __(
+			'Add digital wallets to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Apple Pay & Google Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log(
+				'Take merchant to PayPal to enable Apple Pay & Google Pay'
+			);
+		},
+	},
+	{
+		id: 'add_apple_pay_to_account',
+		title: __(
+			'Add Apple Pay to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Apple Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log( 'Take merchant to PayPal to enable Apple Pay' );
+		},
+	},
+	{
+		id: 'add_google_pay_to_account',
+		title: __(
+			'Add Google Pay to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Google Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log( 'Take merchant to PayPal to enable Google Pay' );
+		},
+	},
+	{
+		id: 'enable_apple_pay',
+		title: __( 'Enable Apple Pay', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Allow your buyers to check out via Apple Pay.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'apple_pay' );
+		},
+	},
+	{
+		id: 'enable_google_pay',
+		title: __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Allow your buyers to check out via Google Pay.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'google_pay' );
+		},
+	},
 ];

From bb84fe4346f4d2a866b3b6e1ca5e7d9553cfd86d Mon Sep 17 00:00:00 2001
From: Emili Castells Guasch <e.castells@inpsyde.com>
Date: Tue, 7 Jan 2025 12:18:24 +0100
Subject: [PATCH 07/16] Show 5 todo items

---
 .../ReusableComponents/SettingsBlocks/TodoSettingsBlock.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
index 3d9f83d46..9ddf59196 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/TodoSettingsBlock.js
@@ -8,7 +8,7 @@ const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData
-				.slice( 0, 12 )
+				.slice( 0, 5 )
 				.filter( ( todo ) => {
 					return ! todo.isCompleted();
 				} )

From 883e78c949a5be1f236278c284c602cd5b691d80 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Wed, 8 Jan 2025 17:12:11 +0400
Subject: [PATCH 08/16] Create the component for live account connection

---
 .../TabSettingsElements/Blocks/LiveAccount.js | 206 ++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js
new file mode 100644
index 000000000..078554e24
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js
@@ -0,0 +1,206 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import {
+	AccordionSettingsBlock,
+	ButtonSettingsBlock,
+	RadioSettingsBlock,
+	ToggleSettingsBlock,
+	InputSettingsBlock,
+} from '../../../../ReusableComponents/SettingsBlocks';
+import TitleBadge, {
+	TITLE_BADGE_POSITIVE,
+} from '../../../../ReusableComponents/TitleBadge';
+import ConnectionInfo, {
+	connectionStatusDataDefault,
+} from '../../../../ReusableComponents/ConnectionInfo';
+
+const LiveAccount = ( { settings, updateFormValue } ) => {
+	const className = settings.sandboxConnected
+		? 'ppcp-r-settings-block--sandbox-connected'
+		: 'ppcp-r-settings-block--sandbox-disconnected';
+
+	return (
+		<AccordionSettingsBlock
+			title={ __( 'Live Payments', 'woocommerce-paypal-payments' ) }
+			className={ className }
+			description={
+				settings.sandboxConnected
+					? __(
+							'Your site is currently configured in Sandbox mode to test payments. When you are ready, launch your site and receive live payments via PayPal.',
+							'woocommerce-paypal-payments'
+					  )
+					: __(
+							'Your site is currently configured to receive live payments via PayPal.',
+							'woocommerce-paypal-payments'
+					  )
+			}
+			actionProps={ {
+				callback: updateFormValue,
+				key: 'payNowExperience',
+				value: settings.payNowExperience,
+			} }
+		>
+			{ ! settings.sandboxConnected && (
+				<ButtonSettingsBlock
+					title={ __(
+						'Live account credentials',
+						'woocommerce-paypal-payments'
+					) }
+					description={ __(
+						'Your account is live. To connect the sandbox account, turn off live mode and connect your sandbox account.',
+						'woocommerce-paypal-payments'
+					) }
+					tag={
+						<TitleBadge
+							type={ TITLE_BADGE_POSITIVE }
+							text={ __(
+								'Connected',
+								'woocommerce-paypal-payments'
+							) }
+						/>
+					}
+				>
+					<div className="ppcp-r-settings-block--sandbox">
+						<ToggleSettingsBlock
+							title={ __(
+								'Enable Production mode',
+								'woocommerce-paypal-payments'
+							) }
+							actionProps={ {
+								callback: updateFormValue,
+								key: 'liveAccountEnabled',
+								value: settings.liveAccountEnabled,
+							} }
+						/>
+						<ConnectionInfo
+							connectionStatusDataDefault={
+								connectionStatusDataDefault
+							}
+						/>
+						<Button
+							variant="secondary"
+							onClick={ () =>
+								updateFormValue( 'liveAccountConnected', false )
+							}
+						>
+							{ __(
+								'Disconnect Live Account',
+								'woocommerce-paypal-payments'
+							) }
+						</Button>
+					</div>
+				</ButtonSettingsBlock>
+			) }
+			{ settings.sandboxConnected && (
+				<RadioSettingsBlock
+					title={ __(
+						'Connect Live Account',
+						'woocommerce-paypal-payments'
+					) }
+					description={ __(
+						'Connect a live PayPal account to launch your site and receive live payments via PayPal. PayPal will guide you through the setup process.',
+						'woocommerce-paypal-payments'
+					) }
+					options={ [
+						{
+							id: 'production_mode',
+							value: 'production_mode',
+							label: __(
+								'Production Mode',
+								'woocommerce-paypal-payments'
+							),
+							description: __(
+								'Activate Production mode to connect your live account and receive live payments via PayPal. Stay connected in Sandbox mode to continue testing payments before going live.',
+								'woocommerce-paypal-payments'
+							),
+							additionalContent: (
+								<Button
+									variant="primary"
+									onClick={ () =>
+										global.ppcpSettings.startOnboarding()
+									}
+								>
+									{ __(
+										'Set up and connect live PayPal Account',
+										'woocommerce-paypal-payments'
+									) }
+								</Button>
+							),
+						},
+						{
+							id: 'manual_connect',
+							value: 'manual_connect',
+							label: __(
+								'Manual Connect',
+								'woocommerce-paypal-payments'
+							),
+							description: sprintf(
+								__(
+									'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
+									'woocommerce-paypal-payments'
+								),
+								'#'
+							),
+							additionalContent: (
+								<>
+									<InputSettingsBlock
+										title={ __(
+											'Live Account Client ID',
+											'woocommerce-paypal-payments'
+										) }
+										actionProps={ {
+											value: settings.liveAccountClientId, // Add this to settings if not present
+											callback: updateFormValue,
+											key: 'liveAccountClientId',
+											placeholder: __(
+												'Enter Client ID',
+												'woocommerce-paypal-payments'
+											),
+										} }
+									/>
+									<InputSettingsBlock
+										title={ __(
+											'Live Account Secret Key',
+											'woocommerce-paypal-payments'
+										) }
+										actionProps={ {
+											value: settings.liveAccountSecretKey, // Add this to settings if not present
+											callback: updateFormValue,
+											key: 'liveAccountSecretKey',
+											placeholder: __(
+												'Enter Secret Key',
+												'woocommerce-paypal-payments'
+											),
+										} }
+									/>
+									<Button
+										variant="primary"
+										onClick={ () =>
+											updateFormValue(
+												'liveAccountManuallyConnected',
+												true
+											)
+										} // Add this handler if needed
+									>
+										{ __(
+											'Connect Account',
+											'woocommerce-paypal-payments'
+										) }
+									</Button>
+								</>
+							),
+						},
+					] }
+					actionProps={ {
+						name: 'paypal_connect_sandbox',
+						key: 'liveAccountMode',
+						currentValue: settings.liveAccountMode,
+						callback: updateFormValue,
+					} }
+				/>
+			) }
+		</AccordionSettingsBlock>
+	);
+};
+
+export default LiveAccount;

From c04f8badded309a022fe331af3eebfc974937fee Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Wed, 8 Jan 2025 17:12:49 +0400
Subject: [PATCH 09/16] Allow button to hve an empty value

---
 .../ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index 6bc1521ee..eabdde934 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -18,7 +18,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => (
 						: undefined
 				}
 			>
-				{ props.actionProps.value }
+				{ props?.actionProps?.value }
 			</Button>
 		</Action>
 	</SettingsBlock>

From c94239132211c0d82d638f6b04d7d08512a45c88 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Wed, 8 Jan 2025 17:12:58 +0400
Subject: [PATCH 10/16] Adjust the expert settings to add live account
 component

---
 .../Overview/TabSettingsElements/ExpertSettings.js        | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
index fd949b8c2..e58a1ff1c 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
@@ -5,6 +5,7 @@ import {
 	ContentWrapper,
 } from '../../../ReusableComponents/SettingsBlocks';
 import Sandbox from './Blocks/Sandbox';
+import LiveAccount from './Blocks/LiveAccount';
 import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
 import PaypalSettings from './Blocks/PaypalSettings';
 import OtherSettings from './Blocks/OtherSettings';
@@ -33,6 +34,13 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
 					/>
 				</Content>
 
+				<Content>
+					<LiveAccount
+						updateFormValue={ updateFormValue }
+						settings={ settings }
+					/>
+				</Content>
+
 				<Content>
 					<Troubleshooting
 						updateFormValue={ updateFormValue }

From 02baae890fc4d248362f8f5d7d9a6707dbb3a747 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Thu, 9 Jan 2025 00:16:12 +0100
Subject: [PATCH 11/16] Consolidate payment method modals into unified
 config-driven system

---
 .../SettingsBlocks/PaymentMethodItemBlock.js  |   6 +-
 .../SettingsBlocks/PaymentMethodsBlock.js     |  13 +-
 .../Screens/Overview/Modals/Modal.js          |  51 -----
 .../Screens/Overview/Modals/ModalAcdc.js      |  62 ------
 .../Screens/Overview/Modals/ModalFastlane.js  |  63 ------
 .../Screens/Overview/Modals/ModalPayPal.js    |  76 --------
 .../Screens/Overview/TabPaymentMethods.js     |  35 +++-
 .../TabSettingsElements/Blocks/Modal.js       | 131 +++++++++++++
 .../Blocks/PaymentMethods.js                  | 179 ++++++++++++++++++
 9 files changed, 353 insertions(+), 263 deletions(-)
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalFastlane.js
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalPayPal.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaymentMethods.js

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
index c2a7c5a70..cf26431a3 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -2,7 +2,7 @@ import { ToggleControl } from '@wordpress/components';
 import SettingsBlock from './SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
-import { MODAL_CONFIG } from '../../Screens/Overview/Modals/Modal';
+import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
 
 const PaymentMethodItemBlock = ( {
 	id,
@@ -13,8 +13,8 @@ const PaymentMethodItemBlock = ( {
 	onSelect,
 	isSelected,
 } ) => {
-	// Only show settings icon if this method has a modal configured
-	const hasModal = Boolean( MODAL_CONFIG[ id ] );
+	// Only show settings icon if this method has fields configured
+	const hasModal = hasSettings( id );
 
 	return (
 		<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
index 1caae6ce6..17f610660 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -7,13 +7,16 @@ const PaymentMethodsBlock = ( {
 	className = '',
 	onTriggerModal,
 } ) => {
-	const [ selectedMethod, setSelectedMethod ] = useState( null );
+	const [ selectedMethods, setSelectedMethods ] = useState( {} );
 
 	const handleSelect = useCallback( ( methodId, isSelected ) => {
-		setSelectedMethod( isSelected ? methodId : null );
+		setSelectedMethods( ( prev ) => ( {
+			...prev,
+			[ methodId ]: isSelected,
+		} ) );
 	}, [] );
 
-	if ( paymentMethods.length === 0 ) {
+	if ( ! paymentMethods?.length ) {
 		return null;
 	}
 
@@ -25,7 +28,9 @@ const PaymentMethodsBlock = ( {
 				<PaymentMethodItemBlock
 					key={ paymentMethod.id }
 					{ ...paymentMethod }
-					isSelected={ selectedMethod === paymentMethod.id }
+					isSelected={ Boolean(
+						selectedMethods[ paymentMethod.id ]
+					) }
 					onSelect={ ( checked ) =>
 						handleSelect( paymentMethod.id, checked )
 					}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js
deleted file mode 100644
index a0c401d44..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/Modal.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import ModalPayPal from './ModalPayPal';
-import ModalFastlane from './ModalFastlane';
-import ModalAcdc from './ModalAcdc';
-import { useActiveModal } from '../../../../data/common/hooks';
-
-export const MODAL_CONFIG = {
-	paypal: {
-		component: ModalPayPal,
-		icon: 'payment-method-paypal-big',
-		title: __( 'PayPal', 'woocommerce-paypal-payments' ),
-	},
-	fastlane: {
-		component: ModalFastlane,
-		icon: 'payment-method-fastlane-big',
-		title: __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
-		size: 'small',
-	},
-	advanced_credit_and_debit_card_payments: {
-		component: ModalAcdc,
-		icon: 'payment-method-cards-big',
-		title: __(
-			'Advanced Credit and Debit Card Payments',
-			'woocommerce-paypal-payments'
-		),
-	},
-};
-
-const Modal = () => {
-	const { activeModal, setActiveModal } = useActiveModal();
-
-	const handleCloseModal = () => {
-		setActiveModal( '' );
-	};
-
-	if ( ! activeModal || ! MODAL_CONFIG[ activeModal ] ) {
-		return null;
-	}
-
-	const { component: ModalComponent, ...modalProps } =
-		MODAL_CONFIG[ activeModal ];
-
-	return (
-		<ModalComponent
-			setModalIsVisible={ handleCloseModal }
-			{ ...modalProps }
-		/>
-	);
-};
-
-export default Modal;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js
deleted file mode 100644
index 3d924dcbe..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { RadioControl } from '@wordpress/components';
-
-const ModalAcdc = ( { setModalIsVisible } ) => {
-	const [ threeDSecure, setThreeDSecure ] = useState( 'no-3d-secure' );
-	const acdcOptions = [
-		{
-			label: __( 'No 3D Secure', 'woocommerce-paypal-payments' ),
-			value: 'no-3d-secure',
-		},
-		{
-			label: __( 'Only when required', 'woocommerce-paypal-payments' ),
-			value: 'only-required-3d-secure',
-		},
-		{
-			label: __(
-				'Always require 3D Secure',
-				'woocommerce-paypal-payments'
-			),
-			value: 'always-3d-secure',
-		},
-	];
-
-	return (
-		<PaymentMethodModal
-			setModalIsVisible={ setModalIsVisible }
-			icon="payment-method-cards-big"
-			title={ __(
-				'Advanced Credit and Debit Card Payments',
-				'woocommerce-paypal-payments'
-			) }
-		>
-			<strong className="ppcp-r-modal__content-title">
-				{ __( '3D Secure', 'woocommerce-paypal-payments' ) }
-			</strong>
-			<p className="ppcp-r-modal__description">
-				{ __(
-					'Authenticate cardholders through their card issuers to reduce fraud and improve transaction security. Successful 3D Secure authentication can shift liability for fraudulent chargebacks to the card issuer.',
-					'woocommerce-paypal-payments'
-				) }
-			</p>
-			<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--acdc">
-				<RadioControl
-					onChange={ setThreeDSecure }
-					selected={ threeDSecure }
-					options={ acdcOptions }
-				/>
-
-				<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
-					<Button variant="primary">
-						{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
-					</Button>
-				</div>
-			</div>
-		</PaymentMethodModal>
-	);
-};
-
-export default ModalAcdc;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalFastlane.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalFastlane.js
deleted file mode 100644
index 466f3b57f..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalFastlane.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
-import { __ } from '@wordpress/i18n';
-import { Button, ToggleControl } from '@wordpress/components';
-import { PayPalRdb } from '../../../ReusableComponents/Fields';
-import { useState } from '@wordpress/element';
-
-const ModalFastlane = ( { setModalIsVisible } ) => {
-	const [ fastlaneSettings, setFastlaneSettings ] = useState( {
-		cardholderName: false,
-		displayWatermark: false,
-	} );
-
-	const updateFormValue = ( key, value ) => {
-		setFastlaneSettings( { ...fastlaneSettings, [ key ]: value } );
-	};
-
-	return (
-		<PaymentMethodModal
-			setModalIsVisible={ setModalIsVisible }
-			icon="payment-method-fastlane-big"
-			title={ __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ) }
-			size="small"
-		>
-			<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--fastlane">
-				<div className="ppcp-r-modal__field-row">
-					<ToggleControl
-						className="ppcp-r-modal__inverted-toggle-control"
-						checked={ fastlaneSettings.cardholderName }
-						onChange={ ( newValue ) =>
-							updateFormValue( 'cardholderName', newValue )
-						}
-						label={ __(
-							'Display cardholder name',
-							'woocommerce-paypal-payments'
-						) }
-						id="ppcp-r-fastlane-settings-cardholder"
-					/>
-				</div>
-				<div className="ppcp-r-modal__field-row">
-					<ToggleControl
-						className="ppcp-r-modal__inverted-toggle-control"
-						checked={ fastlaneSettings.displayWatermark }
-						onChange={ ( newValue ) =>
-							updateFormValue( 'displayWatermark', newValue )
-						}
-						label={ __(
-							'Display Fastlane Watermark',
-							'woocommerce-paypal-payments'
-						) }
-						id="ppcp-r-fastlane-settings-watermark"
-					/>
-				</div>
-				<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
-					<Button variant="primary">
-						{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
-					</Button>
-				</div>
-			</div>
-		</PaymentMethodModal>
-	);
-};
-
-export default ModalFastlane;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalPayPal.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalPayPal.js
deleted file mode 100644
index 780f7d9f1..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalPayPal.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
-import { __ } from '@wordpress/i18n';
-import { ToggleControl, Button, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-const ModalPayPal = ( { setModalIsVisible } ) => {
-	const [ paypalSettings, setPaypalSettings ] = useState( {
-		checkoutPageTitle: 'PayPal',
-		checkoutPageDescription: 'Pay via PayPal',
-		showLogo: false,
-	} );
-
-	const updateFormValue = ( key, value ) => {
-		setPaypalSettings( { ...paypalSettings, [ key ]: value } );
-	};
-
-	return (
-		<PaymentMethodModal
-			setModalIsVisible={ setModalIsVisible }
-			icon="payment-method-paypal-big"
-			title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
-		>
-			<div className="ppcp-r-modal__field-rows">
-				<div className="ppcp-r-modal__field-row">
-					<TextControl
-						className="ppcp-r-vertical-text-control"
-						label={ __(
-							'Checkout page title',
-							'woocommerce-paypal-payments'
-						) }
-						value={ paypalSettings.checkoutPageTitle }
-						onChange={ ( newValue ) =>
-							updateFormValue( 'checkoutPageTitle', newValue )
-						}
-					/>
-				</div>
-				<div className="ppcp-r-modal__field-row">
-					<TextControl
-						className="ppcp-r-vertical-text-control"
-						label={ __(
-							'Checkout page description',
-							'woocommerce-paypal-payments'
-						) }
-						value={ paypalSettings.checkoutPageDescription }
-						onChange={ ( newValue ) =>
-							updateFormValue(
-								'checkoutPageDescription',
-								newValue
-							)
-						}
-					/>
-				</div>
-				<div className="ppcp-r-modal__field-row">
-					<ToggleControl
-						label={ __(
-							'Show logo',
-							'woocommerce-paypal-payments'
-						) }
-						id="ppcp-r-paypal-settings-show-logo"
-						checked={ paypalSettings.showLogo }
-						onChange={ ( newValue ) => {
-							updateFormValue( 'showLogo', newValue );
-						} }
-					/>
-				</div>
-				<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
-					<Button variant="primary">
-						{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
-					</Button>
-				</div>
-			</div>
-		</PaymentMethodModal>
-	);
-};
-
-export default ModalPayPal;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js
index d9b0da327..e16109146 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js
@@ -5,11 +5,11 @@ import SettingsCard from '../../ReusableComponents/SettingsCard';
 import PaymentMethodsBlock from '../../ReusableComponents/SettingsBlocks/PaymentMethodsBlock';
 import { CommonHooks } from '../../../data';
 import { useActiveModal } from '../../../data/common/hooks';
-import Modal from './Modals/Modal';
+import Modal from './TabSettingsElements/Blocks/Modal';
 
 const TabPaymentMethods = () => {
 	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
-	const { setActiveModal } = useActiveModal();
+	const { activeModal, setActiveModal } = useActiveModal();
 
 	const filteredPaymentMethods = useMemo( () => {
 		const contextProps = { storeCountry, storeCurrency };
@@ -30,6 +30,20 @@ const TabPaymentMethods = () => {
 		};
 	}, [ storeCountry, storeCurrency ] );
 
+	const getActiveMethod = () => {
+		if ( ! activeModal ) {
+			return null;
+		}
+
+		const allMethods = [
+			...filteredPaymentMethods.payPalCheckout,
+			...filteredPaymentMethods.onlineCardPayments,
+			...filteredPaymentMethods.alternative,
+		];
+
+		return allMethods.find( ( method ) => method.id === activeModal );
+	};
+
 	return (
 		<div className="ppcp-r-payment-methods">
 			<SettingsCard
@@ -84,7 +98,20 @@ const TabPaymentMethods = () => {
 				/>
 			</SettingsCard>
 
-			<Modal />
+			{ activeModal && (
+				<Modal
+					method={ getActiveMethod() }
+					setModalIsVisible={ () => setActiveModal( null ) }
+					onSave={ ( methodId, settings ) => {
+						console.log(
+							'Saving settings for:',
+							methodId,
+							settings
+						);
+						setActiveModal( null );
+					} }
+				/>
+			) }
 		</div>
 	);
 };
@@ -162,7 +189,7 @@ const paymentMethodsOnlineCardPayments = [
 		icon: 'payment-method-fastlane',
 	},
 	{
-		id: 'apply_pay',
+		id: 'apple_pay',
 		title: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
 		description: __(
 			'Allow customers to pay via their Apple Pay digital wallet.',
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js
new file mode 100644
index 000000000..c8be1c761
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Modal.js
@@ -0,0 +1,131 @@
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	TextControl,
+	ToggleControl,
+	RadioControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import PaymentMethodModal from '../../../../ReusableComponents/PaymentMethodModal';
+import { getPaymentMethods } from './PaymentMethods';
+
+const Modal = ( { method, setModalIsVisible, onSave } ) => {
+	const [ settings, setSettings ] = useState( () => {
+		if ( ! method?.id ) {
+			return {};
+		}
+
+		const methodConfig = getPaymentMethods( method );
+		if ( ! methodConfig?.fields ) {
+			return {};
+		}
+
+		const initialSettings = {};
+		Object.entries( methodConfig.fields ).forEach( ( [ key, field ] ) => {
+			initialSettings[ key ] = field.default;
+		} );
+		return initialSettings;
+	} );
+
+	if ( ! method?.id ) {
+		return null;
+	}
+
+	const methodConfig = getPaymentMethods( method );
+	if ( ! methodConfig?.fields ) {
+		return null;
+	}
+
+	const renderField = ( key, field ) => {
+		switch ( field.type ) {
+			case 'text':
+				return (
+					<div className="ppcp-r-modal__field-row">
+						<TextControl
+							className="ppcp-r-vertical-text-control"
+							label={ field.label }
+							value={ settings[ key ] }
+							onChange={ ( value ) =>
+								setSettings( ( prev ) => ( {
+									...prev,
+									[ key ]: value,
+								} ) )
+							}
+						/>
+					</div>
+				);
+
+			case 'toggle':
+				return (
+					<div className="ppcp-r-modal__field-row">
+						<ToggleControl
+							label={ field.label }
+							checked={ settings[ key ] }
+							onChange={ ( value ) =>
+								setSettings( ( prev ) => ( {
+									...prev,
+									[ key ]: value,
+								} ) )
+							}
+						/>
+					</div>
+				);
+
+			case 'radio':
+				return (
+					<>
+						<strong className="ppcp-r-modal__content-title">
+							{ field.label }
+						</strong>
+						{ field.description && (
+							<p className="ppcp-r-modal__description">
+								{ field.description }
+							</p>
+						) }
+						<div className="ppcp-r-modal__field-row">
+							<RadioControl
+								selected={ settings[ key ] }
+								options={ field.options }
+								onChange={ ( value ) =>
+									setSettings( ( prev ) => ( {
+										...prev,
+										[ key ]: value,
+									} ) )
+								}
+							/>
+						</div>
+					</>
+				);
+
+			default:
+				return null;
+		}
+	};
+
+	const handleSave = () => {
+		onSave?.( method.id, settings );
+		setModalIsVisible( false );
+	};
+
+	return (
+		<PaymentMethodModal
+			setModalIsVisible={ setModalIsVisible }
+			icon={ methodConfig.icon }
+			title={ method.title }
+		>
+			<div className="ppcp-r-modal__field-rows">
+				{ Object.entries( methodConfig.fields ).map(
+					( [ key, field ] ) => renderField( key, field )
+				) }
+
+				<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
+					<Button variant="primary" onClick={ handleSave }>
+						{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
+					</Button>
+				</div>
+			</div>
+		</PaymentMethodModal>
+	);
+};
+
+export default Modal;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaymentMethods.js
new file mode 100644
index 000000000..21ae3f028
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaymentMethods.js
@@ -0,0 +1,179 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+const createStandardFields = ( methodId, defaultTitle ) => ( {
+	checkoutPageTitle: {
+		type: 'text',
+		default: defaultTitle,
+		label: __( 'Checkout page title', 'woocommerce-paypal-payments' ),
+	},
+	checkoutPageDescription: {
+		type: 'text',
+		default: sprintf(
+			/* translators: %s: payment method title */
+			__( 'Pay with %s', 'woocommerce-paypal-payments' ),
+			defaultTitle
+		),
+		label: __( 'Checkout page description', 'woocommerce-paypal-payments' ),
+	},
+} );
+
+const paymentMethods = {
+	// PayPal Checkout methods
+	paypal: {
+		fields: {
+			...createStandardFields( 'paypal', 'PayPal' ),
+			showLogo: {
+				type: 'toggle',
+				default: false,
+				label: __( 'Show logo', 'woocommerce-paypal-payments' ),
+			},
+		},
+	},
+	venmo: {
+		fields: createStandardFields( 'venmo', 'Venmo' ),
+	},
+	paypal_credit: {
+		fields: createStandardFields( 'paypal_credit', 'PayPal Credit' ),
+	},
+	credit_and_debit_card_payments: {
+		fields: createStandardFields(
+			'credit_and_debit_card_payments',
+			__(
+				'Credit and debit card payments',
+				'woocommerce-paypal-payments'
+			)
+		),
+	},
+
+	// Online Card Payments
+	advanced_credit_and_debit_card_payments: {
+		fields: {
+			...createStandardFields(
+				'advanced_credit_and_debit_card_payments',
+				__(
+					'Advanced Credit and Debit Card Payments',
+					'woocommerce-paypal-payments'
+				)
+			),
+			threeDSecure: {
+				type: 'radio',
+				default: 'no-3d-secure',
+				label: __( '3D Secure', 'woocommerce-paypal-payments' ),
+				description: __(
+					'Authenticate cardholders through their card issuers to reduce fraud and improve transaction security. Successful 3D Secure authentication can shift liability for fraudulent chargebacks to the card issuer.',
+					'woocommerce-paypal-payments'
+				),
+				options: [
+					{
+						label: __(
+							'No 3D Secure',
+							'woocommerce-paypal-payments'
+						),
+						value: 'no-3d-secure',
+					},
+					{
+						label: __(
+							'Only when required',
+							'woocommerce-paypal-payments'
+						),
+						value: 'only-required-3d-secure',
+					},
+					{
+						label: __(
+							'Always require 3D Secure',
+							'woocommerce-paypal-payments'
+						),
+						value: 'always-3d-secure',
+					},
+				],
+			},
+		},
+	},
+	fastlane: {
+		fields: {
+			...createStandardFields( 'fastlane', 'Fastlane by PayPal' ),
+			cardholderName: {
+				type: 'toggle',
+				default: false,
+				label: __(
+					'Display cardholder name',
+					'woocommerce-paypal-payments'
+				),
+			},
+			displayWatermark: {
+				type: 'toggle',
+				default: false,
+				label: __(
+					'Display Fastlane Watermark',
+					'woocommerce-paypal-payments'
+				),
+			},
+		},
+	},
+
+	// Digital Wallets
+	apple_pay: {
+		fields: createStandardFields( 'apple_pay', 'Apple Pay' ),
+	},
+	google_pay: {
+		fields: createStandardFields( 'google_pay', 'Google Pay' ),
+	},
+
+	// Alternative Payment Methods
+	bancontact: {
+		fields: createStandardFields( 'bancontact', 'Bancontact' ),
+	},
+	ideal: {
+		fields: createStandardFields( 'ideal', 'iDEAL' ),
+	},
+	eps: {
+		fields: createStandardFields( 'eps', 'eps' ),
+	},
+	blik: {
+		fields: createStandardFields( 'blik', 'BLIK' ),
+	},
+	mybank: {
+		fields: createStandardFields( 'mybank', 'MyBank' ),
+	},
+	przelewy24: {
+		fields: createStandardFields( 'przelewy24', 'Przelewy24' ),
+	},
+	trustly: {
+		fields: createStandardFields( 'trustly', 'Trustly' ),
+	},
+	multibanco: {
+		fields: createStandardFields( 'multibanco', 'Multibanco' ),
+	},
+	pui: {
+		fields: createStandardFields( 'pui', 'Pay upon Invoice' ),
+	},
+	oxxo: {
+		fields: createStandardFields( 'oxxo', 'OXXO' ),
+	},
+};
+
+// Function to get configuration for a payment method
+export const getPaymentMethods = ( method ) => {
+	if ( ! method?.id ) {
+		return null;
+	}
+
+	// If method has specific config, return it
+	if ( paymentMethods[ method.id ] ) {
+		return {
+			...paymentMethods[ method.id ],
+			icon: method.icon,
+		};
+	}
+
+	// Return standard config for new payment methods
+	return {
+		fields: createStandardFields( method.id, method.title ),
+		icon: method.icon,
+	};
+};
+
+// Function to check if a method has settings defined
+export const hasSettings = ( methodId ) => {
+	return Boolean( methodId && paymentMethods[ methodId ] );
+};

From bbe2dcf5d0eccb21eadefb0a4b5e38bb77f4e978 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Thu, 9 Jan 2025 11:16:34 +0100
Subject: [PATCH 12/16] Revert "woorelease: Product version bump update"

This reverts commit e0f2dcbc9fae5ff291b53fadc8d599ca92be1c1a.
---
 changelog.txt | 2 +-
 readme.txt    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelog.txt b/changelog.txt
index 2e1d3420c..1efeb16a3 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,6 @@
 *** Changelog ***
 
-= 2.9.6 - 2025-01-06 =
+= 2.9.6 - XXXX-XX-XX =
 * Fix - NOT_ENABLED_TO_VAULT_PAYMENT_SOURCE on PayPal transactions when using ACDC Vaulting without PayPal Vault approval #2955
 * Fix - Express buttons for Free Trial Subscription products on Block Cart/Checkout trigger CANNOT_BE_ZERO_OR_NEGATIVE error #2872
 * Fix - String translations not applied to Card Fields on Block Checkout #2934
diff --git a/readme.txt b/readme.txt
index fc2caf2ed..c35d7f244 100644
--- a/readme.txt
+++ b/readme.txt
@@ -179,7 +179,7 @@ If you encounter issues with the PayPal buttons not appearing after an update, p
 
 == Changelog ==
 
-= 2.9.6 - 2025-01-06 =
+= 2.9.6 - XXXX-XX-XX =
 * Fix - NOT_ENABLED_TO_VAULT_PAYMENT_SOURCE on PayPal transactions when using ACDC Vaulting without PayPal Vault approval #2955
 * Fix - Express buttons for Free Trial Subscription products on Block Cart/Checkout trigger CANNOT_BE_ZERO_OR_NEGATIVE error #2872
 * Fix - String translations not applied to Card Fields on Block Checkout #2934

From 3813191f0df2064e200bfcfa3314d412dd66db74 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Thu, 9 Jan 2025 15:25:46 +0400
Subject: [PATCH 13/16] Create the single component for connection details

---
 .../Blocks/ConnectionDetails.js               |  41 ++++
 .../TabSettingsElements/Blocks/Sandbox.js     | 202 ------------------
 2 files changed, 41 insertions(+), 202 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
new file mode 100644
index 000000000..b1b5fcb4d
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
@@ -0,0 +1,41 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import {
+	AccordionSettingsBlock,
+	RadioSettingsBlock,
+	InputSettingsBlock,
+} from '../../../../ReusableComponents/SettingsBlocks';
+import {
+	sandboxData,
+	productionData,
+} from '../../../../../data/settings/connection-details-data';
+
+const ConnectionDetails = ( { settings, updateFormValue } ) => {
+	const isSandbox = settings.sandboxConnected;
+
+	const modeConfig = isSandbox
+		? productionData( { settings, updateFormValue } )
+		: sandboxData( { settings, updateFormValue } );
+
+	const modeKey = isSandbox ? 'productionMode' : 'sandboxMode';
+
+	return (
+		<AccordionSettingsBlock
+			title={ modeConfig.title }
+			description={ modeConfig.description }
+		>
+			<RadioSettingsBlock
+				title={ modeConfig.connectTitle }
+				description={ modeConfig.connectDescription }
+				options={ modeConfig.options }
+				actionProps={ {
+					key: modeKey,
+					currentValue: settings[ modeKey ],
+					callback: updateFormValue,
+				} }
+			/>
+		</AccordionSettingsBlock>
+	);
+};
+
+export default ConnectionDetails;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js
deleted file mode 100644
index 93a4a7d0d..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Sandbox.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import {
-	AccordionSettingsBlock,
-	ButtonSettingsBlock,
-	RadioSettingsBlock,
-	ToggleSettingsBlock,
-	InputSettingsBlock,
-} from '../../../../ReusableComponents/SettingsBlocks';
-import TitleBadge, {
-	TITLE_BADGE_POSITIVE,
-} from '../../../../ReusableComponents/TitleBadge';
-import ConnectionInfo, {
-	connectionStatusDataDefault,
-} from '../../../../ReusableComponents/ConnectionInfo';
-
-const Sandbox = ( { settings, updateFormValue } ) => {
-	const className = settings.sandboxConnected
-		? 'ppcp-r-settings-block--sandbox-connected'
-		: 'ppcp-r-settings-block--sandbox-disconnected';
-
-	return (
-		<AccordionSettingsBlock
-			title={ __( 'Sandbox', 'woocommerce-paypal-payments' ) }
-			className={ className }
-			description={ __(
-				"Test your site in PayPal's Sandbox environment.",
-				'woocommerce-paypal-payments'
-			) }
-			actionProps={ {
-				callback: updateFormValue,
-				key: 'payNowExperience',
-				value: settings.payNowExperience,
-			} }
-		>
-			{ settings.sandboxConnected && (
-				<ButtonSettingsBlock
-					title={ __(
-						'Sandbox account credentials',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Your account is connected to sandbox, no real charging takes place. To accept live payments, turn off sandbox mode and connect your live PayPal account.',
-						'woocommerce-paypal-payments'
-					) }
-					tag={
-						<TitleBadge
-							type={ TITLE_BADGE_POSITIVE }
-							text={ __(
-								'Connected',
-								'woocommerce-paypal-payments'
-							) }
-						/>
-					}
-				>
-					<div className="ppcp-r-settings-block--sandbox">
-						<ToggleSettingsBlock
-							title={ __(
-								'Enable sandbox mode',
-								'woocommerce-paypal-payments'
-							) }
-							actionProps={ {
-								callback: updateFormValue,
-								key: 'sandboxEnabled',
-								value: settings.sandboxEnabled,
-							} }
-						/>
-						<ConnectionInfo
-							connectionStatusDataDefault={
-								connectionStatusDataDefault
-							}
-						/>
-						<Button
-							variant="secondary"
-							onClick={ () =>
-								updateFormValue( 'sandboxConnected', false )
-							}
-						>
-							{ __(
-								'Disconnect Sandbox',
-								'woocommerce-paypal-payments'
-							) }
-						</Button>
-					</div>
-				</ButtonSettingsBlock>
-			) }
-			{ ! settings.sandboxConnected && (
-				<RadioSettingsBlock
-					title={ __(
-						'Connect Sandbox Account',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
-						'woocommerce-paypal-payments'
-					) }
-					options={ [
-						{
-							id: 'sandbox_mode',
-							value: 'sandbox_mode',
-							label: __(
-								'Sandbox Mode',
-								'woocommerce-paypal-payments'
-							),
-							description: __(
-								'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
-								'woocommerce-paypal-payments'
-							),
-							additionalContent: (
-								<Button
-									variant="primary"
-									onClick={ () =>
-										updateFormValue(
-											'sandboxConnected',
-											true
-										)
-									}
-								>
-									{ __(
-										'Connect Sandbox Account',
-										'woocommerce-paypal-payments'
-									) }
-								</Button>
-							),
-						},
-						{
-							id: 'manual_connect',
-							value: 'manual_connect',
-							label: __(
-								'Manual Connect',
-								'woocommerce-paypal-payments'
-							),
-							description: sprintf(
-								__(
-									'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
-									'woocommerce-paypal-payments'
-								),
-								'#'
-							),
-							additionalContent: (
-								<>
-									<InputSettingsBlock
-										title={ __(
-											'Sandbox Client ID',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.sandboxClientId, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'sandboxClientId',
-											placeholder: __(
-												'Enter Client ID',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<InputSettingsBlock
-										title={ __(
-											'Sandbox Secret Key',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.sandboxSecretKey, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'sandboxSecretKey',
-											placeholder: __(
-												'Enter Secret Key',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<Button
-										variant="primary"
-										onClick={ () =>
-											updateFormValue(
-												'sandboxManuallyConnected',
-												true
-											)
-										} // Add this handler if needed
-									>
-										{ __(
-											'Connect Account',
-											'woocommerce-paypal-payments'
-										) }
-									</Button>
-								</>
-							),
-						},
-					] }
-					actionProps={ {
-						name: 'paypal_connect_sandbox',
-						key: 'sandboxMode',
-						currentValue: settings.sandboxMode,
-						callback: updateFormValue,
-					} }
-				/>
-			) }
-		</AccordionSettingsBlock>
-	);
-};
-
-export default Sandbox;

From 4dea2155b460436119351ad1add8c781421d9481 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Thu, 9 Jan 2025 15:25:59 +0400
Subject: [PATCH 14/16] Remove Live account

---
 .../TabSettingsElements/Blocks/LiveAccount.js | 206 ------------------
 1 file changed, 206 deletions(-)
 delete mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js
deleted file mode 100644
index 078554e24..000000000
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/LiveAccount.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import {
-	AccordionSettingsBlock,
-	ButtonSettingsBlock,
-	RadioSettingsBlock,
-	ToggleSettingsBlock,
-	InputSettingsBlock,
-} from '../../../../ReusableComponents/SettingsBlocks';
-import TitleBadge, {
-	TITLE_BADGE_POSITIVE,
-} from '../../../../ReusableComponents/TitleBadge';
-import ConnectionInfo, {
-	connectionStatusDataDefault,
-} from '../../../../ReusableComponents/ConnectionInfo';
-
-const LiveAccount = ( { settings, updateFormValue } ) => {
-	const className = settings.sandboxConnected
-		? 'ppcp-r-settings-block--sandbox-connected'
-		: 'ppcp-r-settings-block--sandbox-disconnected';
-
-	return (
-		<AccordionSettingsBlock
-			title={ __( 'Live Payments', 'woocommerce-paypal-payments' ) }
-			className={ className }
-			description={
-				settings.sandboxConnected
-					? __(
-							'Your site is currently configured in Sandbox mode to test payments. When you are ready, launch your site and receive live payments via PayPal.',
-							'woocommerce-paypal-payments'
-					  )
-					: __(
-							'Your site is currently configured to receive live payments via PayPal.',
-							'woocommerce-paypal-payments'
-					  )
-			}
-			actionProps={ {
-				callback: updateFormValue,
-				key: 'payNowExperience',
-				value: settings.payNowExperience,
-			} }
-		>
-			{ ! settings.sandboxConnected && (
-				<ButtonSettingsBlock
-					title={ __(
-						'Live account credentials',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Your account is live. To connect the sandbox account, turn off live mode and connect your sandbox account.',
-						'woocommerce-paypal-payments'
-					) }
-					tag={
-						<TitleBadge
-							type={ TITLE_BADGE_POSITIVE }
-							text={ __(
-								'Connected',
-								'woocommerce-paypal-payments'
-							) }
-						/>
-					}
-				>
-					<div className="ppcp-r-settings-block--sandbox">
-						<ToggleSettingsBlock
-							title={ __(
-								'Enable Production mode',
-								'woocommerce-paypal-payments'
-							) }
-							actionProps={ {
-								callback: updateFormValue,
-								key: 'liveAccountEnabled',
-								value: settings.liveAccountEnabled,
-							} }
-						/>
-						<ConnectionInfo
-							connectionStatusDataDefault={
-								connectionStatusDataDefault
-							}
-						/>
-						<Button
-							variant="secondary"
-							onClick={ () =>
-								updateFormValue( 'liveAccountConnected', false )
-							}
-						>
-							{ __(
-								'Disconnect Live Account',
-								'woocommerce-paypal-payments'
-							) }
-						</Button>
-					</div>
-				</ButtonSettingsBlock>
-			) }
-			{ settings.sandboxConnected && (
-				<RadioSettingsBlock
-					title={ __(
-						'Connect Live Account',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Connect a live PayPal account to launch your site and receive live payments via PayPal. PayPal will guide you through the setup process.',
-						'woocommerce-paypal-payments'
-					) }
-					options={ [
-						{
-							id: 'production_mode',
-							value: 'production_mode',
-							label: __(
-								'Production Mode',
-								'woocommerce-paypal-payments'
-							),
-							description: __(
-								'Activate Production mode to connect your live account and receive live payments via PayPal. Stay connected in Sandbox mode to continue testing payments before going live.',
-								'woocommerce-paypal-payments'
-							),
-							additionalContent: (
-								<Button
-									variant="primary"
-									onClick={ () =>
-										global.ppcpSettings.startOnboarding()
-									}
-								>
-									{ __(
-										'Set up and connect live PayPal Account',
-										'woocommerce-paypal-payments'
-									) }
-								</Button>
-							),
-						},
-						{
-							id: 'manual_connect',
-							value: 'manual_connect',
-							label: __(
-								'Manual Connect',
-								'woocommerce-paypal-payments'
-							),
-							description: sprintf(
-								__(
-									'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
-									'woocommerce-paypal-payments'
-								),
-								'#'
-							),
-							additionalContent: (
-								<>
-									<InputSettingsBlock
-										title={ __(
-											'Live Account Client ID',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.liveAccountClientId, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'liveAccountClientId',
-											placeholder: __(
-												'Enter Client ID',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<InputSettingsBlock
-										title={ __(
-											'Live Account Secret Key',
-											'woocommerce-paypal-payments'
-										) }
-										actionProps={ {
-											value: settings.liveAccountSecretKey, // Add this to settings if not present
-											callback: updateFormValue,
-											key: 'liveAccountSecretKey',
-											placeholder: __(
-												'Enter Secret Key',
-												'woocommerce-paypal-payments'
-											),
-										} }
-									/>
-									<Button
-										variant="primary"
-										onClick={ () =>
-											updateFormValue(
-												'liveAccountManuallyConnected',
-												true
-											)
-										} // Add this handler if needed
-									>
-										{ __(
-											'Connect Account',
-											'woocommerce-paypal-payments'
-										) }
-									</Button>
-								</>
-							),
-						},
-					] }
-					actionProps={ {
-						name: 'paypal_connect_sandbox',
-						key: 'liveAccountMode',
-						currentValue: settings.liveAccountMode,
-						callback: updateFormValue,
-					} }
-				/>
-			) }
-		</AccordionSettingsBlock>
-	);
-};
-
-export default LiveAccount;

From 8b42cafe383101bde5d402b65c4e07d5dae207f2 Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Thu, 9 Jan 2025 15:26:19 +0400
Subject: [PATCH 15/16] Create helper for generating connection details

---
 .../data/settings/connection-details-data.js  | 178 ++++++++++++++++++
 1 file changed, 178 insertions(+)
 create mode 100644 modules/ppcp-settings/resources/js/data/settings/connection-details-data.js

diff --git a/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js b/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js
new file mode 100644
index 000000000..65eeb62c2
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/data/settings/connection-details-data.js
@@ -0,0 +1,178 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { InputSettingsBlock } from '../../Components/ReusableComponents/SettingsBlocks';
+import { Button } from '@wordpress/components';
+
+/**
+ * Generates options for the environment mode settings.
+ *
+ * @param {Object}   config          - Configuration for the mode.
+ * @param {Object}   settings        - Current settings.
+ * @param {Function} updateFormValue - Callback to update settings.
+ * @return {Array} Options array.
+ */
+const generateOptions = ( config, settings, updateFormValue ) => [
+	{
+		id: `${ config.mode }_mode`,
+		value: `${ config.mode }_mode`,
+		label: config.labelTitle,
+		description: config.labelDescription,
+		additionalContent: (
+			<Button
+				variant="primary"
+				onClick={ () => {
+					updateFormValue( `${ config.mode }Connected`, true );
+					if ( config.mode === 'production' ) {
+						global.ppcpSettings.startOnboarding();
+					}
+				} }
+			>
+				{ config.buttonText }
+			</Button>
+		),
+	},
+	{
+		id: 'manual_connect',
+		value: 'manual_connect',
+		label: __( 'Manual Connect', 'woocommerce-paypal-payments' ),
+		description: sprintf(
+			__(
+				'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
+				'woocommerce-paypal-payments'
+			),
+			'#'
+		),
+		additionalContent: (
+			<>
+				<InputSettingsBlock
+					title={ config.clientIdTitle }
+					actionProps={ {
+						value: settings[ `${ config.mode }ClientId` ],
+						callback: updateFormValue,
+						key: `${ config.mode }ClientId`,
+						placeholder: __(
+							'Enter Client ID',
+							'woocommerce-paypal-payments'
+						),
+					} }
+				/>
+				<InputSettingsBlock
+					title={ config.secretKeyTitle }
+					actionProps={ {
+						value: settings[ `${ config.mode }SecretKey` ],
+						callback: updateFormValue,
+						key: `${ config.mode }SecretKey`,
+						placeholder: __(
+							'Enter Secret Key',
+							'woocommerce-paypal-payments'
+						),
+					} }
+				/>
+				<Button
+					variant="primary"
+					onClick={ () =>
+						updateFormValue(
+							`${ config.mode }ManuallyConnected`,
+							true
+						)
+					}
+				>
+					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
+				</Button>
+			</>
+		),
+	},
+];
+
+/**
+ * Generates data for a given mode (sandbox or production).
+ *
+ * @param {Object}   config          - Configuration for the mode.
+ * @param {Object}   settings        - Current settings.
+ * @param {Function} updateFormValue - Callback to update settings.
+ * @return {Object} Mode configuration.
+ */
+const generateModeData = ( config, settings, updateFormValue ) => ( {
+	title: config.title,
+	description: config.description,
+	connectTitle: __(
+		`Connect ${ config.label } Account`,
+		'woocommerce-paypal-payments'
+	),
+	connectDescription: config.connectDescription,
+	options: generateOptions( config, settings, updateFormValue ),
+} );
+
+export const sandboxData = ( { settings = {}, updateFormValue = () => {} } ) =>
+	generateModeData(
+		{
+			mode: 'sandbox',
+			label: 'Sandbox',
+			title: __( 'Sandbox', 'woocommerce-paypal-payments' ),
+			description: __(
+				"Test your site in PayPal's Sandbox environment.",
+				'woocommerce-paypal-payments'
+			),
+			connectDescription: __(
+				'Connect a PayPal Sandbox account in order to test your website. Transactions made will not result in actual money movement. Do not fulfil orders completed in Sandbox mode.',
+				'woocommerce-paypal-payments'
+			),
+			labelTitle: __( 'Sandbox Mode', 'woocommerce-paypal-payments' ),
+			labelDescription: __(
+				'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
+				'woocommerce-paypal-payments'
+			),
+			buttonText: __(
+				'Connect Sandbox Account',
+				'woocommerce-paypal-payments'
+			),
+			clientIdTitle: __(
+				'Sandbox Client ID',
+				'woocommerce-paypal-payments'
+			),
+			secretKeyTitle: __(
+				'Sandbox Secret Key',
+				'woocommerce-paypal-payments'
+			),
+		},
+		settings,
+		updateFormValue
+	);
+
+export const productionData = ( {
+	settings = {},
+	updateFormValue = () => {},
+} ) =>
+	generateModeData(
+		{
+			mode: 'production',
+			label: 'Live',
+			title: __( 'Live Payments', 'woocommerce-paypal-payments' ),
+			description: __(
+				'Your site is currently configured in Sandbox mode to test payments. When you are ready, launch your site and receive live payments via PayPal.',
+				'woocommerce-paypal-payments'
+			),
+			connectDescription: __(
+				'Connect a live PayPal account to launch your site and receive live payments via PayPal. PayPal will guide you through the setup process.',
+				'woocommerce-paypal-payments'
+			),
+			labelTitle: __( 'Production Mode', 'woocommerce-paypal-payments' ),
+			labelDescription: __(
+				'Activate Production mode to connect your live account and receive live payments via PayPal. Stay connected in Sandbox mode to continue testing payments before going live.',
+				'woocommerce-paypal-payments'
+			),
+			buttonText: __(
+				'Set up and connect live PayPal Account',
+				'woocommerce-paypal-payments'
+			),
+			clientIdTitle: __(
+				'Live Account Client ID',
+				'woocommerce-paypal-payments'
+			),
+			secretKeyTitle: __(
+				'Live Account Secret Key',
+				'woocommerce-paypal-payments'
+			),
+		},
+		settings,
+		updateFormValue
+	);

From 753b21c59cfeabafdb77b6a2fd17f55d00660c0d Mon Sep 17 00:00:00 2001
From: Narek Zakarian <narekzakarian@gmail.com>
Date: Thu, 9 Jan 2025 15:26:27 +0400
Subject: [PATCH 16/16] Use the new component

---
 .../Overview/TabSettingsElements/ExpertSettings.js   | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
index e58a1ff1c..0bc2914f3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ExpertSettings.js
@@ -4,8 +4,7 @@ import {
 	Content,
 	ContentWrapper,
 } from '../../../ReusableComponents/SettingsBlocks';
-import Sandbox from './Blocks/Sandbox';
-import LiveAccount from './Blocks/LiveAccount';
+import ConnectionDetails from './Blocks/ConnectionDetails';
 import Troubleshooting from './Blocks/Troubleshooting/Troubleshooting';
 import PaypalSettings from './Blocks/PaypalSettings';
 import OtherSettings from './Blocks/OtherSettings';
@@ -28,14 +27,7 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
 		>
 			<ContentWrapper>
 				<Content>
-					<Sandbox
-						updateFormValue={ updateFormValue }
-						settings={ settings }
-					/>
-				</Content>
-
-				<Content>
-					<LiveAccount
+					<ConnectionDetails
 						updateFormValue={ updateFormValue }
 						settings={ settings }
 					/>