Finish settings page

2025-08-30 05:00:51 +08:00 · 2024-11-13 17:29:11 +01:00 · 2024-11-13 17:29:11 +01:00 · b23a9a0fab
commit b23a9a0fab
parent e72cc8a213
20 changed files with 692 additions and 433 deletions
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js
@ -45,21 +45,25 @@ export const PayPalRdbWithContent = ( props ) => {
 	}

 	return (
-		<div className={ className }>
-			<PayPalRdb { ...props } />
-			<div className="ppcp-r__radio-content">
-				<label htmlFor={ props?.id }>{ props.label }</label>
-				{ props.description && (
-					<p className="ppcp-r__radio-description">
-						{ props.description }
-					</p>
-				) }
-				{ props.children && (
+		<div className="ppcp-r__radio-outer-wrapper">
+			<div className={ className }>
+				<PayPalRdb { ...props } />
+				<div className="ppcp-r__radio-content">
+					<label htmlFor={ props?.id }>{ props.label }</label>
+					{ props.description && (
+						<p className="ppcp-r__radio-description">
+							{ props.description }
+						</p>
+					) }
+				</div>
+			</div>
+			{ props?.toggleAdditionalContent &&
+				props.children &&
+				props.value === props.currentValue && (
 					<div className="ppcp-r__radio-content-additional">
 						{ props.children }
 					</div>
 				) }
-			</div>
 		</div>
 	);
 };
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
@ -1,6 +1,7 @@
-import { Button, ToggleControl, SelectControl } from '@wordpress/components';
+import { Button, ToggleControl, TextControl } from '@wordpress/components';
 import data from '../../utils/data';
 import { useState } from '@wordpress/element';
+import Select, { components } from 'react-select';

 export const SETTINGS_BLOCK_TYPE_EMPTY = 'empty';
 export const SETTINGS_BLOCK_TYPE_TOGGLE = 'toggle';
@ -65,72 +66,65 @@ const SettingsBlock = ( {
 						dangerouslySetInnerHTML={ { __html: description } }
 					/>
 				</div>
-				<div className="ppcp-r-settings-block__action">
-					{ actionProps?.type === SETTINGS_BLOCK_TYPE_TOGGLE && (
-						<ToggleControl
-							className="ppcp-r-settings-block__toggle"
-							__nextHasNoMarginBottom={ true }
-							checked={ actionProps?.value }
-							onChange={ ( newValue ) =>
-								actionProps?.callback(
-									actionProps?.key,
-									newValue
-								)
-							}
-						/>
-					) }
-					{ actionProps?.type === SETTINGS_BLOCK_TYPE_INPUT && (
-						<div>
-							<input
-								placeholder={ actionProps?.placeholder }
-								type="text"
-								value={ actionProps?.value }
-								onInput={ ( e ) =>
+				{ actionProps?.type !== SETTINGS_BLOCK_TYPE_EMPTY && (
+					<div className="ppcp-r-settings-block__action">
+						{ actionProps?.type === SETTINGS_BLOCK_TYPE_TOGGLE && (
+							<ToggleControl
+								className="ppcp-r-settings-block__toggle"
+								__nextHasNoMarginBottom={ true }
+								checked={ actionProps?.value }
+								onChange={ ( newValue ) =>
 									actionProps?.callback(
 										actionProps?.key,
-										e.target.value
+										newValue
 									)
 								}
 							/>
-						</div>
-					) }
-					{ actionProps?.type === SETTINGS_BLOCK_TYPE_BUTTON && (
-						<Button
-							variant={ actionProps.buttonType }
-							onClick={
-								actionProps?.callback
-									? () => actionProps.callback()
-									: undefined
-							}
-						>
-							{ actionProps.value }
-						</Button>
-					) }
-					{ actionProps?.type ===
-						SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT && (
-						<div className="ppcp-r-settings-block__toggle-content">
-							{ data().getImage( 'icon-arrow-down.svg' ) }
-						</div>
-					) }
-					{ actionProps?.type === SETTINGS_BLOCK_TYPE_SELECT && (
-						<SelectControl
-							className={
-								actionProps.value === '' &&
-								'ppcp-r-select-no-value-assigned'
-							}
-							value={ actionProps.value }
-							options={ actionProps?.options }
-							multiple={ true }
-							onChange={ ( newValue ) =>
-								actionProps?.callback &&
-								actionProps.callback(
-									actionProps?.key,
-									newValue
-								)
-							}
-						/>
-					) }
-				</div>
+						) }
+						{ actionProps?.type === SETTINGS_BLOCK_TYPE_INPUT && (
+							<>
+								<TextControl
+									className="ppcp-r-vertical-text-control"
+									placeholder={ actionProps?.placeholder }
+									value={ actionProps?.value }
+									onChange={ ( newValue ) =>
+										actionProps?.callback(
+											actionProps?.key,
+											newValue
+										)
+									}
+								/>
+							</>
+						) }
+						{ actionProps?.type === SETTINGS_BLOCK_TYPE_BUTTON && (
+							<Button
+								variant={ actionProps.buttonType }
+								onClick={
+									actionProps?.callback
+										? () => actionProps.callback()
+										: undefined
+								}
+							>
+								{ actionProps.value }
+							</Button>
+						) }
+						{ actionProps?.type ===
+							SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT && (
+							<div className="ppcp-r-settings-block__toggle-content">
+								{ data().getImage( 'icon-arrow-down.svg' ) }
+							</div>
+						) }
+						{ actionProps?.type === SETTINGS_BLOCK_TYPE_SELECT && (
+							<Select
+								className="ppcp-r-multiselect"
+								classNamePrefix="ppcp-r"
+								isMulti={ actionProps?.isMulti }
+								options={ actionProps?.options }
+								components={ { DropdownIndicator } }
+							/>
+						) }
+					</div>
+				) }
 			</div>
 			{ children && toggleContentVisible && (
 				<div className="ppcp-r-settings-block__content">
@ -141,4 +135,12 @@ const SettingsBlock = ( {
 	);
 };

+const DropdownIndicator = ( props ) => {
+	return (
+		<components.DropdownIndicator { ...props }>
+			{ data().getImage( 'icon-arrow-down.svg' ) }
+		</components.DropdownIndicator>
+	);
+};
+
 export default SettingsBlock;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js
@ -1,6 +1,6 @@
 import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, Button } from '@wordpress/components';
+import { ToggleControl, Button, TextControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';

 const ModalPayPal = ( { setModalIsVisible } ) => {
@ -23,39 +23,30 @@ const ModalPayPal = ( { setModalIsVisible } ) => {
 		>
 			<div className="ppcp-r-modal__field-rows">
 				<div className="ppcp-r-modal__field-row">
-					<label htmlFor="ppcp-r-paypal-settings-checkout-title">
-						{ __(
+					<TextControl
+						className="ppcp-r-vertical-text-control"
+						label={ __(
 							'Checkout page title',
 							'woocommerce-paypal-payments'
 						) }
-					</label>
-					<input
-						type="text"
-						id="ppcp-r-paypal-settings-checkout-title"
 						value={ paypalSettings.checkoutPageTitle }
-						onInput={ ( e ) =>
-							updateFormValue(
-								'checkoutPageTitle',
-								e.target.value
-							)
+						onChange={ ( newValue ) =>
+							updateFormValue( 'checkoutPageTitle', newValue )
 						}
 					/>
 				</div>
 				<div className="ppcp-r-modal__field-row">
-					<label htmlFor="ppcp-r-paypal-settings-checkout-page-description">
-						{ __(
+					<TextControl
+						className="ppcp-r-vertical-text-control"
+						label={ __(
 							'Checkout page description',
 							'woocommerce-paypal-payments'
 						) }
-					</label>
-					<input
-						type="text"
-						id="ppcp-r-paypal-settings-checkout-page-description"
 						value={ paypalSettings.checkoutPageDescription }
-						onInput={ ( e ) =>
+						onChange={ ( newValue ) =>
 							updateFormValue(
 								'checkoutPageDescription',
-								e.target.value
+								newValue
 							)
 						}
 					/>
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettings.js
@ -11,7 +11,11 @@ const TabSettings = () => {
 		saveCreditCardAndDebitCard: false,
 		payNowExperience: false,
 		sandboxAccountCredentials: false,
-		enableSandbox: false,
+		sandboxMode: null,
+		sandboxEnabled: false,
+		sandboxClientId: '',
+		sandboxSecretKey: '',
+		sandboxConnected: false,
 		logging: false,
 		subtotalMismatchFallback: null,
 		brandName: '',
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/OtherSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/OtherSettings.js
@ -0,0 +1,66 @@
+import SettingsBlock, {
+	SETTINGS_BLOCK_STYLING_TYPE_PRIMARY,
+	SETTINGS_BLOCK_STYLING_TYPE_SECONDARY,
+	SETTINGS_BLOCK_TYPE_SELECT,
+	SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT,
+} from '../../../../ReusableComponents/SettingsBlock';
+import { __ } from '@wordpress/i18n';
+
+const OtherSettings = ( { settings, updateFormValue } ) => {
+	return (
+		<SettingsBlock
+			title={ __(
+				'Other payment method settings',
+				'woocommerce-paypal-payments'
+			) }
+			description={ __(
+				'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets',
+				'woocommerce-paypal-payments'
+			) }
+			style={ SETTINGS_BLOCK_STYLING_TYPE_PRIMARY }
+			actionProps={ {
+				type: SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT,
+			} }
+		>
+			<SettingsBlock
+				title={ __(
+					'Disable specific credit cards',
+					'woocommerce-paypal-payments'
+				) }
+				description={ __(
+					'If left blank, PayPal and other buttons will present in the user’s detected language. Enter a language here to force all buttons to display in that language.',
+					'woocommerce-paypal-payments'
+				) }
+				style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
+				actionProps={ {
+					type: SETTINGS_BLOCK_TYPE_SELECT,
+					options: creditCardExamples,
+					value: settings.buttonLanguage,
+					callback: updateFormValue,
+					key: 'buttonLanguage',
+					isMulti: true,
+				} }
+			/>
+		</SettingsBlock>
+	);
+};
+
+const creditCardExamples = [
+	{ value: '', label: __( 'Select', 'woocommerce-paypal-payments' ) },
+	{
+		value: 'mastercard',
+		label: __( 'Mastercard', 'woocommerce-paypal-payments' ),
+	},
+	{ value: 'visa', label: __( 'Visa', 'woocommerce-paypal-payments' ) },
+	{
+		value: 'amex',
+		label: __( 'American Express', 'woocommerce-paypal-payments' ),
+	},
+	{ value: 'jcb', label: __( 'JCB', 'woocommerce-paypal-payments' ) },
+	{
+		value: 'diners-club',
+		label: __( 'Diners Club', 'woocommerce-paypal-payments' ),
+	},
+];
+
+export default OtherSettings;
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/PaypalSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/PaypalSettings.js
@ -13,6 +13,7 @@ import { PayPalRdbWithContent } from '../../../../ReusableComponents/Fields';
 const PaypalSettings = ( { updateFormValue, settings } ) => {
 	return (
 		<SettingsBlock
+			className="ppcp-r-settings-block--settings"
 			title={ __( 'PayPal Settings', 'woocommerce-paypal-payments' ) }
 			description={ __(
 				'Modify the PayPal checkout experience',
@ -40,7 +41,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					type: SETTINGS_BLOCK_TYPE_EMPTY,
 				} }
 			>
-				<div className="ppcp-r-settings-block__mismatch-wrapper">
+				<div className="ppcp-r-settings-block--mismatch-wrapper ppcp-r-settings-block--expert-rdb">
 					<PayPalRdbWithContent
 						id="add_a_correction"
 						name="paypal_settings_mismatch"
@ -151,7 +152,7 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					type: SETTINGS_BLOCK_TYPE_EMPTY,
 				} }
 			>
-				<div className="ppcp-r-settings-block__mismatch-wrapper">
+				<div className="ppcp-r-settings-block--landing ppcp-r-settings-block--expert-rdb">
 					<PayPalRdbWithContent
 						id="no_perference"
 						name="paypal_settings_landing"
@ -229,10 +230,6 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 };

 const languagesExample = [
-	{
-		value: '',
-		label: __( 'Browser language', 'woocommerce-paypal-payments' ),
-	},
 	{ value: 'en', label: 'English' },
 	{ value: 'de', label: 'German' },
 	{ value: 'es', label: 'Spanish' },
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/Sandbox.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/Sandbox.js
@ -13,12 +13,17 @@ import TitleBadge, {
 import ConnectionInfo, {
 	connectionStatusDataDefault,
 } from '../../../../ReusableComponents/ConnectionInfo';
-import { Button } from '@wordpress/components';
+import { Button, TextControl } from '@wordpress/components';
+import { PayPalRdbWithContent } from '../../../../ReusableComponents/Fields';

 const Sandbox = ( { settings, updateFormValue } ) => {
+	const className = settings.sandboxConnected
+		? 'ppcp-r-settings-block--sandbox-connected'
+		: 'ppcp-r-settings-block--sandbox-disconnected';
 	return (
 		<SettingsBlock
 			title={ __( 'Sandbox', 'woocommerce-paypal-payments' ) }
+			className={ className }
 			description={ __(
 				"Test your site in PayPal's Sandbox environment.<br /><strong>Note</strong>: No real payments/money movement occur in Sandbox mode. Do not ship orders made in this mode.",
 				'woocommerce-paypal-payments'
@ -31,59 +36,157 @@ const Sandbox = ( { settings, updateFormValue } ) => {
 				value: settings.payNowExperience,
 			} }
 		>
-			<SettingsBlock
-				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'
-						) }
-					/>
-				}
-				style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
-				actionProps={ {
-					type: SETTINGS_BLOCK_TYPE_EMPTY,
-					callback: updateFormValue,
-					key: 'sandboxAccountCredentials',
-					value: settings.sandboxAccountCredentials,
-				} }
-			>
-				<div className="ppcp-r-settings-block__sandbox">
-					<SettingsBlock
-						title={ __(
-							'Enable sandbox mode',
-							'woocommerce-paypal-payments'
-						) }
-						style={ SETTINGS_BLOCK_STYLING_TYPE_TERTIARY }
-						actionProps={ {
-							type: SETTINGS_BLOCK_TYPE_TOGGLE,
-							callback: updateFormValue,
-							key: 'enableSandbox',
-							value: settings.enableSandbox,
-						} }
-					/>
-					<ConnectionInfo
-						connectionStatusDataDefault={
-							connectionStatusDataDefault
-						}
-					/>
-					<Button variant="secondary">
-						{ __(
-							'Disconnect Sandbox',
-							'woocommerce-paypal-payments'
-						) }
-					</Button>
-				</div>
-			</SettingsBlock>
+			{ settings.sandboxConnected && (
+				<SettingsBlock
+					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'
+							) }
+						/>
+					}
+					style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
+					actionProps={ {
+						type: SETTINGS_BLOCK_TYPE_EMPTY,
+						callback: updateFormValue,
+						key: 'sandboxAccountCredentials',
+						value: settings.sandboxAccountCredentials,
+					} }
+				>
+					<div className="ppcp-r-settings-block--sandbox">
+						<SettingsBlock
+							title={ __(
+								'Enable sandbox mode',
+								'woocommerce-paypal-payments'
+							) }
+							style={ SETTINGS_BLOCK_STYLING_TYPE_TERTIARY }
+							actionProps={ {
+								type: SETTINGS_BLOCK_TYPE_TOGGLE,
+								callback: updateFormValue,
+								key: 'sandboxEnabled',
+								value: settings.sandboxEnabled,
+							} }
+						/>
+						<ConnectionInfo
+							connectionStatusDataDefault={
+								connectionStatusDataDefault
+							}
+						/>
+						<Button
+							variant="secondary"
+							onClick={ () =>
+								updateFormValue( 'sandboxConnected', false )
+							}
+						>
+							{ __(
+								'Disconnect Sandbox',
+								'woocommerce-paypal-payments'
+							) }
+						</Button>
+					</div>
+				</SettingsBlock>
+			) }
+			{ ! settings.sandboxConnected && (
+				<SettingsBlock
+					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'
+					) }
+					style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
+					actionProps={ {
+						type: SETTINGS_BLOCK_TYPE_EMPTY,
+						callback: updateFormValue,
+						key: 'sandboxAccountCredentials',
+						value: settings.sandboxAccountCredentials,
+					} }
+				>
+					<div className="ppcp-r-settings-block--connect-sandbox ppcp-r-settings-block--expert-rdb">
+						<PayPalRdbWithContent
+							id="sandbox_mode"
+							name="paypal_connect_sandbox"
+							value="sandbox_mode"
+							currentValue={ settings.sandboxMode }
+							toggleAdditionalContent={ true }
+							handleRdbState={ ( newValue ) =>
+								updateFormValue( 'sandboxMode', newValue )
+							}
+							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'
+							) }
+						>
+							<Button
+								variant="primary"
+								onClick={ () =>
+									updateFormValue( 'sandboxConnected', true )
+								}
+							>
+								{ __(
+									'Connect Sandbox Account',
+									'woocommerce-paypal-payments'
+								) }
+							</Button>
+						</PayPalRdbWithContent>
+						<PayPalRdbWithContent
+							id="manual_connect"
+							name="paypal_connect_sandbox"
+							value="manual_connect"
+							currentValue={ settings.sandboxMode }
+							toggleAdditionalContent={ true }
+							handleRdbState={ ( newValue ) =>
+								updateFormValue( 'sandboxMode', newValue )
+							}
+							label={ __(
+								'Manual Connect',
+								'woocommerce-paypal-payments'
+							) }
+							description={ __(
+								'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.',
+								'woocommerce-paypal-payments'
+							) }
+						>
+							<TextControl
+								className="ppcp-r-vertical-text-control"
+								label={ __(
+									'Sandbox Client ID',
+									'woocommerce-paypal-payments'
+								) }
+							/>
+							<TextControl
+								className="ppcp-r-vertical-text-control"
+								label={ __(
+									'Sandbox Secrey Key',
+									'woocommerce-paypal-payments'
+								) }
+							/>
+							<Button variant="primary">
+								{ __(
+									'Connect Account',
+									'woocommerce-paypal-payments'
+								) }
+							</Button>
+						</PayPalRdbWithContent>
+					</div>
+				</SettingsBlock>
+			) }
 		</SettingsBlock>
 	);
 };
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/SavePaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/SavePaymentMethods.js
@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 const SavePaymentMethods = ( { updateFormValue, settings } ) => {
 	return (
 		<SettingsBlock
+			className="ppcp-r-settings-block--save-payment-methods"
 			title={ __(
 				'Save Payment Methods',
 				'woocommerce-paypal-payments'
@ -29,7 +30,7 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
 					'woocommerce-paypal-payments'
 				) }
 				description={ __(
-					'Securely store your customers’ PayPal accounts for a seamless checkout experience. This will disable all Pay Later features and Alternative Payment Methods on your site.',
+					'Securely store your customers’ PayPal accounts for a seamless checkout experience. <br />This will disable all Pay Later features and Alternative Payment Methods on your site.',
 					'woocommerce-paypal-payments'
 				) }
 				style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/Troubleshooting.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/Blocks/Troubleshooting.js
@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 const Troubleshooting = ( { updateFormValue, settings } ) => {
 	return (
 		<SettingsBlock
-			className="ppcp-r-settings-block--separated-settings"
+			className="ppcp-r-settings-block--troubleshooting"
 			title={ __( 'Troubleshooting', 'woocommerce-paypal-payments' ) }
 			description={ __(
 				'Access tools to help debug and resolve issues.',
@ -57,51 +57,52 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
 				} }
 			>
 				<HooksTable data={ hooksExampleData() } />
-				<SettingsBlock
-					title={ __(
-						'Resubscribe webhooks',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'Click to remove the current webhook subscription and subscribe again, for example, if the website domain or URL structure changed.',
-						'woocommerce-paypal-payments'
-					) }
-					style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
-					actionProps={ {
-						type: SETTINGS_BLOCK_TYPE_BUTTON,
-						buttonType: 'secondary',
-						callback: () =>
-							console.log(
-								'Resubscribe webhooks',
-								'woocommerce-paypal-payments'
-							),
-						value: __(
+			</SettingsBlock>
+
+			<SettingsBlock
+				title={ __(
+					'Resubscribe webhooks',
+					'woocommerce-paypal-payments'
+				) }
+				description={ __(
+					'Click to remove the current webhook subscription and subscribe again, for example, if the website domain or URL structure changed.',
+					'woocommerce-paypal-payments'
+				) }
+				style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
+				actionProps={ {
+					type: SETTINGS_BLOCK_TYPE_BUTTON,
+					buttonType: 'secondary',
+					callback: () =>
+						console.log(
 							'Resubscribe webhooks',
 							'woocommerce-paypal-payments'
 						),
-					} }
-				/>
-				<SettingsBlock
-					title={ __(
-						'Simulate webhooks',
+					value: __(
+						'Resubscribe webhooks',
 						'woocommerce-paypal-payments'
-					) }
-					style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
-					actionProps={ {
-						type: SETTINGS_BLOCK_TYPE_BUTTON,
-						buttonType: 'secondary',
-						callback: () =>
-							console.log(
-								'Simulate webhooks',
-								'woocommerce-paypal-payments'
-							),
-						value: __(
+					),
+				} }
+			/>
+			<SettingsBlock
+				title={ __(
+					'Simulate webhooks',
+					'woocommerce-paypal-payments'
+				) }
+				style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
+				actionProps={ {
+					type: SETTINGS_BLOCK_TYPE_BUTTON,
+					buttonType: 'secondary',
+					callback: () =>
+						console.log(
 							'Simulate webhooks',
 							'woocommerce-paypal-payments'
 						),
-					} }
-				/>
-			</SettingsBlock>
+					value: __(
+						'Simulate webhooks',
+						'woocommerce-paypal-payments'
+					),
+				} }
+			/>
 		</SettingsBlock>
 	);
 };
--- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/ExpertSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabSettingsElements/ExpertSettings.js
@ -9,6 +9,7 @@ import SettingsCard from '../../../ReusableComponents/SettingsCard';
 import Sandbox from './Blocks/Sandbox';
 import Troubleshooting from './Blocks/Troubleshooting';
 import PaypalSettings from './Blocks/PaypalSettings';
+import OtherSettings from './Blocks/OtherSettings';

 const ExpertSettings = ( { updateFormValue, settings } ) => {
 	return (
@ -39,59 +40,12 @@ const ExpertSettings = ( { updateFormValue, settings } ) => {
 				updateFormValue={ updateFormValue }
 				settings={ settings }
 			/>
-			<SettingsBlock
-				title={ __(
-					'Other payment method settings',
-					'woocommerce-paypal-payments'
-				) }
-				description={ __(
-					'Modify the checkout experience for alternative payment methods, credit cards, and digital wallets',
-					'woocommerce-paypal-payments'
-				) }
-				style={ SETTINGS_BLOCK_STYLING_TYPE_PRIMARY }
-				actionProps={ {
-					type: SETTINGS_BLOCK_TYPE_TOGGLE_CONTENT,
-				} }
-			>
-				<SettingsBlock
-					title={ __(
-						'Disable specific credit cards',
-						'woocommerce-paypal-payments'
-					) }
-					description={ __(
-						'If left blank, PayPal and other buttons will present in the user’s detected language. Enter a language here to force all buttons to display in that language.',
-						'woocommerce-paypal-payments'
-					) }
-					style={ SETTINGS_BLOCK_STYLING_TYPE_SECONDARY }
-					actionProps={ {
-						type: SETTINGS_BLOCK_TYPE_SELECT,
-						options: creditCardExamples,
-						value: settings.buttonLanguage,
-						callback: updateFormValue,
-						key: 'buttonLanguage',
-					} }
-				/>
-			</SettingsBlock>
+			<OtherSettings
+				updateFormValue={ updateFormValue }
+				settings={ settings }
+			/>
 		</SettingsCard>
 	);
 };

-const creditCardExamples = [
-	{ value: '', label: __( 'Select', 'woocommerce-paypal-payments' ) },
-	{
-		value: 'mastercard',
-		label: __( 'Mastercard', 'woocommerce-paypal-payments' ),
-	},
-	{ value: 'visa', label: __( 'Visa', 'woocommerce-paypal-payments' ) },
-	{
-		value: 'amex',
-		label: __( 'American Express', 'woocommerce-paypal-payments' ),
-	},
-	{ value: 'jcb', label: __( 'JCB', 'woocommerce-paypal-payments' ) },
-	{
-		value: 'diners-club',
-		label: __( 'Diners Club', 'woocommerce-paypal-payments' ),
-	},
-];
-
 export default ExpertSettings;