🔀 Merge branch 'trunk'

# Conflicts:
#	modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
#	modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js

@@ -33,13 +33,17 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			</Button>
 		);
 
-		return button.urls ? (
-			<a href={ button.urls.live } key={ button.text }>
-				{ buttonElement }
-			</a>
-		) : (
-			buttonElement
-		);
+		// If there's a URL (either direct or in urls object), wrap in anchor tag
+		if ( button.url || button.urls ) {
+			const href = button.urls ? button.urls.live : button.url;
+			return (
+				<a href={ href } key={ button.text }>
+					{ buttonElement }
+				</a>
+			);
+		}
+
+		return buttonElement;
 	};
 
 	return (

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js

@@ -4,32 +4,26 @@ import SettingsBlock from '../SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
 
-// TODO: A reusable component should not depend external data. Change this to a prop.
-import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
-
 const PaymentMethodItemBlock = ( {
-	id,
-	title,
-	description,
-	icon,
+	paymentMethod,
 	onTriggerModal,
 	onSelect,
 	isSelected,
 } ) => {
-	// Only show settings icon if this method has fields configured
-	const hasModal = hasSettings( id );
-
 	return (
 		<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
 			<div className="ppcp-r-settings-block__payment-methods__item__inner">
 				<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
-					<PaymentMethodIcon icons={ [ icon ] } type={ icon } />
+					<PaymentMethodIcon
+						icons={ [ paymentMethod.icon ] }
+						type={ paymentMethod.icon }
+					/>
 					<span className="ppcp-r-settings-block__payment-methods__item__title">
-						{ title }
+						{ paymentMethod.itemTitle }
 					</span>
 				</div>
 				<p className="ppcp-r-settings-block__payment-methods__item__description">
-					{ description }
+					{ paymentMethod.itemDescription }
 				</p>
 				<div className="ppcp-r-settings-block__payment-methods__item__footer">
 					<ToggleControl
@@ -37,7 +31,7 @@ const PaymentMethodItemBlock = ( {
 						checked={ isSelected }
 						onChange={ onSelect }
 					/>
-					{ hasModal && onTriggerModal && (
+					{ paymentMethod?.fields && onTriggerModal && (
 						<div
 							className="ppcp-r-settings-block__payment-methods__item__settings"
 							onClick={ onTriggerModal }

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js

@@ -27,7 +27,7 @@ const PaymentMethodsBlock = ( {
 			{ paymentMethods.map( ( paymentMethod ) => (
 				<PaymentMethodItemBlock
 					key={ paymentMethod.id }
-					{ ...paymentMethod }
+					paymentMethod={ paymentMethod }
 					isSelected={ paymentMethod.enabled }
 					onSelect={ ( checked ) =>
 						handleSelect( paymentMethod, checked )