Pricing page rework: Extract items list component logic for re-usability

[manzoorwanijk]

Proposed Changes

• This PR extracts some code related to items list rendering for re-usability as suggested in Pricing page rework: Display additional legacy product cards #67433 (comment)

Testing Instructions

• Do any one of these
  • Click on Jetpack Cloud live link below and wait for the redirect to complete, then goto /pricing?flags=jetpack/pricing-page-rework-v1
  • or boot up this PR
    • Run git fetch && git checkout update/jp-pricing-rework/extract-items-list-code
    • Run yarn start-jetpack-cloud
    • Goto http://jetpack.cloud.localhost:3000/pricing?flags=jetpack/pricing-page-rework-v1
• Confirm that everything is same as before

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

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~1 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                       -249 B  (-0.0%)       +1 B  (+0.0%)
jetpack-connect             -249 B  (-0.0%)       +1 B  (+0.0%)
jetpack-cloud-pricing       -249 B  (-0.0%)       +1 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.

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.

[jkguidaven]

code LGTM.. tested and it was working like before.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7514766

Thank you @manzoorwanijk for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.