Add feature flags and product lightbox placeholder

[andrii-lysenko]

Proposed Changes

• Add new Feature flag jetpack/pricing-page-product-lightbox for adding Learn More button to Jetpack Products and Opening new product lightbox when clicking it.
• Adding a temporary Learn More button (question mark) to Jetpack products (shown with Feature flag)
• Adding placeholder component for lightbox product-lightbox.

Testing Instructions

Feature Flag is disabled by default for every environment to avoid confusion. In order to enable it add ?flags=jetpack/pricing-page-product-lightbox to the URL. Also important to note that elements like hint-button and current version of product-lightbox are not per designs, but more like placeholders for future development and for testing Feature Flag.

• Checkout the PR locally and start yarn start-jetpack-cloud OR visit Jetpack Cloud Libe link below.
• Visit http://jetpack.cloud.localhost:3000/pricing?flags=-jetpack/pricing-page-rework-v1,jetpack/pricing-page-product-lightbox with appropriate Feature Flags.
• Check the question mark button at the bottom-right of the product cards and confirm that Dialog opens by clicking it.
• Check that without jetpack/pricing-page-product-lightbox there is not hint button

Pre-merge Checklist

• Have you written new tests for your changes? (No tests needed yet)
• 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)?

Related to #
Feature Flag: 1202796695664022-as-1202796695664073/f
Lightbox placeholder: 1202796695664022-as-1202796695664078/f

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1202796695664078
  • 0-as-1202796695664073

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-a4ad4eb918fb77fd111712e57b9ecc3f3452cd18

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~661 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                      +1296 B  (+0.2%)     +661 B  (+0.3%)
jetpack-connect            +1296 B  (+0.1%)     +661 B  (+0.3%)
jetpack-cloud-pricing      +1296 B  (+0.3%)     +661 B  (+0.4%)

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.

[elliottprogrammer]

The feature-flag is good. The dialog is functional and we can continue to build out the lightboxes off of this.
LGTM! 👍

[elliottprogrammer]

I was imagining the lightbox trigger as a "More about " text link inserted directly after the product description text, although I see in the PR description you describe this as a "temporary" button. So I guess we will remove the HintButton in a following PR, and replace it with a text link appended to the product description, right?

[andrii-lysenko]

So yes, I decided to go this way firstly to have a quick solution to be able to test a feature flag quickly and found it easier to do with a small button and absolute positioning not getting into messing with CSS.
I think we could stick with it until or if business decides to go with it as it will require more time (we actually haven't estimated it) to integrate it in current cards, rather then creating a new ones.
For example on this card there is almost no place for additional text and there is already is one Learn more button. So it would be quite a challenging task which will actually will be visible to users in a very short period of time (until we finish new page)

[a8ci18n]

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

Hi @andrii-lysenko, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include this string: Benefits

Thank you in advance!

[a8ci18n]

Translation for this Pull Request has now been finished.