Recurring Payments: Use Upgrade and Stripe Nudges

[ockham]

Fusion didn't work, so I generated the WP.com counterpart manually: D32570-code.

Take Two of #13233, which was getting a bit noisy. This time, I'm also adding the Stripe Connect nudge since it's rather hard to do add each nudge in a separate PR, due to the block's UX. Thus, this PR is essentially implementing mockups from p8hgLy-1RC-p2 (with some limitations, see below).

The Stripe Nudge is used both on Jetpack and WP.com, wheras the Upgrade Nudge is only used when the relevant filter returns true (i.e. currently only on WP.com).

Changes proposed in this Pull Request:

Add an UpgradeNudge and a Stripe Connect Nudge to the Recurring Payments block to replace UI that's currently part of the block itself.

Screenshots

Before

After

Is this a new feature or does it add/remove features to an existing part of Jetpack?

The Recurring Payments block isn't new; we're just using the Upgrade Nudge, and introducing the Stripe Connect Nudge to replace some previously in-button messaging.

Testing instructions:

On Jetpack, verify that the Stripe Nudge is now shown if the site is on a paid plan, but not yet connected to Stripe; furthermore, the Recurring Payments button will be previewed inside the block in that case. The block's behavior should otherwise be unchanged.

• Switch to this branch locally, build Jetpack (yarn build), and start Docker (yarn docker:up)
• Make sure you're connected to WP.com, and on a free plan
• Start a new post, and insert the 'Recurring Payments' block
• Verify that it prompts you to upgrade to a paid plan (from within the block; no upgrade nudge)
• Upgrade to a paid plan
• Verify that post-checkout, you're redirected back to the block editor. You should now see the Upgrade Nudge, and an interactive preview of the Recurring Payments button inside of the block.

Test the WP.com counterpart:

• Apply D32570-code to your sandbox
• Make sure you're on a free plan
• Start a new post, and insert the 'Recurring Payments' block
• Verify that you can change the button's label and colors
• Click the nudge's "Upgrade" CTA button
• Pay for the premium plan
• Verify that you're redirected back to where you came from (the wp-admin block editor) (without any intermediate redirects on WP.com)
• Verify that you now see the Stripe Connect Nudge on top of the block
• Click the Connect button and connect to stripe (see the Field Guide for how to do this in sandbox mode)
• Manually return to the editor and verify that the nudges are gone

You can also simulate the WP.com behavior in JP by adding <?php add_filter( 'jetpack_block_editor_enable_upgrade_nudge', '__return_true' ); to e.g. docker/mu-plugins/0-gutenpack.php and applying the following diff on top of this PR to your local JP Docker install:

diff --git a/modules/memberships/class-jetpack-memberships.php b/modules/memberships/class-jetpack-memberships.php
index 52f9e92d2..e3e7b08ef 100644
--- a/modules/memberships/class-jetpack-memberships.php
+++ b/modules/memberships/class-jetpack-memberships.php
@@ -313,7 +313,7 @@ class Jetpack_Memberships {
 		// Check p7rd6c-23C-p2 for details and progress. If ready, uncomment the right-hand side of the line with the
 		// return statement below.
 		// phpcs:ignore
-		return Jetpack::is_active(); // && Jetpack_Plan::supports( 'recurring-payments' ); // phpcs:ignore
+		return Jetpack::is_active() && Jetpack_Plan::supports( 'recurring-payments' ); // phpcs:ignore
 	}
 
 	/**

Proposed changelog entry for your changes:

Add an Upgrade Nudge and a Stripe Connect Nudge to the Recurring Payments block to replace UI that's currently part of the block itself.

Differences from p8hgLy-1RC-p2

1. The Upgrade Nudge doesn't mention Stripe. For comparison, this is the mockup:
   
   The reason is that the Upgrade Nudge is currently generically added upon block registration. We'd have to move it to individual blocks in order to customize its message, but that will have us face another problem (similar to item 4. below).
2. In the Stripe Nudge message, there are no hyperlinks pointing to additional information. Again, see the mockup:
   
   The reason is that unlike calypso-i18n, it's not straight-forward to add hyperlinks to parts of a translated string within the framework of @wordpress/i18n. (There are a few ugly/fragile ways though.)
3. Post-checkout, the user continues to be redirected back to the editor (rather than showing them the success modal within Calypso). We've already added some logic both to Calypso and Jetpack to implement this behavior after some discussion. The feature hasn't been switched on in Jetpack yet, but once it is, it'll be hard to change the redirect behavior. We should make a very conscious decision here.
4. When the Stripe Nudge is shown, there's no border around the block (unless it becomes active by clicking into it). For the Upgrade Nudge, we add the filter by adding a class to the block container div that holds the block. This is done through a filter at block registration time since the block itself doesn't have direct access to the surrounding container. The same principle doesn't easily carry over to the Stripe Nudge, since unlike block availability and required plan, we only obtain information about Stripe connection status through a network request fired by the block.

I'd suggest we discuss each of these items separately to make a plan on how to proceed with them. I think that it's conceivable that we don't block this PR by them.

[jetpackbot]

	Warnings
⚠️	pre-commit hook was skipped for one or more commits

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against e45dcbe

[ockham]

Fusion didn't work, so I generated the WP.com counterpart manually: D32570-code.

[sirreal]

It seems that we should take the filter value into account rather than checking whether a site is a Jetpack site.

[simison]

Some non-blocking visual issues:

Spacing in this area:

When aligning the block left/right, border on the left of upgrade nudge disappears:

[simison]

I couldn't reproduce the issue but for little while I ended up directed to "plans" page right from the checkout, without having change to buy the plan.

Then I went to Jetpack plans page, pressed "upgrade to personal" and the checkout step didn't redirect me. I noticed the URL having two additional ARGs upgrade nudge button didn't have: ?site=<SITE>&u=1

Now the upgrade nudge works without issues, too.

This was happening with totally fresh Jetpack Docker site, on free plan, connected as primary user.

[simison]

Not necessarily in this PR, but I don't see any blockers to actually gate out the Stripe nudge. We could very well ship that in Jetpack even if we gate out the Plans nudge?

So we'd have this:

...instead of this:

...at both .com and Jetpack.

[ockham]

Not necessarily in this PR, but I don't see any blockers to actually gate out the Stripe nudge. We could very well ship that in Jetpack even if we gate out the Plans nudge?

So we'd have this:

...instead of this:

...at both .com and Jetpack.

That would probably work and allow us to remove some code. OTOH, it might be a bit weird (in JP) to start with in-block instructions (telling you to upgrade your plan), and then seeing a nudge outside the block? Probably not a dealbreaker, but a bit weird.

[ockham]

Some non-blocking visual issues:

Spacing in this area:

Just spent an hour trying to fix this 🙄 Did I mention that I hate CSS?

[jeherve]

I don't really understand why we have this "Add Text..." button that I can't modify, and that doesn't match the different options I'll have when Stripe is connected?

Once I've connected Stripe, the button remains, but with an add margin.

It only disappears when I add a real button:

[simison]

I don't really understand why we have this "Add Text..." button that I can't modify, and that doesn't match the different options I'll have when Stripe is connected?

True, while the placeholder button lets you play with the button's appearance (including text) it can be confusing. It's still better than it was before when there was no indication of any kind how the block might look like after plan purchase + stripe connection, so I'd say not a blocker here and good for a follow up some another time.

[simison]

I rebased this PR with Calypso-build v4 update (#13503) and fixed Stripe star colors that broke in the update:

[jeherve]

Ok. It does look off to me, so I'd definitely vote for a follow-up! Other than that, everything looks good to me.

[simison]

definitely vote for a follow-up! Other than that, everything looks good to me.

I'll think about it and see if there's a creative easy win. :-)

Thanks!

[simison]

Synced Stripe color modifications in r197337-wpcom