Automattic / Automattic/wp-calypso

Plans 2023: Export SpotlightPlan and uncouple FeaturesGrid from it

Open
#81,076 3 comments 0 reactions 0 assignees View on GitHub
Plans: NPM essential Quality Sprint: Week 2 Task
Dominant language
TypeScript
Stars
12.6k
Forks
2k
Avg merge
1d 17h
Merged PRs (30d)
552

Description

As of https://github.com/Automattic/wp-calypso/issues/78266 we export `FeaturesGrid` and `ComparisonGrid` from `plans-features-2023-grid` (which is now mainly an index of the individual components) and assemble the plans page on consuming end.

We should export the Spotlight plan, which is currently part of `FeaturesGrid`, and uncouple the latter (require no knowledge of a spotlight plan being rendered anywhere).

The refactor here should lead into the redesign for the Spotlight cards (along with the possibility of consolidating them between Woo and Wpcom). There is a separate issue for that on the MarTech repo (with lots of related discussions and design mocks shared): https://github.com/Automattic/martech/issues/2001

### How

This will likely require some more foundational work be done first. Spotlight plan shares the same structure as the mobile cards, and we can aim for reusability if possible - be DRY. It could mean creating a few finer/granular components into `components/shared` folder and reusing them between Spotlight and mobile cards. Needs some investigation first. Also considering the redesigns and the WooExpress-Wpcom Spotlight card consolidation when thinking about reuse: https://github.com/Automattic/martech/issues/2001

> and the WooExpress-Wpcom Spotlight card consolidation

To see the WooExpress spotlight card:
- create a site through `/setup/wooexpress`
- visit `/plans/[ woo site create ]`

Screenshot 2023-12-21 at 3 33 43 PM

> uncouple the latter (require no knowledge of a spotlight plan being rendered anywhere)

A possible direction for this is to evolve the `gridPlans: GridPlan[]` property to `gridPlans: { mobile: GridPlan[], default: GridPlan[] }` - that way the reordering and reduced list of plans (that requires knowledge of spotlight plan being rendered) will happen outside of `FeaturesGrid` and at the consuming end (`plans-features-main`).

Contributor guide

Open the contributing guide

Research direction

Start with the plans-features-2023-grid components and the consuming plans-features-main entry point, then inspect the existing mobile-card structure and shared components. Use the WooExpress setup route and plans page to compare the Spotlight card. Done means SpotlightPlan is exported separately, FeaturesGrid no longer knows about Spotlight rendering, and the consuming end handles plan ordering and filtering.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.