💄 Improve display of webhook contents

This commit is contained in:
Philipp Stracker 2025-01-09 20:43:32 +01:00
parent 03119cb7d4
commit 5712544f08
No known key found for this signature in database
2 changed files with 32 additions and 29 deletions

View file

@ -1,5 +1,6 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks } from '../../../../../../data';
import { Title } from '../../../../../ReusableComponents/SettingsBlocks';
const HooksTableBlock = () => {
const { webhooks } = CommonHooks.useWebhooks();
@ -10,31 +11,36 @@ const HooksTableBlock = () => {
}
return (
<table className="ppcp-r-table">
<thead>
<tr>
<th className="ppcp-r-table__hooks-url">
{ __( 'URL', 'woocommerce-paypal-payments' ) }
</th>
<th className="ppcp-r-table__hooks-events">
{ __(
'Tracked events',
'woocommerce-paypal-payments'
) }
</th>
</tr>
</thead>
<tbody>
<tr>
<td className="ppcp-r-table__hooks-url">{ url }</td>
<td className="ppcp-r-table__hooks-events">
{ events.map( ( event, index ) => (
<div key={ index }>{ event }</div>
) ) }
</td>
</tr>
</tbody>
</table>
<>
<WebhookUrl url={ url } />
<WebhookEvents events={ events } />
</>
);
};
const WebhookUrl = ( { url } ) => {
return (
<div>
<Title>
{ __( 'Notification URL', 'woocommerce-paypal-payments' ) }
</Title>
<p>{ url }</p>
</div>
);
};
const WebhookEvents = ( { events } ) => {
return (
<div>
<Title>
{ __( 'Subscribed Events', 'woocommerce-paypal-payments' ) }
</Title>
<ul>
{ events.map( ( event, index ) => (
<li key={ index }>{ event }</li>
) ) }
</ul>
</div>
);
};

View file

@ -42,10 +42,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
<SettingsBlock>
<Header>
<Title>
{ __(
'Subscribed PayPal webhooks',
'woocommerce-paypal-payments'
) }
{ __( 'Webhooks', 'woocommerce-paypal-payments' ) }
</Title>
<Description>
{ __(