Search: Fix paid requests localization in upsell (#38946)

* Update the number formatting to use the correct locale * Use getUserLocale to get the locale --------- Co-authored-by: Jason Moon <[email protected]>
Automattic · Aug 27, 2024 · 5f324e9 · 5f324e9
1 parent 5faaff4
commit 5f324e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/projects/packages/search/changelog/fix-paid-requests-localization b/projects/packages/search/changelog/fix-paid-requests-localization
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Search: Use the user's locale when formatting request limits.
diff --git a/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx b/projects/packages/search/src/dashboard/components/pages/upsell-page/index.jsx
@@ -3,6 +3,7 @@ import {
 	Container,
 	Col,
 	PricingCard,
+	getUserLocale,
 	AdminSectionHero,
 	ProductPrice,
 	PricingTable,
@@ -155,7 +156,7 @@ const OldPricingComponent = ( { sendToCart } ) => {
 
 const NewPricingComponent = ( { sendToCartPaid, sendToCartFree } ) => {
 	const siteDomain = useSelect( select => select( STORE_ID ).getCalypsoSlug(), [] );
-
+	const localeSlug = getUserLocale();
 	const priceBefore = useSelect( select => select( STORE_ID ).getPriceBefore() / 12, [] );
 	const priceAfter = useSelect( select => select( STORE_ID ).getPriceAfter() / 12, [] );
 	const priceCurrencyCode = useSelect( select => select( STORE_ID ).getPriceCurrencyCode(), [] );
@@ -166,7 +167,7 @@ const NewPricingComponent = ( { sendToCartPaid, sendToCartFree } ) => {
 	const { hasConnectionError } = useConnectionErrorNotice();
 
 	const paidRecordsLimitRaw = useSelect( select => select( STORE_ID ).getPaidRecordsLimit(), [] );
-	const paidRecordsLimit = new Intl.NumberFormat( 'en-US', {
+	const paidRecordsLimit = new Intl.NumberFormat( localeSlug, {
 		notation: 'compact',
 		compactDisplay: 'short',
 	} ).format( paidRecordsLimitRaw );
@@ -176,14 +177,14 @@ const NewPricingComponent = ( { sendToCartPaid, sendToCartFree } ) => {
 	const unlimitedText = __( 'Unlimited', 'jetpack-search-pkg' );
 	const paidRequestsLimit = hasUnlimitedRequests
 		? unlimitedText
-		: new Intl.NumberFormat( 'en-US', {
+		: new Intl.NumberFormat( localeSlug, {
 				notation: 'compact',
 				compactDisplay: 'short',
 		  } ).format( paidRequestsLimitRaw );
 
 	const unitPrice = useSelect( select => select( STORE_ID ).getAdditionalUnitPrice(), [] );
 	const unitQuantityRaw = useSelect( select => select( STORE_ID ).getAdditionalUnitQuantity(), [] );
-	const unitQuantity = new Intl.NumberFormat( 'en-US', {
+	const unitQuantity = new Intl.NumberFormat( localeSlug, {
 		notation: 'compact',
 		compactDisplay: 'short',
 	} ).format( unitQuantityRaw );