Update/enable frontend upgrade nudges

[stacimc]

Fixes 158-gh-Automattic/view-design and 157-gh-Automattic/view-design and 175-gh-Automattic/view-design.

Changes proposed in this Pull Request:

• re-enables frontend previews for paid blocks requiring an upgrade. If a block is unavailable due to not meeting plan requirements and the current user is an admin, the block will still be rendered on the frontend with an upgrade banner identical to the one that appears in the editor.
• refactors the existing UpgradePlanBanner used in the editor to pull out as much common code as possible into a generic Nudge component that can be server-side-rendered
• adds a frontend Stripe nudge for the Premium Block specifically, unless the upgrade nudge is already being displayed.

Upgrade nudge

Stripe nudge

On Atomic sites, the Stripe nudge redirects the user back to the post in the editor in order to edit the block/connect Stripe, rather than connecting directly to Stripe checkout

Jetpack product discussion

Internal reference: pcjTuq-8U-p2

Does this pull request change what data or activity we track or use?

• TBD

Testing instructions:

This requires re-testing across all the scenarios: wpcom and Jetpack, with and without the required plan, and with and without Stripe connected.

Test setup notes

• the wp-env scripts will not sync changes to class.jetpack-gutenberg.php, components.php, or class-blocks.php. These may need to be manually synced to their respective files in the sandbox.
• before syncing, re-run npm run build from within the Jetpack dir in order to build the SSR templates.

Test scenarios

Jetpack

• Simply verify that you cannot add a Premium Content block.

Wpcom

1. On a wpcom site with a free plan, add a Premium Content block.
2. Preview the block in the frontend and verify that the block is displayed with an Upgrade nudge (no Stripe nudge).
3. View the post in an incognito window and verify that you cannot see the block.
4. Upgrade the site to a Personal plan.
5. View the post on the frontend again and verify that you now see the Stripe nudge.
6. Open the post in an incognito window and verify that you cannot see the block or the nudge.
7. Go back to the editor and connect Stripe.
8. Preview the block and verify that it is displayed with no nudges.
9. Revisit the post in an incognito window and verify that you can now see the block.

Atomic (need to use business site so Stripe access works)

• Create a WordPress.com business site and install a plugin so it becomes an Atomic site.
• Access the site via FTP
• Upload the Jetpack Beta plugin
• Delete the symlink to "Full Site Editing" in plugins
• Via wp-admin search for an install "Editing Toolkit"
• Activate both the Jetpack beta and editing toolkit plugins
• Via FTP edit wp-content/plugins/full-site-editing/full-site-editing.php and comment out line 304.
• Select this branch in the Jetpack beta plugin.
• Follow the same steps as for wpcom (minus free site), but note that the Stripe nudge's CTA should take you back to the editor.

Other Paid Blocks (Wpcom)
(Pay with Paypal, Donations, Payments, Video, WhatsApp, Open Table, Calendly)

1. On a wpcom site with a free plan, add the paid block
2. Preview the block in the frontend and verify that it is displayed with an Upgrade nudge
3. View the post in an incognito window and verify that you cannot see the block.
4. Upgrade the site to the necessary plan level for that block
5. View the post on the frontend and verify that you can see the block with no upgrade nudge
6. View the post in an incognito window and verify that you can now see the block.

Proposed changelog entry for your changes:

• TBD

[jetpackbot]

Scheduled Jetpack release: February 2, 2021.
Scheduled code freeze: January 25, 2021

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Generated by 🚫 dangerJS against b6ad067

[apeatling]

Testing Instructions for Atomic (so Stripe connecting works):

• Create a WordPress.com business site and install a plugin so it becomes an Atomic site.
• Access the site via FTP
• Upload the Jetpack Beta plugin
• Delete the symlink to "Full Site Editing" in plugins
• Via wp-admin search for an install "Editing Toolkit"
• Activate both the Jetpack beta and editing toolkit plugins
• Via FTP edit wp-content/plugins/full-site-editing/full-site-editing.php and comment out line 304.
• Select this branch in the Jetpack beta plugin.
• Test.

[apeatling]

I've gone through a simple site, atomic site, free and paid. I've checked all existing paid blocks. Nice work!

This all worked very well except for one thing -- the Payments block seems to not display the notice on the front end. It also shows up in an incognito window, but that's also the case on master.

[apeatling]

This looks good, the only thing I see is to clean up the missing period marks at the end of comments that the linter is complaining about.

[stacimc]

the Payments block seems to not display the notice on the front end. It also shows up in an incognito window, but that's also the case on master.

@apeatling Thanks for pointing this out. Do you mean the Recurring Payments block? That block is unfortunately different because it does not use the plan_check attribute (all of its nudges are custom handled, in order to handle the jetpack_block_editor_enable_upgrade_nudge being false on jetpack). It will not get the frontend nudges for free.

I've crossed that block out in the list of paid blocks to test. Do you think it's worth a follow-up to add this to Payments for consistency? This is yet another annoying sticking point caused by that block's custom registration.

[apeatling]

@stacimc Can you make an issue as a follow up? No need to work on it for this PR.

[jeherve]

Do you think we could merge #17907 first, and then focus on this one? I think it would help, as the original Premium content block is getting a bit unwieldy.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello stacimc! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D55853-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[jeherve]

This looks good. I pushed a few changes, tested, this should be good to merge. I spotted some minor issues, but nothing blocking.

On WordPress.com Simple

I tested with D55853-code, in Chrome.

• On Free sites, I think we could do with some extra padding in the upgrade nudge for the Payments button inside the Premium Content block:

• Once I've paid for a plan and connected to Stripe, I did not see the Payment button on the frontend, only in the editor. The problem disappeared when I created a Payment button outside of the Premium Content block and assigned a plan to the button. I suppose that's because the subscription plan was saved.
• The same thing happened in Atomic.

On Atomic

I didn't spot any issues.

On Jetpack

I can't see the block when only using the production bundle. 👍

[jeherve]

Going to merge this now. I'll let you handle the WordPress.com counterpart with the other related diffs later :)

Do you want me to create issues for the comments I left above?

[stacimc]

Do you want me to create issues for the comments I left above?

@jeherve If you don't mind that would be great; I'm not positive I understand exactly how to repro. Thank you!

[jeherve]

create issues for the comments I left above

I created #18521 and #18522 to track things.

[jeherve]

r220427-wpcom