diff --git a/projects/packages/search/changelog/fix-paid-requests-localization b/projects/packages/search/changelog/fix-paid-requests-localization new file mode 100644 index 0000000000000..7e14e4a1878d1 --- /dev/null +++ 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 index 0f1f94230161c..8c5bd8bc74a01 100644 --- 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 );