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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 37 commits into from Jul 4, 2019

Conversation

@ockham
Copy link
Contributor

commented Jun 23, 2019

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 馃槵 :

image

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

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:
      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

@ockham ockham requested a review from Automattic/jetpack-crew as a code owner Jun 23, 2019

@ockham ockham self-assigned this Jun 23, 2019

@matticbot

This comment has been minimized.

Copy link

commented Jun 23, 2019

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

This comment has been minimized.

Copy link

commented Jun 23, 2019

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

This comment has been minimized.

Copy link

commented Jun 24, 2019

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

@ockham ockham force-pushed the update/paid-block-handling branch from 2a42f87 to c14d199 Jun 24, 2019

@matticbot

This comment has been minimized.

Copy link

commented Jun 24, 2019

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

@ockham ockham force-pushed the update/paid-block-handling branch from c14d199 to c31a2ab Jun 24, 2019

@matticbot

This comment has been minimized.

Copy link

commented Jun 24, 2019

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

@sirreal
Copy link
Contributor

left a comment

This looks good in general 馃憤

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

Show resolved Hide resolved extensions/shared/register-jetpack-block.js Outdated
<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 comment has been minimized.

Copy link
@sirreal

sirreal Jun 25, 2019

Contributor

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

This comment has been minimized.

Copy link
@ockham

ockham Jul 1, 2019

Author Contributor

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

Show resolved Hide resolved extensions/shared/upgrade-nudge/index.jsx Outdated
Show resolved Hide resolved extensions/shared/wrap-paid-block.jsx Outdated
Show resolved Hide resolved modules/simple-payments/simple-payments.php Outdated
Show resolved Hide resolved extensions/shared/upgrade-nudge/style.scss
Show resolved Hide resolved extensions/shared/register-jetpack-block.js Outdated
import './style.scss';

export default ( { feature, plan } ) => (
<div className="upgrade-nudge">

This comment has been minimized.

Copy link
@mtias

mtias Jun 25, 2019

Member

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?)

This comment has been minimized.

Copy link
@simison

simison Jun 26, 2019

Member

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

This comment has been minimized.

Copy link
@mtias

mtias Jun 27, 2019

Member

Probably, yes.

@matticbot

This comment has been minimized.

Copy link

commented Jun 26, 2019

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

1 similar comment
@matticbot

This comment has been minimized.

Copy link

commented Jun 26, 2019

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

@matticbot

This comment has been minimized.

Copy link

commented Jul 4, 2019

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

@matticbot

This comment has been minimized.

Copy link

commented Jul 4, 2019

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

@matticbot

This comment has been minimized.

Copy link

commented Jul 4, 2019

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

@brbrr

This comment has been minimized.

Copy link
Member

commented Jul 4, 2019

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:
Add New Post 鈥 HelloWord 鈥 WordPress 2019-07-04 17-15-52


import './style.scss';

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

This comment has been minimized.

Copy link
@brbrr

brbrr Jul 4, 2019

Member

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:
screencast 2019-07-04 17-18-10

This comment has been minimized.

Copy link
@simison

simison Jul 4, 2019

Member

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

This comment has been minimized.

Copy link
Member

commented Jul 4, 2019

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

brbrr approved these changes Jul 4, 2019

Copy link
Member

left a comment

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

This comment has been minimized.

Copy link
Member

commented Jul 4, 2019

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

oskosk approved these changes Jul 4, 2019

Copy link
Contributor

left a comment

LGTM!

@simison

simison approved these changes Jul 4, 2019

Copy link
Member

left a comment

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 simison merged commit 27afef4 into master Jul 4, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
wpcom All tests passed: D29733-code
Details

@simison simison deleted the update/paid-block-handling branch Jul 4, 2019

@simison

This comment has been minimized.

Copy link
Member

commented Jul 4, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 5, 2019

Thanks @brbrr @oskosk @simison for reviewing/testing/merging! 鉂わ笍

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

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

7.6: running changelog (#12940)
* 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

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

7.6: running changelog (#12940)
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.