Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add survey modal on WooPayments deactivation #8757

Merged
merged 21 commits into from
Jun 5, 2024

Conversation

mordeth
Copy link
Contributor

@mordeth mordeth commented May 2, 2024

Fixes #1527

Changes proposed in this Pull Request

This PR aims to enhance user experience by implementing a feedback survey modal upon deactivation of the WooPayments plugin. Providing users with the opportunity to share their feedback upon deactivation will help us better understand their needs and preferences, ultimately leading to a more refined product.

Screenshot 2024-05-02 at 12 43 24

Testing instructions

Case 1

  • Navigate to Plugins.
  • Click deactivate link under WooPayments plugin.
  • Verify a survey modal is displayed.
  • Fill and Close the modal.
  • Verify the plugin is deactivated successfully.

Case 2

  • Navigate to Plugins.
  • Enable the plugin again.
  • If tested locally the following command should be executed on CLI wp option update wcpay_exit_survey_last_shown 2024-06-04T11:05:42.291Z
  • Refresh the page and click deactivate link under WooPayments plugin.
  • The plugin should be deactivated without showing the survey.

Case 3

  • Navigate to Plugins.
  • Enable the plugin again.
  • Execute the following CLI command wp option update wcpay_exit_survey_last_shown 2024-05-01T11:05:42.291Z.
  • Refresh the page and click deactivate link under WooPayments plugin.
  • Fill and Close the modal.
  • Verify the plugin is deactivated successfully.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented May 2, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8757 or branch name add/1527-survey-modal-on-deactivation in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: a42d6c5
  • Build time: 2024-06-05 09:09:38 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented May 2, 2024

Size Change: +20.1 kB (+2%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/plugins-page-rtl.css 388 B +388 B (new file) 🆕
release/woocommerce-payments/dist/plugins-page.css 388 B +388 B (new file) 🆕
release/woocommerce-payments/dist/plugins-page.js 19.3 kB +19.3 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 172 B
release/woocommerce-payments/assets/css/success.rtl.css 172 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.js 51 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart-block.js 15.3 kB
release/woocommerce-payments/dist/cart.js 4.46 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/checkout.js 31.4 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 155 B
release/woocommerce-payments/dist/express-checkout.css 155 B
release/woocommerce-payments/dist/express-checkout.js 3.59 kB
release/woocommerce-payments/dist/index-rtl.css 40.7 kB
release/woocommerce-payments/dist/index.css 40.7 kB
release/woocommerce-payments/dist/index.js 293 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.7 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.8 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 5.91 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/product-details.js 11.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11 kB
release/woocommerce-payments/dist/settings.css 10.9 kB
release/woocommerce-payments/dist/settings.js 201 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 155 B
release/woocommerce-payments/dist/tokenized-payment-request.css 155 B
release/woocommerce-payments/dist/tokenized-payment-request.js 6.29 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.83 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 15.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 627 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 628 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 390 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 214 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 523 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 722 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 408 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 517 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@mordeth mordeth self-assigned this May 2, 2024
@mordeth mordeth requested a review from a team May 2, 2024 09:48
@mordeth mordeth marked this pull request as ready for review May 2, 2024 09:49
@mordeth mordeth requested a review from elizaan36 May 8, 2024 12:11
@mordeth
Copy link
Contributor Author

mordeth commented May 8, 2024

@elizaan36, what do you think about developing a new CrowdSignal style theme? This would help reduce the spacing between paragraphs and headings, allowing us to fit the survey into the modal without requiring a scrollbar.

@elizaan36
Copy link

elizaan36 commented May 9, 2024

hey @mordeth How do you create a new theme in Crowdsignal?

@mordeth
Copy link
Contributor Author

mordeth commented May 13, 2024

hey @mordeth How do you create a new theme in Crowdsignal?

If you scroll down on the theme selection screen, you'll find a button to create a new custom theme. If you prefer, I can create a new theme style with reduced spacings, and you can review it later. WDYT?

@elizaan36
Copy link

If you prefer, I can create a new theme style with reduced spacings, and you can review it later. WDYT?

Thanks @mordeth, I think it would help a lot if you were able to give that a try! I mocked it up quickly to see how we could adjust the spacing. Here I've reduced spacing between the selections, and the Additional comments.

Frame 1000006676

Also it would balance the form to have equal margins top and bottom (it needed some space above the WooPayments logo). Hopefully this can help remove the scrollbar. WDYT?

Copy link
Contributor

@oaratovskyi oaratovskyi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, worked well with a fix we discussed in Slack p1716195847191189/1716192002.072229-slack-C03KTTK2YMA! Left a couple of code suggestions, the main is to add wp-components as a dependency to make it work. Pre-approving 🟢
Leaving the design approval to @elizaan36

templates/plugins-page/plugins-page-wrapper.php Outdated Show resolved Hide resolved
templates/plugins-page/plugins-page-wrapper.php Outdated Show resolved Hide resolved
includes/admin/class-wc-payments-admin.php Outdated Show resolved Hide resolved
client/plugins-page/index.js Outdated Show resolved Hide resolved
Copy link

@elizaan36 elizaan36 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM since I think the theme changes can be applied outside the scope of this PR.

@mordeth mordeth requested a review from a team June 4, 2024 11:39
@mordeth
Copy link
Contributor Author

mordeth commented Jun 4, 2024

@oaratovskyi Could you please review and test the updated approach again? The survey should always be displayed the first time of deactivation. After that, it should not be shown for the next 7 days, and then every 7 days after it has been successfully displayed.

@oaratovskyi
Copy link
Contributor

sure @mordeth ! I'll do it tomorrow

Copy link
Member

@elazzabi elazzabi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally, it shows every time I try to deactivate it:

Screen.Recording.2024-06-05.at.09.38.31.mov

@mordeth
Copy link
Contributor Author

mordeth commented Jun 5, 2024

Tested locally, it shows every time I try to deactivate it

@elazzabi There is a known issue with the updateOptions in the local environment where it consistently fails.

Please use the CLI command wp option update wcpay_exit_survey_last_shown 2024-05-01T11:05:42.291Z to update the option for local testing or use live environment.

@oaratovskyi
Copy link
Contributor

@elazzabi @mordeth it worked well in my local
everything according to testing instructions
🤔

@elazzabi
Copy link
Member

elazzabi commented Jun 5, 2024

Hmmm weird, I still can't get it to work even with the CLI command ^ 🤔

Copy link
Member

@elazzabi elazzabi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok tested this with a JN site:

  1. First, spinning up the JN site with this PR
  2. Deactivating the plugin, the modal shows
  3. For some reason, once the plugin is deactivated, it is completely removed (I double-checked with another random PR and the same thing happens in JN, probably something with Jetpack Beta or how JN websites work... See video next)
  4. Installed the plugin again
  5. Deactivating the plugin again, the modal doesn't show

All good ✅

Screen.Recording.2024-06-05.at.10.43.42.mov

@mordeth mordeth added this pull request to the merge queue Jun 5, 2024
Merged via the queue into develop with commit 282dfe6 Jun 5, 2024
23 checks passed
@mordeth mordeth deleted the add/1527-survey-modal-on-deactivation branch June 5, 2024 14:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show exit feedback modal upon deactivation
5 participants