Merge pull request #67 from mailchimp/enhancement/migrate-to-oauth

Improve migration flow to new OAuth authentication for a better user experience.
mailchimp · Oct 10, 2024 · 44d673f · 44d673f
2 parents df5f5f8 + 9135ab0
commit 44d673f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 30 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -523,6 +523,24 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade {
 	clear: both;
 }
 
+.migrate-to-oauth-wrapper {
+	margin: 1em 0;
+}
+
+.migrate-to-oauth-wrapper .button.mailchimp-sf-button {
+	padding: 9px 16px;
+	line-height: 14px;
+}
+
+.migrate-to-oauth-wrapper button.button.mailchimp-sf-button:disabled {
+	padding: 6px 16px;
+}
+
+.migrate-to-oauth-wrapper button.button.mailchimp-sf-button svg {
+	width: 20px;
+	height: 20px;
+}
+
 .button.mailchimp-sf-button.button-secondary.small {
 	background-color: transparent;
 }

diff --git a/includes/admin/templates/login-button.php b/includes/admin/templates/login-button.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Suggest to login template
+ *
+ * @package Mailchimp
+ */
+
+$button_text = $login_button_text ?? __( 'Log in', 'mailchimp' );
+?>
+<button id="mailchimp_sf_oauth_connect" class="button mailchimp-sf-button">
+	<span class="mailchimp-sf-loading hidden">
+		<svg class="animate-spin" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+		</svg>
+	</span>
+	<?php echo esc_html( $button_text ); ?>
+</button>
+<p class="mailchimp-sf-oauth-error error-field" style="display:none;"></p>
+<div id="mailchimp-sf-popup-blocked-modal" style="display:none;">
+	<p><?php esc_html_e( 'Please allow your browser to show popups for this page.', 'mailchimp' ); ?></p>
+</div>
diff --git a/includes/admin/templates/suggest-to-login.php b/includes/admin/templates/suggest-to-login.php
@@ -26,18 +26,9 @@
 			?>
 		</p>
 
-		<button id="mailchimp_sf_oauth_connect" class="button mailchimp-sf-button">
-			<span class="mailchimp-sf-loading hidden">
-				<svg class="animate-spin" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-				</svg>
-			</span>
-			<?php esc_html_e( 'Log in', 'mailchimp' ); ?>
-		</button>
-		<p class="mailchimp-sf-oauth-error error-field" style="display:none;"></p>
-		<div id="mailchimp-sf-popup-blocked-modal" style="display:none;">
-			<p><?php esc_html_e( 'Please allow your browser to show popups for this page.', 'mailchimp' ); ?></p>
-		</div>
+		<?php
+		// Login button.
+		include_once MCSF_DIR . 'includes/admin/templates/login-button.php'; // phpcs:ignore PEAR.Files.IncludingFile.UseRequireOnce
+		?>
 	</div>
 </div>
diff --git a/includes/class-mailchimp-admin.php b/includes/class-mailchimp-admin.php
@@ -299,6 +299,7 @@ public function verify_and_save_oauth_token( $access_token, $data_center ) {
 			$data_encryption = new Mailchimp_Data_Encryption();
 
 			// Clean up the old data.
+			delete_option( 'mc_api_key' ); // Deprecated API key, need to remove as part of the migration.
 			delete_option( 'mailchimp_sf_access_token' );
 			delete_option( 'mailchimp_sf_auth_error' );
 			delete_option( 'mc_datacenter' );
@@ -338,29 +339,49 @@ public function admin_notices() {
 		if ( ! current_user_can( 'manage_options' ) ) {
 			return;
 		}
+		$current_screen = get_current_screen();
 
 		// Display a deprecation notice if the user is using an API key to connect with Mailchimp.
 		if ( get_option( 'mc_api_key', '' ) && ! get_option( 'mailchimp_sf_access_token', '' ) && mailchimp_sf_should_display_form() ) {
-			?>
-			<div class="notice notice-warning is-dismissible">
-				<p>
-					<?php
-					$message = sprintf(
-						/* translators: Placeholders: %1$s - <a> tag, %2$s - </a> tag */
-						__( 'Heads up! It looks like you\'re using an API key to connect with Mailchimp, which is now deprecated. Please log out and reconnect your Mailchimp account using the new OAuth authentication by clicking the "Log in" button on the %1$splugin settings%2$s page.', 'mailchimp' ),
-						'<a href="' . esc_url( admin_url( 'admin.php?page=mailchimp_sf_options' ) ) . '">',
-						'</a>'
-					);
-
-					echo wp_kses( $message, array( 'a' => array( 'href' => array() ) ) );
-					?>
-				</p>
-			</div>
-			<?php
+
+			if ( $current_screen && 'toplevel_page_mailchimp_sf_options' === $current_screen->id ) {
+				?>
+				<div class="notice notice-warning">
+					<p>
+						<?php
+						esc_html_e( 'You are using an outdated API Key connection to Mailchimp, please migrate to the new OAuth authentication method to continue accessing your Mailchimp account.', 'mailchimp' );
+						?>
+					</p>
+					<div class="migrate-to-oauth-wrapper">
+						<?php
+						// Migrate button.
+						$login_button_text = __( 'Migrate to OAuth authentication', 'mailchimp' );
+						include_once MCSF_DIR . 'includes/admin/templates/login-button.php'; // phpcs:ignore PEAR.Files.IncludingFile.UseRequireOnce
+						?>
+					</div>
+				</div>
+				<?php
+			} else {
+				?>
+				<div class="notice notice-warning is-dismissible">
+					<p>
+						<?php
+						$message = sprintf(
+							/* translators: Placeholders: %1$s - <a> tag, %2$s - </a> tag */
+							__( 'You are using an outdated API Key connection to Mailchimp, please migrate to the new OAuth authentication method to continue accessing your Mailchimp account by clicking the "Migrate to OAuth authentication" button on the %1$sMailchimp settings%2$s page.', 'mailchimp' ),
+							'<a href="' . esc_url( admin_url( 'admin.php?page=mailchimp_sf_options' ) ) . '">',
+							'</a>'
+						);
+
+						echo wp_kses( $message, array( 'a' => array( 'href' => array() ) ) );
+						?>
+					</p>
+				</div>
+				<?php
+			}
 		}
 
 		// Display a notice if the user is waiting for the login to complete.
-		$current_screen = get_current_screen();
 		if ( $current_screen && 'toplevel_page_mailchimp_sf_options' === $current_screen->id ) {
 			$api = mailchimp_sf_get_api();
 			if ( $api && 'waiting' === get_option( 'mailchimp_sf_waiting_for_login' ) ) {