Fix: Filtered plans comparison grid features #75424

claudiucelfilip · 2023-04-07T10:54:24Z

Related to #1464

Proposed Changes

The features for each plan in the Comparison grid found in the Onboarding Flows and the Plans pages are constructed by appending to the previous plan features. If a lower-tier plan is filtered-out, then its features never get inherited by the other plans.

Testing Instructions

Checkout and run this branch locally
Go to /start/plans and /plans/{SITE_ID}
Try out multiple screen widths
The plans grid and comparison table below should be unchanged
Go to this line and manipulate the visiblePlans array to show fewer plans (ex. visiblePlans.splice( 0, 1 ) )
The plans grid and comparison table below should only show the remaining plans
Make sure the correct features are shown in the comparison table

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-ajp-p2)?

github-actions · 2023-04-07T10:54:38Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-04-07T10:54:59Z

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

Sections (~179 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
update-design-flow         +196 B  (+0.0%)      +43 B  (+0.0%)
plugins                    +196 B  (+0.0%)      +49 B  (+0.0%)
plans                      +196 B  (+0.0%)      +44 B  (+0.0%)
newsletter-flow            +196 B  (+0.0%)      +43 B  (+0.0%)
link-in-bio-tld-flow       +196 B  (+0.0%)      +43 B  (+0.0%)
link-in-bio-flow           +196 B  (+0.0%)      +43 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 (~15 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-signup-steps-plans                             +196 B  (+0.0%)      +43 B  (+0.0%)
async-load-calypso-my-sites-plan-features-2023-grid       +153 B  (+0.3%)      -28 B  (-0.2%)

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.

claudiucelfilip · 2023-04-07T10:58:11Z

client/my-sites/plan-features-2023-grid/index.tsx

-			  ];
+		const { planProperties } = this.props;
+		const plansToShow = planProperties
+			.filter( ( { isVisible } ) => isVisible )


I decided to add the .filter( ( { isVisible } ) => isVisible ) to each location to make it more visible where the filtration is happening.

This causes some indentation changes, so you might want to use Hide whitespaces to see the actually changes.

claudiucelfilip · 2023-04-07T10:59:13Z

client/my-sites/plan-features-2023-grid/index.tsx

+				if (
+					isWooExpressMediumPlan( planName ) &&
+					! isWooExpressMediumPlan( currentSitePlanSlug )
+				) {


No changes were made here, it just got autoformatted by the linter.

claudiucelfilip · 2023-04-07T11:00:15Z

client/my-sites/plan-features-2023-grid/index.tsx

+			let isVisible = visiblePlans.indexOf( plan ) !== -1;
+
+			if ( hideFreePlan && plan === PLAN_FREE ) {
+				isVisible = false;
+			}


Moved the hideFreePlan here so that all visibility computation is in one place.

claudiucelfilip · 2023-04-07T11:03:58Z

client/my-sites/plan-features-2023-grid/plan-comparison-grid.tsx

 	const displayedPlansProperties = useMemo(
 		() =>
 			( planProperties ?? [] ).filter(
-				( { planName } ) => ! ( planName === PLAN_ENTERPRISE_GRID_WPCOM )
+				( { planName, isVisible } ) => isVisible && ! ( planName === PLAN_ENTERPRISE_GRID_WPCOM )


displayedPlansProperties is used to determine what plans to show in the comparison table on smaller screens and it gets changed each time swap plans by clicking on the name (or cycle between screen sizes).

zaguiini · 2023-04-07T12:40:44Z

This works fine when hiding only the free plan, but on /start/hosting for example, where the free, personal, and premium plans are hidden, we're back to square one:

What's wrong is that some features are still said not to be included even though they are on the Business and above 😢

This is what visiblePlans look like:

A quick and dirty way to test the new pricing grid on /start/hosting is to make is2023PricingGridActivePage return true as the first statement in that function.

claudiucelfilip · 2023-04-07T13:38:48Z

A quick and dirty way to test the new pricing grid on /start/hosting is to make is2023PricingGridActivePage return true as the first statement in that function.

@zaguiini Thanks for catching that!

This is caused by the plans already being filtered (ex. the personal-bundle and premium-bundle are missing from plans):

I pushed a fix to move the plan filtration for the 2023 pricing grid from getPlansForPlanFeatures to getVisiblePlansForPlanFeatures.

By setting is2023PricingGridActivePage to true, the comparison table on /start/hosting should look like this:

Use visiblePlans prop to determin which plans to show

d1c26ef

claudiucelfilip self-assigned this Apr 7, 2023

claudiucelfilip commented Apr 7, 2023

View reviewed changes

claudiucelfilip added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 7, 2023

claudiucelfilip assigned zaguiini and unassigned zaguiini Apr 7, 2023

claudiucelfilip requested review from p-jackson, zaguiini, a team and ddc22 April 7, 2023 11:06

claudiucelfilip added 3 commits April 7, 2023 16:26

Move plan filtering for the 2023 pricing grid

9b5be3f

Remove unnecessary hideFree prop since the plans are already filtered

c3a661b

Revert unwanted change

68375dc

zaguiini approved these changes Apr 7, 2023

View reviewed changes

zaguiini merged commit 51cdc22 into trunk Apr 7, 2023

zaguiini deleted the fix/missing-plans-comparison-features branch April 7, 2023 21:40

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 Apr 7, 2023

This was referenced Apr 7, 2023

Hosting onboarding: don't show free plan alternative #74911

Merged

Onboarding: allow hiding free plan on 2023 pricing grid #75446

Closed

sixhours mentioned this pull request Apr 10, 2023

Woo Express: Fatal error on plans page #75497

Closed

claudiucelfilip mentioned this pull request May 10, 2023

Stepper: hide plans in the plans step according to the current flow #76722

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Filtered plans comparison grid features #75424

Fix: Filtered plans comparison grid features #75424

claudiucelfilip commented Apr 7, 2023 •

edited

Loading

github-actions bot commented Apr 7, 2023 •

edited by matticbot

Loading

matticbot commented Apr 7, 2023 •

edited

Loading

claudiucelfilip Apr 7, 2023 •

edited

Loading

claudiucelfilip Apr 7, 2023

claudiucelfilip Apr 7, 2023

claudiucelfilip Apr 7, 2023

zaguiini commented Apr 7, 2023

claudiucelfilip commented Apr 7, 2023 •

edited

Loading

Fix: Filtered plans comparison grid features #75424

Fix: Filtered plans comparison grid features #75424

Conversation

claudiucelfilip commented Apr 7, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Apr 7, 2023 • edited by matticbot Loading

matticbot commented Apr 7, 2023 • edited Loading

claudiucelfilip Apr 7, 2023 • edited Loading

Choose a reason for hiding this comment

claudiucelfilip Apr 7, 2023

Choose a reason for hiding this comment

claudiucelfilip Apr 7, 2023

Choose a reason for hiding this comment

claudiucelfilip Apr 7, 2023

Choose a reason for hiding this comment

zaguiini commented Apr 7, 2023

claudiucelfilip commented Apr 7, 2023 • edited Loading

claudiucelfilip commented Apr 7, 2023 •

edited

Loading

github-actions bot commented Apr 7, 2023 •

edited by matticbot

Loading

matticbot commented Apr 7, 2023 •

edited

Loading

claudiucelfilip Apr 7, 2023 •

edited

Loading

claudiucelfilip commented Apr 7, 2023 •

edited

Loading