Plans: Add plan features to Plan Overview page #1565

stephanethomas · 2015-12-14T19:18:58Z

This pull request addresses part of #1151 by adding a list of plan features at the bottom of the Plan Overview page. It also displays a nudge to upgrade to Business when the current plan on trial is Premium:

Testing instructions

Run git checkout add/plan-overview-features and start your server
Get a new test account and blog
Enable your sandbox and proxy
Select a plan by clicking the Start Free Trial button on the Plans page
Click the Start 14 Day Free Trial button on the Secure Payment page
Check that the purchase was successful
Navigate back to the Plans page which should now display the Plan Overview variant
Check that all buttons as well as the upgrade link work fine

Reviews

Code
Product

drewblaisdell · 2015-12-16T00:25:48Z

client/my-sites/plans/plan-overview/style.scss

@@ -86,3 +88,17 @@
 .plan-status__time-until-expiry {
 	font-weight: 700;
 }
+
+.plan-features__feature-description {


Should this CSS live in the same directory as PlanFeatures?

scruffian · 2015-12-16T13:31:49Z

Only some of these features are available in WordPress.com Premium, so we need to show/hide features based on the plan the user is in.

scruffian · 2015-12-16T13:39:36Z

There are a couple of strange display features here when the window is just over 660px wide:

The purchase now button overlaps the edge of the screen
The plan features boxes look strange when so narrow, with the button on the right; it would be nice if they were the same as on mobile at this resolution.

scruffian · 2015-12-16T14:15:56Z

I don't think we can offer an upsell from a Premium Trial to a Business Trial; the user has to buy Business in this case.

scruffian · 2015-12-16T15:39:53Z

Only some of these features are available in WordPress.com Premium, so we need to show/hide features based on the plan the user is in.

Done in cf7c244.

drewblaisdell · 2015-12-16T19:08:51Z

client/my-sites/plans/plan-overview/style.scss

@@ -0,0 +1,27 @@
+@mixin plan-overview-button {


@scruffian it looks like we should use @extend for mixins that don't accept an argument (docs).

After giving his some more thought, I think sharing this style using classes is preferable to either a mixin or extend:

.plan-overview { .plan-feature__button, .plan-status__button { flex-shrink: 0; margin-left: 15px; min-width: 150px; text-align: center; @include breakpoint( "<480px" ) { margin: 15px 0 0 0; width: 100%; } } }

Rationale:

This is easier to grok than a mixin/extend. Defining the styles for %plan-overview-button in the PlanOverview stylesheet and including them with @extend elsewhere makes it difficult to know where the styles are used.

This probably results in a smaller CSS bundle.

This approach makes sense too, but I didn't like the idea of having rules for one component live inside another. I wonder what @mtias thinks...

drewblaisdell · 2015-12-16T19:32:34Z

client/my-sites/plans/plan-overview/plan-feature/style.scss

+	@include plan-overview-row();
+}
+
+.plan-features__feature-button {


We should update the names here to match the component name, e.g. .plan-feature__button

These features don't have calls to action.

This makes sure we're using them consistently.

…cessibility reasons

…ing standards

…add a left margin to create space between the button and the text

…mponent files targetting their respective components, and keep the code DRY

…header more readable

… make it obvious that this is a simple component

…mponent

… Features component

…ew page

stephanethomas · 2015-12-18T15:35:50Z

I've made a few small adjustments and rebased against master. This is ready to go.

Plans: Add plan features to Plan Overview page

mtias · 2015-12-18T15:45:27Z

client/my-sites/plans/plan-overview/plan-feature/index.jsx

+			{ button &&
+				<Button
+					className="plan-feature__button"
+					href={ button.href }


Talking a bit with @breezyskies... can we try a compact button here? I think it'd work a bit better in terms of weight.

Just to loop back, PR started in #1820 for this.

stephanethomas added [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Free Trials labels Dec 14, 2015

stephanethomas self-assigned this Dec 14, 2015

stephanethomas added this to the No-cc Free Trials: v1 milestone Dec 14, 2015

drewblaisdell reviewed Dec 16, 2015
View reviewed changes

scruffian added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 16, 2015

scruffian assigned scruffian and unassigned stephanethomas Dec 16, 2015

scruffian mentioned this pull request Dec 16, 2015

Free trials: Mobile styles between 660 and 960 pixels #1685

Closed

scruffian added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Author Reply labels Dec 16, 2015

drewblaisdell reviewed Dec 16, 2015
View reviewed changes

drewblaisdell force-pushed the add/plan-overview-features branch from 3b8bb16 to 189e06b Compare December 16, 2015 19:21

drewblaisdell added [Status] Needs Author Reply and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 16, 2015

drewblaisdell reviewed Dec 16, 2015
View reviewed changes

drewblaisdell force-pushed the add/plan-overview-features branch 2 times, most recently from 78b0d4e to 181327e Compare December 16, 2015 22:10

stephanethomas and others added 19 commits December 18, 2015 15:34

Plans: Add remaining features to Plan Overview page

a87a94f

These features don't have calls to action.

Plans: Simplify code in plan status section in Plan Overview page

cf46a83

Plans: Move stylesheet of Plan Overview page at the right place

6e8bd3b

Plans: Update Plan Overview page to use template strings for redirects

cff7f9a

This makes sure we're using them consistently.

Plans: Replacing buttons with onClick events with native links for ac…

3fad72f

…cessibility reasons

Plans: Only show Business features to users in a Business trial

744f095

Plans: Splitting up the CSS into separate files to conform to the cod…

a683c54

…ing standards

Plans: Add a minimum width to the buttons so that they line up. Also …

bc602be

…add a left margin to create space between the button and the text

Plans: Refactoring CSS to share code in mixins, so we can keep the co…

044607b

…mponent files targetting their respective components, and keep the code DRY

Plans: Upating the font sizes for mobile devices, to make the status …

8b7c1ab

…header more readable

Plans: Move the plan feature component to its own directory

2550ef3

Plans: Avoid mixin by using a list of classes in PlanOverview

f8f19c9

Plans: Rewrite the plan-feature component as a stateless component to…

ade5b36

… make it obvious that this is a simple component

Plans: Link business trial users to /design/:site in PlanFeatures

85dd88a

Plans: Replace element selectors with class names

6f50710

Plans: Prevent 'Purchase Now' button from overflowing

da0f835

Plans: Add missing requirement in props validation of Plan Feature co…

a118680

…mponent

Plans: Remove unnecessary span and simplify ternary operation in Plan…

1112d29

… Features component

Plans: Simplify margin rules and increase button width on Plan Overvi…

8ac0528

…ew page

stephanethomas force-pushed the add/plan-overview-features branch from c989483 to 8ac0528 Compare December 18, 2015 15:35

stephanethomas added [Status] Ready to Merge and removed [Status] Needs Author Reply labels Dec 18, 2015

stephanethomas added a commit that referenced this pull request Dec 18, 2015

Merge pull request #1565 from Automattic/add/plan-overview-features

4896717

Plans: Add plan features to Plan Overview page

stephanethomas merged commit 4896717 into master Dec 18, 2015

stephanethomas deleted the add/plan-overview-features branch December 18, 2015 15:44

stephanethomas removed the [Status] Ready to Merge label Dec 18, 2015

mtias reviewed Dec 18, 2015
View reviewed changes

mikeshelton1503 mentioned this pull request Dec 18, 2015

Free Trials: Implement free trial hub #1151

Closed

7 tasks

RadoslavGeorgiev mentioned this pull request Jan 10, 2019

Display labels that are still being purchased within orders #30086

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plans: Add plan features to Plan Overview page #1565

Plans: Add plan features to Plan Overview page #1565

stephanethomas commented Dec 14, 2015

drewblaisdell Dec 16, 2015

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

drewblaisdell Dec 16, 2015

drewblaisdell Dec 16, 2015

scruffian Dec 16, 2015

drewblaisdell Dec 16, 2015

stephanethomas commented Dec 18, 2015

mtias Dec 18, 2015

breezyskies Dec 18, 2015

Plans: Add plan features to Plan Overview page #1565

Plans: Add plan features to Plan Overview page #1565

Conversation

stephanethomas commented Dec 14, 2015

Testing instructions

Reviews

drewblaisdell Dec 16, 2015

Choose a reason for hiding this comment

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

scruffian commented Dec 16, 2015

drewblaisdell Dec 16, 2015

Choose a reason for hiding this comment

drewblaisdell Dec 16, 2015

Choose a reason for hiding this comment

scruffian Dec 16, 2015

Choose a reason for hiding this comment

drewblaisdell Dec 16, 2015

Choose a reason for hiding this comment

stephanethomas commented Dec 18, 2015

mtias Dec 18, 2015

Choose a reason for hiding this comment

breezyskies Dec 18, 2015

Choose a reason for hiding this comment