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:
parent
7c9ba29fa2
commit
2fccd709c0
|
@ -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 )
|
||||
),
|
||||
},
|
||||
];
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
} );
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue