[not verified] Admin page: Fix pricing/currency displayed on the upgr…

…ade page (#21594)

* Upgrade page: Fix data source for products details

* Changelog: Add entry for this PR

* Product Descriptions: Fix test fixtures

projects/plugins/jetpack/_inc/client/product-descriptions/index.jsx

@@ -10,9 +10,9 @@ import { isEmpty } from 'lodash';
 /**
  * Internal dependencies
  */
-import QuerySiteProducts from 'components/data/query-site-products';
+import QueryProducts from 'components/data/query-products';
 import { JetpackLoadingIcon } from 'components/jetpack-loading-icon';
-import { isFetchingSiteProducts } from 'state/site-products';
+import { isFetchingProducts as isFetchingProductsSelector } from 'state/products';
 import { arePromotionsActive, getProductsForPurchase } from 'state/initial-state';
 import { PRODUCT_DESCRIPTION_PRODUCTS as SUPPORTED_PRODUCTS } from './constants';
 import ProductDescription from './product-description';
@@ -49,7 +49,7 @@ const ProductDescriptions = props => {
 
 	return (
 		<>
-			<QuerySiteProducts />
+			<QueryProducts />
 			{ isLoading ? (
 				<div className="jp-product-descriptions__loading">
 					<JetpackLoadingIcon />
@@ -70,6 +70,6 @@ ProductDescriptions.propTypes = {
 
 export default connect( state => ( {
 	arePromotionsActive: arePromotionsActive( state ),
-	isFetchingProducts: isFetchingSiteProducts( state ),
+	isFetchingProducts: isFetchingProductsSelector( state ),
 	products: getProductsForPurchase( state ),
 } ) )( ProductDescriptions );

projects/plugins/jetpack/_inc/client/product-descriptions/product-description/test/fixtures.js

@@ -79,7 +79,7 @@ export function buildInitialState() {
 					}
 				}
 			},
-			siteProducts: {
+			products: {
 				"items": {
 					"jetpack_security_daily": {
 						"product_slug": "jetpack_security_daily",

projects/plugins/jetpack/_inc/client/state/initial-state/reducer.js

@@ -9,7 +9,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
  */
 import { JETPACK_SET_INITIAL_STATE, MOCK_SWITCH_USER_PERMISSIONS } from 'state/action-types';
 import { getPlanDuration } from 'state/plans/reducer';
-import { getSiteProducts } from 'state/site-products';
+import { getProducts } from 'state/products';
 import { isCurrentUserLinked } from 'state/connection';
 
 export const initialState = ( state = window.Initial_State, action ) => {
@@ -474,7 +474,7 @@ export const getUpgradeUrl = ( state, source, userId = '', planDuration = false
  */
 export function getProductsForPurchase( state ) {
 	const staticProducts = get( state.jetpack.initialState, 'products', {} );
-	const siteProducts = getSiteProducts( state );
+	const jetpackProducts = getProducts( state );
 	const products = {};
 
 	for ( const [ key, product ] of Object.entries( staticProducts ) ) {
@@ -484,12 +484,12 @@ export function getProductsForPurchase( state ) {
 			key: key,
 			description: product.description,
 			features: product.features,
-			available: get( siteProducts, [ product.slug, 'available' ], false ),
-			currencyCode: get( siteProducts, [ product.slug, 'currency_code' ], '' ),
+			available: get( jetpackProducts, [ product.slug, 'available' ], false ),
+			currencyCode: get( jetpackProducts, [ product.slug, 'currency_code' ], '' ),
 			showPromotion: product.show_promotion,
 			promotionPercentage: product.discount_percent,
 			includedInPlans: product.included_in_plans,
-			fullPrice: get( siteProducts, [ product.slug, 'cost' ], '' ),
+			fullPrice: get( jetpackProducts, [ product.slug, 'cost' ], '' ),
 			upgradeUrl: getRedirectUrl( 'jetpack-product-description-checkout', {
 				path: product.slug,
 			} ),

projects/plugins/jetpack/changelog/fix-jetpack-upgrade-page-currency

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Fixes the prices and currencies to be based on user's preferences on the WPA upgrade page.