#7528496 Jetpack New Pricing Page – Fix issues related to Foldable cards in lightbox

Proposed Changes

• Refactor Lightbox to move the Includes and Benefits section to a separate component
• Fix issue with the FoldableCard not expanding on header click on mobile
• Fix Jetpack Free text

Testing Instructions

• click on Jetpack Cloud live link below
  • Goto /pricing?flags=jetpack/pricing-page-rework-v1
• or boot up this PR
  • Run git fetch && git checkout add/lightbox-info-to-calypso-package
  • Run yarn start-jetpack-cloud
  • Goto http://jetpack.cloud.localhost:3000/pricing?flags=jetpack/pricing-page-rework-v1
• Open any lighbox by clicking on More link in any of the cards
• Make sure everything is working expected as before
• Resize to mobile view and make sure Foldable Cards expands when clicked on any part of the row (not just on the arrow)
• Make sure expanding Benefits section closes the Includes section (if already in open) and vice-versa
• And also confirm that Still not sure in main products page displays the following message
  • Start with the free version and try out our premium products later.

Screenrecord

Lightbox

Before

After

Still not sure section

Before

After

Pre-merge Checklist

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

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1202979841166413
  • https://app.asana.com/0/0/1202979995370874
  • https://app.asana.com/0/0/1202980219801564