diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js index 514263df3e0..a99ca87cfa8 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js @@ -9,14 +9,15 @@ import { compose } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import PropTypes from 'prop-types'; import { noop } from 'lodash'; +import interpolateComponents from 'interpolate-components'; /** * WooCommerce dependencies */ import { EllipsisMenu, - Gravatar, Flag, + Link, MenuTitle, MenuItem, OrderStatus, @@ -41,12 +42,31 @@ function OrdersPanel( { orders, isRequesting } ) { ); - const gravatarWithFlag = ( order, address ) => { + const orderCardTitle = ( order, address ) => { + const name = `${ address.first_name } ${ address.last_name }`; + return ( -
- - -
+ + { interpolateComponents( { + mixedString: sprintf( + __( + /* eslint-disable-next-line max-len */ + 'Order {{orderLink}}#%(orderNumber)s{{/orderLink}} placed by {{customerLink}}%(customerName)s{{/customerLink}} {{destinationFlag/}}', + 'wc-admin' + ), + { + orderNumber: order.number, + customerName: name, + } + ), + components: { + orderLink: , + // @TODO: Hook up customer name link + customerLink: , + destinationFlag: , + }, + } ) } + ); }; @@ -61,7 +81,6 @@ function OrdersPanel( { orders, isRequesting } ) { { orders.map( ( order, i ) => { // We want the billing address, but shipping can be used as a fallback. const address = { ...order.shipping, ...order.billing }; - const name = `${ address.first_name } ${ address.last_name }`; const productsCount = order.line_items.reduce( ( total, line ) => total + line.quantity, 0 @@ -75,8 +94,7 @@ function OrdersPanel( { orders, isRequesting } ) {