Onboarding: Update global currency settings on address change (https://github.com/woocommerce/woocommerce-admin/pull/3324)

* Update currency data to match currency format used in wcSettings

* Revert currency ranges to sprintf

* Allow currency to be changed after the class has been initialized

* Update currency settings when store address is changed

* Get default prices formats from positioning

* Set currency defaults if not set

* Handle PR feedback

* Add translator comment to 'more than' revenue option
This commit is contained in:
Joshua T Flowers 2019-12-04 07:32:13 +08:00 committed by GitHub
parent 7c9ba29fa2
commit 2fccd709c0
4 changed files with 128 additions and 83 deletions

View File

@ -21,6 +21,7 @@ import { getSetting, CURRENCY as currency } from '@woocommerce/wc-admin-settings
import { H, Card, SelectControl, Form } from '@woocommerce/components';
import withSelect from 'wc-api/with-select';
import { recordEvent } from 'lib/tracks';
import { formatCurrency } from 'lib/currency-format';
import Plugins from 'dashboard/task-list/tasks/steps/plugins';
import { pluginNames } from 'wc-api/onboarding/constants';
@ -275,38 +276,38 @@ class BusinessDetails extends Component {
const revenueOptions = [
{
key: 'none',
label: _x( "$0 (I'm just getting started)", '$0 revenue amount', 'woocommerce-admin' ),
label: sprintf(
/* translators: %s: $0 revenue amount */
__( "%s (I'm just getting started)", 'woocommerce-admin' ),
formatCurrency( 0 )
),
},
{
key: 'up-to-2500',
label: _x( 'Up to $2500 USD', 'equivalent of $2500 USD', 'woocommerce-admin' ),
label: sprintf(
/* translators: %s: A given revenue amount, e.g., $2500 */
__( 'Up to %s', 'woocommerce-admin' ),
formatCurrency( 2500 )
),
},
{
key: '2500-10000',
label: _x( '$2500 to $10,000 USD', 'equivalent of $2500-10,000 USD', 'woocommerce-admin' ),
label: this.getNumberRangeString( 2500, 10000, formatCurrency ),
},
{
key: '10000-50000',
label: _x(
'$2500 to $10,000 USD',
'equivalent of $10,000-50,000 USD',
'woocommerce-admin'
),
label: this.getNumberRangeString( 10000, 50000, formatCurrency ),
},
{
key: '50000-250000',
label: _x(
'$50,000 to $250,000 USD',
'equivalent of $50,000-250,000 USD',
'woocommerce-admin'
),
label: this.getNumberRangeString( 50000, 250000, formatCurrency ),
},
{
key: 'more-than-250000',
label: _x(
'More than $250,000 USD',
'equivalent of more than $250,000 USD',
'woocommerce-admin'
label: sprintf(
/* translators: %s: A given revenue amount, e.g., $250000 */
__( 'More than %s', 'woocommerce-admin' ),
formatCurrency( 250000 )
),
},
];

View File

@ -12,18 +12,23 @@ import { recordEvent } from 'lib/tracks';
import { without, get } from 'lodash';
/**
* Internal dependencies
* WooCommerce dependencies
*/
import { getCountryCode } from 'dashboard/utils';
import { getSetting } from '@woocommerce/wc-admin-settings';
import { H, Card, Form } from '@woocommerce/components';
import { getCurrencyData } from '@woocommerce/currency';
import withSelect from 'wc-api/with-select';
/**
* Internal dependencies
*/
import { setCurrency } from 'lib/currency-format';
import { getCountryCode } from 'dashboard/utils';
import {
StoreAddress,
validateStoreAddress,
} from '../../components/settings/general/store-address';
import UsageModal from './usage-modal';
import { getSetting } from '@woocommerce/wc-admin-settings';
import withSelect from 'wc-api/with-select';
class StoreDetails extends Component {
constructor( props ) {
@ -98,6 +103,7 @@ class StoreDetails extends Component {
} = this.props;
const currencySettings = this.deriveCurrencySettings( values.countryState );
setCurrency( currencySettings );
recordEvent( 'storeprofiler_store_details_continue', {
store_country: getCountryCode( values.countryState ),
@ -113,9 +119,9 @@ class StoreDetails extends Component {
woocommerce_store_city: values.city,
woocommerce_store_postcode: values.postCode,
woocommerce_currency: currencySettings.code,
woocommerce_currency_pos: currencySettings.position,
woocommerce_price_thousand_sep: currencySettings.grouping,
woocommerce_price_decimal_sep: currencySettings.decimal,
woocommerce_currency_pos: currencySettings.symbolPosition,
woocommerce_price_thousand_sep: currencySettings.thousandSeparator,
woocommerce_price_decimal_sep: currencySettings.decimalSeparator,
woocommerce_price_num_decimals: currencySettings.precision,
},
} );

View File

@ -17,6 +17,7 @@ const formatCurrency = storeCurrency.formatCurrency.bind( storeCurrency );
const formatDecimal = storeCurrency.formatDecimal.bind( storeCurrency );
const formatDecimalString = storeCurrency.formatDecimalString.bind( storeCurrency );
const render = storeCurrency.render.bind( storeCurrency );
const setCurrency = storeCurrency.setCurrency.bind( storeCurrency );
// Export the expected API for the consuming app, along with the instance.
export {
@ -25,4 +26,5 @@ export {
formatDecimal as getCurrencyFormatDecimal,
formatDecimalString as getCurrencyFormatString,
render as renderCurrency,
setCurrency,
};

View File

@ -9,29 +9,52 @@ import { sprintf } from '@wordpress/i18n';
*/
import { numberFormat } from '@woocommerce/number';
const DEFAULTS = {
code: 'USD',
precision: 2,
symbol: '$',
symbolPosition: 'left',
decimalSeparator: '.',
priceFormat: '%1$s%2$s',
thousandSeparator: ',',
};
export default class Currency {
constructor( config = {} ) {
this.code = ( config.code || DEFAULTS.code ).toString();
this.symbol = ( config.symbol || DEFAULTS.symbol ).toString();
this.symbolPosition = ( config.symbolPosition || DEFAULTS.symbolPosition ).toString();
this.decimalSeparator = ( config.decimalSeparator || DEFAULTS.decimalSeparator ).toString();
this.priceFormat = ( config.priceFormat || DEFAULTS.priceFormat ).toString();
this.thousandSeparator = ( config.thousandSeparator || DEFAULTS.thousandSeparator ).toString();
constructor( currency = null ) {
if ( ! this.code ) {
this.setCurrency( currency );
}
}
/**
* Set the currency configuration to use for the class.
*
* @param {Object} currency An object containing currency configuration settings.
*/
setCurrency( currency ) {
const defaultCurrency = getCurrencyData().US;
const config = { ...defaultCurrency, ...currency };
this.code = config.code.toString();
this.symbol = config.symbol.toString();
this.symbolPosition = config.symbolPosition.toString();
this.decimalSeparator = config.decimalSeparator.toString();
this.priceFormat = config.priceFormat ? config.priceFormat.toString() : this.getPriceFormat( config );
this.thousandSeparator = config.thousandSeparator.toString();
const precisionNumber = parseInt( config.precision, 10 );
this.precision = isNaN( precisionNumber ) ? DEFAULTS.precision : precisionNumber;
this.precision = precisionNumber;
}
Object.freeze( this );
/**
* Get the default price format from a currency.
*
* @param {Object} currency Currency configuration.
* @return {String} Price format.
*/
getPriceFormat( currency ) {
switch ( currency.symbolPosition ) {
case 'left':
return '%1$s%2$s';
case 'right':
return '%2$s%1$s';
case 'left_space':
return '%1$s %2$s';
case 'right_space':
return '%2$s %1$s';
}
return '%1$s%2$s';
}
/**
@ -102,7 +125,7 @@ export default class Currency {
}
/**
* Returns currency data by country/region. Contains code, position, thousands separator, decimal separator, and precision.
* Returns currency data by country/region. Contains code, symbol, position, thousands separator, decimal separator, and precision.
*
* @format
* @return {object} Curreny data.
@ -112,93 +135,106 @@ export function getCurrencyData() {
return {
US: {
code: 'USD',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '$',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
EU: {
code: 'EUR',
position: 'left',
grouping: '.',
decimal: ',',
symbol: '€',
symbolPosition: 'left',
thousandSeparator: '.',
decimalSeparator: ',',
precision: 2,
},
IN: {
code: 'INR',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '₹',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
GB: {
code: 'GBP',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '£',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
BR: {
code: 'BRL',
position: 'left',
grouping: '.',
decimal: ',',
symbol: 'R$',
symbolPosition: 'left',
thousandSeparator: '.',
decimalSeparator: ',',
precision: 2,
},
VN: {
code: 'VND',
position: 'right',
grouping: '.',
decimal: ',',
symbol: '₫',
symbolPosition: 'right',
thousandSeparator: '.',
decimalSeparator: ',',
precision: 1,
},
ID: {
code: 'IDR',
position: 'left',
grouping: '.',
decimal: ',',
symbol: 'Rp',
symbolPosition: 'left',
thousandSeparator: '.',
decimalSeparator: ',',
precision: 0,
},
BD: {
code: 'BDT',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '৳',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 0,
},
PK: {
code: 'PKR',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '₨',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
RU: {
code: 'RUB',
position: 'right',
grouping: ' ',
decimal: ',',
symbol: '₽',
symbolPosition: 'right',
thousandSeparator: ' ',
decimalSeparator: ',',
precision: 2,
},
TR: {
code: 'TRY',
position: 'left',
grouping: '.',
decimal: ',',
symbol: '₺',
symbolPosition: 'left',
thousandSeparator: '.',
decimalSeparator: ',',
precision: 2,
},
MX: {
code: 'MXN',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '$',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
CA: {
code: 'CAD',
position: 'left',
grouping: ',',
decimal: '.',
symbol: '$',
symbolPosition: 'left',
thousandSeparator: ',',
decimalSeparator: '.',
precision: 2,
},
};