refactor: improve settings wizard flow and completion page layout

Author: ajaydsouza

includes/admin/class-settings-wizard.php

@@ -138,27 +138,16 @@ public function get_wizard_steps() {
 				'description' => __( 'Upgrade to Contextual Related Posts Pro to unlock advanced features such as custom tables, advanced weighting, and more. <strong>Take your related posts to the next level!</strong>', 'contextual-related-posts' ) . '<br /><br /><a href="https://webberzone.com/plugins/contextual-related-posts/pro/" target="_blank" class="button button-primary">' . __( 'Learn more about Pro', 'contextual-related-posts' ) . '</a>',
 				'settings'    => $this->build_step_settings( $pro_features_keys, $all_settings ),
 			),
-			'completion'      => array(
-				'title'       => __( 'Setup Complete!', 'contextual-related-posts' ),
-				'description' => __( 'Your Contextual Related Posts plugin has been configured successfully.', 'contextual-related-posts' ),
-				'settings'    => array(),
-			),
 		);
 
 		// Add custom tables indexing step if custom tables are enabled.
 		if ( crp_get_option( 'use_custom_tables', false ) ) {
-			// Insert the custom tables step before completion.
-			$completion_step = $steps['completion'];
-			unset( $steps['completion'] );
-
 			$steps['custom_tables_index'] = array(
 				'title'       => __( 'Index Custom Tables', 'contextual-related-posts' ),
 				'description' => __( 'Custom tables have been enabled. Index your content to improve search performance and enable advanced features.', 'contextual-related-posts' ),
 				'settings'    => array(),
 				'custom_step' => true, // Flag to indicate this needs custom rendering.
 			);
-
-			$steps['completion'] = $completion_step;
 		}
 
 		/**
@@ -574,7 +563,7 @@ protected function render_completion_page() {
 
 			<div class="wizard-completion-content">
 				<div class="wizard-completion-features">
-					<h3><?php esc_html_e( 'What\'s Next?', 'contextual-related-posts' ); ?></h3>
+					<h3><?php esc_html_e( "What's Next?", 'contextual-related-posts' ); ?></h3>
 					<ul>
 						<li><?php esc_html_e( 'Visit your site to see related posts in action', 'contextual-related-posts' ); ?></li>
 						<li><?php esc_html_e( 'Customize the display using the settings page', 'contextual-related-posts' ); ?></li>

includes/admin/settings/class-settings-wizard-api.php

@@ -293,8 +293,8 @@ public function process_step() {
 
 			case 'finish_setup':
 				$this->process_current_step();
-				$this->complete_wizard();
-				$this->redirect_to_admin();
+				$this->mark_wizard_completed();
+				$this->redirect_to_step( $this->total_steps + 1 );
 				break;
 
 			case 'skip_wizard':
@@ -432,9 +432,9 @@ protected function redirect_to_admin() {
 	}
 
 	/**
-	 * Complete the wizard.
+	 * Mark the wizard as completed without redirecting.
 	 */
-	protected function complete_wizard() {
+	protected function mark_wizard_completed() {
 		update_option( "{$this->prefix}_wizard_completed", true );
 		update_option( "{$this->prefix}_wizard_completed_date", current_time( 'mysql' ) );
 
@@ -448,6 +448,13 @@ protected function complete_wizard() {
 		 * @param string $prefix Plugin prefix.
 		 */
 		do_action( "{$this->prefix}_wizard_completed", $this->prefix );
+	}
+
+	/**
+	 * Complete the wizard.
+	 */
+	protected function complete_wizard() {
+		$this->mark_wizard_completed();
 
 		// Redirect to completion page or main settings.
 		wp_safe_redirect( $this->get_completion_redirect_url() );
@@ -464,9 +471,9 @@ public function get_current_step() {
 		// phpcs:disable WordPress.Security.NonceVerification.Recommended
 		if ( isset( $_GET['step'] ) ) {
 			$step = absint( $_GET['step'] );
-			if ( $step > 0 && $step <= $this->total_steps ) {
+			if ( $step > 0 && $step <= $this->total_steps + 1 ) {
 				$this->current_step = $step;
-				$this->update_current_step(); // Update the database to match URL.
+				$this->update_current_step();
 				return $this->current_step;
 			}
 		}

includes/admin/settings/css/wizard.css

@@ -172,7 +172,7 @@
 
 /* Completion Page */
 .wizard-complete {
-	text-align: center;
+	text-align: left;
 }
 
 .wizard-completion-header {
@@ -204,8 +204,6 @@
 	margin-bottom: 30px;
 	text-align: left;
 	max-width: 500px;
-	margin-left: auto;
-	margin-right: auto;
 }
 
 .wizard-completion-features h3 {
@@ -217,11 +215,13 @@
 .wizard-completion-features ul {
 	margin: 0;
 	padding-left: 20px;
+	list-style-type: disc;
 }
 
 .wizard-completion-features li {
 	margin-bottom: 8px;
 	line-height: 1.4;
+	list-style-type: disc;
 }
 
 .wizard-completion-actions {