My Plan: Add Checklist CTA #12429

sirreal · 2019-05-21T12:28:01Z

Add a checklist CTA to the My Plan header based on #11997 (comment)

This introduces yet another primary button to this view. #12430 removes the primary buttons from all of the feature cards in the view.

Screens

Expand for screens

Testing instructions:

From /wp-admin/admin.php?page=jetpack#/my-plan on a Jetpack site
You should see the checklist CTA button like in the above screens.
For sites with different plans, does the button appear correctly? Does the link work as expected?

Proposed changelog entry for your changes:

none

jetpackbot · 2019-05-21T12:32:45Z

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: June 4, 2019.
Scheduled code freeze: May 28, 2019

Generated by 🚫 dangerJS against 4c9859b

jeherve · 2019-05-21T13:47:23Z

Should we show the button on free plans as well? It seems odd, since there isn't much to set up at that point, you are just invited to purchase a plan?

simison · 2019-05-21T13:50:43Z

Should we show the button on free plans as well? It seems odd, since there isn't much to set up at that point, you are just invited to purchase a plan?

There will be some new stuff coming to the checklist sometime after 7.4 release for free sites as well; lazy loading images & CDN for example.

jeffgolenski · 2019-05-21T14:49:28Z

We definitely want to display this for free. As @simison mentioned, more things are coming to the checklist soon!

@sirreal I just testing this - I'm noticing a difference in styles. For paid plans the button is in the correct place, but but free it is not.

Looks great on mobile. Can you just bump the p text size to 14px?

simison · 2019-05-21T15:13:27Z

Should we address multiple primary color buttons on the same page as a follow up to this?

_inc/client/my-plan/my-plan-header/checklist-cta.js

simison

Code is looking good 👍

Just small placeholder change I'd like to see before merging.

sirreal · 2019-05-22T07:52:00Z

_inc/client/my-plan/my-plan-header/index.js

@@ -86,7 +90,7 @@ class MyPlanHeader extends React.Component {
 								alt={ __( 'Jetpack Premium Plan' ) }
 							/>
 						</div>
-						<div className="jp-landing__plan-iconcard-current">
+						<div className="jp-landing__plan-card-current">


This one class was inconsistent with the rest.

sirreal · 2019-05-22T08:49:03Z

Rebased so the primary CTAs are no longer repeated (#12430).

I just testing this - I'm noticing a difference in styles. For paid plans the button is in the correct place, but but free it is not.

There was a misnamed class in exactly 1 place, which was the class I'd based the changes on. I fixed this class name so the different plans should be consistent.

This also highlighted a lot of what appear to be leftover classes from previous plans pages. I've removed many rules that appear to be unused after searching for references.

Looks great on mobile. Can you just bump the p text size to 14px?

I've taken care of that 👍

Here are updated mobile/desktop screenshots for all plans

_inc/client/my-plan/my-plan-header/checklist-cta.js

ockham

One concern here. Appears to be working well otherwise! I also couldn't find any other uses of those stale class names.

Feel free to ship after addressing the i18n question!

jeherve

This looks good, and tests well for me. I think this should be good to merge after a design review.

I mentioned the lack of tracking on that button below, but I don't think that's blocking here, given that we are missing tracking on other buttons in there. It could be added in a future PR I think.

jeherve · 2019-05-22T17:44:26Z

_inc/client/my-plan/my-plan-header/checklist-cta.js

+export default function ChecklistCta( { siteSlug } ) {
+	return (
+		<div className="jp-landing__plan-features-header-checklist-cta-container">
+			<Button primary href={ `https://wordpress.com/plans/my-plan/${ siteSlug }` }>


Do we want to add tracking to clicks on that button?

jeffgolenski · 2019-05-22T18:41:50Z

mentioned the lack of tracking on that button below, but I don't think that's blocking here, given that we are missing tracking on other buttons in there. It could be added in a future PR I think.

Thanks for bringing this up. Yes, we need be adding tracking to all new buttons that are added, every single time. If we don't know if / how our customers are using what we design and build then we're just wasting our time. Can we get a tracks event in there @sirreal? Thank ya!

cc @jeherve @simison @ockham

sirreal · 2019-05-22T19:38:32Z

Can we get a tracks event in there @sirreal?

@jeffgolenski yes, but I'd prefer to add it in a follow up since this has the approvals already. Can we consider this design approved?

jeffgolenski

Did another run through. Looks great!

sirreal · 2019-05-23T10:39:40Z

Tracks here: #12449

In #12277 and #12429, we added a "checklist" component to the Jetpack dashboard, as well as a CTA that would lead you to the checklist in Calypso. We never really expanded on that checklist and its display in the React dashboard, but we now have a Recommendations component we use in Jetpack, since #18437. This commit removes the elements from the checklist that we never used, and updates the CTA link in "My Plan" to point to the new Recommendations, when those recommendations must be shown to site owners.

sirreal added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] Needs Design Review Design has been added. Needs a review! Plans labels May 21, 2019

sirreal requested a review from a team as a code owner May 21, 2019 12:28

sirreal self-assigned this May 21, 2019

sirreal requested review from jeffgolenski and a team May 21, 2019 12:31

sirreal added the [Type] Task label May 21, 2019

sirreal mentioned this pull request May 21, 2019

My Plan: Remove features CTAs #12430

Merged

sirreal added this to the 7.4 milestone May 21, 2019

simison reviewed May 21, 2019

View reviewed changes

_inc/client/my-plan/my-plan-header/checklist-cta.js Outdated Show resolved Hide resolved

simison previously approved these changes May 21, 2019

View reviewed changes

sirreal dismissed simison’s stale review via cf369ad May 22, 2019 07:33

simison previously approved these changes May 22, 2019

View reviewed changes

sirreal dismissed simison’s stale review via 3e89000 May 22, 2019 07:50

sirreal commented May 22, 2019

View reviewed changes

sirreal added 9 commits May 22, 2019 09:53

Add static Checklist CTA to my plan

3b53259

Remove instead of placeholder

ff3adf1

Finish removing placeholder references

39c5485

Fix bad class name

38ebdae

Remove unused style

e888501

Remove unused jp-landing-plans__header-description

1e05673

Remove unused jp-landing-plans__header-btn-container class

6510c6c

Remove unused jp-landing-plans__header-title class

8cb14fb

Remove unused jp-landing-plans__header-subtitle class

c0e9fd6

sirreal added 3 commits May 22, 2019 10:04

Remove unused classes

6d3c202

Remove unused classes

7d3c896

Ensure correct line break and placeholder display

4c9859b

sirreal force-pushed the add/my-plan-checklist-cta branch from 3e89000 to 4c9859b Compare May 22, 2019 08:49

sirreal requested a review from a team May 22, 2019 08:50

ockham reviewed May 22, 2019

View reviewed changes

_inc/client/my-plan/my-plan-header/checklist-cta.js Show resolved Hide resolved

ockham reviewed May 22, 2019

View reviewed changes

jeherve approved these changes May 22, 2019

View reviewed changes

jeherve removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label May 22, 2019

jeffgolenski approved these changes May 22, 2019

View reviewed changes

sirreal added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Design Review Design has been added. Needs a review! labels May 23, 2019

sirreal merged commit 8457915 into master May 23, 2019

sirreal deleted the add/my-plan-checklist-cta branch May 23, 2019 08:47

matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels May 23, 2019

jeherve removed the [Status] Needs Changelog label May 23, 2019

sirreal mentioned this pull request May 23, 2019

Analytics: Add tracks to checklist CTAs #12449

Merged

sirreal mentioned this pull request May 27, 2019

My Plan: page layout is broken in IE11 #12464

Closed

jeherve mentioned this pull request Feb 16, 2021

Recommendations: update button in My Plan to go to Recommendations #18843

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Plan: Add Checklist CTA #12429

My Plan: Add Checklist CTA #12429

sirreal commented May 21, 2019 •

edited

Loading

jetpackbot commented May 21, 2019 •

edited

Loading

jeherve commented May 21, 2019

simison commented May 21, 2019

jeffgolenski commented May 21, 2019

simison commented May 21, 2019

simison left a comment

sirreal May 22, 2019

sirreal commented May 22, 2019

ockham left a comment

jeherve left a comment

jeherve May 22, 2019

jeffgolenski commented May 22, 2019

sirreal commented May 22, 2019

jeffgolenski left a comment

sirreal commented May 23, 2019

My Plan: Add Checklist CTA #12429

My Plan: Add Checklist CTA #12429

Conversation

sirreal commented May 21, 2019 • edited Loading

Screens

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented May 21, 2019 • edited Loading

jeherve commented May 21, 2019

simison commented May 21, 2019

jeffgolenski commented May 21, 2019

simison commented May 21, 2019

simison left a comment

Choose a reason for hiding this comment

sirreal May 22, 2019

Choose a reason for hiding this comment

sirreal commented May 22, 2019

ockham left a comment

Choose a reason for hiding this comment

jeherve left a comment

Choose a reason for hiding this comment

jeherve May 22, 2019

Choose a reason for hiding this comment

jeffgolenski commented May 22, 2019

sirreal commented May 22, 2019

jeffgolenski left a comment

Choose a reason for hiding this comment

sirreal commented May 23, 2019

sirreal commented May 21, 2019 •

edited

Loading

jetpackbot commented May 21, 2019 •

edited

Loading