Store: Add a pending reviews widget to the dashboard view. (Automatti…

…c#18411)

* Add a pending reviews widget to the dashboard view.

* Handle PR feedback: add context to moderate string.

client/extensions/woocommerce/app/dashboard/manage-orders-view.js

@@ -3,6 +3,8 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import config from 'config';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
@@ -12,6 +14,7 @@ import { localize } from 'i18n-calypso';
  */
 import Button from 'components/button';
 import { fetchOrders } from 'woocommerce/state/sites/orders/actions';
+import { fetchReviews } from 'woocommerce/state/sites/reviews/actions';
 import {
 	areOrdersLoading,
 	areOrdersLoaded,
@@ -22,6 +25,7 @@ import { getCurrentUser } from 'state/current-user/selectors';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import { getLink } from 'woocommerce/lib/nav-utils';
 import { getPaymentCurrencySettings } from 'woocommerce/state/sites/settings/general/selectors';
+import { getTotalReviews } from 'woocommerce/state/sites/reviews/selectors';
 import ProcessOrdersWidget from 'woocommerce/components/process-orders-widget';
 import ShareWidget from 'woocommerce/components/share-widget';
 import Card from 'components/card';
@@ -53,6 +57,10 @@ class ManageOrdersView extends Component {
 
 		if ( site && site.ID ) {
 			this.props.fetchOrders( site.ID );
+			// TODO This check can be removed when we launch reviews.
+			if ( config.isEnabled( 'woocommerce/extension-reviews' ) ) {
+				this.props.fetchReviews( site.ID, { status: 'pending' } );
+			}
 		}
 	}
 
@@ -63,6 +71,10 @@ class ManageOrdersView extends Component {
 
 		if ( oldSiteId !== newSiteId ) {
 			this.props.fetchOrders( newSiteId );
+			// TODO This check can be removed when we launch reviews.
+			if ( config.isEnabled( 'woocommerce/extension-reviews' ) ) {
+				this.props.fetchReviews( newSiteId, { status: 'pending' } );
+			}
 		}
 	}
 
@@ -82,6 +94,33 @@ class ManageOrdersView extends Component {
 		);
 	}
 
+	possiblyRenderReviewsWidget = () => {
+		const { site, pendingReviews, translate } = this.props;
+		if ( ! pendingReviews ) {
+			return null;
+		}
+
+		const classes = classNames( 'card', 'dashboard__reviews-widget' );
+		const countText = translate( 'Pending review', 'Pending reviews', {
+			count: pendingReviews
+		} );
+
+		return (
+			<div className={ classes } >
+				<div>
+					<span>{ pendingReviews}</span>
+					<span>{ countText }</span>
+				</div>
+				<div>
+					<Button href={ getLink( '/store/reviews/:site', site ) }>
+						{ translate( 'Moderate',
+						{ context: 'Product reviews widget moderation button' } ) }
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
 	possiblyRenderShareWidget = () => {
 		// TODO - connect to display preferences in a follow-on PR
 		const { site, translate } = this.props;
@@ -111,7 +150,12 @@ class ManageOrdersView extends Component {
 						) || '' }
 					</h2>
 				</div>
-				{ this.possiblyRenderProcessOrdersWidget() }
+
+				<div className="dashboard__queue-widgets">
+					{ this.possiblyRenderProcessOrdersWidget() }
+					{ config.isEnabled( 'woocommerce/extension-reviews' ) && this.possiblyRenderReviewsWidget() }
+				</div>
+
 				<Card
 					className="dashboard__reports-widget"
 				>
@@ -146,6 +190,7 @@ function mapStateToProps( state ) {
 	const ordersRevenue = getNewOrdersRevenue( state );
 	const user = getCurrentUser( state );
 	const currency = getPaymentCurrencySettings( state );
+	const pendingReviews = getTotalReviews( state, { status: 'pending' } );
 	return {
 		site,
 		orders,
@@ -154,13 +199,15 @@ function mapStateToProps( state ) {
 		ordersLoaded,
 		user,
 		currency,
+		pendingReviews,
 	};
 }
 
 function mapDispatchToProps( dispatch ) {
 	return bindActionCreators(
 		{
 			fetchOrders,
+			fetchReviews,
 		},
 		dispatch
 	);

client/extensions/woocommerce/app/dashboard/style.scss

@@ -320,3 +320,39 @@
 		}
 	}
 }
+
+@include breakpoint( ">960px" ) {
+	.dashboard__queue-widgets {
+		display: flex;
+
+		div {
+			flex-grow: 1;
+		}
+
+		div:nth-child( 2 ) {
+			margin-left: 8px;
+		}
+	}
+}
+
+.dashboard__reviews-widget {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	min-width: 30%;
+
+
+	div {
+		min-width: 50%;
+		text-align: center;
+
+		span:first-child {
+			display: block;
+			font-size: 24px;
+		}
+
+		span:nth-child( 2 ) {
+			color: $gray-text-min;
+		}
+	}
+}

client/extensions/woocommerce/components/process-orders-widget/style.scss

@@ -2,6 +2,8 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	margin-left: 0px;
+	min-width: 65%;
 
 	div {
 		min-width: 33%;