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

View file

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