Fix Intro Offer price description (#28424)

* Fix how to calc Jetpack Backup intro offer price * Add intro offer object to ProductDetailCard * changelog * Backup: fix PricingCard currency and details text * Products: only return intro offer when available This commit fixes the return of Wpcom_Products::get_product_pricing to only return `introductory_offer` when available * Products: fix test_get_product_price * Fix version mismatch * Backup: revert intro offer calculation * My Jetpack: revert monthly price calculation * My Jetpack: fix price detail text condition * Backup: fix price detail text condition * Fix changelogger version * Fix bad minification issue on production builds
Automattic · Jan 23, 2023 · 5f9a8a8 · 5f9a8a8
1 parent f575f37
commit 5f9a8a8
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 3 deletions.
diff --git a/projects/packages/backup/changelog/update-intro-offer-price-display-and-description b/projects/packages/backup/changelog/update-intro-offer-price-display-and-description
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixes the price display for products with intro offers for the first month.
diff --git a/projects/packages/backup/src/js/components/Admin.js b/projects/packages/backup/src/js/components/Admin.js
@@ -317,12 +317,17 @@ const NoBackupCapabilities = () => {
 	const { tracks } = useAnalytics();
 	const [ priceAfter, setPriceAfter ] = useState( 0 );
 	const [ price, setPrice ] = useState( 0 );
+	const [ currencyCode, setCurrencyCode ] = useState( 'USD' );
+	const [ introOffer, setIntroOffer ] = useState( null );
 	const domain = useSelect( select => select( STORE_ID ).getCalypsoSlug(), [] );
 
 	useEffect( () => {
 		apiFetch( { path: '/jetpack/v4/backup-promoted-product-info' } ).then( res => {
+			setCurrencyCode( res.currency_code );
 			setPrice( res.cost / 12 );
+
 			if ( res.introductory_offer ) {
+				setIntroOffer( res.introductory_offer );
 				setPriceAfter( res.introductory_offer.cost_per_interval / 12 );
 			} else {
 				setPriceAfter( res.cost / 12 );
@@ -340,6 +345,15 @@ const NoBackupCapabilities = () => {
 		'Special introductory pricing, all renewals are at full price. 14 day money back guarantee.',
 		'jetpack-backup-pkg'
 	);
+	const priceDetails =
+		introOffer?.interval_unit === 'month' && introOffer?.interval_count === 1
+			? __( 'for the first month, billed yearly', 'jetpack-backup-pkg' )
+			: __(
+					'per month, billed yearly',
+					'jetpack-backup-pkg',
+					/* dummy arg to avoid bad minification */ 0
+			  );
+
 	return (
 		<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 			<Col lg={ 6 } md={ 6 } sm={ 4 }>
@@ -369,6 +383,8 @@ const NoBackupCapabilities = () => {
 					onCtaClick={ sendToCart }
 					priceAfter={ priceAfter }
 					priceBefore={ price }
+					currencyCode={ currencyCode }
+					priceDetails={ priceDetails }
 					title={ __( 'VaultPress Backup', 'jetpack-backup-pkg' ) }
 				/>
 			</Col>

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -92,6 +92,7 @@ const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, suppor
 		discountPricePerMonth: discountPrice,
 		wpcomProductSlug,
 		wpcomFreeProductSlug,
+		introductoryOffer,
 	} = pricingForUi;
 
 	const { recordEvent } = useAnalytics();
@@ -145,6 +146,15 @@ const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, suppor
 				} )
 		: null;
 
+	const priceDescription =
+		introductoryOffer?.intervalUnit === 'month' && introductoryOffer?.intervalCount === 1
+			? __( 'for the first month, billed yearly', 'jetpack-my-jetpack' )
+			: __(
+					'/month, paid yearly',
+					'jetpack-my-jetpack',
+					/* dummy arg to avoid bad minification */ 0
+			  );
+
 	const clickHandler = useCallback( () => {
 		trackButtonClick();
 		onClick?.( mainCheckoutRedirect );
@@ -224,9 +234,7 @@ const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, suppor
 							) }
 							<Price value={ discountPrice } currency={ currencyCode } isOld={ false } />
 						</div>
-						<Text className={ styles[ 'price-description' ] }>
-							{ __( '/month, paid yearly', 'jetpack-my-jetpack' ) }
-						</Text>
+						<Text className={ styles[ 'price-description' ] }>{ priceDescription }</Text>
 					</>
 				) }
 

diff --git a/projects/packages/my-jetpack/_inc/state/selectors.js b/projects/packages/my-jetpack/_inc/state/selectors.js
@@ -10,6 +10,9 @@ export const getProduct = ( state, productId ) => {
 
 	const product = mapObjectKeysToCamel( stateProduct, true );
 	product.pricingForUi = mapObjectKeysToCamel( product.pricingForUi || {}, true );
+	product.pricingForUi.introductoryOffer = product.pricingForUi.isIntroductoryOffer
+		? mapObjectKeysToCamel( product.pricingForUi.introductoryOffer, true )
+		: null;
 	product.features = product.features || [];
 	product.supportedProducts = product.supportedProducts || [];
 

diff --git a/projects/packages/my-jetpack/changelog/update-intro-offer-price-display-and-description b/projects/packages/my-jetpack/changelog/update-intro-offer-price-display-and-description
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixes the price display for products with intro offers for the first month.
diff --git a/projects/packages/my-jetpack/src/class-wpcom-products.php b/projects/packages/my-jetpack/src/class-wpcom-products.php
@@ -174,18 +174,21 @@ public static function get_product_pricing( $product_slug ) {
 		$cost                  = $product->cost;
 		$discount_price        = $cost;
 		$is_introductory_offer = false;
+		$introductory_offer    = null;
 
 		// Get/compute the discounted price.
 		if ( isset( $product->introductory_offer->cost_per_interval ) ) {
 			$discount_price        = $product->introductory_offer->cost_per_interval;
 			$is_introductory_offer = true;
+			$introductory_offer    = $product->introductory_offer;
 		}
 
 		$pricing = array(
 			'currency_code'         => $product->currency_code,
 			'full_price'            => $cost,
 			'discount_price'        => $discount_price,
 			'is_introductory_offer' => $is_introductory_offer,
+			'introductory_offer'    => $introductory_offer,
 		);
 
 		return self::populate_with_discount( $product, $pricing, $discount_price );

diff --git a/projects/packages/my-jetpack/tests/php/test-wpcom-products.php b/projects/packages/my-jetpack/tests/php/test-wpcom-products.php
@@ -210,6 +210,7 @@ public function test_get_product_price() {
 			'full_price'            => 4.9,
 			'discount_price'        => 2.45,
 			'is_introductory_offer' => false,
+			'introductory_offer'    => null,
 			'coupon_discount'       => 50,
 		);
 

diff --git a/projects/plugins/jetpack/changelog/update-intro-offer-price-display-and-description b/projects/plugins/jetpack/changelog/update-intro-offer-price-display-and-description
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Intro offers: fix the price display and description for products with intro offers for the first month.