Plans (grid): Reflect storage add-on selection on intro offer price a…

…nd billing desc (#95428)

* Fixes price display on import upgrade screen

---------

Co-authored-by: Aneesh Devasthale <[email protected]>

client/blocks/importer/wordpress/upgrade-plan/style.scss

@@ -153,7 +153,7 @@ $business-plan-color: #7f54b3;
 				font-size: 1.25rem;
 			}
 		}
-		.improt__upgrade-plan-price-discounted {
+		.import__upgrade-plan-price-discounted {
 			.plan-price__fraction {
 				line-height: 1;
 				font-size: 2.75rem;

client/blocks/importer/wordpress/upgrade-plan/test/upgrade-plan-details.tsx

@@ -38,7 +38,10 @@ function getPricing(): PricingMetaForGridPlan {
 		},
 		introOffer: {
 			formattedPrice: '$150',
-			rawPrice: 150,
+			rawPrice: {
+				monthly: 1250,
+				full: 15000,
+			},
 			isOfferComplete: false,
 			intervalUnit: 'year',
 			intervalCount: 1,

client/blocks/importer/wordpress/upgrade-plan/upgrade-plan-details.tsx

@@ -1,6 +1,5 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import {
-	calculateMonthlyPriceForPlan,
 	getPlan,
 	Plan,
 	PLAN_BUSINESS,
@@ -116,6 +115,7 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 					args: {
 						discountedPrice: formatCurrency( introOfferFullPrice, currencyCode, {
 							stripZeros: true,
+							isSmallestUnit: true,
 						} ),
 						originalPrice: formatCurrency( originalFullPrice, currencyCode, {
 							isSmallestUnit: true,
@@ -159,28 +159,26 @@ const PlanPriceOffer = ( props: PlanPriceOfferProps ) => {
 					isSmallestUnit
 				/>
 				<PlanPrice
-					className="improt__upgrade-plan-price-discounted"
+					className="import__upgrade-plan-price-discounted"
 					rawPrice={ introOfferMonthlyPrice }
 					currencyCode={ currencyCode }
+					isSmallestUnit
 				/>
 			</div>
 		</UpgradePlanPrice>
 	);
 };
 
 const preparePlanPriceOfferProps = (
-	selectedPlan: string,
 	introOfferAvailable: boolean,
 	plan?: Plan,
 	pricing?: PricingMetaForGridPlan
 ): PlanPriceOfferProps => {
 	const currencyCode = pricing?.currencyCode;
 	const originalMonthlyPrice = pricing?.originalPrice.monthly ?? undefined;
 
-	const introOfferFullPrice = pricing?.introOffer?.rawPrice ?? undefined;
-	const introOfferMonthlyPrice = introOfferFullPrice
-		? calculateMonthlyPriceForPlan( selectedPlan, introOfferFullPrice )
-		: undefined;
+	const introOfferFullPrice = pricing?.introOffer?.rawPrice.full ?? undefined;
+	const introOfferMonthlyPrice = pricing?.introOffer?.rawPrice.monthly ?? undefined;
 
 	const originalFullPrice = pricing?.originalPrice.full ?? undefined;
 
@@ -207,12 +205,7 @@ export const UpgradePlanDetails = ( props: UpgradePlanDetailsProps ) => {
 
 	const plan = getPlan( selectedPlan );
 
-	const planPriceOfferProps = preparePlanPriceOfferProps(
-		selectedPlan,
-		introOfferAvailable,
-		plan,
-		pricing
-	);
+	const planPriceOfferProps = preparePlanPriceOfferProps( introOfferAvailable, plan, pricing );
 
 	const { mutate: setSelectedPlanSlug } = useSelectedPlanUpgradeMutation();
 

packages/data-stores/src/add-ons/mocks.ts

@@ -0,0 +1,28 @@
+import { PRODUCT_1GB_SPACE } from '@automattic/calypso-products';
+import { ADD_ON_50GB_STORAGE } from './constants';
+import spaceUpgradeIcon from './icons/space-upgrade';
+import type { AddOnMeta } from './types';
+
+const STORAGE_ADD_ONS_MOCK: AddOnMeta[] = [
+	{
+		addOnSlug: ADD_ON_50GB_STORAGE,
+		productSlug: PRODUCT_1GB_SPACE,
+		featureSlugs: null,
+		icon: spaceUpgradeIcon,
+		quantity: 50,
+		name: '50 GB Storage',
+		displayCost: '50',
+		prices: {
+			monthlyPrice: 10,
+			yearlyPrice: 120,
+			formattedMonthlyPrice: 'USD10',
+			formattedYearlyPrice: 'USD120',
+		},
+		description: 'Make more space for high-quality photos, videos, and other media. ',
+		featured: false,
+		purchased: false,
+		checkoutLink: 'checkout:storage-50gb',
+	},
+];
+
+export { STORAGE_ADD_ONS_MOCK };