diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index dc6932749..eafbe718a 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/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; + } +} diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php index 3a5c49128..b864d4b69 100644 --- a/modules/ppcp-wc-gateway/services.php +++ b/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' ), diff --git a/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php new file mode 100644 index 000000000..29327e304 --- /dev/null +++ b/modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php @@ -0,0 +1,82 @@ +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 ' +
+ PayPal +

- ' . __( 'The all-in-one checkout solution for WooCommerce', 'woocommerce-paypal-payments' ) . '

+ ' + . __( 'Documentation', 'woocommerce-paypal-payments' ) . + ' + ' + . __( 'Get Help', 'woocommerce-paypal-payments' ) . + ' + + ' + . __( 'Request a feature', 'woocommerce-paypal-payments' ) . + ' + ' + . __( 'Submit a bug', 'woocommerce-paypal-payments' ) . + ' + +
+ '; + } +} diff --git a/modules/ppcp-wc-gateway/src/WCGatewayModule.php b/modules/ppcp-wc-gateway/src/WCGatewayModule.php index b6a30b4d1..51f33760b 100644 --- a/modules/ppcp-wc-gateway/src/WCGatewayModule.php +++ b/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 );