Use a site-aware pricing endpoint instead of a generic one (#92088)

The generic pricing endpoint doesn't take into account the current plan for the website, and doesn't provide information about introductory offers.

The site-aware endpoint solves both problems.

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

@@ -172,15 +172,13 @@ export const UpgradePlan: React.FunctionComponent< Props > = ( props: Props ) =>
 				</div>
 			) }
 
-			{ site && site.ID && (
-				<PlanNoticeCreditUpgrade
-					linkTarget="_blank"
-					siteId={ site.ID }
-					visiblePlans={ [ visiblePlan ] }
-				/>
-			) }
+			<PlanNoticeCreditUpgrade
+				linkTarget="_blank"
+				siteId={ site.ID }
+				visiblePlans={ [ visiblePlan ] }
+			/>
 
-			<UpgradePlanDetails>{ renderCTAs() }</UpgradePlanDetails>
+			<UpgradePlanDetails siteId={ site.ID }>{ renderCTAs() }</UpgradePlanDetails>
 		</div>
 	);
 };

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

@@ -7,32 +7,36 @@ import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
 import ButtonGroup from 'calypso/components/button-group';
-import QueryPlans from 'calypso/components/data/query-plans';
+import QuerySitePlans from 'calypso/components/data/query-site-plans';
 import { useSelectedPlanUpgradeMutation } from 'calypso/data/import-flow/use-selected-plan-upgrade';
 import { useSelector } from 'calypso/state';
-import { getCurrentUserCurrencyCode } from 'calypso/state/currency-code/selectors';
-import { getPlanRawPrice } from 'calypso/state/plans/selectors';
+import { getSitePlan, getSitePlanRawPrice } from 'calypso/state/sites/plans/selectors';
 import { UpgradePlanFeatureList } from './upgrade-plan-feature-list';
 import { UpgradePlanHostingDetails } from './upgrade-plan-hosting-details';
 
 interface Props {
+	siteId: number;
 	children: React.ReactNode;
 }
 
 export const UpgradePlanDetails = ( props: Props ) => {
 	const { __ } = useI18n();
 	const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
 	const [ showFeatures, setShowFeatures ] = useState( false );
-
-	const { children } = props;
 	const [ selectedPlan, setSelectedPlan ] = useState<
 		typeof PLAN_BUSINESS | typeof PLAN_BUSINESS_MONTHLY
 	>( PLAN_BUSINESS );
+
+	const { children, siteId } = props;
+
 	const plan = getPlan( selectedPlan );
-	const planId = plan?.getProductId();
+	const planDetails = useSelector( ( state ) =>
+		siteId ? getSitePlan( state, siteId, selectedPlan ) : null
+	);
 
-	const currencyCode = useSelector( getCurrentUserCurrencyCode );
-	const rawPrice = useSelector( ( state ) => getPlanRawPrice( state, planId as number, true ) );
+	const rawPrice = useSelector( ( state ) =>
+		getSitePlanRawPrice( state, siteId, selectedPlan, { returnMonthly: true } )
+	);
 
 	const { mutate: setSelectedPlanSlug } = useSelectedPlanUpgradeMutation();
 
@@ -46,8 +50,7 @@ export const UpgradePlanDetails = ( props: Props ) => {
 
 	return (
 		<div className="import__upgrade-plan-details">
-			<QueryPlans />
-
+			<QuerySitePlans siteId={ siteId } />
 			<div className="import__upgrade-plan-period-switcher">
 				<ButtonGroup>
 					<Button
@@ -87,7 +90,7 @@ export const UpgradePlanDetails = ( props: Props ) => {
 					</div>
 
 					<div className="import__upgrade-plan-price">
-						<PlanPrice rawPrice={ rawPrice ?? undefined } currencyCode={ currencyCode } />
+						<PlanPrice rawPrice={ rawPrice } currencyCode={ planDetails?.currencyCode } />
 						<span className="plan-time-frame">
 							<small>{ plan?.getBillingTimeFrame() }</small>
 						</span>

client/my-sites/plans-features-main/components/plan-notice-credit-update.tsx

@@ -32,10 +32,16 @@ const PlanNoticeCreditUpgrade = ( {
 		'https://wordpress.com/support/manage-purchases/upgrade-your-plan/#upgrade-credit'
 	);
 
+	const showNotice =
+		visiblePlans &&
+		visiblePlans.length > 0 &&
+		planUpgradeCreditsApplicable !== null &&
+		planUpgradeCreditsApplicable > 0;
+
 	return (
 		<>
 			<QuerySitePlans siteId={ siteId } />
-			{ visiblePlans && visiblePlans.length && planUpgradeCreditsApplicable && (
+			{ showNotice && (
 				<Notice
 					className={ className }
 					showDismiss={ !! onDismissClick }