Social Previews: Add upgrade path #16797

obenland · 2020-08-10T22:37:49Z

Takes inspiration from UpgradeNudge and BlockNudge to save the post and redirect to the checkout flow of the Business plan.

Reuses the following event:jetpack_editor_block_upgrade_click. We'll do a follow up PR for view event tracking.

Fixes #16781.

Changes proposed in this Pull Request:

Adds tracking for upgrade modal view and Upgrade link click
Autosaves current post and redirects to plan checkout flow for a business plan.

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

Similar to UpgradeNudge tracking.

Testing instructions:

follow setup steps from Social Preview: Add scaffolding for the feature #16615.
~~When testing on dotcom, make sure D48017-code is applied.~~ No longer required as now in Production.
~~this PR currently shows both paid and unpaid versions of the sidebar. Click the one with~~ If tested on local Jetpack Plugin, you will need to comment out social-previews here in order to activate the "upgrade nudge".
Click the "Learn More" button and it opens up this upgrade nudge
Click on "Upgrade" to see the post being saved before being redirected to the checkout flow.
Additionally, confirm that both events are recorded when you do this flow:

Set the debug with localStorage.setItem( 'debug', 'dops:analytics*' );

dops:analytics Record event "jetpack_editor_block_upgrade_nudge_impression" called with props {"plan":"business-bundle","block":"social-previews","blog_id":"60487750"} +1ms

dops:analytics Record event "jetpack_editor_block_upgrade_click" called with props {"plan":"business-bundle","block":"social-previews","blog_id":"60487750"} +0ms

ProTip: Preserv the log in order to see the second event when the redirect happens.

Proposed changelog entry for your changes:

Not needed.

retrofox

~~Could we prioritize reviewing this PR before these changes? This PR adds and getUpgradeUrl() helper among other changes. If not, it seems we are going to overlap efforts.~~

retrofox · 2020-08-11T09:26:17Z

~~Could we prioritize reviewing this PR before these changes? This PR adds and getUpgradeUrl() helper among other changes. If not, it seems we are going to overlap efforts.~~

Thinking well not sure about :this: I guess getting the getUpgradeUrl() ready to use could simplify the approach 🤷

marekhrabe

I have fixed one tiny detail - the tracking call was done directly in the render function and that means it was easily called 5 times instead of once. I have wrapped it in an effect and now it's only called once per component lifecycle.

This works well for me now. Can you provide more detail @retrofox about the concerns you mentioned? I'm not entirely sure where you are heading or whether they are still relevant. Let me know so we can either proceed with this PR or plan a change.

The base branch was changed.

getdave

This is coming together! 👍

Did a quick code review. Noticed some minor things.

Also, this PR is quite difficult to review because it contains lots of changes that seem unrelated to this PR 🤷

We should probably rebase this now right?

extensions/blocks/social-previews/upgrade.js

matticbot · 2020-08-13T17:07:13Z

Caution: This PR has changes that must be merged to WordPress.com
Hello obenland! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D48106-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

jetpackbot · 2020-08-13T17:25:48Z

	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 🤖

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16797

Generated by 🚫 dangerJS against bf679c7

obenland · 2020-08-13T17:36:22Z

@getdave Thanks for you review! I rebased the PR and addressed most of your feedback. I think this is ready for another round.

Takes inspiration from `UpgradeNudge` and `BlockNudge` to save the post and redirect to the checkout flow of the Business plan.

@getdave

Props @getdave.

…icks on button This was added in the premium blocks branch `feature/premium-blocks` and brings it inline with that version. You can use the new `isRedirecting` boolean to disable the button to provide visual feedback.

Also simplifies button text and updates the way required_plan is extracted.

jeherve

Looking good. 🚢

marekhrabe · 2020-08-18T13:04:06Z

r212283-wpcom

@getdave

* [not verified] Social Previews: Add upgrade path Takes inspiration from `UpgradeNudge` and `BlockNudge` to save the post and redirect to the checkout flow of the Business plan. * [not verified] fix repeated call of tracking * Address PR feedback Props @getdave. * use-upgrade-flow: first approach * plan-utils: add getUpgradeUrl() helper fn * social-preview: refact -> use useUpgradeFlow hook * Use Jetpack_Editor_Initial_State as source of truth * use-upgrade-flow: Add "isRedirecting" feature, to prevent multiple clicks on button This was added in the premium blocks branch `feature/premium-blocks` and brings it inline with that version. You can use the new `isRedirecting` boolean to disable the button to provide visual feedback. * social-preview upgrade: Give visual feedback when redirecting * use-upgrade-flow: set async callback fn * social-preview: do not track nudge event * Use required_plan for click tracking Also simplifies button text and updates the way required_plan is extracted. * Avoid snake case * Run prettier * getUpgradeUrl: minor documentation fix (no functional changes) Co-authored-by: Marek Hrabe <[email protected]> Co-authored-by: retrofox <[email protected]> Co-authored-by: Matthew Reishus <[email protected]>

obenland added [Type] Task [Status] Needs Tracks Review Added/removed/modified a tracks event. [Status] Needs Team Review Obsolete. Use Needs Review instead. [Block] Social Previews labels Aug 10, 2020

obenland requested review from a team and marekhrabe August 10, 2020 22:37

obenland self-assigned this Aug 10, 2020

obenland linked an issue Aug 10, 2020 that may be closed by this pull request

(3P) Social Previews: Set upgrade button link location #16781

Closed

retrofox reviewed Aug 11, 2020

View reviewed changes

marekhrabe force-pushed the add/social-preview-modal-upgrade-nudge branch from 18a129a to 8ebc9b2 Compare August 11, 2020 09:59

Base automatically changed from add/social-preview-modal-upgrade-nudge to add/social-preview-modal August 11, 2020 10:00

matticbot added the Touches WP.com Files label Aug 11, 2020

marekhrabe force-pushed the add/upgrade-path-social-previews branch 2 times, most recently from 946ab9a to d185e84 Compare August 11, 2020 11:26

matticbot removed the Touches WP.com Files label Aug 11, 2020

marekhrabe previously approved these changes Aug 11, 2020

View reviewed changes

marekhrabe force-pushed the add/social-preview-modal branch from 551b04a to 0f70853 Compare August 11, 2020 13:43

marekhrabe force-pushed the add/upgrade-path-social-previews branch from 9aaa4fe to a8d6905 Compare August 11, 2020 14:05

Base automatically changed from add/social-preview-modal to master August 12, 2020 11:37

matticbot added the Touches WP.com Files label Aug 12, 2020

getdave reviewed Aug 13, 2020

View reviewed changes

obenland force-pushed the add/upgrade-path-social-previews branch 2 times, most recently from 9037f1c to f431f4c Compare August 13, 2020 17:07

obenland requested review from getdave and marekhrabe August 13, 2020 17:36

obenland and others added 15 commits August 18, 2020 12:07

[not verified] Social Previews: Add upgrade path

8f56760

Takes inspiration from `UpgradeNudge` and `BlockNudge` to save the post and redirect to the checkout flow of the Business plan.

[not verified] fix repeated call of tracking

15a36a5

Address PR feedback

28a3c91

Props @getdave.

use-upgrade-flow: first approach

d134530

plan-utils: add getUpgradeUrl() helper fn

0ce066b

social-preview: refact -> use useUpgradeFlow hook

81150b6

Use Jetpack_Editor_Initial_State as source of truth

241cb40

social-preview upgrade: Give visual feedback when redirecting

cd67e1a

use-upgrade-flow: set async callback fn

9deac98

social-preview: do not track nudge event

966d9e6

Use required_plan for click tracking

f59d637

Also simplifies button text and updates the way required_plan is extracted.

Avoid snake case

5f94ee8

Run prettier

704599b

getUpgradeUrl: minor documentation fix (no functional changes)

bf679c7

marekhrabe dismissed retrofox’s stale review via bf679c7 August 18, 2020 10:08

marekhrabe force-pushed the add/upgrade-path-social-previews branch from aeb084b to bf679c7 Compare August 18, 2020 10:08

marekhrabe approved these changes Aug 18, 2020

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. [Status] Needs Tracks Review Added/removed/modified a tracks event. labels Aug 18, 2020

jeherve added this to the 8.9 milestone Aug 18, 2020

jeherve approved these changes Aug 18, 2020

View reviewed changes

marekhrabe merged commit 6c96170 into master Aug 18, 2020

marekhrabe deleted the add/upgrade-path-social-previews branch August 18, 2020 12:55

matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Aug 18, 2020

jeherve removed the [Status] Needs Changelog label Aug 25, 2020

Social Previews: Add upgrade path #16797

Social Previews: Add upgrade path #16797

Uh oh!

Conversation

obenland commented Aug 10, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

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

Testing instructions:

Proposed changelog entry for your changes:

Uh oh!

retrofox left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

retrofox commented Aug 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marekhrabe left a comment

Choose a reason for hiding this comment

Uh oh!

getdave left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matticbot commented Aug 13, 2020

Uh oh!

jetpackbot commented Aug 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

obenland commented Aug 13, 2020

Uh oh!

jeherve left a comment

Choose a reason for hiding this comment

Uh oh!

marekhrabe commented Aug 18, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

obenland commented Aug 10, 2020 •

edited

Loading

retrofox left a comment •

edited

Loading

retrofox commented Aug 11, 2020 •

edited

Loading

getdave left a comment •

edited

Loading

jetpackbot commented Aug 13, 2020 •

edited

Loading