diff --git a/plugins/woocommerce-blocks/packages/prices/utils/price.ts b/plugins/woocommerce-blocks/packages/prices/utils/price.ts index 58669ded8e1..699b854b2b7 100644 --- a/plugins/woocommerce-blocks/packages/prices/utils/price.ts +++ b/plugins/woocommerce-blocks/packages/prices/utils/price.ts @@ -137,6 +137,25 @@ const splitDecimal = ( }; }; +const applyDecimal = ( + afterDecimal: string, + decimalSeparator: string, + minorUnit: number +): string => { + if ( afterDecimal ) { + return `${ decimalSeparator }${ afterDecimal.padEnd( + minorUnit, + '0' + ) }`; + } + + if ( minorUnit > 0 ) { + return `${ decimalSeparator }${ '0'.repeat( minorUnit ) }`; + } + + return ''; +}; + /** * Format a price, provided using the smallest unit of the currency, as a * decimal complete with currency symbols using current store settings. @@ -176,9 +195,11 @@ export const formatPrice = ( const formattedValue = `${ prefix }${ applyThousandSeparator( beforeDecimal, thousandSeparator - ) }${ - afterDecimal ? `${ decimalSeparator }${ afterDecimal }` : '' - }${ suffix }`; + ) }${ applyDecimal( + afterDecimal, + decimalSeparator, + minorUnit + ) }${ suffix }`; // This uses a textarea to magically decode HTML currency symbols. const txt = document.createElement( 'textarea' ); diff --git a/plugins/woocommerce-blocks/packages/prices/utils/test/price.js b/plugins/woocommerce-blocks/packages/prices/utils/test/price.js index bc28c6d9c08..1f3775df103 100644 --- a/plugins/woocommerce-blocks/packages/prices/utils/test/price.js +++ b/plugins/woocommerce-blocks/packages/prices/utils/test/price.js @@ -3,48 +3,46 @@ */ import { formatPrice, getCurrency } from '../price'; -describe( 'formatPrice', () => { +describe( 'The function formatPrice()', () => { test.each` - value | prefix | suffix | expected - ${ 1000 } | ${ '€' } | ${ '' } | ${ '€10' } - ${ 1000 } | ${ '' } | ${ '€' } | ${ '10€' } - ${ 1000 } | ${ '' } | ${ '$' } | ${ '10$' } - ${ '1000' } | ${ '€' } | ${ '' } | ${ '€10' } - ${ 0 } | ${ '€' } | ${ '' } | ${ '€0' } - ${ '' } | ${ '€' } | ${ '' } | ${ '' } - ${ null } | ${ '€' } | ${ '' } | ${ '' } - ${ undefined } | ${ '€' } | ${ '' } | ${ '' } - ${ 100000 } | ${ '€' } | ${ '' } | ${ '€1,000' } - ${ 1000000 } | ${ '€' } | ${ '' } | ${ '€10,000' } - ${ 1000000000 } | ${ '€' } | ${ '' } | ${ '€10,000,000' } + value | prefix | suffix | thousandSeparator | decimalSeparator | minorUnit | expected + ${ 1020 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€10.20' } + ${ 1000 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€10.00' } + ${ 1000 } | ${ '' } | ${ '€' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '10.00€' } + ${ 1000 } | ${ '' } | ${ '$' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '10.00$' } + ${ '1000' } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€10.00' } + ${ 0 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€0.00' } + ${ '' } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '' } + ${ null } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '' } + ${ undefined } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '' } + ${ 100000 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€1,000.00' } + ${ 1000000 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€10,000.00' } + ${ 1000000000 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '€10,000,000.00' } + ${ 10000000000 } | ${ '€' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 3 } | ${ '€10,000,000.000' } + ${ 10000000000000 } | ${ '€ ' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 6 } | ${ '€ 10,000,000.000000' } + ${ 10000000 } | ${ '€ ' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 0 } | ${ '€ 10,000,000' } + ${ 1000000099 } | ${ '$' } | ${ '' } | ${ ',' } | ${ '.' } | ${ 2 } | ${ '$10,000,000.99' } + ${ 1000000099 } | ${ '$' } | ${ '' } | ${ '.' } | ${ ',' } | ${ 2 } | ${ '$10.000.000,99' } `( - 'correctly formats price given "$value", "$prefix" prefix, and "$suffix" suffix as "$expected"', - ( { value, prefix, suffix, expected } ) => { - const formattedPrice = formatPrice( - value, - getCurrency( { prefix, suffix } ) - ); - - expect( formattedPrice ).toEqual( expected ); - } - ); - - test.each` - value | prefix | decimalSeparator | thousandSeparator | expected - ${ 1000000099 } | ${ '$' } | ${ '.' } | ${ ',' } | ${ '$10,000,000.99' } - ${ 1000000099 } | ${ '$' } | ${ ',' } | ${ '.' } | ${ '$10.000.000,99' } - `( - 'correctly formats price given "$value", "$prefix" prefix, "$decimalSeparator" decimal separator, "$thousandSeparator" thousand separator as "$expected"', + 'correctly formats price given "$value", "$prefix" prefix, "$suffix" suffix, "$thousandSeparator" thousandSeparator, "$decimalSeparator" decimalSeparator, and "$minorUnit" minorUnit as "$expected"', ( { value, prefix, - decimalSeparator, - thousandSeparator, + suffix, expected, + thousandSeparator, + decimalSeparator, + minorUnit, } ) => { const formattedPrice = formatPrice( value, - getCurrency( { prefix, decimalSeparator, thousandSeparator } ) + getCurrency( { + prefix, + suffix, + thousandSeparator, + decimalSeparator, + minorUnit, + } ) ); expect( formattedPrice ).toEqual( expected ); @@ -53,8 +51,8 @@ describe( 'formatPrice', () => { test.each` value | expected - ${ 1000 } | ${ '$10' } - ${ 0 } | ${ '$0' } + ${ 1000 } | ${ '$10.00' } + ${ 0 } | ${ '$0.00' } ${ '' } | ${ '' } ${ null } | ${ '' } ${ undefined } | ${ '' }