UI updates and added loader on connect page.

Author: iamdharmesh

js/admin.js

@@ -2,6 +2,8 @@
 (function ($) {
 	const params = window.mailchimp_sf_admin_params || {};
 	const oauthBaseUrl = 'https://woocommerce.mailchimpapp.com';
+	const spinner = '.mailchimp-sf-oauth-connect-wrapper .spinner';
+	const errorSelector = '.mailchimp-sf-oauth-section .oauth-error';
 
 	/**
 	 * Open Mailchimp OAuth popup.
@@ -31,7 +33,6 @@
 				if (popup.closed) {
 					// Clear interval.
 					window.clearInterval(oauthInterval);
-					// TODO: Hide/show error/loading messages.
 
 					// Check status of OAuth connection.
 					$.post(`${oauthBaseUrl}/api/status/${token}`, function (statusData) {
@@ -52,18 +53,30 @@
 										'Error calling OAuth finish endpoint. Data:',
 										finishResponse,
 									);
+									if (finishResponse.data && finishResponse.data.message) {
+										$(errorSelector).html(finishResponse.data.message);
+									} else {
+										$(errorSelector).html(params.generic_error);
+									}
+									$(errorSelector).show();
 								}
 							}).fail(function () {
 								console.error('Error calling OAuth finish endpoint.');
+								$(errorSelector).html(params.generic_error);
+								$(errorSelector).show();
 							});
 						} else {
 							console.log(
 								'Error calling OAuth status endpoint. No credentials provided at login popup? Data:',
 								statusData,
 							);
 						}
+						$(spinner).removeClass('is-active');
 					}).fail(function () {
+						$(errorSelector).html(params.generic_error);
+						$(errorSelector).show();
 						console.error('Error calling OAuth status endpoint.');
+						$(spinner).removeClass('is-active');
 					});
 				}
 			}, 250);
@@ -73,7 +86,10 @@
 	$(window).on('load', function () {
 		// Mailchimp OAuth connection.
 		$('#mailchimp_sf_oauth_connect').click(function () {
-			$('.mailchimp-sf-oauth-section .oauth-error').html('');
+			$(errorSelector).hide();
+			$(errorSelector).html('');
+			$(spinner).addClass('is-active');
+
 			$.post(
 				params.ajax_url,
 				{
@@ -85,23 +101,19 @@
 						// Open Mailchimp OAuth popup.
 						openMailChimpOauthPopup(response.data.token);
 					} else {
-						// eslint-disable-next-line no-console
-						console.error(response.data);
 						if (response.data && response.data.message) {
-							$('.mailchimp-sf-oauth-section .oauth-error').html(
-								response.data.message,
-							);
+							$(errorSelector).html(response.data.message);
 						} else {
-							$('.mailchimp-sf-oauth-section .oauth-error').html(
-								'An error occurred. Please try again.',
-							);
+							$(errorSelector).html(params.generic_error);
 						}
+						$(errorSelector).show();
+						$(spinner).removeClass('is-active');
 					}
 				},
 			).fail(function () {
-				$('.mailchimp-sf-oauth-section .oauth-error').html(
-					'An error occurred. Please try again.',
-				);
+				$(errorSelector).html(params.generic_error);
+				$(errorSelector).show();
+				$(spinner).removeClass('is-active');
 			});
 		});
 	});

views/setup_page.php

@@ -39,13 +39,10 @@
 		<?php
 			echo wp_kses(
 				__(
-					'To get started, we\'ll need to access your Mailchimp account with an <a href="http://kb.mailchimp.com/integrations/api-integrations/about-api-keys">API Key</a>. Paste your Mailchimp API key, and click <strong>Connect</strong> to continue.',
+					'To get started, we\'ll need to connect your Mailchimp account. Click <strong>Connect Account</strong> to continue.',
 					'mailchimp'
 				),
 				[
-					'a'      => [
-						'href' => [],
-					],
 					'strong' => [],
 				]
 			);
@@ -60,7 +57,7 @@
 			);
 			?>
 		</p>
-		<div class="mc-section">
+		<div class="mc-section"> <!-- TODO:remove this -->
 			<table class="widefat mc-widefat mc-api">
 			<form method="POST" action="">
 				<tr valign="top">
@@ -75,11 +72,20 @@
 				</tr>
 			</form>
 			</table>
-			<div class="mailchimp-sf-oauth-section">
-				<!-- TODO: Update design and content here -->
-				<button class="button" id="mailchimp_sf_oauth_connect" href="#"><?php esc_html_e( 'Connect Account', 'mailchimp' ); ?></button>
-				<p><span class="oauth-error"></span></p>
-			</div>
+		</div>
+		<div class="mc-section mailchimp-sf-oauth-section">
+			<table class="widefat mc-widefat mc-api">
+				<tr valign="top">
+					<th scope="row" class="mailchimp-connect"><?php esc_html_e( 'Connect to Mailchimp', 'mailchimp' ); ?></th>
+					<td>
+						<div class="mailchimp-sf-oauth-connect-wrapper">
+							<span class="spinner"></span>
+							<button class="button" id="mailchimp_sf_oauth_connect" href="#"><?php esc_html_e( 'Connect Account', 'mailchimp' ); ?></button>
+						</div>
+					</td>
+				</tr>
+			</table>
+			<p class="oauth-error error_msg" style="display:none;"></p>
 		</div>
 	</div>