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] 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;