Wp-calypso: Plans: Jetpack Monthly and Annual Plans Toggle

[gwwar]

With the new plans page enabled ENABLE_FEATURES=manage/plan-features make run make sure that we have some way of toggling between monthly and annual plans Jetpack plans.

1. Navigate to /plans
2. Switch to a Jetpack Site

The current plans page uses a link toggle, but @rickybanister may have some better ideas.

[rickybanister]

cc @johnHackworth

Here's my ugly mockup:

[gwwar]

Thanks @rickybanister. What does the non-toggled state look like?

[rickybanister]

You mean when the select menu is not open? It would just self-label with the selected item and say 'Billed Monthly' (or Yearly).

[gwwar]

@rickybanister To clarify, what am I clicking that's displaying a dropdown?

[rickybanister]

It would always be a dropdown.

This is only for the Jetpack plans at this point.

[rickybanister]

After further discussion, we're going to try a segmented control for this:

[rickybanister]

cc @roccotripaldi can we implement this instead of the solution in #7276?

[rickybanister]

This toggle should also appear on the plans page when it appears in the Jetpack Connect flow.

[roccotripaldi]

cc @roccotripaldi can we implement this instead of the solution in #7276?

yeah, sure thing @rickybanister

[johnHackworth]

@tyxla is going to take this issue, so if you are ok with it, @gwwar , I'm going to change the milestone to 'Jetpack NUX m1' so it's easy for us (luna) to track it :)

[gwwar]

I'm going to change the milestone to 'Jetpack NUX m1' so it's easy for us (luna) to track it :)

Go for it 😄

[tyxla]

The new toggle is live: https://github.com/Automattic/wp-calypso/pull/7402.