Update all occurrences of MJ utils/formatNumber() function to use def…

…ault options. (#39055)
Automattic · Aug 30, 2024 · cd0ac7a · cd0ac7a
1 parent 6fdb387
commit cd0ac7a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
@@ -1,4 +1,4 @@
-import { numberFormat, Text, getRedirectUrl } from '@automattic/jetpack-components';
+import { Text, getRedirectUrl } from '@automattic/jetpack-components';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -17,6 +17,7 @@ import useProduct from '../../../data/products/use-product';
 import useSimpleQuery from '../../../data/use-simple-query';
 import { getMyJetpackWindowInitialState } from '../../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../../hooks/use-analytics';
+import numberFormat from '../../../utils/format-number';
 import ProductCard from '../../connected-product-card';
 import styles from './style.module.scss';
 
@@ -228,8 +229,6 @@ const NoBackupsValueSection = props => {
 		return data;
 	}, [ backupStats ] );
 
-	const shortenedNumberConfig = { maximumFractionDigits: 1, notation: 'compact' };
-
 	return (
 		<ProductCard { ...props } showMenu isDataLoading={ isLoading }>
 			<div className={ styles[ 'no-backup-stats' ] }>
@@ -248,7 +247,7 @@ const NoBackupsValueSection = props => {
 								<>
 									<span className={ clsx( styles[ 'visual-stat' ] ) } aria-hidden="true">
 										{ getIcon( itemSlug ) }
-										<span>{ numberFormat( value, shortenedNumberConfig ) }</span>
+										<span>{ numberFormat( value ) }</span>
 									</span>
 									<VisuallyHidden>{ getStatRenderFn( itemSlug )( value ) }</VisuallyHidden>
 								</>

diff --git a/...etpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx b/...etpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx
@@ -59,10 +59,6 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 	const { status, hasPaidPlanForProduct } = detail || {};
 	const { videoCount, featuredStats } = data || {};
 	const { inactiveWithVideos, viewsWithoutPlan, viewsWithPlan, watchTime } = useTooltipCopy();
-	const shortenedNumberConfig: Intl.NumberFormatOptions = {
-		maximumFractionDigits: 1,
-		notation: 'compact',
-	};
 
 	if ( ! videoCount ) {
 		return null;
@@ -154,8 +150,8 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 				<ValueSection
 					value={ currentViews }
 					previousValue={ previousViews }
-					formattedValue={ formatNumber( currentViews, shortenedNumberConfig ) }
-					formattedDifference={ formatNumber( viewsDifference, shortenedNumberConfig ) }
+					formattedValue={ formatNumber( currentViews ) }
+					formattedDifference={ formatNumber( viewsDifference ) }
 					period={ period }
 				/>
 			</div>

diff --git a/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx b/projects/packages/my-jetpack/_inc/components/stats-section/count-comparison-card.jsx
@@ -43,7 +43,6 @@ const CountComparisonCard = ( { count = 0, previousCount = 0, icon, heading } )
 	const percentage = Number.isFinite( difference )
 		? percentCalculator( differenceMagnitude, previousCount )
 		: null;
-	const shortenedNumberConfig = { maximumFractionDigits: 1, notation: 'compact' };
 
 	return (
 		<Card className={ styles[ 'stats-card' ] }>
@@ -54,7 +53,7 @@ const CountComparisonCard = ( { count = 0, previousCount = 0, icon, heading } )
 					className={ styles[ 'stats-card-count-value' ] }
 					title={ Number.isFinite( count ) ? String( count ) : undefined }
 				>
-					{ formatNumber( count, shortenedNumberConfig ) }
+					{ formatNumber( count ) }
 				</span>
 				{ difference !== null ? (
 					<span
@@ -71,10 +70,11 @@ const CountComparisonCard = ( { count = 0, previousCount = 0, icon, heading } )
 							{ difference > 0 && <Icon size={ 18 } icon={ arrowUp } /> }
 						</span>
 						<span className={ styles[ 'stats-card-difference-absolute-value' ] }>
-							{ formatNumber(
-								differenceMagnitude,
-								differenceMagnitude > 9999 ? shortenedNumberConfig : {}
-							) }
+							{
+								differenceMagnitude > 9999
+									? formatNumber( differenceMagnitude ) // i.e.- 10.1K
+									: formatNumber( differenceMagnitude, {} ) // passing empty object removes the compact number formatting options, i.e.- 10,100
+							}
 						</span>
 						{ percentage !== null && (
 							<span className={ styles[ 'stats-card-difference-absolute-percentage' ] }>

diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-format-number-default-config b/projects/packages/my-jetpack/changelog/update-my-jetpack-format-number-default-config
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Small code fix: Update the params of formatNumber util in My Jetpack.
+
+