Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge #12823

ockham · 2019-06-23T12:54:13Z

Picking up @scruffian's Automattic/wp-calypso#33723 and moving it into JP.
The rationale is that these blocks live in JP, so it's much easier to handle e.g. minimum plan information coming from the endpoint here. Furthermore, we might eventually want this upgrade nudge to also work in JP (where applicable!).

Changes proposed in this Pull Request:

Enable paid blocks on plans that don't include them for insertion into the editor, and add an upgrade nudge to them. Feature-flagged for now.

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

See paAmJe-il-p2

Screenshot

Styling pending some help from a designer 😬 :

Frontend (pre-existing, not touched by this PR, but will probably see some style and copy polish in a follow-up):

Testing instructions:

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 look for the 'Simple Payments' block in the block picker. It shouldn't be there 🙂
Now add the following line to any file in docker/mu-plugins, e.g. a newly created 0-blocks-upgrade.php (needs to start with <?php): define ( 'JETPACK_SHOW_BLOCK_UPGRADE_NUDGE', true );
Reload the post editor screen in your browser
Look for the 'Simple Payments' block in the block picker again, It should be there now: Insert it into the post.
You should see it slightly faded out, and with an upgrade banner on top of it (see screenshots above)
Edit some block settings and save the post. When viewing while logged-in, you'll see a banner telling you that your plan doesn't include Simple Payments (see screenshot above). (Note that this message has been there before this PR, in case a user downgraded from a Premium Plan. It isn't touched by this PR but possibly by a follow-up.)
Back in the editor, click the 'Upgrade' button. Verify that you're taken to the plans page, and the Premium Plan is highlighted as 'Suggested'. Purchase the plan.
Navigate back to the editor and reload. Verify that the upgrade nudge banner is gone, the block is no longer faded out, and the settings have been persisted from before. Make sure you don't modify the post.
View the post in the frontend again (you might have to reload). Verify that the block is now present and functional.
Verify that downgrading to the Free plan restores the original state (with the upgrade nudge).

Once this PR has approval, I'll manually sync the newly created files over to the WP.com counterpart, D29733-code. Doing that now doesn't make sense since they'll be removed by Fusion each time this PR changes.

Proposed changelog entry for your changes:

Enable paid blocks on plans that don't include them for insertion into the editor, and add an upgrade nudge to them.

TODO

Hide the block on the frontend if the current plan doesn't include it

We're getting this for free:

jetpack/modules/simple-payments/simple-payments.php

Lines 194 to 200 in ee0fcec

    
           sprintf( 
        
           	wp_kses( 
        
           		__( 'Your plan doesn\'t include Simple Payments. <a href="%s" rel="noopener noreferrer" target="_blank">Learn more and upgrade</a>.', 'jetpack' ), 
        
           		array( 'a' => array( 'href' => array(), 'rel' => array(), 'target' => array() ) ) 
        
           	), 
        
           	esc_url( $support_url ) 
        
           ),

. However, we might want to update/polish it a bit.

~~Use Card component~~ (not available in @wordpress/components)
~~Fix flow to return to editor after purchase~~ see below (under the 'Follow-up' heading)
Get some proper plans strings
- This is going to be interesting since we can't really use Jetpack's lib/plans/constants since that file isn't available on WP.com -- only the contents of the extensions/ directory are (on the client side, anyway). However, we have access to the REST API, so maybe we can fetch information from there.
- Fortunately, WP.com has the /plans endpoint which should provide the relevant information, so I'm thinking of using @wordpress/data and apiFetch to obtain the relevant strings (query product_slug or path_slug field, get product_name_short field).
Feature-flag this

Don't forget that this is WP.com first -- we'll probably even add a check to hide it from JP for now. This is mostly relevant for the upgrade flow.

Follow-up

This will require a Calypso counterpart, to allow us to provide a mechanism that redirect users to the editor (i.e. a given URL) post-purchase. checkout-thank-you/index.jsx is a likely candidate for those changes, see e.g. redirectIfThemePurchased. We'll probably have to pass a query arg or cookie.
Furthermore, it'd be good to polish the frontend message.
Fix styling
Add tracking

/cc @simison @sirreal

matticbot · 2019-06-23T12:54:18Z

Caution: This PR has changes that must be merged to WordPress.com
Hello ockham! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D29733-code before merging this PR. Thank you!

jetpackbot · 2019-06-23T12:56:50Z

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.

Scheduled Jetpack release: August 6, 2019.
Scheduled code freeze: July 30, 2019

Generated by 🚫 dangerJS against 73810d1

matticbot · 2019-06-24T11:06:26Z

ockham, Your synced wpcom patch D29733-code has been updated.

matticbot · 2019-06-24T11:07:52Z

ockham, Your synced wpcom patch D29733-code has been updated.

extensions/shared/register-jetpack-block.js

matticbot · 2019-06-24T22:03:04Z

ockham, Your synced wpcom patch D29733-code has been updated.

sirreal

This looks good in general 👍

I haven't tested but left some initial feedback. I'm curious to hear your thoughts 🙂

extensions/shared/register-jetpack-block.js

sirreal · 2019-06-25T11:13:45Z

extensions/shared/upgrade-nudge/index.jsx

+			<span className="upgrade-nudge__title">
+				{ sprintf( __( 'You need at least the following plan: %(plan)s', 'jetpack' ), { plan } ) }
+			</span>
+			<span className="upgrade-nudge__message">{ __( 'To gain access to this block.' ) }</span>


This seems like a single phrase that should be localized all together. Maybe the following?

To access this block, you need at least the following plan: %(plan)s

More copy discussion on this thread: paAmJe-ll-p2. Going with 9669ec3 for now.

extensions/shared/upgrade-nudge/index.jsx

extensions/shared/wrap-paid-block.jsx

modules/simple-payments/simple-payments.php

extensions/shared/upgrade-nudge/style.scss

extensions/shared/register-jetpack-block.js

mtias · 2019-06-25T13:25:28Z

extensions/shared/upgrade-nudge/index.jsx

+import './style.scss';
+
+export default ( { feature, plan } ) => (
+	<div className="upgrade-nudge">


cc @drw158 in case there's a common pattern that could eventually be extracted form this for wordpress/components (card action? call to action? banner action?)

Just "Card" seems like a good primitive to have in the core?

Probably, yes.

extensions/shared/upgrade-nudge/style.scss

matticbot · 2019-06-26T10:26:28Z

ockham, Your synced wpcom patch D29733-code has been updated.

matticbot · 2019-06-26T12:26:53Z

ockham, Your synced wpcom patch D29733-code has been updated.

This way, the user will be able to insert the block, and will be prompted to upgrade to a plan that enables it.

matticbot · 2019-07-04T09:32:22Z

ockham, Your synced wpcom patch D29733-code has been updated.

matticbot · 2019-07-04T09:34:53Z

ockham, Your synced wpcom patch D29733-code has been updated.

matticbot · 2019-07-04T10:23:47Z

ockham, Your synced wpcom patch D29733-code has been updated.

brbrr · 2019-07-04T14:17:19Z

To clarify - this PR works only with Simple Payments block?

Also, is there any plans to modify Recurring payments block to use this approach?

For reference:

brbrr · 2019-07-04T14:25:33Z

extensions/shared/upgrade-nudge/index.jsx

+
+import './style.scss';
+
+const UpgradeNudge = ( { planName, planPathSlug, postId, postType } ) => (


I see quite a long delay between "Upgrade" button pressed and the actual redirection. Is this something that we should resolve in this PR?

Also, this seems kinda expected, that upgrade flow will be loaded in the same tab, but in case of unsaved changes/updates - leaving the editor page is quite scary. Maybe we can trigger autosave or override default alert, to make sure folks are not confused?

Video for reference:

I agree it's scary. We'll see how we can ease it, perhaps by saving a revision first and showing some core loading indicator.

Just saving edits made in already published posts would be problematic.

Material for another PR.

brbrr · 2019-07-04T15:43:18Z

Verify that you're taken to the plans page, and the Premium Plan is highlighted as 'Suggested'

Not sure why, but I landed on the checkout page. with Premium plan added to my card. After checkout, I was redirected to the onboarding checklist, which I would not expect to see. We opening upgrade flow in the same editor's tab, so I would expect that flow will land me into my post editor.

brbrr

Functionally tested, and it works kinda fine. I left a few comments regarding UX and differences with testing instructions, but I'm happy to follow-up in future PRs

simison · 2019-07-04T17:32:23Z

To clarify - this PR works only with Simple Payments block?

Correct — this PR is a generic solution that can be extended for all premium blocks but implemented initially just for Simple payments.

Also, is there any plans to modify Recurring payments block to use this approach?

Yep, as well as for VideoPress and WordAds but those will need little more work. See paAmJe-uG-p2 for context.

oskosk

LGTM!

simison

Didn't do another test after the last commit but reviewed code and all looks good. 👍

There will be follow-ups, this isn't meant to be perfect yet. :-)

simison · 2019-07-04T18:54:00Z

Verify that you're taken to the plans page, and the Premium Plan is highlighted as 'Suggested'

Not sure why, but I landed on the checkout page. with Premium plan added to my card.

That was changed last minute and was expected 👍

After checkout, I was redirected to the onboarding checklist, which I would not expect to see. We opening upgrade flow in the same editor's tab, so I would expect that flow will land me into my post editor.

Heh, sorry, Calypso side is still pending merging. Automattic/wp-calypso#34440 :-)

ockham · 2019-07-05T03:19:31Z

Thanks @brbrr @oskosk @simison for reviewing/testing/merging! ❤️

* Add initial changelog / testing list changes for 7.6 * Update stable tag to 7.5.3 * changelog: add #12957 * Changelog: add #12932 * Changelog: add #12867 * Changelog: add #12823 * changelog: add #12969 * changelog: add #13012 * changelog: add #12974 * Changelog: add #13059 * Changelog: add #13079 * Changelog: add #12924 * changelog: add #12954 * Changelog: add #12959 * Changelog: add #12977 * Changelog: add #12830 * Changelog: add #12926 * Changelog: add #12958 * Changelog: add #12999 * Changelog: add #13077 * Changelog: add #13083 * Changelog: add #13087 * Changelog: add #13110 * Changelog: add #13116 * Changelog: add #13117 * Changelog: add #12821 * Changelog: add #13120 * changelog: add #13139 * Changelog: add #13143 * Changelog: add #13147 * Testing list: add section about sync

ockham added [Status] In Progress Simple Payments [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Jun 23, 2019

ockham requested a review from a team June 23, 2019 12:54

ockham self-assigned this Jun 23, 2019

matticbot added the Touches WP.com Files label Jun 23, 2019

ockham force-pushed the update/paid-block-handling branch from 2a42f87 to c14d199 Compare June 24, 2019 11:07

ockham force-pushed the update/paid-block-handling branch from c14d199 to c31a2ab Compare June 24, 2019 11:11

simison reviewed Jun 24, 2019

View reviewed changes

extensions/shared/register-jetpack-block.js Outdated Show resolved Hide resolved

sirreal reviewed Jun 25, 2019

View reviewed changes

mtias reviewed Jun 25, 2019

View reviewed changes

extensions/shared/upgrade-nudge/style.scss Outdated Show resolved Hide resolved

ockham added 11 commits June 27, 2019 11:59

Simple Payments: Report Minimum Plan Required in Availability Endpoint

d81f1b9

Blocks: Show Blocks if they're missing a plan

99976e9

This way, the user will be able to insert the block, and will be prompted to upgrade to a plan that enables it.

Steal files from @Automattic/wp-calypso#33723

a5ed423

So functional, much wow

cf5587d

Remove React import

ae97d61

Only wrap block if plan isn't sufficient

24a131c

Rename to wrap-paid-block

ea06449

Moar functional

21ec9fa

Use @wp/i18n

3ab6901

Missed when renaming to wrap-paid-block

03bb5e5

Use Button component

f721591

Fix upgrade button link

e7fdbb2

ockham dismissed simison’s stale review via e7fdbb2 July 4, 2019 09:32

s/SHOW_BLOCK_UPGRADE_NUDGE/JETPACK_SHOW_BLOCK_UPGRADE_NUDGE/g

69d50cd

Add target="_top" to Upgrade button

73810d1

brbrr reviewed Jul 4, 2019

View reviewed changes

brbrr approved these changes Jul 4, 2019

View reviewed changes

oskosk approved these changes Jul 4, 2019

View reviewed changes

simison approved these changes Jul 4, 2019

View reviewed changes

simison merged commit 27afef4 into master Jul 4, 2019

matticbot added [Status] Needs Changelog and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Jul 4, 2019

simison deleted the update/paid-block-handling branch July 4, 2019 18:38

simison mentioned this pull request Jul 4, 2019

Add a wrapper for premium blocks Automattic/wp-calypso#33723

Closed

This was referenced Jul 5, 2019

Upgrade Nudge: Fix Styling by using @wordpress/editor's Warning component #12963

Merged

Upgrade Nudge: Autosave upon Upgrade Button click #13004

Merged

Paid Blocks Nudge: Fix Border by Injecting has-warning Style #13019

Merged

jeherve added [Status] Has Changelog and removed [Status] Needs Changelog labels Jul 19, 2019

jeherve added a commit that referenced this pull request Jul 19, 2019

Changelog: add #12823

c22b801

jeherve added the [Feature] Pay with PayPal aka Simple Payments label Aug 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge #12823

Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge #12823

ockham commented Jun 23, 2019 •

edited

Loading

matticbot commented Jun 23, 2019

jetpackbot commented Jun 23, 2019 •

edited

Loading

matticbot commented Jun 24, 2019

matticbot commented Jun 24, 2019

matticbot commented Jun 24, 2019

sirreal left a comment

sirreal Jun 25, 2019

ockham Jul 1, 2019

mtias Jun 25, 2019 •

edited

Loading

simison Jun 26, 2019

mtias Jun 27, 2019

matticbot commented Jun 26, 2019

matticbot commented Jun 26, 2019

matticbot commented Jul 4, 2019

matticbot commented Jul 4, 2019

matticbot commented Jul 4, 2019

brbrr commented Jul 4, 2019

brbrr Jul 4, 2019

simison Jul 4, 2019 •

edited

Loading

brbrr commented Jul 4, 2019

brbrr left a comment

simison commented Jul 4, 2019

oskosk left a comment

simison left a comment

simison commented Jul 4, 2019

ockham commented Jul 5, 2019

	sprintf(
	wp_kses(
	__( 'Your plan doesn\'t include Simple Payments. <a href="%s" rel="noopener noreferrer" target="_blank">Learn more and upgrade</a>.', 'jetpack' ),
	array( 'a' => array( 'href' => array(), 'rel' => array(), 'target' => array() ) )
	),
	esc_url( $support_url )
	),


		import './style.scss';

		const UpgradeNudge = ( { planName, planPathSlug, postId, postType } ) => (

Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge #12823

Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge #12823

Conversation

ockham commented Jun 23, 2019 • edited Loading

Changes proposed in this Pull Request:

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

Screenshot

Testing instructions:

Proposed changelog entry for your changes:

TODO

Follow-up

matticbot commented Jun 23, 2019

jetpackbot commented Jun 23, 2019 • edited Loading

matticbot commented Jun 24, 2019

matticbot commented Jun 24, 2019

matticbot commented Jun 24, 2019

sirreal left a comment

Choose a reason for hiding this comment

sirreal Jun 25, 2019

Choose a reason for hiding this comment

ockham Jul 1, 2019

Choose a reason for hiding this comment

mtias Jun 25, 2019 • edited Loading

Choose a reason for hiding this comment

simison Jun 26, 2019

Choose a reason for hiding this comment

mtias Jun 27, 2019

Choose a reason for hiding this comment

matticbot commented Jun 26, 2019

matticbot commented Jun 26, 2019

matticbot commented Jul 4, 2019

matticbot commented Jul 4, 2019

matticbot commented Jul 4, 2019

brbrr commented Jul 4, 2019

brbrr Jul 4, 2019

Choose a reason for hiding this comment

simison Jul 4, 2019 • edited Loading

Choose a reason for hiding this comment

brbrr commented Jul 4, 2019

brbrr left a comment

Choose a reason for hiding this comment

simison commented Jul 4, 2019

oskosk left a comment

Choose a reason for hiding this comment

simison left a comment

Choose a reason for hiding this comment

simison commented Jul 4, 2019

ockham commented Jul 5, 2019

ockham commented Jun 23, 2019 •

edited

Loading

jetpackbot commented Jun 23, 2019 •

edited

Loading

mtias Jun 25, 2019 •

edited

Loading

simison Jul 4, 2019 •

edited

Loading