wp-calypso icon indicating copy to clipboard operation
wp-calypso copied to clipboard

Products: move conditional titles to plans list

Open aneeshd16 opened this issue 9 months ago • 3 comments

Related to #

Proposed Changes

In the plans comparison grid, there is a use case for showing different labels/text for features based on the plan. Example: image

This was achieved using the getConditionalTitle function in packages/calypso-products/src/features-list.tsx. This function was used to output different descriptions for the feature based on the planSlug passed to the function. Additionally, the plan definition in packages/calypso-products/src/plans-list.tsx also contained a get2023PlanComparisonConditionalFeatures function, which contained a list of features for that plan that have conditional titles (fetched using getConditionalTitle).

The approach caused issues with tree-shaking (p7H4VZ-4S4-p2). Conceptually, it also meant that plan-specific logic had leaked into the features list.

This PR removes the getConditionalTitle function from features-list.tsx and the get2023PlanComparisonConditionalFeatures from plans-list.tsx. This has been now replaced by a single function: get2023PlanComparisonFeatureLabels. (Eventually, we'll need to refactor out all the 2023 references 😅 )

The get2023PlanComparisonFeatureLabels is a map of the feature slug to the text for that plan. In the future, it also makes it easier to add plan-specific strings without touching the features list.

Testing Instructions

  • Confirm that the comparison grid is the same as production for the following scenarios:
    • /start/plans
    • Trail map variants:
      • /start/plans?flags=onboarding/trail-map-feature-grid-structure
      • /start/plans?flags=onboarding/trail-map-feature-grid-copy
      • /start/plans?flags=onboarding/trail-map-feature-grid

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

aneeshd16 avatar May 24 '24 08:05 aneeshd16