From f2cb29e8e57b0ef19015a9579925cb6e4a3cfeed Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Thu, 20 Feb 2025 00:59:14 +0100
Subject: [PATCH] Add a disabled visual state to the Payment Method component

---
 .../_payment-method-item.scss                 | 79 +++++++++++++++++++
 .../SettingsBlocks/PaymentMethodItemBlock.js  | 11 ++-
 .../SettingsBlocks/PaymentMethodsBlock.js     |  4 +-
 .../Settings/Tabs/TabPaymentMethods.js        |  8 +-
 4 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
index c1afcb4e8..729eb94f4 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
@@ -82,3 +82,82 @@
 		}
 	}
 }
+
+// Disabled state styling
+.ppcp--method-item--disabled {
+	position: relative;
+
+	// Apply grayscale and disable interactions
+	.ppcp--method-inner {
+		opacity: 0.65;
+		filter: grayscale(0.9);
+		pointer-events: none;
+		transition: filter 0.2s ease;
+	}
+
+	// Override text colors
+	.ppcp--method-title {
+		color: $color-gray-600 !important;
+	}
+
+	.ppcp--method-description p {
+		color: $color-gray-500 !important;
+	}
+
+	.ppcp--method-disabled-message {
+		opacity: 0;
+		transform: translateY(-5px);
+		transition: opacity 0.2s ease, transform 0.2s ease;
+	}
+
+	// Style all buttons and toggle controls
+	.components-button,
+	.components-form-toggle {
+		opacity: 0.5;
+	}
+
+	// Hover state - only blur the inner content
+	&:hover {
+		.ppcp--method-inner {
+			filter: blur(2px) grayscale(0.9);
+		}
+
+		.ppcp--method-disabled-message {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+}
+
+// Disabled overlay
+.ppcp--method-disabled-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba($color-white, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 50;
+	border-radius: var(--container-border-radius);
+	pointer-events: auto;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.ppcp--method-item--disabled:hover .ppcp--method-disabled-overlay {
+	opacity: 1;
+}
+
+.ppcp--method-disabled-message {
+	padding: 14px 18px;
+	max-width: 80%;
+	text-align: center;
+	@include font(13, 20, 500);
+	color: $color-text-tertiary;
+	position: relative;
+	z-index: 51;
+	border: none;
+}
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 f2e915dbd..dc26260f7 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -11,6 +11,8 @@ const PaymentMethodItemBlock = ( {
 	onTriggerModal,
 	onSelect,
 	isSelected,
+	isDisabled,
+	disabledMessage,
 } ) => {
 	const { activeHighlight, setActiveHighlight } = useActiveHighlight();
 	const isHighlighted = activeHighlight === paymentMethod.id;
@@ -31,9 +33,16 @@ const PaymentMethodItemBlock = ( {
 			id={ paymentMethod.id }
 			className={ `ppcp--method-item ${
 				isHighlighted ? 'ppcp-highlight' : ''
-			}` }
+			} ${ isDisabled ? 'ppcp--method-item--disabled' : '' }` }
 			separatorAndGap={ false }
 		>
+			{ isDisabled && (
+				<div className="ppcp--method-disabled-overlay">
+					<p className="ppcp--method-disabled-message">
+						{ disabledMessage }
+					</p>
+				</div>
+			) }
 			<div className="ppcp--method-inner">
 				<div className="ppcp--method-title-wrapper">
 					{ paymentMethod?.icon && (
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 7a748a18a..599559d9d 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -19,12 +19,14 @@ const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => {
 		<SettingsBlock className="ppcp--grid ppcp-r-settings-block__payment-methods">
 			{ paymentMethods
 				// Remove empty/invalid payment method entries.
-				.filter( ( m ) => m.id )
+				.filter( ( m ) => m && m.id )
 				.map( ( paymentMethod ) => (
 					<PaymentMethodItemBlock
 						key={ paymentMethod.id }
 						paymentMethod={ paymentMethod }
 						isSelected={ paymentMethod.enabled }
+						isDisabled={ paymentMethod.isDisabled }
+						disabledMessage={ paymentMethod.disabledMessage }
 						onSelect={ ( checked ) =>
 							handleSelect( paymentMethod.id, checked )
 						}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js
index fe4cffe69..e9892c0c3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPaymentMethods.js
@@ -112,6 +112,8 @@ const PaymentMethodCard = ( {
 	icon,
 	methods,
 	onTriggerModal,
+	isDisabled = true,
+	disabledMessage = 'This is an example disabled message.',
 } ) => (
 	<SettingsCard
 		id={ id }
@@ -121,7 +123,11 @@ const PaymentMethodCard = ( {
 		contentContainer={ false }
 	>
 		<PaymentMethodsBlock
-			paymentMethods={ methods }
+			paymentMethods={ methods.map( ( method ) => ( {
+				...method,
+				isDisabled: method.isDisabled || isDisabled,
+				disabledMessage: method.disabledMessage || disabledMessage,
+			} ) ) }
 			onTriggerModal={ onTriggerModal }
 		/>
 	</SettingsCard>