Skip to content

Plans: Add a plan billing period toggle#13600

Merged
tyxla merged 4 commits intomasterfrom
add/plans-period-toggle
Oct 1, 2019
Merged

Plans: Add a plan billing period toggle#13600
tyxla merged 4 commits intomasterfrom
add/plans-period-toggle

Conversation

@tyxla
Copy link
Copy Markdown
Member

@tyxla tyxla commented Sep 30, 2019 •
edited
Loading

This PR adds a plan billing period toggle to the plans screens. This will allow users to switch between monthly and yearly plans before upgrading to a plan from wp-admin.

Changes proposed in this Pull Request:

  • Plans: Add a plan billing period toggle

Preview

Yearly plans (default):

Monthly plans:

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

  • Part of the p1HpG7-7nj-p2 project.

Testing instructions:

  • Apply this patch to your WP.com sandbox, and follow the instructions there (if you haven't yet): D33376-code
  • Checkout this branch on your connected Jetpack site (ideally, on a free plan).
  • Run yarn build or yarn watch.
  • Go to /wp-admin/admin.php?page=jetpack#/plans
  • Verify the loading placeholder plan boxes align with the plan boxes once they load.
  • Verify you landed on the yearly plans view.
  • Verify the toggle looks and works well, and it updates the price accordingly.
  • Test on tablet and verify it works and looks good.
  • Test on mobile and verify the toggle isn't visible there.
  • Test also on /wp-admin/admin.php?page=jetpack#/plans-prompt
  • Bonus: verify that we record a tracks event when we toggle the billing period:
    • Type localStorage.setItem('debug', 'dops:analytics'); in your browser console.
    • Refresh the page.
    • Click a toggle that's not currently active.
    • Verify it records an adequate tracks event with the period of the toggle that was clicked.

Proposed changelog entry for your changes:

  • Plans: Add a plan billing period toggle

@tyxla tyxla added this to the 7.9 milestone Sep 30, 2019
@tyxla tyxla requested a review from a team September 30, 2019 14:04
@tyxla tyxla self-assigned this Sep 30, 2019
@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented Sep 30, 2019 •
edited
Loading

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: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against 38c71dc

@tyxla tyxla added [Status] Needs Review This PR is ready for review. [Status] Needs Design Review Design has been added. Needs a review! and removed [Status] In Progress labels Oct 1, 2019
@tyxla tyxla requested a review from a team October 1, 2019 10:50
@tyxla
Copy link
Copy Markdown
Member Author

tyxla commented Oct 1, 2019

Ready for design and code review! 😉

keoshi
keoshi approved these changes Oct 1, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@keoshi keoshi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, @tyxla !

jp-plans-toggle

@keoshi keoshi removed the [Status] Needs Design Review Design has been added. Needs a review! label Oct 1, 2019
@enejb
Copy link
Copy Markdown
Member

enejb commented Oct 1, 2019

The design and the code looks great. The one that that I wish we also did was url persistance.
For example if I switch to the monthly view and refresh the page it takes me back to the yearly view.

I think this can also be fixed in a different PR. :shipit:

@tyxla tyxla added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Oct 1, 2019
@tyxla tyxla merged commit 11d0600 into master Oct 1, 2019
@tyxla tyxla deleted the add/plans-period-toggle branch October 1, 2019 12:54
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Oct 1, 2019
jeherve added a commit that referenced this pull request Oct 23, 2019
@jeherve
Changelog: add #13600
467460d
jeherve added a commit that referenced this pull request Oct 29, 2019
@jeherve
7.9: Changelog (#13608)
6cd1621 
* 7.9: Changelog

* Update version number

* Update stable tag and tested up to

* Changelog: add #13530

* changelog: add #13578

* Changelog: add #13598

* Changelog: add entry for numerous block preview changes

* Changelog: add #13599

* changelog: add #13541

* Changelog: add #13542

* Changelog: add #13331

* Changelog: add #13558

* Changelog: add #13409

* Changelog: add #13582

* Changelog: add #13600

* Changelog: add #13601

* Changelog: add #13595

* Changelog: add #12695

* Changelog: add #13009

* Changelog: add #13649

* Changelog: add #13450

* Changelog: add #13507

* Changelog: add #13658

* Changelog: add #13687

* changelog: add #13683

* Changelog: add #9323

* Changelog: add #13681

* Fix typos in readme

* Add link to WordPress Beta Tester plugin

* Changelog: add #13630

* Changelog: add #13695

* Changelog: add #13659

* Changelog: add #13716

* Changelog: add #13664

* Changelog: add #13682

* Changelog: add #13362

* Changelog: add #13563

* Add testing list for #13563

* Changelog: add #13735

* Changelog: add #13752

* Changelog: add #13624

* Changelog: add #13756

* Changelog: add #13745

* Changelog: add #13728

* Changelog: add #13779

* Changelog: add #13699

* Changelog: add #13804

* Changelog: add #13761

* Changelog: add #13637

* Changelog: add #13517

* Changelog: add #13521

* Changelog: add #13729

* Testing list: add testing instructions for #13729

* Changelog: add sync changes

* Changelog: add #13807

* Changelog: add #13654

* Changelog: add #13795

* Changelog: add #13801

* Changelog: add #13818

* Changelog: add #13725

* Changelog: add #13831

* Changelog: add #13516

* Testing list: add Twenty Twenty instructions

* Changelog: add #13799

* Changelog: add #13805

* Changelog: add #13688

* Changelog: add #13830
@jeherve jeherve mentioned this pull request Nov 19, 2019
Closed
@tyxla tyxla mentioned this pull request Dec 12, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@enejb enejb enejb approved these changes

@keoshi keoshi keoshi approved these changes

Assignees

@tyxla tyxla

Labels

Connect Flow Connection banners, buttons, ... Plans [Pri] Normal

Projects

None yet

Milestone

7.9

Development

Successfully merging this pull request may close these issues.

6 participants

@tyxla @jetpackbot @enejb @keoshi @jeherve @matticbot