i18n: Update several /client components to replace formatNumnber with i18n-calypso numberFormat

client/blocks/author-compact-profile/index.tsx

@@ -1,6 +1,5 @@
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import clsx from 'clsx';
-import { getLocaleSlug, useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import ReaderAuthorLink from 'calypso/blocks/reader-author-link';
 import ReaderAvatar from 'calypso/blocks/reader-avatar';
 import ReaderSiteStreamLink from 'calypso/blocks/reader-site-stream-link';
@@ -92,7 +91,12 @@ export default function AuthorCompactProfile( props: AuthorCompactProfileProps )
 						{ translate( '%(followCount)s subscriber', '%(followCount)s subscribers', {
 							count: followCount,
 							args: {
-								followCount: formatNumber( followCount, getLocaleSlug() ?? 'en' ),
+								followCount: numberFormat( followCount, {
+									numberFormatOptions: {
+										notation: 'compact',
+										maximumFractionDigits: 1,
+									},
+								} ),
 							},
 						} ) }
 					</div>

client/blocks/reader-full-post/header.jsx

@@ -1,7 +1,6 @@
 import { Gridicon } from '@automattic/components';
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import clsx from 'clsx';
-import { translate, getLocaleSlug } from 'i18n-calypso';
+import { translate, numberFormat } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import TagsList from 'calypso/blocks/reader-post-card/tags-list';
 import ReaderSiteStreamLink from 'calypso/blocks/reader-site-stream-link';
@@ -97,7 +96,9 @@ const ReaderFullPostHeader = ( { post, authorProfile, layout = 'default' } ) =>
 								{ translate( '%(followCount)s subscriber', '%(followCount)s subscribers', {
 									count: followCount,
 									args: {
-										followCount: formatNumber( followCount, getLocaleSlug() ),
+										followCount: numberFormat( followCount, {
+											numberFormatOptions: { notation: 'compact', maximumFractionDigits: 1 },
+										} ),
 									},
 								} ) }
 							</span>

client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-status-content/site-stats-column.tsx

@@ -1,8 +1,7 @@
 import { Gridicon, ShortenedNumber } from '@automattic/components';
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import { Icon, arrowUp, arrowDown } from '@wordpress/icons';
 import clsx from 'clsx';
-import { translate } from 'i18n-calypso';
+import { translate, numberFormat } from 'i18n-calypso';
 import { useCallback, useContext } from 'react';
 import { DATAVIEWS_LIST } from 'calypso/a8c-for-agencies/components/items-dashboard/constants';
 import { DataViewsState } from 'calypso/a8c-for-agencies/components/items-dashboard/items-dataviews/interfaces';
@@ -68,7 +67,11 @@ export default function SiteStatsColumn( { site, stats, siteError }: Props ) {
 				>
 					{ trendIcon }
 					<div className="sites-overview__stats">
-						<span className="shortened-number">{ formatNumber( totalViews ) }</span>
+						<span className="shortened-number">
+							{ numberFormat( totalViews, {
+								numberFormatOptions: { notation: 'compact', maximumFractionDigits: 1 },
+							} ) }
+						</span>
 					</div>
 				</button>
 			);

client/my-sites/stats/stats-purchase/stats-commercial-upgrade-slider/index.tsx

@@ -1,6 +1,5 @@
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
 import formatCurrency from '@automattic/format-currency';
-import { getLocaleSlug, useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useEffect } from 'react';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { EXTENSION_THRESHOLD_IN_MILLION } from 'calypso/my-sites/stats/hooks/use-available-upgrade-tiers';
@@ -43,7 +42,17 @@ function getStepsForTiers( tiers: StatsPlanTierUI[], currencyCode: string ) {
 
 		// Return the new step with string values.
 		return {
-			lhValue: formatNumber( tier.views, getLocaleSlug() ?? 'en' ),
+			lhValue:
+				typeof tier.views === 'number'
+					? String(
+							numberFormat( tier.views, {
+								numberFormatOptions: {
+									notation: 'compact',
+									maximumFractionDigits: 1,
+								},
+							} )
+					  )
+					: '-',
 			rhValue: price,
 			originalPrice: tier.price,
 			upgradePrice: tierUpgradePricePerMonth

client/my-sites/subscribers/components/subscriber-list-container/subscriber-list-container.tsx

@@ -1,5 +1,4 @@
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
-import { getLocaleSlug, translate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useEffect } from 'react';
 import Pagination from 'calypso/components/pagination';
 import { EmptyListView } from 'calypso/my-sites/subscribers/components/empty-list-view';
@@ -43,6 +42,7 @@ const SubscriberListContainer = ( {
 	} = useSubscribersPage();
 	useRecordSearch();
 
+	const translate = useTranslate();
 	const isSimple = useSelector( isSimpleSite );
 	const isAtomic = useSelector( ( state ) => isAtomicSite( state, siteId ) );
 	const EmptyComponent = isSimple || isAtomic ? SubscriberLaunchpad : EmptyListView;
@@ -72,7 +72,7 @@ const SubscriberListContainer = ( {
 								isLoading ? 'loading-placeholder' : ''
 							}` }
 						>
-							{ formatNumber( total, getLocaleSlug() || undefined, { notation: 'standard' } ) }
+							{ numberFormat( total ) }
 						</span>
 					</div>
 

client/reader/stream/site-feed-sidebar/index.jsx

@@ -1,5 +1,4 @@
-import formatNumber from '@automattic/components/src/number-formatters/lib/format-number';
-import { useTranslate, getLocaleSlug, numberFormat } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useDispatch } from 'react-redux';
 import ReaderFeedHeaderFollow from 'calypso/blocks/reader-feed-header/follow';
 import TagLink from 'calypso/blocks/reader-post-card/tag-link';
@@ -56,7 +55,9 @@ const FeedStreamSidebar = ( {
 					{ followerCount && (
 						<div className="reader-tag-sidebar-stats__item">
 							<span className="reader-tag-sidebar-stats__count">
-								{ formatNumber( followerCount, getLocaleSlug() ) }
+								{ numberFormat( followerCount, {
+									numberFormatOptions: { notation: 'compact', maximumFractionDigits: 1 },
+								} ) }
 							</span>
 							<span className="reader-tag-sidebar-stats__title">
 								{ translate( 'Subscriber', 'Subscribers', { count: followerCount } ) }

packages/components/src/number-formatters/lib/format-number.ts

@@ -8,9 +8,9 @@ export const DEFAULT_LOCALE =
 // Preset Options
 export const COMPACT_FORMATTING_OPTIONS = {
 	notation: 'compact',
-	maximumSignificantDigits: 3,
+	maximumSignificantDigits: 3, // TODO clk numberFormat deleted below?
 	maximumFractionDigits: 1,
-	compactDisplay: 'short',
+	compactDisplay: 'short', // TODO clk numberFormat already the default
 } as Intl.NumberFormatOptions;
 export const STANDARD_FORMATTING_OPTIONS = {
 	notation: 'standard',