Show modal to users for blocked-popup.

Author: iamdharmesh

css/admin.css

@@ -262,3 +262,8 @@ th.mailchimp-connect {
 	display: block;
 	color: #db3a1b;
 }
+
+.mailchimp-sf-oauth-connect-wrapper {
+	display: flex;
+	text-align: right;
+}

includes/class-mailchimp-data-encryption.php

@@ -128,7 +128,7 @@ private function get_default_key() {
 	/**
 	 * Gets the default encryption salt to use.
 	 *
-	 * @since 1.0.0
+	 * @since x.x.x
 	 *
 	 * @return string Encryption salt.
 	 */

js/admin.js

@@ -25,8 +25,31 @@
 		const popup = window.open(startUrl, params.oauth_window_name, windowOptions);
 
 		if (popup == null) {
-			// TODO: Handle popup blocked.
-			console.error('Popup blocked. Please enable popups for this site.');
+			// Show modal if popup is blocked.
+			$('#login-popup-blocked-modal').dialog({
+				modal: true,
+				title: params.modal_title,
+				width: 480,
+				buttons: [
+					{
+						text: params.modal_button_cancel,
+						class: 'button-secondary',
+						click() {
+							$(this).dialog('close');
+						},
+					},
+					{
+						text: params.modal_button_try_again,
+						class: 'button-primary',
+						click() {
+							$(this).dialog('close');
+							openMailChimpOauthPopup(token);
+						},
+						style: 'margin-left: 10px;',
+					},
+				],
+			});
+			$(spinner).removeClass('is-active');
 		} else {
 			// Handle popup opened.
 			const oauthInterval = window.setInterval(function () {

views/setup_page.php

@@ -86,6 +86,14 @@
 				</tr>
 			</table>
 			<p class="oauth-error error_msg" style="display:none;"></p>
+			<div id="login-popup-blocked-modal" style="display:none;">
+				<p><?php esc_html_e( 'Please allow your browser to show popups for this page.', 'distributor' ); ?></p>
+				<div class="footer">
+					<a href="https://mailchimp.com/help/enable-pop-ups-in-your-browser/"><!--TODO: This link not working fix this. -->
+						<?php esc_html_e( 'How to Enable Pop-ups in Your Browser', 'mailchimp' ); ?>
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>