From 63e1d113ff4635fe59a72f2a19f0e5d72fef1640 Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Mon, 8 Aug 2022 09:55:04 +0300
Subject: [PATCH] Render sections as tabs instead of links

---
 .../src/Settings/SectionsRenderer.php              | 14 +++++++-------
 modules/ppcp-wc-gateway/src/WCGatewayModule.php    | 10 ++++------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/modules/ppcp-wc-gateway/src/Settings/SectionsRenderer.php b/modules/ppcp-wc-gateway/src/Settings/SectionsRenderer.php
index 275574e97..c92e72ee1 100644
--- a/modules/ppcp-wc-gateway/src/Settings/SectionsRenderer.php
+++ b/modules/ppcp-wc-gateway/src/Settings/SectionsRenderer.php
@@ -56,14 +56,12 @@ class SectionsRenderer {
 	/**
 	 * Renders the Sections tab.
 	 */
-	public function render(): void {
+	public function render(): string {
 		if ( ! $this->should_render() ) {
-			return;
+			return '';
 		}
 
-		echo '<ul class="subsubsub">';
-
-		$array_keys = array_keys( $this->sections );
+		$html = '<nav class="nav-tab-wrapper woo-nav-tab-wrapper">';
 
 		foreach ( $this->sections as $id => $label ) {
 			$url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=' . $id );
@@ -73,9 +71,11 @@ class SectionsRenderer {
 				// Other gateways render fields differently, and their pages are not expected to work when gateway is not available.
 				$url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=ppcp-gateway&' . self::KEY . '=' . $id );
 			}
-			echo '<li><a href="' . esc_url( $url ) . '" class="' . ( $this->page_id === $id ? 'current' : '' ) . '">' . esc_html( $label ) . '</a> ' . ( end( $array_keys ) === $id ? '' : '|' ) . ' </li>';
+			$html .= '<a href="' . esc_url( $url ) . '" class="nav-tab ' . ( $this->page_id === $id ? 'nav-tab-active' : '' ) . '">' . esc_html( $label ) . '</a> ';
 		}
 
-		echo '</ul><br class="clear" />';
+		$html .= '</nav>';
+
+		return $html;
 	}
 }
diff --git a/modules/ppcp-wc-gateway/src/WCGatewayModule.php b/modules/ppcp-wc-gateway/src/WCGatewayModule.php
index d01287f67..3305ae14d 100644
--- a/modules/ppcp-wc-gateway/src/WCGatewayModule.php
+++ b/modules/ppcp-wc-gateway/src/WCGatewayModule.php
@@ -66,12 +66,10 @@ class WCGatewayModule implements ModuleInterface {
 			'woocommerce_sections_checkout',
 			function() use ( $c ) {
 				$section_renderer = $c->get( 'wcgateway.settings.sections-renderer' );
-				/**
-				 * The Section Renderer.
-				 *
-				 * @var SectionsRenderer $section_renderer
-				 */
-				$section_renderer->render();
+				assert( $section_renderer instanceof SectionsRenderer );
+
+				// phpcs:ignore WordPress.Security.EscapeOutput
+				echo $section_renderer->render();
 			}
 		);