Make Stats Commercial "Annual" plan the default billing term. (#80341)

Automattic · Aug 9, 2023 · e6ea55f · e6ea55f
1 parent 2701bc1
commit e6ea55f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/client/my-sites/stats/stats-purchase/index.tsx b/client/my-sites/stats/stats-purchase/index.tsx
@@ -1,4 +1,5 @@
 import {
+	PRODUCT_JETPACK_STATS_YEARLY,
 	PRODUCT_JETPACK_STATS_MONTHLY,
 	PRODUCT_JETPACK_STATS_PWYW_YEARLY,
 	PRODUCT_JETPACK_STATS_FREE,
@@ -55,7 +56,10 @@ const StatsPurchasePage = ( { query }: { query: { redirect_uri: string; from: st
 		return isProductOwned( siteProducts, PRODUCT_JETPACK_STATS_FREE );
 	}, [ siteProducts ] );
 	const isCommercialOwned = useMemo( () => {
-		return isProductOwned( siteProducts, PRODUCT_JETPACK_STATS_MONTHLY );
+		return (
+			isProductOwned( siteProducts, PRODUCT_JETPACK_STATS_MONTHLY ) ||
+			isProductOwned( siteProducts, PRODUCT_JETPACK_STATS_YEARLY )
+		);
 	}, [ siteProducts ] );
 	const isPWYWOwned = useMemo( () => {
 		return isProductOwned( siteProducts, PRODUCT_JETPACK_STATS_PWYW_YEARLY );
@@ -75,6 +79,10 @@ const StatsPurchasePage = ( { query }: { query: { redirect_uri: string; from: st
 	}, [ siteSlug, isCommercialOwned, isSiteJetpackNotAtomic ] );
 
 	const commercialProduct = useSelector( ( state ) =>
+		getProductBySlug( state, PRODUCT_JETPACK_STATS_YEARLY )
+	) as ProductsList.ProductsListItem | null;
+
+	const commercialMonthlyProduct = useSelector( ( state ) =>
 		getProductBySlug( state, PRODUCT_JETPACK_STATS_MONTHLY )
 	) as ProductsList.ProductsListItem | null;
 
@@ -83,7 +91,10 @@ const StatsPurchasePage = ( { query }: { query: { redirect_uri: string; from: st
 	) as ProductsList.ProductsListItem | null;
 
 	const isLoading =
-		! commercialProduct || ! pwywProduct || ( ! siteProducts && isRequestingSiteProducts );
+		! commercialProduct ||
+		! commercialMonthlyProduct ||
+		! pwywProduct ||
+		( ! siteProducts && isRequestingSiteProducts );
 
 	const [ initialStep, initialSiteType ] = useMemo( () => {
 		if ( isPWYWOwned && ! isCommercialOwned ) {
@@ -92,6 +103,8 @@ const StatsPurchasePage = ( { query }: { query: { redirect_uri: string; from: st
 		return [ SCREEN_TYPE_SELECTION, TYPE_PERSONAL ];
 	}, [ isPWYWOwned, isCommercialOwned ] );
 
+	const maxSliderPrice = commercialMonthlyProduct?.cost;
+
 	return (
 		<Main fullWidthLayout>
 			<DocumentHead title={ translate( 'Jetpack Stats' ) } />
@@ -122,6 +135,7 @@ const StatsPurchasePage = ( { query }: { query: { redirect_uri: string; from: st
 						<StatsPurchaseWizard
 							siteSlug={ siteSlug }
 							commercialProduct={ commercialProduct }
+							maxSliderPrice={ maxSliderPrice ?? 10 }
 							pwywProduct={ pwywProduct }
 							siteId={ siteId }
 							redirectUri={ query.redirect_uri ?? '' }

diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx b/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx
@@ -1,5 +1,5 @@
 import {
-	PRODUCT_JETPACK_STATS_MONTHLY,
+	PRODUCT_JETPACK_STATS_YEARLY,
 	PRODUCT_JETPACK_STATS_PWYW_YEARLY,
 	PRODUCT_JETPACK_STATS_FREE,
 } from '@automattic/calypso-products';
@@ -74,7 +74,6 @@ const gotoCheckoutPage = ( {
 
 	switch ( type ) {
 		case 'pwyw':
-			// YEARLY!
 			eventName = 'pwyw';
 			product = price
 				? `${ PRODUCT_JETPACK_STATS_PWYW_YEARLY }:-q-${ getYearlyPrice( price ) }` // specify price per unit or the plan will default to a free plan
@@ -85,9 +84,9 @@ const gotoCheckoutPage = ( {
 			product = PRODUCT_JETPACK_STATS_FREE;
 			break;
 		case 'commercial':
-			// MONTHLY!
+			// Default to yearly/annual billing
 			eventName = 'commercial';
-			product = PRODUCT_JETPACK_STATS_MONTHLY;
+			product = PRODUCT_JETPACK_STATS_YEARLY;
 			break;
 	}
 

diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-commercial.tsx b/client/my-sites/stats/stats-purchase/stats-purchase-commercial.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { formatCurrency, getCurrencyObject } from '@automattic/format-currency';
+import { getCurrencyObject } from '@automattic/format-currency';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { Button } from '@wordpress/components';
 import classNames from 'classnames';
@@ -25,7 +25,8 @@ const CommercialPurchase = ( {
 	from,
 }: CommercialPurchaseProps ) => {
 	const translate = useTranslate();
-	const planPriceObject = getCurrencyObject( planValue, currencyCode );
+	const planValuePerMonth = planValue / 12;
+	const planPriceObject = getCurrencyObject( planValuePerMonth, currencyCode );
 
 	return (
 		<div>
@@ -50,17 +51,24 @@ const CommercialPurchase = ( {
 
 			<div className={ `${ COMPONENT_CLASS_NAME }__pricing` }>
 				<div className={ `${ COMPONENT_CLASS_NAME }__pricing-value` }>
-					<div className={ `${ COMPONENT_CLASS_NAME }__pricing-currency` }>
-						{ planPriceObject.symbol }
-					</div>
+					{ planPriceObject.symbolPosition === 'before' && (
+						<div className={ `${ COMPONENT_CLASS_NAME }__pricing-currency` }>
+							{ planPriceObject.symbol }
+						</div>
+					) }
 					<div className={ `${ COMPONENT_CLASS_NAME }__pricing-amount` }>
 						{ planPriceObject.hasNonZeroFraction
-							? formatCurrency( planValue, currencyCode ).replace( planPriceObject.symbol, '' )
-							: planPriceObject.integer }
+							? `${ planPriceObject.integer }${ planPriceObject.fraction }`
+							: `${ planPriceObject.integer }` }
 					</div>
+					{ planPriceObject.symbolPosition === 'after' && (
+						<div className={ `${ COMPONENT_CLASS_NAME }__pricing-currency` }>
+							{ planPriceObject.symbol }
+						</div>
+					) }
 				</div>
 				<div className={ `${ COMPONENT_CLASS_NAME }__pricing-cadency` }>
-					/{ translate( 'month' ) }
+					/{ translate( 'month, billed yearly' ) }
 				</div>
 			</div>
 
@@ -103,11 +111,7 @@ const CommercialPurchase = ( {
 					gotoCheckoutPage( { from, type: 'commercial', siteSlug, adminUrl, redirectUri } )
 				}
 			>
-				{ translate( 'Get Jetpack Stats for %(value)s per month', {
-					args: {
-						value: formatCurrency( planValue, currencyCode ),
-					},
-				} ) }
+				{ translate( 'Get Jetpack Stats' ) }
 			</Button>
 		</div>
 	);

diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-wizard.jsx b/client/my-sites/stats/stats-purchase/stats-purchase-wizard.jsx
@@ -44,14 +44,14 @@ const ProductCard = ( {
 	siteSlug,
 	siteId,
 	commercialProduct,
+	maxSliderPrice,
 	pwywProduct,
 	redirectUri,
 	from,
 	disableFreeProduct = false,
 	initialStep = SCREEN_TYPE_SELECTION,
 	initialSiteType = TYPE_PERSONAL,
 } ) => {
-	const maxSliderPrice = commercialProduct.cost;
 	const sliderStepPrice = pwywProduct.cost / MIN_STEP_SPLITS;
 
 	const steps = Math.floor( maxSliderPrice / sliderStepPrice );
@@ -232,6 +232,7 @@ const StatsPurchaseWizard = ( {
 	siteSlug,
 	siteId,
 	commercialProduct,
+	maxSliderPrice,
 	pwywProduct,
 	redirectUri,
 	from,
@@ -244,6 +245,7 @@ const StatsPurchaseWizard = ( {
 			siteSlug={ siteSlug }
 			siteId={ siteId }
 			commercialProduct={ commercialProduct }
+			maxSliderPrice={ maxSliderPrice }
 			pwywProduct={ pwywProduct }
 			redirectUri={ redirectUri }
 			from={ from }