Merge pull request #686 from ProgressPlanner/filip/v19/add-onboard-spinner

Add spinner to onboarding form and remove success message

Author: ilicfilip

assets/css/onboard.css

@@ -16,3 +16,8 @@
 		display: block !important;
 	}
 }
+
+#prpl-onboarding-submit-wrapper {
+	display: flex;
+	align-items: center;
+}

assets/js/onboard.js

@@ -35,17 +35,6 @@ const progressPlannerAjaxAPIRequest = ( data ) => {
 		data,
 	} )
 		.then( ( response ) => {
-			// Show success message.
-			document.getElementById(
-				'no-license' === response.license_key
-					? 'prpl-account-not-created-message'
-					: 'prpl-account-created-message'
-			).style.display = 'block';
-
-			// Hide the form.
-			document.getElementById( 'prpl-onboarding-form' ).style.display =
-				'none';
-
 			// Make a local request to save the response data.
 			progressPlannerSaveLicenseKey( response.license_key ).then( () => {
 				// Refresh the page.
@@ -144,9 +133,26 @@ if ( document.getElementById( 'prpl-onboarding-form' ) ) {
 				return;
 			}
 
-			document.querySelector(
-				'#prpl-onboarding-form input[type="submit"]'
-			).disabled = true;
+			// Disable all (both buttons) submit buttons.
+			document
+				.querySelectorAll(
+					'#prpl-onboarding-form input[type="submit"]'
+				)
+				.forEach( ( input ) => {
+					input.disabled = true;
+				} );
+
+			// Show the spinner.
+			const spinner = document.createElement( 'span' );
+			spinner.classList.add( 'prpl-spinner' );
+			spinner.innerHTML =
+				'<span class="spinner" style="visibility: visible;"></span>'; // WP spinner.
+
+			// Append spinner after submit button.
+
+			document
+				.getElementById( 'prpl-onboarding-submit-wrapper' )
+				.appendChild( spinner );
 
 			// Get all form data.
 			const data = Object.fromEntries( new FormData( event.target ) );

views/welcome.php

@@ -145,21 +145,6 @@ class="prpl-button-secondary prpl-button-secondary--no-email prpl-hidden"
 					>
 				</div>
 			</form>
-
-			<div>
-				<p id="prpl-account-created-message" style="display:none;">
-					<?php
-					\printf(
-						/* translators: %s: progressplanner.com link */
-						\esc_html__( 'Success! We saved your data on %s so we can email you every week.', 'progress-planner' ),
-						'<a href="' . \esc_url( \progress_planner()->get_ui__branding()->get_url( 'https://prpl.fyi/home' ) ) . '">ProgressPlanner.com</a>'
-					);
-					?>
-				</p>
-				<p id="prpl-account-not-created-message" style="display:none;">
-					<?php \esc_html_e( 'Success! Enjoy using the Progress Planner plugin!', 'progress-planner' ); ?>
-				</p>
-			</div>
 		</div>
 		<div class="right">
 			<img