Skip to content

update: subscription onboarding to use WP components #10907

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

Merged
merged 8 commits into from
Jul 16, 2025

Conversation

frosso
Copy link
Contributor

@frosso frosso commented Jul 4, 2025

Fixes WOOPMNT-5124

Changes proposed in this Pull Request

Ensuring that the subscription-product-onboarding dialog uses the components from the WP installation, rather than the @wordpress/components bundled with the plugin's codebase.

Testing instructions

Unfortunately, I couldn't find a way to "canonically" test this.
I opted for forcing the dialog to be displayed by manually altering the includes/subscriptions/class-wc-payments-subscriptions-onboarding-handler.php file:

diff --git a/includes/subscriptions/class-wc-payments-subscriptions-onboarding-handler.php b/includes/subscriptions/class-wc-payments-subscriptions-onboarding-handler.php
index 12355ebf3..301a898c5 100644
--- a/includes/subscriptions/class-wc-payments-subscriptions-onboarding-handler.php
+++ b/includes/subscriptions/class-wc-payments-subscriptions-onboarding-handler.php
@@ -39,9 +39,9 @@ class WC_Payments_Subscriptions_Onboarding_Handler {
 	public function __construct( WC_Payments_Account $account ) {
 		$this->account = $account;
 
-		if ( ! WC_Payments_Features::should_use_stripe_billing() ) {
-			return;
-		}
+//		if ( ! WC_Payments_Features::should_use_stripe_billing() ) {
+//			return;
+//		}
 
 		// This action is triggered on product save but after other required subscriptions logic is triggered.
 		add_action( 'woocommerce_admin_process_product_object', [ $this, 'product_save' ] );
@@ -67,9 +67,9 @@ class WC_Payments_Subscriptions_Onboarding_Handler {
 	 * @param WC_Product $product Subscriptions Product.
 	 */
 	public function product_save( WC_Product $product ) {
-		if ( $this->account->is_stripe_connected() ) {
-			return;
-		}
+//		if ( $this->account->is_stripe_connected() ) {
+//			return;
+//		}
 
 		// If Subscriptions plugin is installed we don't need to do this check.
 		if ( $this->is_subscriptions_plugin_active() ) {
@@ -126,7 +126,6 @@ class WC_Payments_Subscriptions_Onboarding_Handler {
 	 * Method to handle when account data is refreshed and onboarding may have been completed
 	 */
 	public function account_data_refreshed() {
-
 		if ( ! $this->account->is_stripe_connected() ) {
 			return;
 		}
@@ -180,9 +179,9 @@ class WC_Payments_Subscriptions_Onboarding_Handler {
 			return;
 		}
 
-		if ( $this->account->is_stripe_connected() ) {
-			return;
-		}
+//		if ( $this->account->is_stripe_connected() ) {
+//			return;
+//		}
 
 		WC_Payments::register_script_with_dependencies( 'wcpay-subscription-product-onboarding-modal', 'dist/subscription-product-onboarding-modal' );
 
@@ -229,9 +228,9 @@ class WC_Payments_Subscriptions_Onboarding_Handler {
 			return;
 		}
 
-		if ( $this->is_subscriptions_plugin_active() ) {
-			return;
-		}
+//		if ( $this->is_subscriptions_plugin_active() ) {
+//			return;
+//		}
 
 		WC_Payments::register_script_with_dependencies( 'wcpay-subscription-product-onboarding-toast', 'dist/subscription-product-onboarding-toast' );
 
  • Ensure you don't have the WooCommerce Subscriptions plugin active
  • In your WooPayments settings, enable the "Stripe Subscriptions" feature
Screenshot 2025-07-04 at 3 42 17 PM - Navigate to Product > Add new product Screenshot 2025-07-04 at 3 42 02 PM
  • Select "Subscription" from the product type
  • Click "publish"
  • Wait for the page to reload
  • The dialog should display
Screenshot 2025-07-04 at 3 46 27 PM
  • 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 Jul 4, 2025

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 10907 or branch name update/subscription-product-onboarding-wp-components 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: b036c63
  • Build time: 2025-07-16 12:53:44 UTC

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

@@ -87,14 +89,7 @@ const SubscriptionProductOnboardingModalContent = ( {
'woocommerce-payments'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Modifying to the external link component, since this opens in a new window. The external link component provides a visual hint that the link will open in a new page, and it ensures a11y compatibility by adding the "(opens in a new tab)" text.

@@ -10,6 +10,7 @@
}

.components-modal__content {
padding-top: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixing the top spacing on the dialog itself - see before & after:

Screenshot 2025-07-04 at 3 42 10 PM Screenshot 2025-07-04 at 3 46 27 PM

@frosso frosso self-assigned this Jul 4, 2025
@frosso frosso requested a review from a team July 4, 2025 13:58
@frosso frosso marked this pull request as ready for review July 4, 2025 13:58
Copy link
Contributor

github-actions bot commented Jul 4, 2025

Size Change: +423 B (0%)

Total Size: 1.24 MB

Filename Size Change
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B +3 B (+1%)
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B +3 B (+1%)
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.9 kB +417 B (+2%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.45 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.45 kB
release/woocommerce-payments/assets/css/success.css 1.06 kB
release/woocommerce-payments/assets/css/success.rtl.css 1.06 kB
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.73 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.73 kB
release/woocommerce-payments/dist/blocks-checkout.js 54.1 kB
release/woocommerce-payments/dist/cart-block.js 17.1 kB
release/woocommerce-payments/dist/cart.js 5.71 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.08 kB
release/woocommerce-payments/dist/checkout.css 1.08 kB
release/woocommerce-payments/dist/checkout.js 33.9 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 367 B
release/woocommerce-payments/dist/express-checkout.css 367 B
release/woocommerce-payments/dist/express-checkout.js 16.8 kB
release/woocommerce-payments/dist/frontend-tracks.js 833 B
release/woocommerce-payments/dist/index-rtl.css 22.2 kB
release/woocommerce-payments/dist/index.css 22.3 kB
release/woocommerce-payments/dist/index.js 247 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 4.07 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 61.1 kB
release/woocommerce-payments/dist/multi-currency.css 4.07 kB
release/woocommerce-payments/dist/multi-currency.js 61.8 kB
release/woocommerce-payments/dist/order-rtl.css 740 B
release/woocommerce-payments/dist/order.css 740 B
release/woocommerce-payments/dist/order.js 42.8 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 484 B
release/woocommerce-payments/dist/plugins-page.css 484 B
release/woocommerce-payments/dist/plugins-page.js 21.2 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 12.3 kB
release/woocommerce-payments/dist/settings-rtl.css 12.3 kB
release/woocommerce-payments/dist/settings.css 12.2 kB
release/woocommerce-payments/dist/settings.js 229 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 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 19.6 kB
release/woocommerce-payments/dist/success.js 6.03 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 22.6 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.11 kB
release/woocommerce-payments/dist/woopay-express-button.js 23.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.31 kB
release/woocommerce-payments/dist/woopay.css 4.28 kB
release/woocommerce-payments/dist/woopay.js 71.1 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 957 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.3 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.css 10.1 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.js 29.7 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.rtl.css 10.1 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-users-connection.js 161 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 585 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 625 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 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.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 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.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 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 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 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 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

Copy link
Member

@rtio rtio left a comment

Choose a reason for hiding this comment

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

Code looks good. We connected to get to the testing steps as I wasn't able to do it on my end.

@frosso frosso added this pull request to the merge queue Jul 16, 2025
Merged via the queue into develop with commit ad40113 Jul 16, 2025
29 checks passed
@frosso frosso deleted the update/subscription-product-onboarding-wp-components branch July 16, 2025 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants