diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/constants.ts b/client/my-sites/plans/jetpack-plans/product-lightbox/constants.ts index c0f557bb48dcf1..cfa608bba8df3e 100644 --- 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 index 50f1177559e2c1..b1bef06e9b01d4 100644 --- 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 (
- { PRODUCT_OPTIONS_HEADER[ product?.productSlug ] } + + { PRODUCT_OPTIONS_HEADER[ product?.productSlug ] } + + { preventWidows( PRODUCT_OPTIONS_HEADER_INFO_CONTENT[ product?.productSlug ] ) } + +