Refactor formatCurrency() to use store settings for formatting rather than store locale.

This commit is contained in:
Jeff Stieler 2019-01-17 00:04:57 -07:00
parent ddae6d3955
commit 6ed8ea117a
6 changed files with 45 additions and 49 deletions

View File

@ -105,7 +105,7 @@ class OrdersReportTable extends Component {
line_items,
items_sold,
coupon_lines,
currency,
currency_symbol,
net_revenue,
} = row;
@ -167,7 +167,7 @@ class OrdersReportTable extends Component {
value: coupons.map( item => item.code ).join( ' ' ),
},
{
display: formatCurrency( net_revenue, currency ),
display: formatCurrency( net_revenue, currency_symbol ),
value: net_revenue,
},
];

View File

@ -133,11 +133,11 @@ function OrdersPanel( { orders, isRequesting, isError } ) {
</span>
{ refundValue ? (
<span>
<s>{ formatCurrency( total, order.currency ) }</s>{' '}
{ formatCurrency( remainingTotal, order.currency ) }
<s>{ formatCurrency( total, order.currency_symbol ) }</s>{' '}
{ formatCurrency( remainingTotal, order.currency_symbol ) }
</span>
) : (
<span>{ formatCurrency( total, order.currency ) }</span>
<span>{ formatCurrency( total, order.currency_symbol ) }</span>
) }
</div>
}

View File

@ -17,10 +17,9 @@ _This package assumes that your code will run in an **ES2015+** environment. If
```JS
import { formatCurrency, getCurrencyFormatDecimal, getCurrencyFormatString } from '@woocommerce/currency';
// Formats money with a given currency code. Uses site's current locale for symbol formatting,
// from the wcSettings global. Defaults to `en-US`. If no currency provided, this is also
// pulled from wcSettings, and defaults to USD.
const total = formatCurrency( 20.923, 'USD' ); // '$20.92'
// Formats money with a given currency symbol. Uses site's currency settings for formatting,
// from the wcSettings global. Defaults to symbol=`$`, precision=2, decimalSeparator=`.`, thousandSeparator=`,`
const total = formatCurrency( 20.923, '$' ); // '$20.92'
// Get the rounded decimal value of a number at the precision used for the current currency,
// from the wcSettings global. Defaults to 2.

View File

@ -3,28 +3,35 @@
* External dependencies
*/
import { get, isNaN } from 'lodash';
import { sprintf } from '@wordpress/i18n';
/**
* Formats money with a given currency code. Uses site's current locale for symbol formatting
* Internal dependencies
*/
import { numberFormat } from 'lib/number';
/**
* Formats money with a given currency code. Uses site's currency settings for formatting.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
* @param {Number|String} number number to format
* @param {String} currency currency code e.g. 'USD'
* @param {String} currencySymbol currency code e.g. '$'
* @returns {?String} A formatted string.
*/
export function formatCurrency( number, currency ) {
const locale = wcSettings.siteLocale || 'en-US'; // Default so we don't break.
// default to wcSettings if currency is not passed in
if ( ! currency ) {
currency = get( wcSettings, 'currency.code', 'USD' );
export function formatCurrency( number, currencySymbol ) {
// default to wcSettings if currency symbol is not passed in
if ( ! currencySymbol ) {
currencySymbol = get( wcSettings, [ 'currency', 'symbol' ], '$' );
}
if ( 'number' !== typeof number ) {
number = parseFloat( number );
const precision = get( wcSettings, [ 'currency', 'precision' ], 2 );
const formattedNumber = numberFormat( number, precision );
const priceFormat = get( wcSettings, [ 'currency', 'price_format' ], '%1$s%2$s' );
if ( '' === formattedNumber ) {
return formattedNumber;
}
if ( isNaN( number ) ) {
return '';
}
return new Intl.NumberFormat( locale, { style: 'currency', currency } ).format( number );
return sprintf( priceFormat, currencySymbol, formattedNumber );
}
/**

View File

@ -10,32 +10,22 @@ describe( 'formatCurrency', () => {
expect( formatCurrency( 30 ) ).toBe( '$30.00' );
} );
it( 'should round a number to 2 decimal places in USD', () => {
expect( formatCurrency( 9.49258, 'USD' ) ).toBe( '$9.49' );
expect( formatCurrency( 30, 'USD' ) ).toBe( '$30.00' );
expect( formatCurrency( 3.0002, 'USD' ) ).toBe( '$3.00' );
} );
it( 'should uses store currency settings, not locale-based', () => {
global.wcSettings.currency.code = 'JPY';
global.wcSettings.currency.precision = 3;
global.wcSettings.currency.decimal_separator = ',';
global.wcSettings.currency.thousand_separator = '.';
global.wcSettings.currency.price_format = '%2$s%1$s';
it( 'should round a number to 2 decimal places in GBP', () => {
expect( formatCurrency( 8.9272, 'GBP' ) ).toBe( '£8.93' );
expect( formatCurrency( 11, 'GBP' ) ).toBe( '£11.00' );
expect( formatCurrency( 7.0002, 'GBP' ) ).toBe( '£7.00' );
} );
it( 'should round a number to 0 decimal places in JPY', () => {
expect( formatCurrency( 1239.88, 'JPY' ) ).toBe( '¥1,240' );
expect( formatCurrency( 1500, 'JPY' ) ).toBe( '¥1,500' );
expect( formatCurrency( 33715.02, 'JPY' ) ).toBe( '¥33,715' );
} );
it( 'should correctly convert and round a string', () => {
expect( formatCurrency( '19.80', 'USD' ) ).toBe( '$19.80' );
expect( formatCurrency( 9.49258, '¥' ) ).toBe( '9,493¥' );
expect( formatCurrency( 3000, '¥' ) ).toBe( '3.000,000¥' );
expect( formatCurrency( 3.0002, '¥' ) ).toBe( '3,000¥' );
} );
it( "should return empty string when given an input that isn't a number", () => {
expect( formatCurrency( 'abc', 'USD' ) ).toBe( '' );
expect( formatCurrency( false, 'USD' ) ).toBe( '' );
expect( formatCurrency( null, 'USD' ) ).toBe( '' );
expect( formatCurrency( 'abc' ) ).toBe( '' );
expect( formatCurrency( false ) ).toBe( '' );
expect( formatCurrency( null ) ).toBe( '' );
} );
} );

View File

@ -44,7 +44,7 @@ wooCommercePackages.forEach( lib => {
global.wcSettings = {
adminUrl: 'https://vagrant.local/wp/wp-admin/',
locale: 'en-US',
currency: { code: 'USD', precision: 2, symbol: '&#36;' },
currency: { code: 'USD', precision: 2, symbol: '$' },
date: {
dow: 0,
},