Wp-calypso: Plans Redesign: Update "My Plan" page to support 2 columns

[gwwar]

With the new plans redesign ENABLE_FEATURES=manage/plan-features make run enabled, we'll have a lot more space to display plan features on the My Plan page.

Update the page to use a flex layout so we can start with a 2 col that breaks down to a single column as by @apeatling's design shown here:

We'll likely want to use the same design for the checkout thank you page. Please note that this may involve some heavy refactoring due to how the current subcomponents are composed.

For example we can't simply add a display flex to this container, since BusinessPlanDetails and PremiumPlanDetails also wrap each of its items in a div.

<div>
    <BusinessPlanDetails
    selectedSite={ selectedSite }
    sitePlans={ this.props.sitePlans }
    />
    <PremiumPlanDetails
    selectedSite={ selectedSite }
    sitePlans={ this.props.sitePlans }
    />
</div>

[mtias]

Not sure if the thank you page should necessary be the same; or at least it shouldn't prevent us from doing this version for the current-plan page.

I think the current-plan main component is a bit too complex as it stands. Ideally this change should be trivial to make, since the main element should only be an aggregation of these feature-card components.

[rralian]

Not sure if the thank you page should necessary be the same; or at least it shouldn't prevent us from doing this version for the current-plan page.

I think you're right @mtias. I think the main reason we used the thank-you page for the my-plan page was for quick implementation. Maybe it makes sense for the content to largely be the same. I think we also have some routing issues to work out, but maybe that's best to do after the redesign.

I think the current-plan main component is a bit too complex as it stands.

I could start by creating a new component for the current-plan page that works this way.

[mtias]

I think the main reason we used the thank-you page for the my-plan page was for quick implementation.

Yes, indeed. And it makes total sense to reuse the blocks that compose the features (specially since many have complex logic or would support direct settings changes at some point), but the block itself should be free to be arranged however we need to.

[rralian]

@meremagee @shaunandrews We'd be interested in your thoughts on this one. I think it makes sense to ensure the my-plan page and the thank-you page _can_ diverge. But would you want to see these same changes on the thank-you page as part of signup (what you see after purchasing a plan)?

[shaunandrews]

I don’t want to slow you all down — but if we can make (at least) these layout changes to both screens, that seems like a win. If they diverge after that, I think its ok.

[lamosty]

Do we want this behind an ABtest or active for 100% of users from the beginning?

[gwwar]

I think we should just do this as a general improvement without an abtest. The current layout just looks a bit off. cc @rralian