a4a: display warning modal when deactivating the plugin (#36523)

* a4a: display warning modal when deactivating the plugin

References:

- pfunGA-sQ-p2#comment-1126
- 129-gh-automattic-for-agencies-dev

* Adjust modal appearance

* Set buttons font-weight

* Set margins based on Figma designs

---------

Co-authored-by: Renzo Canepa <rcanepag@gmail.com>

projects/plugins/automattic-for-agencies-client/changelog/add-a4a-plugin-deactivationn

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+General: add modal displayed when deactivating the plugin.

projects/plugins/automattic-for-agencies-client/composer.json

@@ -10,6 +10,7 @@
 		"automattic/jetpack-config": "@dev",
 		"automattic/jetpack-connection": "@dev",
 		"automattic/jetpack-identity-crisis": "@dev",
+		"automattic/jetpack-plugin-deactivation": "@dev",
 		"automattic/jetpack-plugins-installer": "@dev",
 		"automattic/jetpack-sync": "@dev"
 	},

projects/plugins/automattic-for-agencies-client/src/admin/deactivation-dialog.php

@@ -0,0 +1,83 @@
+<?php
+/**
+ * Contents of the modal displayed when one clicks on the deactivate link for the plugin.
+ *
+ * This setup relies on the automattic/jetpack-plugin-deactivation package.
+ *
+ * @package automattic/automattic-for-agencies-client-plugin
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+?>
+<main class="jp-plugin-deactivation__dialog__content">
+	<h1><?php esc_html_e( 'Are you sure you want to disconnect this site?', 'automattic-for-agencies-client' ); ?></h1>
+	<p><?php esc_html_e( 'It will no longer show up in the Automattic for Agencies dashboard and you won’t be able to update plugins with one click or be notified of any downtime.', 'automattic-for-agencies-client' ); ?></p>
+</main>
+<footer class="jp-plugin-deactivation__dialog__actions">
+	<button
+		type="button"
+		class="jp-plugin-deactivation__button"
+		data-jp-plugin-deactivation-action="close"
+	><?php esc_html_e( 'Keep the site connected', 'automattic-for-agencies-client' ); ?></button>
+	<button
+		type="button"
+		class="jp-plugin-deactivation__button jp-plugin-deactivation__button--destructive"
+		data-jp-plugin-deactivation-action="deactivate"
+	><?php esc_html_e( 'Yes, disconnect site', 'automattic-for-agencies-client' ); ?></button>
+</footer>
+
+<style>
+	#jp-plugin-deactivation-automattic-for-agencies-client .jp-plugin-deactivation__dialog {
+		height: fit-content;
+		width: calc(100% - 32px);
+
+		max-width: 512px;
+
+		border-radius: 12px;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client .jp-plugin-deactivation__dialog__content {
+		background: none;
+
+		align-items: start;
+
+		padding: 2rem 2rem 0;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client .jp-plugin-deactivation__dialog__content h1 {
+		font-size: 20px;
+		line-height: 24px;
+
+		margin: 0;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client .jp-plugin-deactivation__dialog__content p {
+		font-size: 14px;
+		line-height: 20px;
+
+		margin: 2rem 0;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client footer {
+		font-weight: 600;
+
+		text-align: right;
+		border: none;
+
+		padding: 0 2rem 2rem;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client footer .jp-plugin-deactivation__button:first-child {
+		color: var(--btn-color);
+		background: none;
+		border: 1px solid var(--Gray-Gray-5, #DCDCDE);
+		border-radius: 4px;
+	}
+
+	#jp-plugin-deactivation-automattic-for-agencies-client footer .jp-plugin-deactivation__button:last-child {
+		border-radius: 4px;
+		background: var(--Red-Red-60, #B32D2E);
+	}
+</style>

projects/plugins/automattic-for-agencies-client/src/class-automattic-for-agencies-client.php

@@ -13,6 +13,7 @@
 use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Connection\Rest_Authentication as Connection_Rest_Authentication;
+use Automattic\Jetpack\Plugin_Deactivation\Deactivation_Handler;
 use Automattic\Jetpack\Sync\Data_Settings;
 
 /**
@@ -34,6 +35,9 @@ public static function init() {
 
 		// Add scripts and styles to our admin page.
 		add_action( 'load-settings_page_' . AUTOMATTIC_FOR_AGENCIES_CLIENT_SLUG, array( static::class, 'load_scripts_styles' ) );
+
+		// Display a modal when trying to deactivate the plugin.
+		Deactivation_Handler::init( AUTOMATTIC_FOR_AGENCIES_CLIENT_SLUG, __DIR__ . '/admin/deactivation-dialog.php' );
 	}
 
 	/**