Automattic / Automattic/wp-calypso
Plans 2023: Export SpotlightPlan and uncouple FeaturesGrid from it
- 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 ]`
> 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
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