Merge branch 'trunk' into PCP-155-tracking-api

modules/ppcp-button/resources/js/button.js

@@ -66,7 +66,7 @@ const bootstrap = () => {
 
                 errorHandler.clear();
                 if (messages.length) {
-                    messages.forEach(s => errorHandler.message(s));
+                    errorHandler.messages(messages);
                 } else {
                     errorHandler.message(PayPalCommerceGateway.labels.error.required.generic);
                 }

modules/ppcp-button/resources/js/modules/ErrorHandler.js

@@ -17,21 +17,48 @@ class ErrorHandler {
 
     appendPreparedErrorMessageElement(errorMessageElement)
     {
-        if(this.messagesList === null) {
-            this.prepareMessagesList();
+        if (this.messagesList === null) {
+            this._prepareMessagesList();
         }
 
         this.messagesList.replaceWith(errorMessageElement);
     }
 
+    /**
+     * @param {String} text
+     * @param {Boolean} persist
+     */
     message(text, persist = false)
     {
-        if(! typeof String || text.length === 0){
+        this._addMessage(text, persist);
+
+        this._scrollToMessages();
+    }
+
+    /**
+     * @param {Array} texts
+     * @param {Boolean} persist
+     */
+    messages(texts, persist = false)
+    {
+        texts.forEach(t => this._addMessage(t, persist));
+
+        this._scrollToMessages();
+    }
+
+    /**
+     * @private
+     * @param {String} text
+     * @param {Boolean} persist
+     */
+    _addMessage(text, persist = false)
+    {
+        if(! typeof String || text.length === 0) {
             throw new Error('A new message text must be a non-empty string.');
         }
 
-        if(this.messagesList === null){
-            this.prepareMessagesList();
+        if (this.messagesList === null){
+            this._prepareMessagesList();
         }
 
         if (persist) {
@@ -40,15 +67,24 @@ class ErrorHandler {
             this.wrapper.classList.remove('ppcp-persist');
         }
 
-        let messageNode = this.prepareMessagesListItem(text);
+        let messageNode = this._prepareMessagesListItem(text);
         this.messagesList.appendChild(messageNode);
-
-        jQuery.scroll_to_notices(jQuery('.woocommerce-notices-wrapper'))
     }
 
-    prepareMessagesList()
+    /**
+     * @private
+     */
+    _scrollToMessages()
     {
-        if(this.messagesList === null){
+        jQuery.scroll_to_notices(jQuery('.woocommerce-notices-wrapper'));
+    }
+
+    /**
+     * @private
+     */
+    _prepareMessagesList()
+    {
+        if (this.messagesList === null) {
             this.messagesList = document.createElement('ul');
             this.messagesList.setAttribute('class', 'woocommerce-error');
             this.messagesList.setAttribute('role', 'alert');
@@ -56,7 +92,10 @@ class ErrorHandler {
         }
     }
 
-    prepareMessagesListItem(message)
+    /**
+     * @private
+     */
+    _prepareMessagesListItem(message)
     {
         const li = document.createElement('li');
         li.innerHTML = message;
@@ -64,13 +103,6 @@ class ErrorHandler {
         return li;
     }
 
-    sanitize(text)
-    {
-        const textarea = document.createElement('textarea');
-        textarea.innerHTML = text;
-        return textarea.value.replace('Error: ', '');
-    }
-
     clear()
     {
         if (this.messagesList === null) {

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

@@ -54,6 +54,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;
@@ -201,7 +202,14 @@ return array(
 	'wcgateway.settings.sections-renderer'                 => static function ( ContainerInterface $container ): SectionsRenderer {
 		return new SectionsRenderer(
 			$container->get( 'wcgateway.current-ppcp-settings-page-id' ),
-			$container->get( 'wcgateway.settings.sections' )
+			$container->get( 'wcgateway.settings.sections' ),
+			$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 {

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/Settings/SectionsRenderer.php

@@ -9,6 +9,7 @@ declare( strict_types=1 );
 
 namespace WooCommerce\PayPalCommerce\WcGateway\Settings;
 
+use WooCommerce\PayPalCommerce\Onboarding\State;
 use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway;
 use WooCommerce\PayPalCommerce\Webhooks\Status\WebhooksStatusPage;
 
@@ -33,15 +34,24 @@ class SectionsRenderer {
 	 */
 	protected $sections;
 
+	/**
+	 * The onboarding state.
+	 *
+	 * @var State
+	 */
+	private $state;
+
 	/**
 	 * SectionsRenderer constructor.
 	 *
 	 * @param string                $page_id ID of the current PPCP gateway settings page, or empty if it is not such page.
 	 * @param array<string, string> $sections Key - page/gateway ID, value - displayed text.
+	 * @param State                 $state The onboarding state.
 	 */
-	public function __construct( string $page_id, array $sections ) {
+	public function __construct( string $page_id, array $sections, State $state ) {
 		$this->page_id  = $page_id;
 		$this->sections = $sections;
+		$this->state    = $state;
 	}
 
 	/**
@@ -50,7 +60,9 @@ class SectionsRenderer {
 	 * @return bool
 	 */
 	public function should_render() : bool {
-		return ! empty( $this->page_id );
+		return ! empty( $this->page_id ) &&
+			( $this->state->production_state() === State::STATE_ONBOARDED ||
+			$this->state->sandbox_state() === State::STATE_ONBOARDED );
 	}
 
 	/**

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