Decouple wcSettings from published packages. (https://github.com/woocommerce/woocommerce-admin/pull/3001)

* refactor wcSettings in components to use new api

* update test snapshot

* refactor wcSettings in other packages

* fix how defaults are set for setting

* decouple siteLocale from ReportsFilters and AdvancedFilters

* Decouple currency settings from packages

AdvancedFilters, ReportFilters, and NumberFilters now receive currency info as props.

* decouple currency settings from `ReportChart`

* decouple `wcAdminAssetsUrl` setting from `EmptyContent`

- also refactors to remove the need for `ImageAsset` component.

* decouple OrderStatus from wcSettings

* decouple wcAdminUrl setting from ProductImage component

- this also implements a SVG for default product image.

* remove export for image-asset that is no longer present

* remove console.log

* update test snapshots for ProductImage

plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

@@ -21,6 +21,7 @@ import {
 	getPreviousDate,
 } from '@woocommerce/date';
 import { Chart } from '@woocommerce/components';
+import { CURRENCY } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -157,6 +158,7 @@ export class ReportChart extends Component {
 				valueType={ selectedChart.type }
 				xFormat={ formats.xFormat }
 				x2Format={ formats.x2Format }
+				currency={ CURRENCY }
 			/>
 		);
 	}

plugins/woocommerce-admin/client/analytics/components/report-filters/index.js

@@ -10,6 +10,7 @@ import { omitBy, isUndefined, snakeCase } from 'lodash';
  * WooCommerce dependencies
  */
 import { ReportFilters as Filters } from '@woocommerce/components';
+import { LOCALE, CURRENCY } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -65,6 +66,8 @@ export default class ReportFilters extends Component {
 		return (
 			<Filters
 				query={ query }
+				siteLocale={ LOCALE.siteLocale }
+				currency={ CURRENCY }
 				path={ path }
 				filters={ filters }
 				advancedFilters={ advancedFilters }

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -13,6 +13,7 @@ import { Date, Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
 import { defaultTableDateFormat } from '@woocommerce/date';
 import { formatCurrency, renderCurrency } from '@woocommerce/currency';
 import { numberFormat } from '@woocommerce/number';
+import { getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -161,7 +162,11 @@ export default class OrdersReportTable extends Component {
 				},
 				{
 					display: (
-						<OrderStatus className="woocommerce-orders-table__status" order={ { status } } />
+						<OrderStatus
+							className="woocommerce-orders-table__status"
+							order={ { status } }
+							orderStatusMap={ getSetting( 'orderStatuses', {} ) }
+						/>
 					),
 					value: status,
 				},

plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

@@ -164,7 +164,7 @@ class OrdersPanel extends Component {
 						</Button>
 					}
 				>
-					<OrderStatus order={ order } />
+					<OrderStatus order={ order } orderStatusMap={ getSetting( 'orderStatuses', {} ) } />
 				</ActivityCard>
 			);
 		} );

plugins/woocommerce-admin/packages/components/src/advanced-filters/README.md

@@ -66,6 +66,8 @@ Name | Type | Default | Description
 `path` | String | `null` | (required) Name of this filter, used in translations.
 `query` | Object | `null` | The query string represented in object form.
 `onAdvancedFilterAction` | Function | `null` | Function to be called after an advanced filter action has been taken.
+`siteLocale` | string | `'en_US'` | The siteLocale for the site.
+`currency` | Object | `{}` | The currency info for the site.
 
 
 ## Input Components

plugins/woocommerce-admin/packages/components/src/advanced-filters/docs/example.js

@@ -3,7 +3,18 @@
  * Internal dependencies
  */
 import { AdvancedFilters } from '@woocommerce/components';
-import { ORDER_STATUSES } from '@woocommerce/wc-admin-settings';
+
+const ORDER_STATUSES = {
+	cancelled: 'Cancelled',
+	completed: 'Completed',
+	failed: 'Failed',
+	'on-hold': 'On hold',
+	pending: 'Pending payment',
+	processing: 'Processing',
+	refunded: 'Refunded',
+};
+
+const siteLocale = 'en_US';
 
 const path = ( new URL( document.location ) ).searchParams.get( 'path' ) || '/devdocs';
 const query = {
@@ -136,7 +147,8 @@ const advancedFilters = {
 };
 
 export default () => (
-    <AdvancedFilters
+	<AdvancedFilters
+		siteLocale={ siteLocale }
         path={ path }
         query={ query }
         filterTitle="Orders"

plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js

@@ -21,7 +21,6 @@ import {
 	getQueryFromActiveFilters,
 	getHistory,
 } from '@woocommerce/navigation';
-import { LOCALE } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -38,8 +37,6 @@ const matches = [
 	{ value: 'any', label: __( 'Any', 'woocommerce-admin' ) },
 ];
 
-const { siteLocale } = LOCALE;
-
 /**
  * Displays a configurable set of filters which can modify query parameters.
  */
@@ -189,7 +186,7 @@ class AdvancedFilters extends Component {
 	}
 
 	isEnglish() {
-		return /en-/.test( siteLocale );
+		return /en[-|_]/.test( this.props.siteLocale );
 	}
 
 	onFilter() {
@@ -200,12 +197,13 @@ class AdvancedFilters extends Component {
 	}
 
 	render() {
-		const { config, query } = this.props;
+		const { config, query, currency } = this.props;
 		const { activeFilters, match } = this.state;
 		const availableFilterKeys = this.getAvailableFilterKeys();
 		const updateHref = this.getUpdateHref( activeFilters, match );
 		const updateDisabled = ( 'admin.php' + window.location.search === updateHref ) || 0 === activeFilters.length;
 		const isEnglish = this.isEnglish();
+		const { symbol: currencySymbol, symbolPosition } = currency;
 		return (
 			<Card className="woocommerce-filters-advanced woocommerce-analytics__card" title={ this.getTitle() }>
 				<ul className="woocommerce-filters-advanced__list" ref={ this.filterListRef }>
@@ -241,6 +239,8 @@ class AdvancedFilters extends Component {
 										onFilterChange={ this.onFilterChange }
 										isEnglish={ isEnglish }
 										query={ query }
+										currencySymbol={ currencySymbol }
+										symbolPosition={ symbolPosition }
 									/>
 								) }
 								{ 'Currency' === input.component && (
@@ -251,6 +251,8 @@ class AdvancedFilters extends Component {
 										onFilterChange={ this.onFilterChange }
 										isEnglish={ isEnglish }
 										query={ query }
+										currencySymbol={ currencySymbol }
+										symbolPosition={ symbolPosition }
 									/>
 								) }
 								{ 'Date' === input.component && (
@@ -366,11 +368,24 @@ AdvancedFilters.propTypes = {
 	 * Function to be called after an advanced filter action has been taken.
 	 */
 	onAdvancedFilterAction: PropTypes.func,
+	/**
+	 * The locale for the site.
+	 */
+	siteLocale: PropTypes.string,
+	/**
+	 * The currency settings for the site.
+	 */
+	currency: PropTypes.object,
 };
 
 AdvancedFilters.defaultProps = {
 	query: {},
 	onAdvancedFilterAction: () => {},
+	siteLocale: 'en_US',
+	currency: {
+		symbol: '$',
+		symbolPosition: 'left',
+	},
 };
 
 export default AdvancedFilters;

plugins/woocommerce-admin/packages/components/src/advanced-filters/number-filter.js

@@ -19,7 +19,6 @@ import { textContent } from './utils';
  * WooCommerce dependencies
  */
 import { formatCurrency } from '@woocommerce/currency';
-import { CURRENCY } from '@woocommerce/wc-admin-settings';
 
 class NumberFilter extends Component {
 	getBetweenString() {
@@ -70,10 +69,15 @@ class NumberFilter extends Component {
 		} ) );
 	}
 
-	getFormControl( { type, value, label, onChange } ) {
+	getFormControl( {
+		type,
+		value,
+		label,
+		onChange,
+		currencySymbol,
+		symbolPosition,
+	} ) {
 		if ( 'currency' === type ) {
-			const { symbol: currencySymbol, symbolPosition } = CURRENCY;
-
 			return (
 				0 === symbolPosition.indexOf( 'right' )
 				? <TextControlWithAffixes
@@ -107,7 +111,13 @@ class NumberFilter extends Component {
 	}
 
 	getFilterInputs() {
-		const { config, filter, onFilterChange } = this.props;
+		const {
+			config,
+			filter,
+			onFilterChange,
+			currencySymbol,
+			symbolPosition,
+		} = this.props;
 		const inputType = get( config, [ 'input', 'type' ], 'number' );
 
 		if ( 'between' === filter.rule ) {
@@ -138,11 +148,19 @@ class NumberFilter extends Component {
 			value: rangeStart || rangeEnd,
 			label: sprintf( labelFormat, { field: get( config, [ 'labels', 'add' ] ) } ),
 			onChange: partial( onFilterChange, filter.key, 'value' ),
+			currencySymbol,
+			symbolPosition,
 		} );
 	}
 
 	getRangeInput() {
-		const { config, filter, onFilterChange } = this.props;
+		const {
+			config,
+			filter,
+			onFilterChange,
+			currencySymbol,
+			symbolPosition,
+		} = this.props;
 		const inputType = get( config, [ 'input', 'type' ], 'number' );
 		const [ rangeStart, rangeEnd ] = isArray( filter.value ) ? filter.value : [ filter.value ];
 
@@ -167,6 +185,8 @@ class NumberFilter extends Component {
 						{ field: get( config, [ 'labels', 'add' ] ) }
 					),
 					onChange: rangeStartOnChange,
+					currencySymbol,
+					symbolPosition,
 				} ),
 				rangeEnd: this.getFormControl( {
 					type: inputType,
@@ -178,6 +198,8 @@ class NumberFilter extends Component {
 						{ field: get( config, [ 'labels', 'add' ] ) }
 					),
 					onChange: rangeEndOnChange,
+					currencySymbol,
+					symbolPosition,
 				} ),
 				span: <span className="separator" />,
 			},

plugins/woocommerce-admin/packages/components/src/chart/README.md

@@ -104,3 +104,4 @@ Name | Type | Default | Description
 `x2Format` | String | `'%b %Y'` | A datetime formatting string, passed to d3TimeFormat
 `yBelow1Format` | String | `null` | A number formatting string, passed to d3Format
 `yFormat` | String | `null` | A number formatting string, passed to d3Format
+`currency` | Object | `{}` | An object with currency properties for usage in the chart. The following properties are expected: `decimal`, `symbol`, `symbolPosition`, `thousands`. This is passed to d3Format.

plugins/woocommerce-admin/packages/components/src/chart/index.js

@@ -18,7 +18,6 @@ import { withViewportMatch } from '@wordpress/viewport';
  * WooCommerce dependencies
  */
 import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
-import { CURRENCY } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -43,20 +42,6 @@ function getD3CurrencyFormat( symbol, position ) {
 	}
 }
 
-const {
-	symbol: currencySymbol,
-	symbolPosition,
-	decimalSeparator: decimal,
-	thousandSeparator: thousands,
-} = CURRENCY;
-
-d3FormatDefaultLocale( {
-	decimal,
-	thousands,
-	grouping: [ 3 ],
-	currency: getD3CurrencyFormat( currencySymbol, symbolPosition ),
-} );
-
 /**
  * A chart container using d3, to display timeseries data with an interactive legend.
  */
@@ -109,6 +94,7 @@ class Chart extends Component {
 
 	componentDidMount() {
 		this.updateDimensions();
+		this.setD3DefaultFormat();
 		window.addEventListener( 'resize', this.updateDimensions );
 	}
 
@@ -116,6 +102,21 @@ class Chart extends Component {
 		window.removeEventListener( 'resize', this.updateDimensions );
 	}
 
+	setD3DefaultFormat() {
+		const {
+			symbol: currencySymbol,
+			symbolPosition,
+			decimalSeparator: decimal,
+			thousandSeparator: thousands,
+		} = this.props.currency;
+		d3FormatDefaultLocale( {
+			decimal,
+			thousands,
+			grouping: [ 3 ],
+			currency: getD3CurrencyFormat( currencySymbol, symbolPosition ),
+		} );
+	}
+
 	getOrderedKeys( focusedKeys, visibleKeys, selectedIds = [] ) {
 		const { data, legendTotals, mode } = this.props;
 		if ( ! data || data.length === 0 ) {
@@ -550,6 +551,10 @@ Chart.propTypes = {
 	 * A number formatting string, passed to d3Format.
 	 */
 	yFormat: PropTypes.string,
+	/**
+	 * A currency object passed to d3Format.
+	 */
+	currency: PropTypes.object,
 };
 
 Chart.defaultProps = {
@@ -567,6 +572,12 @@ Chart.defaultProps = {
 	tooltipValueFormat: ',',
 	xFormat: '%d',
 	x2Format: '%b %Y',
+	currency: {
+		symbol: '$',
+		symbolPosition: 'left',
+		decimalSeparator: '.',
+		thousandSeparator: ',',
+	},
 };
 
 export default withViewportMatch( {

plugins/woocommerce-admin/packages/components/src/empty-content/index.js

@@ -11,7 +11,6 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { H } from '../section';
-import ImageAsset from '../image-asset';
 
 /**
  * A component to be used when there is no data to show.
@@ -21,7 +20,7 @@ class EmptyContent extends Component {
 	renderIllustration() {
 		const { illustrationWidth, illustrationHeight, illustration } = this.props;
 		return (
-			<ImageAsset
+			<img
 				alt=""
 				src={ illustration }
 				width={ illustrationWidth }
@@ -110,7 +109,7 @@ EmptyContent.propTypes = {
 	 */
 	message: PropTypes.string,
 	/**
-	 * The url string of an image path. Prefix with `/` to load an image relative to the plugin directory.
+	 * The url string of an image path for img src.
 	 */
 	illustration: PropTypes.string,
 	/**
@@ -152,7 +151,8 @@ EmptyContent.propTypes = {
 };
 
 EmptyContent.defaultProps = {
-	illustration: '/empty-content.svg',
+	// eslint-disable-next-line max-len
+	illustration: 'data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"%3E%3Cpath d="M226.153073,88.3099993 L355.380187,301.446227 C363.970299,315.614028 359.448689,334.062961 345.280888,342.653073 C340.591108,345.496544 335.21158,347 329.727115,347 L71.2728854,347 C54.7043429,347 41.2728854,333.568542 41.2728854,317 C41.2728854,311.515534 42.7763415,306.136007 45.6198127,301.446227 L174.846927,88.3099993 C183.437039,74.1421985 201.885972,69.6205881 216.053773,78.2106999 C220.184157,80.7150022 223.64877,84.1796157 226.153073,88.3099993 Z M184.370159,153 L186.899684,255.024156 L213.459691,255.024156 L215.989216,153 L184.370159,153 Z M200.179688,307.722584 C209.770801,307.722584 217.359375,300.450201 217.359375,291.175278 C217.359375,281.900355 209.770801,274.627972 200.179688,274.627972 C190.588574,274.627972 183,281.900355 183,291.175278 C183,300.450201 190.588574,307.722584 200.179688,307.722584 Z" id="Combined-Shape" stroke="%23979797" fill="%2395588A" fill-rule="nonzero"%3E%3C/path%3E%3C/svg%3E',
 	illustrationWidth: 400,
 };
 

plugins/woocommerce-admin/packages/components/src/filters/README.md

@@ -9,6 +9,8 @@ or a comparison card if "advanced" or "compare" are picked from `FilterPicker`.
 Name | Type | Default | Description
 --- | --- | --- | ---
 `advancedFilters` | Object | `{}` | Config option passed through to `AdvancedFilters`
+`siteLocale` | string| `en_US` | The locale of the site. Passed through to `AdvancedFilters`
+`currency` | object | {} | The currency of the site. Passed through to `AdvancedFilters`
 `filters` | Array | `[]` | Config option passed through to `FilterPicker` - if not used, `FilterPicker` is not displayed
 `path` | String | `null` | (required) The `path` parameter supplied by React-Router
 `query` | Object | `{}` | The query string represented in object form

plugins/woocommerce-admin/packages/components/src/filters/docs/example.js

@@ -9,7 +9,18 @@ import {
 	ReportFilters,
 	Section,
 } from '@woocommerce/components';
-const { ORDER_STATUSES } = '@woocommerce/wc-admin-settings';
+
+const ORDER_STATUSES = {
+	cancelled: 'Cancelled',
+	completed: 'Completed',
+	failed: 'Failed',
+	'on-hold': 'On hold',
+	pending: 'Pending payment',
+	processing: 'Processing',
+	refunded: 'Refunded',
+};
+
+const siteLocale = 'en_US';
 
 const path = '';
 const query = {};
@@ -184,6 +195,7 @@ export default () => (
 		<H>Advanced Filters</H>
 		<Section component={ false }>
 			<AdvancedFilters
+				siteLocale={ siteLocale }
 				path={ path }
 				query={ query }
 				filterTitle="Orders"

plugins/woocommerce-admin/packages/components/src/filters/index.js

@@ -35,7 +35,14 @@ class ReportFilters extends Component {
 	}
 
 	renderCard( config ) {
-		const { advancedFilters, query, path, onAdvancedFilterAction } = this.props;
+		const {
+			siteLocale,
+			advancedFilters,
+			query,
+			path,
+			onAdvancedFilterAction,
+			currency,
+		} = this.props;
 		const { filters, param } = config;
 		if ( ! query[ param ] ) {
 			return null;
@@ -57,6 +64,8 @@ class ReportFilters extends Component {
 			return (
 				<div key={ param } className="woocommerce-filters__advanced-filters">
 					<AdvancedFilters
+						siteLocale={ siteLocale }
+						currency={ currency }
 						config={ advancedFilters }
 						path={ path }
 						query={ query }
@@ -109,6 +118,10 @@ class ReportFilters extends Component {
 }
 
 ReportFilters.propTypes = {
+	/**
+	 * The locale of the site (passed through to `AdvancedFilters`)
+	 */
+	siteLocale: PropTypes.string,
 	/**
 	 * Config option passed through to `AdvancedFilters`
 	 */
@@ -141,9 +154,18 @@ ReportFilters.propTypes = {
 	 * Function to be called after an advanced filter action has been taken.
 	 */
 	onAdvancedFilterAction: PropTypes.func,
+	/**
+	 * The currency settings for the site.
+	 */
+	currency: PropTypes.object,
 };
 
 ReportFilters.defaultProps = {
+	siteLocale: 'en_US',
+	currency: {
+		symbol: '$',
+		symbolPosition: 'left',
+	},
 	advancedFilters: {},
 	filters: [],
 	query: {},

plugins/woocommerce-admin/packages/components/src/image-asset/README.md

@@ -1,21 +0,0 @@
-ImageAsset
-===
-
-A component that loads an image, allowing images to be loaded relative to the main asset/plugin folder.
-Props are passed through to `<img />`
-
-## Usage
-
-```jsx
-<ImageAsset
-	src="https://cldup.com/6L9h56D9Bw.jpg"
-	alt="An illustration of sunglasses"
-/>
-```
-
-### Props
-
-Name | Type | Default | Description
---- | --- | --- | ---
-`src` | String | `null` | (required) Image location to pass through to `<img />`
-`alt` | String | `null` | (required) Alt text to pass through to `<img />`

plugins/woocommerce-admin/packages/components/src/image-asset/docs/example.js

@@ -1,12 +0,0 @@
-/** @format */
-/**
- * Internal dependencies
- */
-import { ImageAsset } from '@woocommerce/components';
-
-export default () => (
-	<ImageAsset
-		src="https://cldup.com/6L9h56D9Bw.jpg"
-		alt="An illustration of sunglasses"
-	/>
-);

plugins/woocommerce-admin/packages/components/src/image-asset/index.js

@@ -1,37 +0,0 @@
-/** @format */
-/**
- * External dependencies
- */
-import { Component } from '@wordpress/element';
-import PropTypes from 'prop-types';
-
-/**
- * A component that loads an image, allowing images to be loaded relative to the main asset/plugin folder.
- * Props are passed through to `<img />`
- */
-class ImageAsset extends Component {
-	render() {
-		const { src, alt, ...restOfProps } = this.props;
-		let illustrationSrc = src;
-
-		if ( illustrationSrc.indexOf( '/' ) === 0 ) {
-			illustrationSrc = illustrationSrc.substring( 1 );
-			illustrationSrc = wcSettings.wcAdminAssetUrl + illustrationSrc;
-		}
-
-		return <img src={ illustrationSrc } alt={ alt || '' } { ...restOfProps } />;
-	}
-}
-
-ImageAsset.propTypes = {
-	/**
-	 * Image location to pass through to `<img />`.
-	 */
-	src: PropTypes.string.isRequired,
-	/**
-	 * Alt text to pass through to `<img />`.
-	 */
-	alt: PropTypes.string.isRequired,
-};
-
-export default ImageAsset;

plugins/woocommerce-admin/packages/components/src/index.js

@@ -24,7 +24,6 @@ export { default as Form } from './form';
 export { default as FilterPicker } from './filter-picker';
 export { default as Gravatar } from './gravatar';
 export { H, Section } from './section';
-export { default as ImageAsset } from './image-asset';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as MenuItem } from './ellipsis-menu/menu-item';

plugins/woocommerce-admin/packages/components/src/order-status/README.md

@@ -17,3 +17,4 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 `order` | Object | `null` | (required) The order to display a status for. See: https://woocommerce.github.io/woocommerce-rest-api-docs/#order-properties
 `className` | String | `null` | Additional CSS classes
+`orderStatusMap` | Object | {} | A map of order status to human-friendly label.

plugins/woocommerce-admin/packages/components/src/order-status/docs/example.js

@@ -4,10 +4,30 @@
  */
 import { OrderStatus } from '@woocommerce/components';
 
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const orderStatusMap = {
+	processing: __( 'Processing Order' ),
+	pending: __( 'Pending Order' ),
+	completed: __( 'Completed Order' ),
+};
+
 export default () => (
 	<div>
-		<OrderStatus order={ { status: 'processing' } } />
-		<OrderStatus order={ { status: 'pending' } } />
-		<OrderStatus order={ { status: 'completed' } } />
+		<OrderStatus
+			order={ { status: 'processing' } }
+			orderStatusMap={ orderStatusMap }
+		/>
+		<OrderStatus
+			order={ { status: 'pending' } }
+			orderStatusMap={ orderStatusMap }
+		/>
+		<OrderStatus
+			order={ { status: 'completed' } }
+			orderStatusMap={ orderStatusMap }
+		/>
 	</div>
 );

plugins/woocommerce-admin/packages/components/src/order-status/index.js

@@ -11,14 +11,13 @@ import PropTypes from 'prop-types';
  *
  * @return { object } -
  */
-const OrderStatus = ( { order, className } ) => {
+const OrderStatus = ( { order, className, orderStatusMap } ) => {
 	const { status } = order;
-	const { orderStatuses } = wcSettings;
 	const classes = classnames( 'woocommerce-order-status', className );
 	const indicatorClasses = classnames( 'woocommerce-order-status__indicator', {
 		[ 'is-' + status ]: true,
 	} );
-	const label = orderStatuses[ status ] || status;
+	const label = orderStatusMap[ status ] || status;
 	return (
 		<div className={ classes }>
 			<span className={ indicatorClasses } />
@@ -36,6 +35,10 @@ OrderStatus.propTypes = {
 	 * Additional CSS classes.
 	 */
 	className: PropTypes.string,
+	/**
+	 * A map of status to label for order statuses.
+	 */
+	orderStatusMap: PropTypes.object,
 };
 
 export default OrderStatus;

plugins/woocommerce-admin/packages/components/src/product-image/index.js

@@ -6,6 +6,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import { placeholderWhiteBackground as placeholder } from './placeholder';
+
 /**
  * Use `ProductImage` to display a product's or variation's featured image.
  * If no image can be found, a placeholder matching the front-end image
@@ -26,7 +31,7 @@ const ProductImage = ( { product, alt, width, height, className, ...props } ) =>
 	return (
 		<img
 			className={ classes }
-			src={ src || wcSettings.wcAssetUrl + 'images/placeholder.png' }
+			src={ src || placeholder }
 			width={ width }
 			height={ height }
 			alt={ altText }

plugins/woocommerce-admin/packages/components/src/product-image/test/index.js

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
+import { setSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -73,11 +74,12 @@ describe( 'ProductImage', () => {
 	} );
 
 	test( 'should render a placeholder image if no product images are found', () => {
-		global.wcSettings.wcAssetUrl = 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/';
+		setSetting( 'wcAssetUrl', 'https://woocommerce.com/wp-content/plugins/woocommerce/assets/' );
 		const product = {
 			name: 'Test Product',
 		};
 		const image = shallow( <ProductImage product={ product } /> );
 		expect( image ).toMatchSnapshot();
+		setSetting( 'wcAssetUrl', '' );
 	} );
 } );

plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js

@@ -4,6 +4,7 @@
  * External dependencies
  */
 import { decodeEntities } from '@wordpress/html-entities';
+import { getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -22,7 +23,11 @@ export default {
 	className: 'woocommerce-search__country-result',
 	isDebounced: true,
 	options() {
-		return wcSettings.dataEndpoints.countries || [];
+		const { countries } = getSetting(
+			'dataEndpoints',
+			{ countries: undefined }
+		);
+		return countries || [];
 	},
 	getSearchExpression( query ) {
 		return '^' + query;

plugins/woocommerce-admin/packages/currency/README.md

@@ -18,11 +18,11 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 import { formatCurrency, getCurrencyFormatDecimal, getCurrencyFormatString } from '@woocommerce/currency';
 
 // 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=`,`
+// from the settings api. 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.
+// from the settings api. Defaults to 2.
 const total = getCurrencyFormatDecimal( '6.2892' ); // 6.29 https://google.com/?q=test
 
 // Get the string representation of a floating point number to the precision used by the current

plugins/woocommerce-admin/packages/date/src/index.js

@@ -278,10 +278,9 @@ export const getDateParamsFromQuery = ( { period, compare, after, before } ) =>
 			before: before ? moment( before ) : null,
 		};
 	}
-	wcSettings.wcAdminSettings = wcSettings.wcAdminSettings || {};
-	const defaultDateRange =
-		wcSettings.wcAdminSettings.woocommerce_default_date_range ||
-		'period=month&compare=previous_year';
+	const {
+		woocommerce_default_date_range: defaultDateRange = 'period=month&compare=previous_year',
+	} = getSetting( 'wcAdminSettings', {} );
 
 	const queryDefaults = parse( defaultDateRange.replace( /&/g, '&' ) );
 

plugins/woocommerce-admin/packages/navigation/src/index.js

@@ -5,6 +5,7 @@
 import { addQueryArgs } from '@wordpress/url';
 import { parse } from 'qs';
 import { pick, uniq } from 'lodash';
+import { getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -29,7 +30,7 @@ import * as navUtils from './index';
  * @param {String} path Relative path.
  * @return {String} Full admin URL.
  */
-export const getAdminLink = path => wcSettings.adminUrl + path;
+export const getAdminLink = path => getSetting( 'adminUrl', '' ) + path;
 
 /**
  * Get the current path from history.