From 9cc4e1b97a6bc251035d6261bc64afb782e9931d Mon Sep 17 00:00:00 2001
From: Justin Shreve <justin.shreve@gmail.com>
Date: Tue, 17 Jul 2018 09:11:13 -0400
Subject: [PATCH] Add Order Status Component
 (https://github.com/woocommerce/woocommerce-admin/pull/214)

---
 .../client/components/order-status/README.md  | 23 ++++++++++++
 .../client/components/order-status/index.js   | 35 +++++++++++++++++++
 .../client/components/order-status/style.scss | 26 ++++++++++++++
 .../layout/activity-panel/panels/orders.js    |  3 +-
 .../client/stylesheets/_colors.scss           |  1 +
 .../woocommerce-admin/lib/client-assets.php   |  7 ++--
 6 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/components/order-status/README.md
 create mode 100644 plugins/woocommerce-admin/client/components/order-status/index.js
 create mode 100644 plugins/woocommerce-admin/client/components/order-status/style.scss

diff --git a/plugins/woocommerce-admin/client/components/order-status/README.md b/plugins/woocommerce-admin/client/components/order-status/README.md
new file mode 100644
index 00000000000..48f6d3b006f
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/README.md
@@ -0,0 +1,23 @@
+OrderStatus
+============
+
+Use `OrderStatus` to display a badge with human-friendly text describing the current order status.
+
+## How to use:
+
+```jsx
+import OrderStatus from 'components/order-status';
+
+render: function() {
+  return (
+	<OrderStatus
+		order={ order }
+	/>
+  );
+}
+```
+
+## Props
+
+* `order` (required): The order to display a status for.
+* `className`: Additional CSS classes.
\ No newline at end of file
diff --git a/plugins/woocommerce-admin/client/components/order-status/index.js b/plugins/woocommerce-admin/client/components/order-status/index.js
new file mode 100644
index 00000000000..e66f2e8c2dd
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/index.js
@@ -0,0 +1,35 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const OrderStatus = ( { order, className } ) => {
+	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[ 'wc-' + status ] || status;
+	return (
+		<div className={ classes }>
+			<span className={ indicatorClasses } />
+			{ label }
+		</div>
+	);
+};
+
+OrderStatus.propTypes = {
+	order: PropTypes.object.isRequired,
+	className: PropTypes.string,
+};
+
+export default OrderStatus;
diff --git a/plugins/woocommerce-admin/client/components/order-status/style.scss b/plugins/woocommerce-admin/client/components/order-status/style.scss
new file mode 100644
index 00000000000..e92bf271617
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/order-status/style.scss
@@ -0,0 +1,26 @@
+/** @format */
+
+.woocommerce-order-status {
+	display: flex;
+	align-items: center;
+}
+
+.woocommerce-order-status__indicator {
+	width: 16px;
+	height: 16px;
+	display: block;
+	background: $core-grey-light-700;
+	margin-right: $gap-smallest * 2;
+	border-radius: 50%;
+	border: 3px solid $core-grey-light-500;
+
+	&.is-processing {
+		background: $valid-green;
+		border-color: lighten($valid-green, 20%);
+	}
+
+	&.is-on-hold {
+		background: $notice-yellow;
+		border-color: lighten($notice-yellow, 20%);
+	}
+}
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
index ddd87016724..de71eab2672 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
@@ -18,6 +18,7 @@ import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
 import { getOrderRefundTotal } from 'lib/order-values';
 import Gravatar from 'components/gravatar';
 import Flag from 'components/flag';
+import OrderStatus from 'components/order-status';
 import { Section } from 'layout/section';
 
 function OrdersPanel( { orders } ) {
@@ -90,7 +91,7 @@ function OrdersPanel( { orders } ) {
 									</Button>
 								}
 							>
-								Pending
+								<OrderStatus order={ order } />
 							</ActivityCard>
 						);
 					} )
diff --git a/plugins/woocommerce-admin/client/stylesheets/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
index 05d5671497f..58adf555885 100644
--- a/plugins/woocommerce-admin/client/stylesheets/_colors.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/_colors.scss
@@ -38,6 +38,7 @@ $black: #24292d; // same as wp-admin sidebar
 
 // Bright colors
 $valid-green: #4ab866;
+$notice-yellow: #ffb900;
 $error-red: #d94f4f;
 $woocommerce: #95588a;
 $core-orange: #ca4a1f;
diff --git a/plugins/woocommerce-admin/lib/client-assets.php b/plugins/woocommerce-admin/lib/client-assets.php
index 6c65b95f9e5..38b3b948c46 100644
--- a/plugins/woocommerce-admin/lib/client-assets.php
+++ b/plugins/woocommerce-admin/lib/client-assets.php
@@ -43,11 +43,12 @@ function wc_admin_register_script() {
 	$settings = array(
 		'adminUrl'           => admin_url(),
 		'embedBreadcrumbs'   => wc_admin_get_embed_breadcrumbs(),
-		'siteLocale'   => esc_attr( get_bloginfo( 'language' ) ),
-		'currency'  => wc_admin_currency_settings(),
-		'date' => array(
+		'siteLocale'         => esc_attr( get_bloginfo( 'language' ) ),
+		'currency'           => wc_admin_currency_settings(),
+		'date'               => array(
 			'dow' => get_option( 'start_of_week', 0 ),
 		),
+		'orderStatuses'      => wc_get_order_statuses(),
 	);
 
 	wp_add_inline_script(