Check remote API status

assets/css/settings-page.css

@@ -381,3 +381,69 @@
 		}
 	}
 }
+
+.prpl-api-status-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+
+	.prpl-api-status-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.prpl-api-status-response-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+
+		svg {
+			width: 1rem;
+			height: 1rem;
+		}
+
+		.prpl-api-status-icon-ok,
+		.prpl-api-status-icon-error,
+		.prpl-api-status-icon-spinner,
+		.prpl-api-status-text {
+			display: none;
+		}
+
+		&.prpl-api-status-checking {
+
+			.prpl-api-status-icon-spinner {
+				display: inline-block;
+			}
+		}
+
+		&.prpl-api-status-ok {
+
+			.prpl-api-status-icon-spinner {
+				display: none;
+			}
+
+			.prpl-api-status-icon-ok,
+			.prpl-api-status-text {
+				display: inline-block;
+			}
+		}
+
+		&.prpl-api-status-error {
+
+			.prpl-api-status-icon-spinner {
+				display: none;
+			}
+
+			.prpl-api-status-icon-error,
+			.prpl-api-status-text {
+				display: inline-block;
+			}
+		}
+	}
+
+	input {
+		width: 20rem;
+		max-width: calc(100% - 2rem);
+	}
+}

assets/js/ajax-request.js

@@ -14,12 +14,14 @@ const progressPlannerAjaxRequest = ( { url, data } ) => {
 		http.open( 'POST', url, true );
 		http.onreadystatechange = () => {
 			let response;
+
 			try {
 				response = JSON.parse( http.response );
 			} catch ( e ) {
 				if ( http.readyState === 4 && http.status !== 200 ) {
 					console.warn( http, e );
-					return http.response;
+					// Reject the promise with the response.
+					reject( response );
 				}
 			}
 

assets/js/settings-page.js

@@ -1,10 +1,10 @@
-/* global alert, prplDocumentReady */
+/* global alert, prplDocumentReady, progressPlannerSettingsPage, progressPlannerAjaxRequest, prplL10n */
 /*
  * Settings Page
  *
  * A script to handle the settings page.
  *
- * Dependencies: progress-planner/document-ready, wp-util
+ * Dependencies: progress-planner/document-ready, wp-util, progress-planner/ajax-request, progress-planner/l10n
  */
 const prplTogglePageSelectorSettingVisibility = function ( page, value ) {
 	const itemRadiosWrapperEl = document.querySelector(
@@ -92,3 +92,108 @@ prplDocumentReady( function () {
 		.getElementById( 'prpl-settings' )
 		.addEventListener( 'submit', prplFormSubmit );
 } );
+
+/**
+ * API Status Manager
+ * Handles the display and state of the API status check
+ */
+class APIStatusManager {
+	/**
+	 * @param {string} wrapperSelector - The selector for the status wrapper element
+	 */
+	constructor( wrapperSelector ) {
+		this.wrapper = document.querySelector( wrapperSelector );
+	}
+
+	/**
+	 * Update the status text content
+	 * @param {string} text - The text to display
+	 */
+	updateStatusText( text ) {
+		const textElement = this.wrapper?.querySelector(
+			'.prpl-api-status-text'
+		);
+		if ( textElement ) {
+			textElement.textContent = text;
+		}
+	}
+
+	/**
+	 * Update the status classes
+	 * @param {string} status - The status class to add ('ok', 'error', 'checking')
+	 */
+	updateStatusClasses( status ) {
+		if ( ! this.wrapper ) {
+			return;
+		}
+
+		this.wrapper.classList.remove(
+			'prpl-api-status-ok',
+			'prpl-api-status-error',
+			'prpl-api-status-checking'
+		);
+		this.wrapper.classList.add( `prpl-api-status-${ status }` );
+	}
+
+	/**
+	 * Handle API response
+	 * @param {Object} response - The API response
+	 */
+	handleResponse( response ) {
+		if ( response.status === 'ok' && response.nonce ) {
+			this.updateStatusText( prplL10n( 'remoteAPIStatusOk' ) );
+			this.updateStatusClasses( 'ok' );
+		} else {
+			this.updateStatusText(
+				response?.message || prplL10n( 'remoteAPIStatusError' )
+			);
+			this.updateStatusClasses( 'error' );
+		}
+	}
+
+	/**
+	 * Handle API error
+	 * @param {Error} error - The error object
+	 */
+	handleError( error ) {
+		this.updateStatusText(
+			error?.message || prplL10n( 'remoteAPIStatusError' )
+		);
+		this.updateStatusClasses( 'error' );
+	}
+
+	/**
+	 * Check the API status
+	 */
+	checkStatus() {
+		if ( ! this.wrapper ) {
+			return;
+		}
+
+		this.updateStatusClasses( 'checking' );
+
+		progressPlannerAjaxRequest( {
+			url: progressPlannerSettingsPage.onboardNonceURL,
+			data: {
+				site: progressPlannerSettingsPage.siteUrl,
+			},
+		} )
+			.then( ( response ) => this.handleResponse( response ) )
+			.catch( ( error ) => this.handleError( error ) );
+	}
+}
+
+// Add click handler for API status check button
+prplDocumentReady( () => {
+	// Initialize the API status manager
+	const apiStatusManager = new APIStatusManager(
+		'.prpl-api-status-response-wrapper'
+	);
+
+	const statusButton = document.getElementById( 'prpl-setting-api-status' );
+	if ( statusButton ) {
+		statusButton.addEventListener( 'click', () =>
+			apiStatusManager.checkStatus()
+		);
+	}
+} );

classes/admin/class-enqueue.php

@@ -341,6 +341,8 @@ public function get_localized_strings() {
 			'video'                        => \esc_html__( 'Video', 'progress-planner' ),
 			'watchVideo'                   => \esc_html__( 'Watch video', 'progress-planner' ),
 			'disabledRRCheckboxTooltip'    => \esc_html__( 'Don\'t worry! This task will be checked off automatically when you\'ve completed it.', 'progress-planner' ),
+			'remoteAPIStatusOk'            => \esc_html__( 'API is accessible', 'progress-planner' ),
+			'remoteAPIStatusError'         => \esc_html__( 'API is not accessible', 'progress-planner' ),
 			'opensInNewWindow'             => \esc_html__( 'Opens in new window', 'progress-planner' ),
 		];
 	}

classes/admin/class-page.php

@@ -196,7 +196,10 @@ public function enqueue_scripts() {
 				[
 					'name' => 'progressPlannerSettingsPage',
 					'data' => [
-						'siteUrl' => \get_site_url(),
+						'siteUrl'         => \get_site_url(),
+						'onboardNonceURL' => \progress_planner()->get_utils__onboard()->get_remote_nonce_url(),
+						'onboardAPIUrl'   => \progress_planner()->get_utils__onboard()->get_remote_url(),
+						'ajaxUrl'         => \admin_url( 'admin-ajax.php' ),
 					],
 				]
 			);

classes/suggested-tasks/providers/class-settings-saved.php

@@ -66,4 +66,13 @@
 	public function should_add_task() {
 		return false === \get_option( 'progress_planner_pro_license_key', false );
 	}
+
+	/**
+	 * Check if the task is completed.
+	 *
+	 * @return bool
+	 */
+	public function is_task_completed() {
+		return false !== \get_option( 'progress_planner_pro_license_key', false );
+	}
 }

views/admin-page-settings.php

@@ -41,6 +41,8 @@
 			<?php \progress_planner()->the_view( 'page-settings/license.php' ); ?>
 		</div>
 
+		<?php \progress_planner()->the_view( 'page-settings/api-status.php' ); ?>
+
 		<?php wp_nonce_field( 'progress_planner' ); ?>
 
 		<button

views/page-settings/api-status.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Api status settings.
+ *
+ * @package Progress_Planner
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<div class="prpl-column">
+	<div class="prpl-widget-wrapper">
+		<h2 class="prpl-settings-section-title prpl-settings-section-api-status">
+			<span class="icon">
+				<?php \progress_planner()->the_asset( 'images/icon_server.svg' ); ?>
+			</span>
+			<span>
+				<?php \esc_html_e( 'Check API status', 'progress-planner' ); ?>
+			</span>
+		</h2>
+		<div class="prpl-api-status-wrapper">
+			<label for="prpl-setting-api-status">
+				<?php \esc_html_e( 'Ping our server and check the API status.', 'progress-planner' ); ?>
+			</label>
+			<div class="prpl-api-status-controls">
+				<input
+					id="prpl-setting-api-status"
+					class="prpl-button-secondary"
+					name="prpl-api-status"
+					type="button"
+					value="<?php \esc_attr_e( 'Ping API', 'progress-planner' ); ?>"
+				/>
+				<span class="prpl-api-status-response-wrapper">
+					<span class="prpl-api-status-icon-spinner" title="<?php esc_attr_e( 'Checking...', 'progress-planner' ); ?>">
+						<img src="<?php echo \esc_url( \admin_url( 'images/spinner.gif' ) ); ?>" alt="<?php esc_attr_e( 'Checking...', 'progress-planner' ); ?>" />
+					</span>
+					<span class="prpl-api-status-icon-ok" title="<?php esc_attr_e( 'Accessible', 'progress-planner' ); ?>">
+						<?php \progress_planner()->the_asset( 'images/icon_check_circle.svg' ); ?>
+					</span>
+					<span class="prpl-api-status-icon-error" title="<?php esc_attr_e( 'Not accessible', 'progress-planner' ); ?>">
+						<?php \progress_planner()->the_asset( 'images/icon_exclamation_circle.svg' ); ?>
+					</span>
+					<span class="prpl-api-status-text">
+						<?php \esc_html_e( 'API is accessible', 'progress-planner' ); ?>
+					</span>
+				</span>
+			</div>
+		</div>
+	</div>
+</div>

views/page-settings/pages.php

@@ -9,6 +9,8 @@
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
+
+$prpl_pages = \progress_planner()->get_admin__page_settings()->get_settings();
 ?>
 
 <div class="prpl-column prpl-column-pages">
@@ -21,15 +23,22 @@
 				<?php esc_html_e( 'Your pages', 'progress-planner' ); ?>
 			</span>
 		</h2>
-		<p>
-			<?php esc_html_e( 'Let us know if you have following pages.', 'progress-planner' ); ?>
-		</p>
-		<div class="prpl-pages-list">
-			<?php
-			foreach ( \progress_planner()->get_admin__page_settings()->get_settings() as $prpl_setting ) {
-				\progress_planner()->the_view( "setting/{$prpl_setting['type']}.php", [ 'prpl_setting' => $prpl_setting ] );
-			}
-			?>
-		</div>
+
+		<?php if ( ! empty( $prpl_pages ) ) : ?>
+			<p>
+				<?php esc_html_e( 'Let us know if you have following pages.', 'progress-planner' ); ?>
+			</p>
+			<div class="prpl-pages-list">
+				<?php
+				foreach ( $prpl_pages as $prpl_setting ) {
+					\progress_planner()->the_view( "setting/{$prpl_setting['type']}.php", [ 'prpl_setting' => $prpl_setting ] );
+				}
+				?>
+			</div>
+		<?php else : ?>
+			<p>
+				<?php esc_html_e( 'There seems to be a problem with loading page types from our server. Please try again later or check the API status.', 'progress-planner' ); ?>
+			</p>
+		<?php endif; ?>
 	</div>
 </div>