From 5f324e94f64d6bb1a4bb93711e6d66211ae8dd5d Mon Sep 17 00:00:00 2001 From: Damien Alleyne <31164683+d-alleyne@users.noreply.github.com> Date: Tue, 27 Aug 2024 15:05:20 -0400 Subject: [PATCH] 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 --- .../search/changelog/fix-paid-requests-localization | 4 ++++ .../src/dashboard/components/pages/upsell-page/index.jsx | 9 +++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 projects/packages/search/changelog/fix-paid-requests-localization 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 );