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

Add header on settings page

modules/ppcp-onboarding/assets/css/onboarding.css

@@ -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;
+	}
+}

modules/ppcp-wc-gateway/services.php

@@ -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' ),

modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php

@@ -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>
+		';
+	}
+}

modules/ppcp-wc-gateway/src/WCGatewayModule.php

@@ -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
 		);