From 6c55c76010f969427b826449855b5e5640e663d8 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 3 Nov 2022 15:58:20 +0000 Subject: [PATCH 1/8] Added deactivation modal when deactivating ConvertKit Plugin --- admin/class-convertkit-admin-deactivation.php | 137 ++++++++++++++++++ includes/class-wp-convertkit.php | 1 + resources/backend/css/deactivation.css | 37 +++++ resources/backend/js/deactivation.js | 90 ++++++++++++ views/backend/deactivation/modal.php | 55 +++++++ wp-convertkit.php | 1 + 6 files changed, 321 insertions(+) create mode 100644 admin/class-convertkit-admin-deactivation.php create mode 100644 resources/backend/css/deactivation.css create mode 100644 resources/backend/js/deactivation.js create mode 100644 views/backend/deactivation/modal.php diff --git a/admin/class-convertkit-admin-deactivation.php b/admin/class-convertkit-admin-deactivation.php new file mode 100644 index 000000000..4abef9a95 --- /dev/null +++ b/admin/class-convertkit-admin-deactivation.php @@ -0,0 +1,137 @@ + array( + 'name' => strtolower( CONVERTKIT_PLUGIN_NAME ), + 'version' => CONVERTKIT_PLUGIN_VERSION + ), + ) + ); + + // Output deactivation modal view in admin footer. + add_action( 'admin_footer', array( $this, 'output_deactivation_modal' ) ); + + } + + /** + * Enqueue CSS on the Plugins screen to handle displaying + * the deactivation modal. + * + * @since 2.0.2 + * + * @param string $hook Hook. + */ + public function enqueue_styles( $hook ) { + + // Bail if we are not on the Plugin screen. + if ( $hook !== 'plugins.php' ) { + return; + } + + // Enqueue styles. + wp_enqueue_style( 'convertkit-admin-deactivation', CONVERTKIT_PLUGIN_URL . 'resources/backend/css/deactivation.css', array(), CONVERTKIT_PLUGIN_VERSION ); + + } + + /** + * Outputs the Deactivation Modal HTML, which is displayed by Javascript. + * + * @since 2.0.2 + */ + public function output_deactivation_modal() { + + // Define the deactivation reasons. + $reasons = array( + 'not_working' => __( 'The Plugin didn\'t work', 'convertkit' ), + 'better_alternative' => __( 'I found a better Plugin', 'convertkit' ), + 'other' => __( 'Other', 'convertkit' ), + ); + + // Output modal, which will be displayed when the user clicks deactivate on this plugin. + require_once CONVERTKIT_PLUGIN_PATH . '/views/backend/deactivation/modal.php'; + + } + + /** + * Sends the deactivation reason. + * + * @since 2.0.2 + */ + public function deactivation_modal_submit() { + + // Build args. + // phpcs:disable WordPress.Security.NonceVerification + $args = array( + 'product' => sanitize_text_field( $_REQUEST['product'] ), + 'version' => sanitize_text_field( $_REQUEST['version'] ), + 'reason' => sanitize_text_field( $_REQUEST['reason'] ), + 'reason_text' => sanitize_text_field( $_REQUEST['reason_text'] ), + 'reason_email' => sanitize_text_field( $_REQUEST['reason_email'] ), + 'site_url' => str_replace( wp_parse_url( get_bloginfo( 'url' ), PHP_URL_SCHEME ) . '://', '', get_bloginfo( 'url' ) ), + ); + // phpcs:enable + + // Send deactivation reason. + /* + // @TODO. + $response = wp_remote_get( $this->endpoint . '/index.php?' . http_build_query( $args ) ); + + // Return error or success, depending on the result. + if ( is_wp_error( $response ) ) { + wp_send_json_error( $response->get_error_message(), wp_remote_retrieve_response_code( $response ) ); + } + + wp_send_json_success( wp_remote_retrieve_body( $response ) ); + */ + + } + +} diff --git a/includes/class-wp-convertkit.php b/includes/class-wp-convertkit.php index d1e72e100..f34aa5377 100644 --- a/includes/class-wp-convertkit.php +++ b/includes/class-wp-convertkit.php @@ -66,6 +66,7 @@ private function initialize_admin() { $this->classes['admin_bulk_edit'] = new ConvertKit_Admin_Bulk_Edit(); $this->classes['admin_category'] = new ConvertKit_Admin_Category(); + $this->classes['admin_deactivation'] = new ConvertKit_Admin_Deactivation(); $this->classes['admin_post'] = new ConvertKit_Admin_Post(); $this->classes['admin_quick_edit'] = new ConvertKit_Admin_Quick_Edit(); $this->classes['admin_refresh_resources'] = new ConvertKit_Admin_Refresh_Resources(); diff --git a/resources/backend/css/deactivation.css b/resources/backend/css/deactivation.css new file mode 100644 index 000000000..02d6d892b --- /dev/null +++ b/resources/backend/css/deactivation.css @@ -0,0 +1,37 @@ +.convertkit-modal-overlay { + display: none; + position: fixed; + z-index: 99999999; + top: 0; + left: 0; + opacity: 0.7; + width: 100vw; + height: 100vh; + background-color: #000; +} +.convertkit-modal { + display: none; + position: fixed; + z-index: 100000000; + + top: 50vh; + left: 50vw; + width: 50vw; + height: 300px; + margin: -150px 0 0 -25vw; + + box-sizing: border-box; + background-color: #f7f7f7; + padding: 20px; +} +.convertkit-modal h2 { + font-size: 20px; + line-height: 25px; + font-weight: 700; + margin: 0 0 10px 0; + padding: 0; +} +.convertkit-modal p.message { + margin: 0 0 20px 0; + padding: 0; +} \ No newline at end of file diff --git a/resources/backend/js/deactivation.js b/resources/backend/js/deactivation.js new file mode 100644 index 000000000..5775ac5f3 --- /dev/null +++ b/resources/backend/js/deactivation.js @@ -0,0 +1,90 @@ +/** + * Shows the deactivation modal window when the Plugin is deactivated + * through the Plugins screen, giving the user an option to specify + * why they are deactivating. + * + * @package ConvertKit + * @author ConvertKit + */ + +var convertkit_deactivation_url; + +jQuery( document ).ready( + function( $ ) { + + /** + * Show deactivation modal if the user is deactivating our plugin. + */ + $( 'span.deactivate a' ).on( + 'click', + function( e ) { + + // If the link slug doesn't exist, let the request through. + var plugin_name = $( this ).closest( 'tr' ).data( 'slug' ); + if ( typeof plugin_name === 'undefined' ) { + return true; + } + + // If the Plugin being deactivated isn't our one, let the request through. + if ( plugin_name != convertkit_deactivation.plugin.name ) { + return true; + } + + // If here, we're deactivating our plugin. + e.preventDefault(); + + // Store the target URL. + convertkit_deactivation_url = $( this ).attr( 'href' ); + + // Show the modal. + $( '#convertkit-deactivation-modal, #convertkit-deactivation-modal-overlay' ).show(); + + } + ); + + /** + * Send the result of the deactivation modal when the submit button is clicked, + * and load the deactivation URL so that the plugin gets deactivated. + */ + $( 'form#convertkit-deactivation-modal-form' ).on( + 'submit', + function( e ) { + + e.preventDefault(); + + var convertkit_deactivation_reason = $( 'input[name=reason]:checked', $( this ) ).val(), + convertkit_deactivation_reason_text = $( 'input[name=reason_text]', $( this ) ).val(); + + // Submit the form via AJAX if a reason was given. + if ( typeof convertkit_deactivation_reason !== 'undefined' ) { + $.ajax( + { + url: ajaxurl, + type: 'POST', + async: true, + data: { + action: 'convertkit_deactivation_modal_submit', + product: convertkit_deactivation.plugin.name, + version: convertkit_deactivation.plugin.version, + reason: convertkit_deactivation_reason, + reason_text: convertkit_deactivation_reason_text + }, + error: function( a, b, c ) { + }, + success: function( result ) { + } + } + ); + } + + // Hide the modal. + $( '#convertkit-deactivation-modal, #convertkit-deactivation-modal-overlay' ).hide(); + + // Load the deactivation URL. + window.location.href = convertkit_deactivation_url; + + } + ); + + } +); diff --git a/views/backend/deactivation/modal.php b/views/backend/deactivation/modal.php new file mode 100644 index 000000000..77c7e9807 --- /dev/null +++ b/views/backend/deactivation/modal.php @@ -0,0 +1,55 @@ + +
+
+

+ +

+ +

+ +

+ +
+
    + 0 ) { + foreach ( $reasons as $key => $label ) { + ?> +
  • + +
    • + +
+ +
+

+ + +

+
+ + +
+
diff --git a/wp-convertkit.php b/wp-convertkit.php index 4e7c801aa..4b4723ceb 100644 --- a/wp-convertkit.php +++ b/wp-convertkit.php @@ -89,6 +89,7 @@ require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-bulk-edit.php'; require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-quick-edit.php'; require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-category.php'; + require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-deactivation.php'; require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-post.php'; require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-refresh-resources.php'; require_once CONVERTKIT_PLUGIN_PATH . '/admin/class-convertkit-admin-settings.php'; From 45293265fe103d75876d803ddde67ed03693e906 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 3 Nov 2022 16:03:06 +0000 Subject: [PATCH 2/8] Coding standards --- admin/class-convertkit-admin-deactivation.php | 25 +++++-------------- includes/class-wp-convertkit.php | 2 +- resources/backend/css/deactivation.css | 2 +- resources/backend/js/deactivation.js | 4 +-- 4 files changed, 10 insertions(+), 23 deletions(-) diff --git a/admin/class-convertkit-admin-deactivation.php b/admin/class-convertkit-admin-deactivation.php index 4abef9a95..66fcf1acf 100644 --- a/admin/class-convertkit-admin-deactivation.php +++ b/admin/class-convertkit-admin-deactivation.php @@ -51,7 +51,7 @@ public function enqueue_scripts( $hook ) { array( 'plugin' => array( 'name' => strtolower( CONVERTKIT_PLUGIN_NAME ), - 'version' => CONVERTKIT_PLUGIN_VERSION + 'version' => CONVERTKIT_PLUGIN_VERSION, ), ) ); @@ -110,28 +110,15 @@ public function deactivation_modal_submit() { // Build args. // phpcs:disable WordPress.Security.NonceVerification $args = array( - 'product' => sanitize_text_field( $_REQUEST['product'] ), - 'version' => sanitize_text_field( $_REQUEST['version'] ), - 'reason' => sanitize_text_field( $_REQUEST['reason'] ), - 'reason_text' => sanitize_text_field( $_REQUEST['reason_text'] ), - 'reason_email' => sanitize_text_field( $_REQUEST['reason_email'] ), - 'site_url' => str_replace( wp_parse_url( get_bloginfo( 'url' ), PHP_URL_SCHEME ) . '://', '', get_bloginfo( 'url' ) ), + 'product' => sanitize_text_field( $_REQUEST['product'] ), + 'version' => sanitize_text_field( $_REQUEST['version'] ), + 'reason' => sanitize_text_field( $_REQUEST['reason'] ), + 'reason_text' => sanitize_text_field( $_REQUEST['reason_text'] ), + 'site_url' => str_replace( wp_parse_url( get_bloginfo( 'url' ), PHP_URL_SCHEME ) . '://', '', get_bloginfo( 'url' ) ), ); // phpcs:enable // Send deactivation reason. - /* - // @TODO. - $response = wp_remote_get( $this->endpoint . '/index.php?' . http_build_query( $args ) ); - - // Return error or success, depending on the result. - if ( is_wp_error( $response ) ) { - wp_send_json_error( $response->get_error_message(), wp_remote_retrieve_response_code( $response ) ); - } - - wp_send_json_success( wp_remote_retrieve_body( $response ) ); - */ - } } diff --git a/includes/class-wp-convertkit.php b/includes/class-wp-convertkit.php index f34aa5377..2d2443d9a 100644 --- a/includes/class-wp-convertkit.php +++ b/includes/class-wp-convertkit.php @@ -66,7 +66,7 @@ private function initialize_admin() { $this->classes['admin_bulk_edit'] = new ConvertKit_Admin_Bulk_Edit(); $this->classes['admin_category'] = new ConvertKit_Admin_Category(); - $this->classes['admin_deactivation'] = new ConvertKit_Admin_Deactivation(); + $this->classes['admin_deactivation'] = new ConvertKit_Admin_Deactivation(); $this->classes['admin_post'] = new ConvertKit_Admin_Post(); $this->classes['admin_quick_edit'] = new ConvertKit_Admin_Quick_Edit(); $this->classes['admin_refresh_resources'] = new ConvertKit_Admin_Refresh_Resources(); diff --git a/resources/backend/css/deactivation.css b/resources/backend/css/deactivation.css index 02d6d892b..2924e3657 100644 --- a/resources/backend/css/deactivation.css +++ b/resources/backend/css/deactivation.css @@ -34,4 +34,4 @@ .convertkit-modal p.message { margin: 0 0 20px 0; padding: 0; -} \ No newline at end of file +} diff --git a/resources/backend/js/deactivation.js b/resources/backend/js/deactivation.js index 5775ac5f3..bd1030990 100644 --- a/resources/backend/js/deactivation.js +++ b/resources/backend/js/deactivation.js @@ -52,8 +52,8 @@ jQuery( document ).ready( e.preventDefault(); - var convertkit_deactivation_reason = $( 'input[name=reason]:checked', $( this ) ).val(), - convertkit_deactivation_reason_text = $( 'input[name=reason_text]', $( this ) ).val(); + var convertkit_deactivation_reason = $( 'input[name=reason]:checked', $( this ) ).val(), + convertkit_deactivation_reason_text = $( 'input[name=reason_text]', $( this ) ).val(); // Submit the form via AJAX if a reason was given. if ( typeof convertkit_deactivation_reason !== 'undefined' ) { From 30b62512e8ebf47737e48e60f8e27b449d5b2e73 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Mon, 21 Nov 2022 14:35:31 +0000 Subject: [PATCH 3/8] Added tests --- .../general/ActivateDeactivatePluginCest.php | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/tests/acceptance/general/ActivateDeactivatePluginCest.php b/tests/acceptance/general/ActivateDeactivatePluginCest.php index 11a69c303..880d72d20 100644 --- a/tests/acceptance/general/ActivateDeactivatePluginCest.php +++ b/tests/acceptance/general/ActivateDeactivatePluginCest.php @@ -40,5 +40,68 @@ public function testPluginActivationAndDeactivationWithOtherPlugins(AcceptanceTe // Setup API Keys at Settings > ConvertKit, which will use WordPress Libraries and show errors // if there's a conflict e.g. an older WordPress Library was loaded from another ConvertKit Plugin. $I->setupConvertKitPlugin($I); + + // Deactivate this Plugin. + $I->deactivateConvertKitPlugin($I); + } + + /** + * Test that the ConvertKit Plugin deactivates when clicking the Deactivate link on the Plugins + * screen, completing the form fields on the deactivational modal and then submitting. + * + * @since 2.0.3 + * + * @param AcceptanceTester $I Tester. + */ + public function testPluginDeactivationModal(AcceptanceTester $I) + { + $I->activateConvertKitPlugin($I); + + // Deactivate using the 'Deactivate' link on the Plugins screen, which will trigger + // ConvertKit's deactivation modal. + $I->click('a#deactivate-convertkit'); + + // Wait for modal to appear. + $I->waitForElementVisible('#convertkit-deactivation-modal'); + + // Fill modal fields. + $I->selectOption('#convertkit-deactivation-modal input[name="reason"]', 'not_working'); + $I->fillField('reason_text', 'Testing'); + $I->click('#convertkit-deactivation-modal input[type="submit"]'); + + // Check that the Plugin deactivated successfully. + $I->seePluginDeactivated('convertkit'); + + // Check that no PHP warnings or notices were output. + $I->checkNoWarningsAndNoticesOnScreen($I); + } + + /** + * Test that the ConvertKit Plugin deactivates when clicking the Deactivate link on the Plugins + * screen, ignoring the form fields on the deactivational modal and then submitting. + * + * @since 2.0.3 + * + * @param AcceptanceTester $I Tester. + */ + public function testPluginDeactivationModalWithNoFormFieldValues(AcceptanceTester $I) + { + $I->activateConvertKitPlugin($I); + + // Deactivate using the 'Deactivate' link on the Plugins screen, which will trigger + // ConvertKit's deactivation modal. + $I->click('a#deactivate-convertkit'); + + // Wait for modal to appear. + $I->waitForElementVisible('#convertkit-deactivation-modal'); + + // Submit deactivation modal. + $I->click('#convertkit-deactivation-modal input[type="submit"]'); + + // Check that the Plugin deactivated successfully. + $I->seePluginDeactivated('convertkit'); + + // Check that no PHP warnings or notices were output. + $I->checkNoWarningsAndNoticesOnScreen($I); } } From bcd031f182931415edb8dfad186675857cb29718 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 24 May 2023 13:55:11 +0100 Subject: [PATCH 4/8] Update wording --- admin/class-convertkit-admin-deactivation.php | 4 ++-- views/backend/deactivation/modal.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/admin/class-convertkit-admin-deactivation.php b/admin/class-convertkit-admin-deactivation.php index 66fcf1acf..ff3803ed5 100644 --- a/admin/class-convertkit-admin-deactivation.php +++ b/admin/class-convertkit-admin-deactivation.php @@ -90,8 +90,8 @@ public function output_deactivation_modal() { // Define the deactivation reasons. $reasons = array( - 'not_working' => __( 'The Plugin didn\'t work', 'convertkit' ), - 'better_alternative' => __( 'I found a better Plugin', 'convertkit' ), + 'not_working' => __( 'The plugin didn\'t work', 'convertkit' ), + 'better_alternative' => __( 'I found a better plugin', 'convertkit' ), 'other' => __( 'Other', 'convertkit' ), ); diff --git a/views/backend/deactivation/modal.php b/views/backend/deactivation/modal.php index 77c7e9807..81a497ef5 100644 --- a/views/backend/deactivation/modal.php +++ b/views/backend/deactivation/modal.php @@ -17,7 +17,7 @@ From 6a464018c319195df9c73c03e7575a4446ea78ba Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 24 May 2023 15:12:23 +0100 Subject: [PATCH 5/8] Started work on improving modal design and layout --- admin/class-convertkit-admin-deactivation.php | 23 +++++++- resources/backend/css/deactivation.css | 56 +++++++++++++------ resources/backend/js/deactivation.js | 19 +++++++ views/backend/deactivation/modal.php | 36 ++++-------- 4 files changed, 88 insertions(+), 46 deletions(-) diff --git a/admin/class-convertkit-admin-deactivation.php b/admin/class-convertkit-admin-deactivation.php index ff3803ed5..d85bd4951 100644 --- a/admin/class-convertkit-admin-deactivation.php +++ b/admin/class-convertkit-admin-deactivation.php @@ -90,9 +90,26 @@ public function output_deactivation_modal() { // Define the deactivation reasons. $reasons = array( - 'not_working' => __( 'The plugin didn\'t work', 'convertkit' ), - 'better_alternative' => __( 'I found a better plugin', 'convertkit' ), - 'other' => __( 'Other', 'convertkit' ), + 'temporary' => array( + 'label' => __( 'This is temporary / debugging an issue.', 'convertkit' ), + 'placeholder' => __( 'What problem are you experiencing?', 'convertkit' ), + ), + 'not_working' => array( + 'label' => __( 'Could not get the plugin to work.', 'convertkit' ), + 'placeholder' => __( 'What problem are you experiencing?', 'convertkit' ), + ), + 'better_alternative' => array( + 'label' => __( 'Found a better plugin.', 'convertkit' ), + 'placeholder' => __( 'What\'s the plugin\'s name?', 'convertkit' ), + ), + 'not_required' => array( + 'label' => __( 'Don\'t need this plugin.', 'convertkit' ), + 'placeholder' => __( 'What\'s one thing we could improve?', 'convertkit' ), + ), + 'other' => array( + 'label' => __( 'Other.', 'convertkit' ), + 'placeholder' => __( 'What can be do better?', 'convertkit' ), + ), ); // Output modal, which will be displayed when the user clicks deactivate on this plugin. diff --git a/resources/backend/css/deactivation.css b/resources/backend/css/deactivation.css index 2924e3657..e8767eeb7 100644 --- a/resources/backend/css/deactivation.css +++ b/resources/backend/css/deactivation.css @@ -4,34 +4,56 @@ z-index: 99999999; top: 0; left: 0; - opacity: 0.7; + opacity: 0.5; width: 100vw; height: 100vh; background-color: #000; } .convertkit-modal { display: none; - position: fixed; - z-index: 100000000; - - top: 50vh; - left: 50vw; - width: 50vw; - height: 300px; - margin: -150px 0 0 -25vw; + position: absolute; + white-space: normal; + width: 400px; + z-index: 100000000; box-sizing: border-box; background-color: #f7f7f7; - padding: 20px; + box-shadow: 0 0 15px -5px rgba(0, 0, 0, .5); + transition: all .3s ease-out; } -.convertkit-modal h2 { - font-size: 20px; - line-height: 25px; - font-weight: 700; - margin: 0 0 10px 0; - padding: 0; +.convertkit-modal header { + position: relative; + height: 40px; + background: url(../images/logomark-red.svg) 20px 50% no-repeat; + background-size: 20px auto; + background-color: #212f4f; } -.convertkit-modal p.message { +.convertkit-modal header::before { + content: ""; + display: block; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -10px; + border-top: 20px solid transparent; + border-right: 20px solid #212f4f; + border-bottom: 20px solid transparent; +} +.convertkit-modal header h2 { + font-size: 16px; + line-height: 40px; + font-weight: 400; + margin: 0; + padding: 0 20px 0 50px; + color: #fff; +} +.convertkit-modal form { + padding: 20px; +} +.convertkit-modal form ul { margin: 0 0 20px 0; padding: 0; } +.convertkit-modal form input[type="text"] { + display: none; +} \ No newline at end of file diff --git a/resources/backend/js/deactivation.js b/resources/backend/js/deactivation.js index bd1030990..f031e2c32 100644 --- a/resources/backend/js/deactivation.js +++ b/resources/backend/js/deactivation.js @@ -36,12 +36,31 @@ jQuery( document ).ready( // Store the target URL. convertkit_deactivation_url = $( this ).attr( 'href' ); + // Position the modal. + $( '#convertkit-deactivation-modal' ).css({ + top: $( this ).offset().top + 'px', + left: $( this ).offset().left + 'px' + }); + // Show the modal. $( '#convertkit-deactivation-modal, #convertkit-deactivation-modal-overlay' ).show(); } ); + /** + * Show input text field when a reason radio button is clicked + */ + $( 'input[type=radio]' ).on( + 'change', + 'form#convertkit-deactivation-modal-form', + function( e ) { + + console.log( 'clicked' ); + + } + ); + /** * Send the result of the deactivation modal when the submit button is clicked, * and load the deactivation URL so that the plugin gets deactivated. diff --git a/views/backend/deactivation/modal.php b/views/backend/deactivation/modal.php index 81a497ef5..c5ab443ad 100644 --- a/views/backend/deactivation/modal.php +++ b/views/backend/deactivation/modal.php @@ -9,31 +9,24 @@ ?>
-

- -

- -

- -

+
+

+ +

+
    0 ) { - foreach ( $reasons as $key => $label ) { + foreach ( $reasons as $reason => $labels ) { ?>
  • +
-
-

- - -

-
- - +
From b28b9de519009d404bf079f6f0e09ea5a42caa1b Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 24 May 2023 16:08:17 +0100 Subject: [PATCH 6/8] Completed redesign of deactivation modal --- admin/class-convertkit-admin-deactivation.php | 22 +++++++-------- includes/class-wp-convertkit.php | 2 +- resources/backend/css/deactivation.css | 27 ++++++++++--------- resources/backend/js/deactivation.js | 24 ++++++++++------- views/backend/deactivation/modal.php | 9 ++++--- 5 files changed, 46 insertions(+), 38 deletions(-) diff --git a/admin/class-convertkit-admin-deactivation.php b/admin/class-convertkit-admin-deactivation.php index d85bd4951..aec9ce2bc 100644 --- a/admin/class-convertkit-admin-deactivation.php +++ b/admin/class-convertkit-admin-deactivation.php @@ -90,25 +90,25 @@ public function output_deactivation_modal() { // Define the deactivation reasons. $reasons = array( - 'temporary' => array( - 'label' => __( 'This is temporary / debugging an issue.', 'convertkit' ), + 'temporary' => array( + 'label' => __( 'This is temporary / debugging an issue.', 'convertkit' ), 'placeholder' => __( 'What problem are you experiencing?', 'convertkit' ), ), - 'not_working' => array( - 'label' => __( 'Could not get the plugin to work.', 'convertkit' ), + 'not_working' => array( + 'label' => __( 'Could not get the plugin to work.', 'convertkit' ), 'placeholder' => __( 'What problem are you experiencing?', 'convertkit' ), ), - 'better_alternative' => array( - 'label' => __( 'Found a better plugin.', 'convertkit' ), + 'better_alternative' => array( + 'label' => __( 'Found a better plugin.', 'convertkit' ), 'placeholder' => __( 'What\'s the plugin\'s name?', 'convertkit' ), ), - 'not_required' => array( - 'label' => __( 'Don\'t need this plugin.', 'convertkit' ), + 'not_required' => array( + 'label' => __( 'Don\'t need this plugin.', 'convertkit' ), 'placeholder' => __( 'What\'s one thing we could improve?', 'convertkit' ), ), - 'other' => array( - 'label' => __( 'Other.', 'convertkit' ), - 'placeholder' => __( 'What can be do better?', 'convertkit' ), + 'other' => array( + 'label' => __( 'Other.', 'convertkit' ), + 'placeholder' => __( 'What can we do better?', 'convertkit' ), ), ); diff --git a/includes/class-wp-convertkit.php b/includes/class-wp-convertkit.php index d0467c05c..14ccce16d 100644 --- a/includes/class-wp-convertkit.php +++ b/includes/class-wp-convertkit.php @@ -67,7 +67,7 @@ private function initialize_admin() { $this->classes['admin_bulk_edit'] = new ConvertKit_Admin_Bulk_Edit(); $this->classes['admin_cache_plugins'] = new ConvertKit_Admin_Cache_Plugins(); $this->classes['admin_category'] = new ConvertKit_Admin_Category(); - $this->classes['admin_deactivation'] = new ConvertKit_Admin_Deactivation(); + $this->classes['admin_deactivation'] = new ConvertKit_Admin_Deactivation(); $this->classes['admin_notices'] = new ConvertKit_Admin_Notices(); $this->classes['admin_post'] = new ConvertKit_Admin_Post(); $this->classes['admin_quick_edit'] = new ConvertKit_Admin_Quick_Edit(); diff --git a/resources/backend/css/deactivation.css b/resources/backend/css/deactivation.css index e8767eeb7..a97fe784e 100644 --- a/resources/backend/css/deactivation.css +++ b/resources/backend/css/deactivation.css @@ -13,31 +13,31 @@ display: none; position: absolute; white-space: normal; - width: 400px; + width: 400px; z-index: 100000000; box-sizing: border-box; background-color: #f7f7f7; box-shadow: 0 0 15px -5px rgba(0, 0, 0, .5); - transition: all .3s ease-out; + transition: all .3s ease-out; } .convertkit-modal header { position: relative; height: 40px; background: url(../images/logomark-red.svg) 20px 50% no-repeat; - background-size: 20px auto; - background-color: #212f4f; + background-size: 20px auto; + background-color: #212f4f; } .convertkit-modal header::before { content: ""; - display: block; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -10px; - border-top: 20px solid transparent; - border-right: 20px solid #212f4f; - border-bottom: 20px solid transparent; + display: block; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -10px; + border-top: 20px solid transparent; + border-right: 20px solid #212f4f; + border-bottom: 20px solid transparent; } .convertkit-modal header h2 { font-size: 16px; @@ -56,4 +56,5 @@ } .convertkit-modal form input[type="text"] { display: none; -} \ No newline at end of file + margin: 0 0 20px 0; +} diff --git a/resources/backend/js/deactivation.js b/resources/backend/js/deactivation.js index f031e2c32..a836166cc 100644 --- a/resources/backend/js/deactivation.js +++ b/resources/backend/js/deactivation.js @@ -37,10 +37,12 @@ jQuery( document ).ready( convertkit_deactivation_url = $( this ).attr( 'href' ); // Position the modal. - $( '#convertkit-deactivation-modal' ).css({ - top: $( this ).offset().top + 'px', - left: $( this ).offset().left + 'px' - }); + $( '#convertkit-deactivation-modal' ).css( + { + top: ( $( this ).offset().top - $( this ).height() - 25 ) + 'px', + left: ( $( this ).offset().left + $( this ).width() + 20 ) + 'px' + } + ); // Show the modal. $( '#convertkit-deactivation-modal, #convertkit-deactivation-modal-overlay' ).show(); @@ -49,14 +51,16 @@ jQuery( document ).ready( ); /** - * Show input text field when a reason radio button is clicked + * Update input text field's placeholder when a reason radio button is clicked */ - $( 'input[type=radio]' ).on( + $( 'input[name="convertkit-deactivation-reason"]' ).on( 'change', - 'form#convertkit-deactivation-modal-form', function( e ) { - console.log( 'clicked' ); + $( 'input[name="convertkit-deactivation-reason-text"]' ).attr( + 'placeholder', + $( this ).data( 'placeholder' ) + ).show(); } ); @@ -71,8 +75,8 @@ jQuery( document ).ready( e.preventDefault(); - var convertkit_deactivation_reason = $( 'input[name=reason]:checked', $( this ) ).val(), - convertkit_deactivation_reason_text = $( 'input[name=reason_text]', $( this ) ).val(); + var convertkit_deactivation_reason = $( 'input[name=convertkit-deactivation-reason]:checked', $( this ) ).val(), + convertkit_deactivation_reason_text = $( 'input[name=convertkit-deactivation-reason-text]', $( this ) ).val(); // Submit the form via AJAX if a reason was given. if ( typeof convertkit_deactivation_reason !== 'undefined' ) { diff --git a/views/backend/deactivation/modal.php b/views/backend/deactivation/modal.php index c5ab443ad..7f1d2042e 100644 --- a/views/backend/deactivation/modal.php +++ b/views/backend/deactivation/modal.php @@ -11,7 +11,7 @@

- +

@@ -23,10 +23,11 @@ ?>
  • -
    • + +
    From e7251b991555c452df5b00532b90e0f0194ecda4 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Wed, 24 May 2023 16:10:25 +0100 Subject: [PATCH 7/8] Coding standards --- resources/backend/js/deactivation.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/resources/backend/js/deactivation.js b/resources/backend/js/deactivation.js index a836166cc..b48e881f2 100644 --- a/resources/backend/js/deactivation.js +++ b/resources/backend/js/deactivation.js @@ -109,5 +109,17 @@ jQuery( document ).ready( } ); + /** + * Hide the overlay and modal when the overlay is clicked. + */ + $( '#convertkit-deactivation-modal-overlay' ).on( + 'click', + function( e ) { + + $( '#convertkit-deactivation-modal, #convertkit-deactivation-modal-overlay' ).hide(); + + } + ); + } ); From 5910201b423f41dbbcd37975b8b2fbfa9626d0a9 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Fri, 26 May 2023 12:59:14 +0100 Subject: [PATCH 8/8] Updated tests to reflect new modal functionality --- .../general/ActivateDeactivatePluginCest.php | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/tests/acceptance/general/ActivateDeactivatePluginCest.php b/tests/acceptance/general/ActivateDeactivatePluginCest.php index 3d2efe1e6..408550766 100644 --- a/tests/acceptance/general/ActivateDeactivatePluginCest.php +++ b/tests/acceptance/general/ActivateDeactivatePluginCest.php @@ -49,7 +49,7 @@ public function testPluginActivationAndDeactivationWithOtherPlugins(AcceptanceTe * Test that the ConvertKit Plugin deactivates when clicking the Deactivate link on the Plugins * screen, completing the form fields on the deactivational modal and then submitting. * - * @since 2.0.3 + * @since 2.2.3 * * @param AcceptanceTester $I Tester. */ @@ -64,9 +64,27 @@ public function testPluginDeactivationModal(AcceptanceTester $I) // Wait for modal to appear. $I->waitForElementVisible('#convertkit-deactivation-modal'); - // Fill modal fields. - $I->selectOption('#convertkit-deactivation-modal input[name="reason"]', 'not_working'); - $I->fillField('reason_text', 'Testing'); + // Select each reason, ensuring the text input's placeholder updates. + $reasons = [ + 'temporary' => 'What problem are you experiencing?', + 'not_working' => 'What problem are you experiencing?', + 'better_alternative' => 'What\'s the plugin\'s name?', + 'not_required' => 'What\'s one thing we could improve?', + 'other' => 'What can we do better?', + ]; + foreach ($reasons as $reason => $placeholder) { + // Confirm reason can be selected as a radio button. + $I->selectOption('#convertkit-deactivation-modal input[name="convertkit-deactivation-reason"]', $reason); + + // Confirm input field's placeholder has updated, based on the selected reason. + $I->assertEquals( + $I->grabAttributeFrom('input[name="convertkit-deactivation-reason-text"]', 'placeholder'), + $placeholder + ); + } + + // Complete the input field and submit. + $I->fillField('convertkit-deactivation-reason-text', 'Testing'); $I->click('#convertkit-deactivation-modal input[type="submit"]'); // Check that the Plugin deactivated successfully. @@ -80,7 +98,7 @@ public function testPluginDeactivationModal(AcceptanceTester $I) * Test that the ConvertKit Plugin deactivates when clicking the Deactivate link on the Plugins * screen, ignoring the form fields on the deactivational modal and then submitting. * - * @since 2.0.3 + * @since 2.2.3 * * @param AcceptanceTester $I Tester. */