Update nav redesign overview plan card #90844

candy02058912 · 2024-05-17T11:55:57Z

Fixes https://github.com/Automattic/dotcom-forge/issues/7205

Proposed Changes

Free plan

Add "Upgrade your plan" CTA button
Add 0 dollars for currency
Add "No expiration date"
Change "Mange plan" to "Manage add-ons"

Expired plan

Add "See all plans" and "Renew now" CTA buttons

Where each link/button goes

"Renew plan" goes to the checkout page directly.
"See all plans" goes to the /plans/:site page.
"Manage plan" goes to /purchases/subscription/:site
"Manage add-ons" goes to /add-ons/:site

Other changes

"Need more storage?" -> "Need more space?"

Jetpack site ("Upgrade your plan" CTA will list Jetpack upgrades)

Legacy Creator/Business plan (no storage upsell)

Creator plan

Free plan

Expired legacy Creator/Business plan

Why are these changes being made?

To be more consistent and still have upsells available when needed

Testing Instructions

Go to /sites, and check out each type of plan type to see if the purposed changes are correct

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-05-17T11:56:10Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-108351

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-108351&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-108351&env=a8c-for-agencies

matticbot · 2024-05-17T12:00:36Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~157 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-stepper              +1029 B  (+0.0%)     +157 B  (+0.0%)
entry-main                  +679 B  (+0.0%)     +127 B  (+0.0%)
entry-subscriptions         +139 B  (+0.0%)      +38 B  (+0.0%)
entry-login                 +139 B  (+0.0%)      +38 B  (+0.0%)
entry-domains-landing       +139 B  (+0.0%)      +38 B  (+0.0%)
entry-browsehappy           +139 B  (+0.1%)      +38 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4961 bytes removed 📉 [gzipped])

name                        parsed_size           gzip_size
hosting                         +2149 B  (+0.2%)    +1454 B  (+0.4%)
update-design-flow              +1350 B  (+0.1%)     +986 B  (+0.3%)
link-in-bio-tld-flow            +1229 B  (+0.1%)     +958 B  (+0.3%)
signup                           +824 B  (+0.3%)      +96 B  (+0.1%)
plugins                          +405 B  (+0.0%)     +862 B  (+0.1%)
plans                            +405 B  (+0.0%)     +862 B  (+0.2%)
jetpack-app                      +405 B  (+0.1%)     +862 B  (+0.8%)
with-theme-assembler-flow        +121 B  (+0.2%)      +30 B  (+0.3%)
update-options-flow              +121 B  (+0.3%)      +30 B  (+0.6%)
trial-wooexpress-flow            +121 B  (+0.3%)      +28 B  (+0.4%)
site-setup-flow                  +121 B  (+0.2%)      +30 B  (+0.2%)
site-migration-flow              +121 B  (+0.3%)      +29 B  (+0.4%)
migration-signup                 +121 B  (+0.3%)      +29 B  (+0.4%)
hosted-site-migration-flow       +121 B  (+0.3%)      +29 B  (+0.4%)
free-post-setup-flow             +121 B  (+0.3%)      +30 B  (+0.6%)
free-flow                        +121 B  (+0.3%)      +31 B  (+0.4%)
entrepreneur-flow                +121 B  (+0.3%)      +28 B  (+0.4%)
assembler-first-flow             +121 B  (+0.2%)      +28 B  (+0.2%)
ai-assembler-flow                +121 B  (+0.2%)      +29 B  (+0.2%)
start-writing-flow               +108 B  (+0.6%)      +26 B  (+0.5%)
reblogging-flow                  +108 B  (+1.3%)      +26 B  (+1.0%)
newsletter-flow                  +108 B  (+0.6%)      +27 B  (+0.6%)
new-hosted-site-flow             +108 B  (+1.4%)      +36 B  (+1.4%)
link-in-bio-flow                 +108 B  (+0.7%)      +23 B  (+0.5%)
design-first-flow                +108 B  (+0.6%)      +26 B  (+0.5%)
connect-domain                   +108 B  (+0.4%)      +37 B  (+0.5%)
import-hosted-site-flow           +13 B  (+0.0%)       +1 B  (+0.0%)
import-flow                       +13 B  (+0.0%)       +1 B  (+0.0%)
devdocs                           +13 B  (+0.0%)       +5 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~863 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +405 B  (+0.1%)     +862 B  (+0.8%)
async-load-signup-steps-plans                         +405 B  (+0.1%)     +862 B  (+0.8%)
async-load-design                                      +13 B  (+0.0%)       +1 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2024-05-17T12:18:03Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/overview-plan-card on your sandbox.

lucasmendes-design · 2024-05-17T13:24:38Z

Hi Candy, It looks good to me :) One detail:

Can we remove the blue color from here?

Thanks 🙏🏽

davemart-in · 2024-05-17T14:43:44Z

@lucasmendes-design just clarifying, are you referring to this blue?

Just clarifying that the "Need more space?" link can remain blue.

lucasmendes-design · 2024-05-17T18:12:10Z

Yes, these ones you pointed out. Thanks, Dave.

"Need more space" can remain blue.

candy02058912 · 2024-05-20T06:39:41Z

Notes: Fixed the blue color since it only happens (and currently in production) when it has been clicked and the link gets treated as a visited link.

fushar

On P2 sites (such as untangling), it is showing as Free, even though the site's plan is P2+.

candy02058912 · 2024-05-20T09:34:43Z

On P2 sites (such as untangling), it is showing as Free, even though the site's plan is P2+.

I can't find a way to check if a site's plan is P2 Free or P2+, I'll hard code it as P2 plan as we're not letting people create new P2s.

candy02058912 · 2024-05-20T09:37:34Z

Also, I noticed the sites with a P2 plan for their site object, the "plan" key is free_plan and all the other attributes are the same as the free plan 🤔

I'll create an issue to see if we want to address the P2 situation as of now. Since for P2 sites, we should not show the Dev Tools tab either.

candy02058912 · 2024-05-20T09:46:53Z

On second thought, let's not handle the P2 case in this PR as there are many states for that as mentioned in the newly created issue: https://github.com/Automattic/dotcom-forge/issues/7278 cc: @fushar

This reverts commit d94579c.

fushar · 2024-05-20T10:00:07Z

On second thought, let's not handle the P2 case in this PR as there are many states for that as mentioned in the newly created issue: https://github.com/Automattic/dotcom-forge/issues/7278 cc: @fushar

Sure, makes more sense this way!

client/hosting-overview/components/plan-card.tsx

mmtr · 2024-05-20T10:40:02Z

client/hosting-overview/components/plan-card.tsx

+ ) }
+ plain
+ href={
+ isFreePlan ? `/add-ons/${ site?.slug }` : `/purchases/subscriptions/${ site?.slug }`


On sites with a paid plan, I think this should link to /purchases/subscriptions/:site/:planSubscriptionId. That's what the "Manage plan" button does in wordpress.com/plans/:site:

wp-calypso/client/my-sites/plans/current-plan/purchases-listing.jsx

Line 227 in d0246d9

? this.props.getManagePurchaseUrlFor( selectedSiteSlug, purchase.id )

Similarly, the button should be disabled for users who didn't make the purchase:

wp-calypso/client/my-sites/plans/current-plan/purchases-listing.jsx

Line 230 in d0246d9

disabled={ ! userIsPurchaseOwner }

Thanks for the feedback, I've added the check for isOwner.

It will directly hide the Manage button if ! isOwner.

fushar

Not sure if it's in the scope, but for staging sites, the plan card is showing Free:

Every CTA in this card is unusable for staging sites. Maybe, we should either completely hide the card, or just show the text Staging in the card. 🤔

candy02058912 · 2024-05-21T08:50:03Z

@fushar Rendered Staging site and left the rest blank for now, @lucasmendes-design feel free to give feedback on this. We can implement it in a followup PR.

mmtr

Works great!

fushar

Tested the mentioned cases and it all worked great.

I think this is good to merge and we can fix any further issues (if any) in follow-up PRs 👍

Update nav redesign overview plan card

f9d5039

candy02058912 requested review from lucasmendes-design and a team May 17, 2024 11:55

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 17, 2024

Remove Manage button for Jetpack sites

cc67461

fix visited link color change for storage card

0aa1c6a

candy02058912 self-assigned this May 20, 2024

fushar reviewed May 20, 2024

View reviewed changes

Handle P2

d94579c

Revert "Handle P2"

9fdf727

This reverts commit d94579c.

mmtr reviewed May 20, 2024

View reviewed changes

client/hosting-overview/components/plan-card.tsx Outdated Show resolved Hide resolved

mmtr reviewed May 20, 2024

View reviewed changes

incorporate feedback

3bd0570

fushar reviewed May 21, 2024

View reviewed changes

candy02058912 added 2 commits May 21, 2024 16:40

separate logic for free plan and paid plans

e7974a9

add support for staging site

2460fb9

mmtr approved these changes May 21, 2024

View reviewed changes

fushar approved these changes May 21, 2024

View reviewed changes

candy02058912 merged commit fa25fd3 into trunk May 21, 2024
11 checks passed

candy02058912 deleted the update/overview-plan-card branch May 21, 2024 14:38

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update nav redesign overview plan card #90844

Update nav redesign overview plan card #90844

candy02058912 commented May 17, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited by matticbot

matticbot commented May 17, 2024 •

edited

matticbot commented May 17, 2024

lucasmendes-design commented May 17, 2024

davemart-in commented May 17, 2024 •

edited

lucasmendes-design commented May 17, 2024

candy02058912 commented May 20, 2024

fushar left a comment

candy02058912 commented May 20, 2024

candy02058912 commented May 20, 2024 •

edited

candy02058912 commented May 20, 2024 •

edited

fushar commented May 20, 2024

mmtr May 20, 2024 •

edited

candy02058912 May 21, 2024

fushar left a comment

candy02058912 commented May 21, 2024 •

edited

mmtr left a comment

fushar left a comment

Update nav redesign overview plan card #90844

Update nav redesign overview plan card #90844

Conversation

candy02058912 commented May 17, 2024 • edited

Proposed Changes

Free plan

Expired plan

Where each link/button goes

Other changes

Jetpack site ("Upgrade your plan" CTA will list Jetpack upgrades)

Legacy Creator/Business plan (no storage upsell)

Creator plan

Free plan

Expired legacy Creator/Business plan

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented May 17, 2024 • edited by matticbot

matticbot commented May 17, 2024 • edited

matticbot commented May 17, 2024

lucasmendes-design commented May 17, 2024

davemart-in commented May 17, 2024 • edited

lucasmendes-design commented May 17, 2024

candy02058912 commented May 20, 2024

fushar left a comment

Choose a reason for hiding this comment

candy02058912 commented May 20, 2024

candy02058912 commented May 20, 2024 • edited

candy02058912 commented May 20, 2024 • edited

fushar commented May 20, 2024

mmtr May 20, 2024 • edited

Choose a reason for hiding this comment

candy02058912 May 21, 2024

Choose a reason for hiding this comment

fushar left a comment

Choose a reason for hiding this comment

candy02058912 commented May 21, 2024 • edited

mmtr left a comment

Choose a reason for hiding this comment

fushar left a comment

Choose a reason for hiding this comment

candy02058912 commented May 17, 2024 •

edited

github-actions bot commented May 17, 2024 •

edited by matticbot

matticbot commented May 17, 2024 •

edited

davemart-in commented May 17, 2024 •

edited

candy02058912 commented May 20, 2024 •

edited

candy02058912 commented May 20, 2024 •

edited

mmtr May 20, 2024 •

edited

candy02058912 commented May 21, 2024 •

edited