Jetpack Pricing | Add amount saved in bundles to featured item card (#…

…70631)

* Extract re-usage original price calculation to a hook

* Create usePricingBreakdown to calculate the pricing breakdown

* Create PricingBreakdown component to render the UI

* Wire everything up

* Some makeup

* Fix sidebar padding for tablet viewpoint

* Disable breakdown for products

* Hide breakdown for normal products

* Fix the breakdown for mobile view

* Move some more logic from PricingBreakdown to usePricingBreakdown

* Organise the code a bit

* Move styles over to the new place

* Create index file for PricingBreakdown

* Use CSS var for white color

* Move constants to plans list

* Endure the correct value for amountSaved

* Fix conflicts in CSS

* Enable breakdown only for english locales

* Fix margin for highlight on smaller screens

* Create AmountSaved component

* Wire it all up

* Enable the UI only for english locales

* Use Tooltip instead of clickable button

client/my-sites/plans/jetpack-plans/product-store/featured-item-card/index.tsx

@@ -4,6 +4,7 @@ import { FeaturedItemCardProps } from '../types';
 import './style.scss';
 
 export const FeaturedItemCard: React.FC< FeaturedItemCardProps > = ( {
+	amountSaved,
 	ctaAsPrimary,
 	ctaHref,
 	ctaLabel,
@@ -23,6 +24,9 @@ export const FeaturedItemCard: React.FC< FeaturedItemCardProps > = ( {
 				<div>
 					<h3 className="featured-item-card--title">{ title }</h3>
 					<div className="featured-item-card--price">{ price }</div>
+					{ amountSaved ? (
+						<div className="featured-item-card--amount-saved">{ amountSaved }</div>
+					) : null }
 					<div className="featured-item-card--desc">{ description }</div>
 				</div>
 				<div className="featured-item-card--footer">

client/my-sites/plans/jetpack-plans/product-store/hooks/use-pricing-breakdown.tsx

@@ -12,7 +12,7 @@ export const usePricingBreakdown = ( {
 }: PricingBreakdownProps ) => {
 	const getOriginalPrice = useGetOriginalPrice( siteId );
 
-	const { originalPrice, discountedPrice } = useItemPrice(
+	const { originalPrice, discountedPrice, isFetching } = useItemPrice(
 		siteId,
 		product,
 		product?.monthlyProductSlug || ''
@@ -48,6 +48,6 @@ export const usePricingBreakdown = ( {
 			amountSaved = Number( ( total - bundlePrice ).toFixed( 2 ) );
 		}
 
-		return { items, total, amountSaved, bundlePrice };
-	}, [ bundlePrice, getOriginalPrice, includedProductSlugs ] );
+		return { items, total, amountSaved, bundlePrice, isFetching };
+	}, [ bundlePrice, getOriginalPrice, includedProductSlugs, isFetching ] );
 };

client/my-sites/plans/jetpack-plans/product-store/items-list/amount-saved.tsx

@@ -0,0 +1,49 @@
+import { Gridicon } from '@automattic/components';
+import { Tooltip } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import { usePricingBreakdown } from '../hooks/use-pricing-breakdown';
+import { RenderPrice } from '../pricing-breakdown/render-price';
+import { AmountSavedProps } from '../types';
+
+export const AmountSaved: React.FC< AmountSavedProps > = ( { product, siteId } ) => {
+	const includedProductSlugs = product.productsIncluded || [];
+	const translate = useTranslate();
+
+	const { amountSaved, isFetching } = usePricingBreakdown( {
+		includedProductSlugs,
+		product,
+		siteId,
+	} );
+
+	return amountSaved && ! isFetching ? (
+		<Tooltip
+			position="top left"
+			text={
+				<span>
+					{ translate( 'For details, click on "{{moreInfo/}}"', {
+						components: {
+							moreInfo: (
+								<span>
+									{ translate( 'More about {{productName/}}', {
+										components: { productName: <>{ product.shortName }</> },
+									} ) }
+								</span>
+							),
+						},
+					} ) }{ ' ' }
+				</span>
+			}
+		>
+			<div className="amount-saved--tooltip-text">
+				<span>
+					{ translate( 'Save {{amount/}}/mo vs buying individually', {
+						components: {
+							amount: <RenderPrice price={ amountSaved } />,
+						},
+					} ) }
+				</span>
+				<Gridicon icon="info-outline" size={ 16 } />
+			</div>
+		</Tooltip>
+	) : null;
+};

client/my-sites/plans/jetpack-plans/product-store/items-list/most-popular.tsx

@@ -1,11 +1,14 @@
+import config from '@automattic/calypso-config';
 import classNames from 'classnames';
+import { useTranslate } from 'i18n-calypso';
 import { useStoreItemInfoContext } from '../context/store-item-info-context';
 import { FeaturedItemCard } from '../featured-item-card';
 import { FeaturesList } from '../features-list';
 import { HeroImage } from '../hero-image';
 import { ItemPrice } from '../item-price';
 import { MoreInfoLink } from '../more-info-link';
 import { MostPopularProps } from '../types';
+import { AmountSaved } from './amount-saved';
 
 import './style-most-popular.scss';
 
@@ -33,6 +36,11 @@ export const MostPopular: React.FC< MostPopularProps > = ( {
 		getOnClickPurchase,
 		isMultisite,
 	} = useStoreItemInfoContext();
+	const translate = useTranslate();
+
+	const isEnglish = config< Array< string | undefined > >( 'english_locales' ).includes(
+		translate.localeSlug
+	);
 
 	return (
 		<div className={ wrapperClassName }>
@@ -82,9 +90,16 @@ export const MostPopular: React.FC< MostPopularProps > = ( {
 
 					const ctaAsPrimary = ! ( isOwned || getIsPlanFeature( item ) || isSuperseded );
 
+					// TODO remove this isEnglish check once we have translations for the new strings
+					const amountSaved =
+						isEnglish && item.productsIncluded?.length ? (
+							<AmountSaved siteId={ siteId } product={ item } />
+						) : null;
+
 					return (
 						<li key={ item.productSlug } className="jetpack-product-store__most-popular--item">
 							<FeaturedItemCard
+								amountSaved={ amountSaved }
 								ctaAsPrimary={ ctaAsPrimary }
 								ctaHref={ getCheckoutURL( item ) }
 								ctaLabel={ ctaLabel }

client/my-sites/plans/jetpack-plans/product-store/items-list/style-bundle-list.scss

@@ -2,3 +2,20 @@
 	border-end-start-radius: 0;
 	border-end-end-radius: 0;
 }
+
+.featured-item-card--amount-saved {
+	margin-top: -4px;
+	margin-bottom: 8px;
+
+	.amount-saved--tooltip-text {
+		font-weight: 600;
+		color: var(--studio-gray-70);
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.plan-price {
+		font-size: inherit;
+	}
+}

client/my-sites/plans/jetpack-plans/product-store/types.ts

@@ -88,6 +88,7 @@ export type ItemPriceProps = ProductStoreBaseProps &
 	};
 
 export type FeaturedItemCardProps = {
+	amountSaved?: React.ReactNode;
 	ctaAsPrimary?: boolean;
 	ctaHref?: string;
 	ctaLabel: React.ReactNode;
@@ -123,3 +124,7 @@ export type PricingBreakdownItem = {
 	originalPrice: number;
 	renderedPrice: React.ReactNode;
 };
+
+export type AmountSavedProps = ProductStoreBaseProps & {
+	product: SelectorProduct;
+};