From 4a611cf3b4e8a0ed99f322938739fca1b93e7563 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 28 Jan 2025 10:47:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Improve=20webhook=20details=20in?=
 =?UTF-8?q?=20Troubleshooting=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_button.scss          |  2 ++
 .../screens/settings/_tab-settings.scss       | 22 +++++++++++++++++++
 .../Settings/Blocks/HooksListBlock.js         |  4 ++--
 .../Settings/Blocks/ResubscribeBlock.js       |  1 +
 .../Settings/Blocks/SimulationBlock.js        |  1 +
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
index 558ccaaf2..8116068a9 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
@@ -38,6 +38,8 @@ button.components-button, a.components-button {
 
 	/* style the button template */
 
+	text-align: center;
+
 	&:not(:disabled) {
 		@extend %button-style-default;
 	}
diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss
index 57a225917..2dbe2486d 100644
--- a/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/settings/_tab-settings.scss
@@ -7,3 +7,25 @@
 	--block-header-gap: 0;
 	--block-separator-size: 0;
 }
+
+.ppcp--webhooks {
+	.ppcp--webhook-list li {
+		list-style: none;
+
+		&::before {
+			content: '✔︎';
+			opacity: 0.35;
+			font-size: 0.75em;
+			line-height: 1.35;
+			display: inline-block;
+			margin-right: 8px;
+		}
+	}
+}
+.ppcp--webhook-resubscribe,
+.ppcp--webhook-simulation {
+	.ppcp--action .components-button {
+		min-width: 160px;
+		display: block;
+	}
+}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js
index dad255d25..572d3f2e6 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/HooksListBlock.js
@@ -13,7 +13,7 @@ const HooksListBlock = () => {
 	}
 
 	return (
-		<SettingsBlock separatorAndGap={ false }>
+		<SettingsBlock separatorAndGap={ false } className="ppcp--webhooks">
 			<WebhookUrl url={ url } />
 			<WebhookEvents events={ events } />
 		</SettingsBlock>
@@ -37,7 +37,7 @@ const WebhookEvents = ( { events } ) => {
 			<Title>
 				{ __( 'Subscribed Events', 'woocommerce-paypal-payments' ) }
 			</Title>
-			<ul>
+			<ul className="ppcp--webhook-list">
 				{ events.map( ( event, index ) => (
 					<li key={ index }>{ event }</li>
 				) ) }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js
index 3e49b7660..77014703d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/ResubscribeBlock.js
@@ -59,6 +59,7 @@ const ResubscribeBlock = () => {
 				'woocommerce-paypal-payments'
 			) }
 			horizontalLayout={ true }
+			className="ppcp--webhook-resubscribe"
 		>
 			<ControlButton
 				type={ 'secondary' }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js
index 23f867b79..546e0931b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SimulationBlock.js
@@ -116,6 +116,7 @@ const SimulationBlock = () => {
 				'woocommerce-paypal-payments'
 			) }
 			horizontalLayout={ true }
+			className="ppcp--webhook-simulation"
 		>
 			<ControlButton
 				type={ 'secondary' }