diff --git a/plugins/woocommerce-admin/client/analytics/report/orders/config.js b/plugins/woocommerce-admin/client/analytics/report/orders/config.js index 3b37bb828aa..6e72f689eff 100644 --- a/plugins/woocommerce-admin/client/analytics/report/orders/config.js +++ b/plugins/woocommerce-admin/client/analytics/report/orders/config.js @@ -2,7 +2,7 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -30,87 +30,123 @@ export const filters = [ { label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' }, ]; +/*eslint-disable max-len*/ export const advancedFilterConfig = { - status: { - labels: { - add: __( 'Order Status', 'wc-admin' ), - remove: __( 'Remove order status filter', 'wc-admin' ), - rule: __( 'Select an order status filter match', 'wc-admin' ), - title: __( 'Order Status', 'wc-admin' ), - }, - rules: [ - { value: 'is', label: __( 'Is', 'wc-admin' ) }, - { value: 'is_not', label: __( 'Is Not', 'wc-admin' ) }, - ], - input: { - component: 'SelectControl', - options: Object.keys( orderStatuses ).map( key => ( { - value: key, - label: orderStatuses[ key ], - } ) ), - defaultOption: 'wc-cancelled', - }, - }, - product_id: { - labels: { - add: __( 'Products', 'wc-admin' ), - placeholder: __( 'Search products', 'wc-admin' ), - remove: __( 'Remove products filter', 'wc-admin' ), - rule: __( 'Select a product filter match', 'wc-admin' ), - title: __( 'Product', 'wc-admin' ), - }, - rules: [ - { value: 'includes', label: __( 'Includes', 'wc-admin' ) }, - { value: 'excludes', label: __( 'Excludes', 'wc-admin' ) }, - { value: 'is', label: __( 'Is', 'wc-admin' ) }, - { value: 'is_not', label: __( 'Is Not', 'wc-admin' ) }, - ], - input: { - component: 'Search', - type: 'products', - getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( { - id: product.id, - label: product.name, - } ) ), - }, - }, - code: { - labels: { - add: __( 'Coupon Codes', 'wc-admin' ), - placeholder: __( 'Search coupons', 'wc-admin' ), - remove: __( 'Remove coupon filter', 'wc-admin' ), - rule: __( 'Select a coupon filter match', 'wc-admin' ), - title: __( 'Coupon Code', 'wc-admin' ), - }, - rules: [ - { value: 'includes', label: __( 'Includes', 'wc-admin' ) }, - { value: 'excludes', label: __( 'Excludes', 'wc-admin' ) }, - { value: 'is', label: __( 'Is', 'wc-admin' ) }, - { value: 'is_not', label: __( 'Is Not', 'wc-admin' ) }, - ], - input: { - component: 'Search', - type: 'coupons', - getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( { - id: coupon.id, - label: coupon.code, - } ) ), - }, - }, - customer: { - labels: { - add: __( 'Customer Type', 'wc-admin' ), - remove: __( 'Remove customer filter', 'wc-admin' ), - rule: __( 'Select a customer filter match', 'wc-admin' ), - title: __( 'Customer is', 'wc-admin' ), - }, - input: { - component: 'SelectControl', - options: [ - { value: 'new', label: __( 'New', 'wc-admin' ) }, - { value: 'returning', label: __( 'Returning', 'wc-admin' ) }, + title: _x( + 'Orders Match {{select /}} Filters', + 'A sentence describing filters for Orders. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ', + 'wc-admin' + ), + filters: { + status: { + labels: { + add: __( 'Order Status', 'wc-admin' ), + remove: __( 'Remove order status filter', 'wc-admin' ), + rule: __( 'Select an order status filter match', 'wc-admin' ), + /* translators: A sentence describing an Order Status filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */ + title: __( 'Order Status {{rule /}} {{filter /}}', 'wc-admin' ), + filter: __( 'Select an order status', 'wc-admin' ), + }, + rules: [ + { + value: 'is', + /* translators: Sentence fragment, logical, "Is" refers to searching for orders matching a chosen order status. Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Is', 'order status', 'wc-admin' ), + }, + { + value: 'is_not', + /* translators: Sentence fragment, logical, "Is Not" refers to searching for orders that don\'t match a chosen order status. Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Is Not', 'order status', 'wc-admin' ), + }, ], - defaultOption: 'new', + input: { + component: 'SelectControl', + options: Object.keys( orderStatuses ).map( key => ( { + value: key, + label: orderStatuses[ key ], + } ) ), + }, + }, + product: { + labels: { + add: __( 'Products', 'wc-admin' ), + placeholder: __( 'Search products', 'wc-admin' ), + remove: __( 'Remove products filter', 'wc-admin' ), + rule: __( 'Select a product filter match', 'wc-admin' ), + /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */ + title: __( 'Product {{rule /}} {{filter /}}', 'wc-admin' ), + filter: __( 'Select products', 'wc-admin' ), + }, + rules: [ + { + value: 'includes', + /* translators: Sentence fragment, logical, "Includes" refers to orders including a given product(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Includes', 'products', 'wc-admin' ), + }, + { + value: 'excludes', + /* translators: Sentence fragment, logical, "Excludes" refers to orders excluding a given product(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Excludes', 'products', 'wc-admin' ), + }, + ], + input: { + component: 'Search', + type: 'products', + getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( { + id: product.id, + label: product.name, + } ) ), + }, + }, + code: { + labels: { + add: __( 'Coupon Codes', 'wc-admin' ), + placeholder: __( 'Search coupons', 'wc-admin' ), + remove: __( 'Remove coupon filter', 'wc-admin' ), + rule: __( 'Select a coupon filter match', 'wc-admin' ), + /* translators: A sentence describing a Coupon filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */ + title: __( 'Coupon Code {{rule /}} {{filter /}}', 'wc-admin' ), + filter: __( 'Select coupon codes', 'wc-admin' ), + }, + rules: [ + { + value: 'includes', + /* translators: Sentence fragment, logical, "Includes" refers to orders including a given coupon code(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Includes', 'coupon code', 'wc-admin' ), + }, + { + value: 'excludes', + /* translators: Sentence fragment, logical, "Excludes" refers to orders excluding a given coupon code(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */ + label: _x( 'Excludes', 'coupon code', 'wc-admin' ), + }, + ], + input: { + component: 'Search', + type: 'coupons', + getLabels: getRequestByIdString( NAMESPACE + 'coupons', coupon => ( { + id: coupon.id, + label: coupon.code, + } ) ), + }, + }, + customer: { + labels: { + add: __( 'Customer Type', 'wc-admin' ), + remove: __( 'Remove customer filter', 'wc-admin' ), + rule: __( 'Select a customer filter match', 'wc-admin' ), + /* translators: A sentence describing a Customer filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */ + title: __( 'Customer is {{filter /}}', 'wc-admin' ), + filter: __( 'Select a customer type', 'wc-admin' ), + }, + input: { + component: 'SelectControl', + options: [ + { value: 'new', label: __( 'New', 'wc-admin' ) }, + { value: 'returning', label: __( 'Returning', 'wc-admin' ) }, + ], + defaultOption: 'new', + }, }, }, }; +/*eslint-enable max-len*/ diff --git a/plugins/woocommerce-admin/client/components/filters/advanced/index.js b/plugins/woocommerce-admin/client/components/filters/advanced/index.js index 6f61aa0c9ad..dceb00741fe 100644 --- a/plugins/woocommerce-admin/client/components/filters/advanced/index.js +++ b/plugins/woocommerce-admin/client/components/filters/advanced/index.js @@ -2,12 +2,13 @@ /** * External dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { Component, Fragment, createRef } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Component, createRef } from '@wordpress/element'; import { SelectControl, Button, Dropdown, IconButton } from '@wordpress/components'; import { partial, findIndex, difference } from 'lodash'; import PropTypes from 'prop-types'; import Gridicon from 'gridicons'; +import interpolateComponents from 'interpolate-components'; /** * Internal dependencies @@ -37,7 +38,7 @@ class AdvancedFilters extends Component { super( ...arguments ); this.state = { match: query.match || 'all', - activeFilters: getActiveFiltersFromQuery( query, config ), + activeFilters: getActiveFiltersFromQuery( query, config.filters ), }; this.filterListRef = createRef(); @@ -75,30 +76,31 @@ class AdvancedFilters extends Component { getTitle() { const { match } = this.state; - const { filterTitle } = this.props; - return ( - - { sprintf( __( '%s Match', 'wc-admin' ), filterTitle ) } - - { __( 'Filters', 'wc-admin' ) } - - ); + const { config } = this.props; + return interpolateComponents( { + mixedString: config.title, + components: { + select: ( + + ), + }, + } ); } getAvailableFilterKeys() { const { config } = this.props; const activeFilterKeys = this.state.activeFilters.map( f => f.key ); - return difference( Object.keys( config ), activeFilterKeys ); + return difference( Object.keys( config.filters ), activeFilterKeys ); } addFilter( key, onClose ) { - const filterConfig = this.props.config[ key ]; + const filterConfig = this.props.config.filters[ key ]; const newFilter = { key }; if ( Array.isArray( filterConfig.rules ) && filterConfig.rules.length ) { newFilter.rule = filterConfig.rules[ 0 ].value; @@ -131,46 +133,47 @@ class AdvancedFilters extends Component { getUpdateHref( activeFilters, matchValue ) { const { path, query, config } = this.props; - const updatedQuery = getQueryFromActiveFilters( activeFilters, query, config ); + const updatedQuery = getQueryFromActiveFilters( activeFilters, query, config.filters ); const match = matchValue === 'all' ? undefined : matchValue; return getNewPath( { ...updatedQuery, match }, path, query ); } + isEnglish() { + const { siteLocale } = wcSettings; + return /en-/.test( siteLocale ); + } + render() { const { config } = this.props; const { activeFilters, match } = this.state; const availableFilterKeys = this.getAvailableFilterKeys(); const updateHref = this.getUpdateHref( activeFilters, match ); const updateDisabled = window.location.hash && window.location.hash.substr( 1 ) === updateHref; + const isEnglish = this.isEnglish(); return (