Wp-calypso: Gutenboarding: plans grid

[simison]

This is going to be a bigger one and contains several sub-tasks.

• [x] Implement plans grid for mobile
• [x] Implement plans grid for desktop
• [x] Open plans grid from "plan" button in the header (behind feature flag first) @razvanpapadopol
• [x] Show plans grid in the flow instead of Calypso one when purchasing a premium domain - WIP https://github.com/Automattic/wp-calypso/pull/42028
• [x] Implement a data store that pulls in current Calypso stores (?)
• [ ] _Add more_

Spike PR: https://github.com/Automattic/wp-calypso/pull/41284

Currently, in use for Gutenboarding, Calypso plans grid re-skinned:

New grid built from core components

Free domain

• Clicking domain opens the domain dropdown

Paid domain

• Clicking domain opens the domain dropdown

Mobile version

• Let's try lightly implementing a slider and see how much work it is
• If it's complex to fit in a week, we can do more lightweight (possibly stacked) first version for the release

Detailed features accordion

• Does it animate?
• How does it behave on mobile / tablets?

cc @dubielzyk

[razvanpapadopol]

Just a note regarding the labels (and translations) we are using for the WordPress.com plans: we should probably think of brand consistency even if the designs are showing different things (eg: we have _Personal_ / _Personal Plan_ or _eCommerce_ / _Commerce_). Here is a recent example: https://github.com/Automattic/wp-calypso/pull/41679#discussion_r418371612

[simison]

Work on this is happening across these 3 PRs right now:

• simple componentry https://github.com/Automattic/wp-calypso/pull/41864
• "container" for the grid and opening it from the header https://github.com/Automattic/wp-calypso/pull/41857
• pulling in the data via store https://github.com/Automattic/wp-calypso/pull/41856

We'll work on combining these into a feature over Thursday.

@Automattic/ganon do you have thoughts on how to plug analytics into plans grid and if any work for it could already be started? Considering that we'll want to bring the plans grid to wp-admin and challengees to do so with domains modal are highlighted in pbAok1-HS-p2#comment-1635

Reviews on the direction for any of the PRs welcome, too!

[ramonjd]

@Automattic/ganon do you have thoughts on how to plug analytics into plans grid and if any work for it could already be started?

Can we import @automattic/calypso-analytics into whatever cross-platform bundle we create?

I'm probably missing some subtleties here, but I can't see a reason not to.

If so, then the "how" is solved and it's just a matter of deciding what you need to track. And we're only tracking enter/leave/open/close events for pages and modals, so implementation would be quick once the components are ready.

If not, then the stats library (A.K.A window._tkq) is also loaded in wp-admin, so, if necessary we could implement a (supplementary) pared-down analytics lib for either the plans grid or, if we have to, for Gutenboarding itself.

Considering that we'll want to bring the plans grid to wp-admin and challengees to do so with domains modal are highlighted in pbAok1-HS-p2#comment-1635

The domains modal tracking (Traintracks) is another tracks call with extra props, so it's really nothing special. The concern I believe is finding the right hook to fire the event (?)

Also replied in: pbAok1-HS-p2/#comment-1678

_Edit:_

I forgot to add that for the in-Gutenboarding plans page, the only tracking we'll need is the calypso_newsite_step_enter|leave events, along with perhaps selected_plan as a prop on the leave event.

In wp-admin, it'd be something similar, but we'd probably want to use the calypso_newsite_modal_open tracking event.

[ramonjd]

Show plans grid in the flow instead of Calypso one when purchasing a premium domain

@p-jackson has a draft PR going on https://github.com/Automattic/wp-calypso/pull/42028

[ramonjd]

@roo2 is making a start on mobile layout https://github.com/Automattic/wp-calypso/pull/42029