Add info popover for tier dropdown (#90600)

* Add info popover for tier dropdown * Prevent widows and specify css class for zindex * Remove conflicting imports
Automattic · May 15, 2024 · 83ccf7c · 83ccf7c
1 parent f14cab6
commit 83ccf7c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/constants.ts b/client/my-sites/plans/jetpack-plans/product-lightbox/constants.ts
@@ -324,3 +324,24 @@ export const PRODUCT_OPTIONS_HEADER: Record< string, TranslateResult > = {
 		comment: '%(product)s is the name of the product',
 	} ),
 };
+
+export const PRODUCT_OPTIONS_HEADER_INFO_CONTENT: Record< string, TranslateResult > = {
+	[ PRODUCT_JETPACK_AI_BI_YEARLY ]: translate(
+		'Each interaction with the AI system counts as one request. Images may use multiple requests. You can upgrade at any time if you run out of requests.'
+	),
+	[ PRODUCT_JETPACK_AI_YEARLY ]: translate(
+		'Each interaction with the AI system counts as one request. Images may use multiple requests. You can upgrade at any time if you run out of requests.'
+	),
+	[ PRODUCT_JETPACK_AI_MONTHLY ]: translate(
+		'Each interaction with the AI system counts as one request. Images may use multiple requests. You can upgrade at any time if you run out of requests.'
+	),
+	[ PRODUCT_JETPACK_STATS_MONTHLY ]: translate(
+		'Upgrade your plan when your website gets more visitors! Our plans adjust to match your site’s growth.'
+	),
+	[ PRODUCT_JETPACK_STATS_YEARLY ]: translate(
+		'Upgrade your plan when your website gets more visitors! Our plans adjust to match your site’s growth.'
+	),
+	[ PRODUCT_JETPACK_STATS_BI_YEARLY ]: translate(
+		'Upgrade your plan when your website gets more visitors! Our plans adjust to match your site’s growth.'
+	),
+};
diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/quantity-dropdown.tsx b/client/my-sites/plans/jetpack-plans/product-lightbox/quantity-dropdown.tsx
@@ -1,14 +1,21 @@
 import { isJetpackTieredProduct } from '@automattic/calypso-products';
 import { SelectDropdown } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
 import { useMemo, useCallback, type FC } from 'react';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormLegend from 'calypso/components/forms/form-legend';
+import InfoPopover from 'calypso/components/info-popover';
+import { preventWidows } from 'calypso/lib/formatting';
 import { getProductPartsFromAlias } from 'calypso/my-sites/checkout/src/hooks/use-prepare-products-for-cart';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 import slugToSelectorProduct from '../slug-to-selector-product';
 import useItemPrice from '../use-item-price';
-import { PRODUCT_OPTIONS_HEADER, PRODUCT_TIER_OPTIONS } from './constants';
+import {
+	PRODUCT_OPTIONS_HEADER,
+	PRODUCT_OPTIONS_HEADER_INFO_CONTENT,
+	PRODUCT_TIER_OPTIONS,
+} from './constants';
 import type { SelectorProduct } from '../types';
 
 interface QuantityDropdownProps {
@@ -20,6 +27,7 @@ interface QuantityDropdownProps {
 const QuantityDropdown: FC< QuantityDropdownProps > = ( { product, siteId, onChangeProduct } ) => {
 	const dispatch = useDispatch();
 	const listPrices = useItemPrice( siteId, product, product?.monthlyProductSlug || '' );
+	const translate = useTranslate();
 
 	const tierOptions = useMemo( () => {
 		if ( ! isJetpackTieredProduct( product.productSlug ) ) {
@@ -65,7 +73,16 @@ const QuantityDropdown: FC< QuantityDropdownProps > = ( { product, siteId, onCha
 	return (
 		<div className="product-lightbox__variants-dropdown">
 			<FormFieldset>
-				<FormLegend>{ PRODUCT_OPTIONS_HEADER[ product?.productSlug ] }</FormLegend>
+				<FormLegend>
+					<span>{ PRODUCT_OPTIONS_HEADER[ product?.productSlug ] }</span>
+					<InfoPopover
+						position="right"
+						screenReaderText={ translate( 'Learn more' ) }
+						className="product-lightbox__variants-dropdown--popover"
+					>
+						{ preventWidows( PRODUCT_OPTIONS_HEADER_INFO_CONTENT[ product?.productSlug ] ) }
+					</InfoPopover>
+				</FormLegend>
 				<SelectDropdown
 					className="product-lightbox__tiers-dropdown"
 					options={ tierOptions }

diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/style.scss b/client/my-sites/plans/jetpack-plans/product-lightbox/style.scss
@@ -4,6 +4,7 @@
 .product-lightbox__variants-options,
 .product-lightbox__variants-dropdown {
 	.form-legend {
+		display: flex;
 		font-weight: 600;
 		font-size: $font-body;
 		margin-bottom: 0.5rem;
@@ -60,6 +61,11 @@
 	}
 }
 
+.info-popover.product-lightbox__variants-dropdown--popover {
+	height: 24px;
+	width: 24px;
+}
+
 .product-lightbox__variants-content {
 	display: flex;
 	flex-direction: column;
@@ -250,3 +256,10 @@
 	white-space: nowrap !important;
 	border: 0 !important;
 }
+
+// The lightbox z-index is 100200, consequences of updating the popover z-index
+// to higher than that are unclear, so we'll manually set it to 100200 here so we
+// can see the popover in the lightbox.
+.popover.product-lightbox__variants-dropdown--popover {
+	z-index: 100200;
+}