Merge pull request #790 from woocommerce/pcp-879-header

Add header on settings page
This commit is contained in:
Emili Castells 2022-08-18 12:20:05 +02:00 committed by GitHub
commit 5837d9c54e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 144 additions and 1 deletions

View file

@ -168,3 +168,53 @@ ul.ppcp-onboarding-options-sublist {
height: 23px;
}
}
.ppcp-settings-page-header {
display: flex;
align-items: center;
max-width: 1200px;
margin-top: 10px;
}
.ppcp-settings-page-header img {
height: 30px;
}
.ppcp-settings-page-header h4 {
margin: 0 15px 0 5px;
}
.ppcp-settings-page-header .button, .ppcp-settings-page-header a {
margin: 0 5px;
}
.ppcp-right-align {
margin-left: auto;
}
.ppcp-settings-page-header a {
text-decoration: none;
}
@media (max-width: 1200px) {
.ppcp-settings-page-header {
display: block;
}
.ppcp-settings-page-header .ppcp-right-align {
display: block;
margin-left: 0;
}
.ppcp-settings-page-header .button, .ppcp-settings-page-header a {
margin: 5px 10px 5px 0;
}
.ppcp-settings-page-header .ppcp-inline-only {
display: none;
}
.ppcp-settings-page-header h4 {
margin-left: 0;
}
}

View file

@ -53,6 +53,7 @@ use WooCommerce\PayPalCommerce\WcGateway\Notice\GatewayWithoutPayPalAdminNotice;
use WooCommerce\PayPalCommerce\WcGateway\Processor\AuthorizedPaymentsProcessor;
use WooCommerce\PayPalCommerce\WcGateway\Processor\OrderProcessor;
use WooCommerce\PayPalCommerce\WcGateway\Processor\RefundProcessor;
use WooCommerce\PayPalCommerce\WcGateway\Settings\HeaderRenderer;
use WooCommerce\PayPalCommerce\WcGateway\Settings\SectionsRenderer;
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
use WooCommerce\PayPalCommerce\WcGateway\Settings\SettingsListener;
@ -204,6 +205,12 @@ return array(
$container->get( 'onboarding.state' )
);
},
'wcgateway.settings.header-renderer' => static function ( ContainerInterface $container ): HeaderRenderer {
return new HeaderRenderer(
$container->get( 'wcgateway.current-ppcp-settings-page-id' ),
$container->get( 'wcgateway.url' )
);
},
'wcgateway.settings.sections' => static function ( ContainerInterface $container ): array {
$sections = array(
PayPalGateway::ID => __( 'PayPal Checkout', 'woocommerce-paypal-payments' ),

View file

@ -0,0 +1,82 @@
<?php
/**
* Renders the settings page header.
*
* @package WooCommerce\PayPalCommerce\WcGateway\Settings
*/
declare( strict_types=1 );
namespace WooCommerce\PayPalCommerce\WcGateway\Settings;
/**
* Class HeaderRenderer
*/
class HeaderRenderer {
const KEY = 'ppcp-tab';
/**
* ID of the current PPCP gateway settings page, or empty if it is not such page.
*
* @var string
*/
private $page_id;
/**
* The URL to the module.
*
* @var string
*/
private $module_url;
/**
* HeaderRenderer constructor.
*
* @param string $page_id ID of the current PPCP gateway settings page, or empty if it is not such page.
* @param string $module_url The URL to the module.
*/
public function __construct( string $page_id, string $module_url ) {
$this->page_id = $page_id;
$this->module_url = $module_url;
}
/**
* Whether the sections tab should be rendered.
*
* @return bool
*/
public function should_render() : bool {
return ! empty( $this->page_id );
}
/**
* Renders the Sections tab.
*/
public function render(): string {
if ( ! $this->should_render() ) {
return '';
}
return '
<div class="ppcp-settings-page-header">
<img alt="PayPal" src="' . esc_url( $this->module_url ) . 'assets/images/paypal.png"/>
<h4> <span class="ppcp-inline-only">-</span> ' . __( 'The all-in-one checkout solution for WooCommerce', 'woocommerce-paypal-payments' ) . '</h4>
<a class="button" href="https://woocommerce.com/document/woocommerce-paypal-payments/">'
. __( 'Documentation', 'woocommerce-paypal-payments' ) .
'</a>
<a class="button" href="https://woocommerce.com/my-account/create-a-ticket/">'
. __( 'Get Help', 'woocommerce-paypal-payments' ) .
'</a>
<span class="ppcp-right-align">
<a href="https://woocommerce.com/feature-requests/woocommerce-paypal-payments/">'
. __( 'Request a feature', 'woocommerce-paypal-payments' ) .
'</a>
<a href="https://github.com/woocommerce/woocommerce-paypal-payments/issues/new?assignees=&labels=type%3A+bug&template=bug_report.md">'
. __( 'Submit a bug', 'woocommerce-paypal-payments' ) .
'</a>
</span>
</div>
';
}
}

View file

@ -31,6 +31,7 @@ use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
use WooCommerce\PayPalCommerce\WcGateway\Notice\ConnectAdminNotice;
use WooCommerce\PayPalCommerce\WcGateway\Notice\GatewayWithoutPayPalAdminNotice;
use WooCommerce\PayPalCommerce\WcGateway\Processor\AuthorizedPaymentsProcessor;
use WooCommerce\PayPalCommerce\WcGateway\Settings\HeaderRenderer;
use WooCommerce\PayPalCommerce\WcGateway\Settings\SectionsRenderer;
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
use WooCommerce\PayPalCommerce\WcGateway\Settings\SettingsListener;
@ -65,11 +66,14 @@ class WCGatewayModule implements ModuleInterface {
add_action(
'woocommerce_sections_checkout',
function() use ( $c ) {
$header_renderer = $c->get( 'wcgateway.settings.header-renderer' );
assert( $header_renderer instanceof HeaderRenderer );
$section_renderer = $c->get( 'wcgateway.settings.sections-renderer' );
assert( $section_renderer instanceof SectionsRenderer );
// phpcs:ignore WordPress.Security.EscapeOutput
echo $section_renderer->render();
echo $header_renderer->render() . $section_renderer->render();
},
20
);