Hook up Reviews by Product 'Order by' with endpoint (#736)

* Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled
woocommerce · Jul 24, 2019 · eed01f4 · eed01f4
1 parent 113b0db
commit eed01f4
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 84 deletions.
diff --git a/assets/js/blocks/reviews-by-product/block.js b/assets/js/blocks/reviews-by-product/block.js
@@ -23,7 +23,7 @@ class ReviewsByProduct extends Component {
 		super( ...arguments );
 		const { attributes } = this.props;
 		this.state = {
-			order: attributes.orderby,
+			orderby: attributes.orderby,
 			reviews: [],
 			totalReviews: 0,
 		};
@@ -59,16 +59,42 @@ class ReviewsByProduct extends Component {
 		const newReviews = Math.min( totalReviews, perPage );
 		this.setState( {
 			reviews: Array( newReviews ).fill( {} ),
-			order: event.target.value,
+			orderby: event.target.value,
 		} );
 		this.getReviews( event.target.value );
 	}
 
-	getReviews( order, page = 1 ) {
+	getOrderParams( orderValue ) {
+		const { attributes, isPreview } = this.props;
+		const selectedOrder = isPreview ? attributes.orderby :
+			orderValue || this.state.orderby || attributes.orderby;
+
+		if ( wc_product_block_data.enableReviewRating ) {
+			if ( selectedOrder === 'lowest-rating' ) {
+				return {
+					order: 'asc',
+					orderby: 'rating',
+				};
+			}
+			if ( selectedOrder === 'highest-rating' ) {
+				return {
+					order: 'desc',
+					orderby: 'rating',
+				};
+			}
+		}
+
+		return {
+			order: 'desc',
+			orderby: 'date_gmt',
+		};
+	}
+
+	getReviews( orderValue, page = 1 ) {
 		const { attributes } = this.props;
 		const { perPage, productId } = attributes;
 		const { reviews } = this.state;
-		const orderby = order || this.state.order || attributes.orderby;
+		const { order, orderby } = this.getOrderParams( orderValue );
 
 		if ( ! productId ) {
 			// We've removed the selected product, or no product is selected yet.
@@ -77,7 +103,8 @@ class ReviewsByProduct extends Component {
 
 		apiFetch( {
 			path: addQueryArgs( `/wc/blocks/products/reviews`, {
-				order_by: orderby,
+				order,
+				orderby,
 				page,
 				per_page: parseInt( perPage, 10 ) || 1,
 				product_id: productId,
@@ -118,66 +145,100 @@ class ReviewsByProduct extends Component {
 		this.getReviews( null, page );
 	}
 
-	render() {
+	renderOrderBySelect() {
+		if ( ! wc_product_block_data.enableReviewRating ) {
+			return null;
+		}
+
 		const { attributes, instanceId, isPreview } = this.props;
-		const { order, reviews, totalReviews } = this.state;
-		const { className, showProductRating, showReviewDate, showReviewerName } = attributes;
-		const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar;
-		const classes = classNames( 'wc-block-reviews-by-product', className, {
-			'has-avatar': showAvatar,
-			'has-date': showReviewDate,
-			'has-name': showReviewerName,
-			'has-rating': showProductRating,
-		} );
-		const attrs = {
-			...attributes,
-			showAvatar,
-		};
+		const { orderby } = this.state;
 
 		const selectId = `wc-block-reviews-by-product__orderby__select-${ instanceId }`;
 		const selectProps = isPreview ? {
 			readOnly: true,
 			value: attributes.orderby,
 		} : {
-			defaultValue: order,
-			onBlur: this.onChangeOrderby,
+			defaultValue: orderby,
+			onChange: this.onChangeOrderby,
+		};
+
+		return (
+			<p className="wc-block-reviews-by-product__orderby">
+				<label className="wc-block-reviews-by-product__orderby__label" htmlFor={ selectId }>
+					{ __( 'Order by', 'woo-gutenberg-products-block' ) }
+				</label>
+				<select id={ selectId } className="wc-block-reviews-by-product__orderby__select" { ...selectProps }>
+					<option value="most-recent">
+						{ __( 'Most recent', 'woo-gutenberg-products-block' ) }
+					</option>
+					<option value="highest-rating">
+						{ __( 'Highest rating', 'woo-gutenberg-products-block' ) }
+					</option>
+					<option value="lowest-rating">
+						{ __( 'Lowest rating', 'woo-gutenberg-products-block' ) }
+					</option>
+				</select>
+			</p>
+		);
+	}
+
+	renderReviewsList( showAvatar, showProductRating ) {
+		const { attributes } = this.props;
+		const { reviews } = this.state;
+		const attrs = {
+			...attributes,
+			showAvatar,
+			showProductRating,
 		};
 
+		return (
+			<ul className="wc-block-reviews-by-product__list">
+				{ reviews.length === 0 ?
+					(
+						renderReview( attrs )
+					) : (
+						reviews.map( ( review, i ) => renderReview( attrs, review, i ) )
+					)
+				}
+			</ul>
+		);
+	}
+
+	renderLoadMoreButton() {
+		const { isPreview } = this.props;
+		const { reviews, totalReviews } = this.state;
+
+		if ( totalReviews <= reviews.length ) {
+			return null;
+		}
+
+		return (
+			<button
+				className="wc-block-reviews-by-product__load-more"
+				onClick={ isPreview ? null : this.appendReviews }
+			>
+				{ __( 'Load more', 'woo-gutenberg-products-block' ) }
+			</button>
+		);
+	}
+
+	render() {
+		const { attributes } = this.props;
+		const { className, showReviewDate, showReviewerName } = attributes;
+		const showAvatar = wc_product_block_data.showAvatars && attributes.showAvatar;
+		const showProductRating = wc_product_block_data.enableReviewRating && attributes.showProductRating;
+		const classes = classNames( 'wc-block-reviews-by-product', className, {
+			'has-avatar': showAvatar,
+			'has-date': showReviewDate,
+			'has-name': showReviewerName,
+			'has-rating': showProductRating,
+		} );
+
 		return (
 			<div className={ classes }>
-				<p className="wc-block-reviews-by-product__orderby">
-					<label className="wc-block-reviews-by-product__orderby__label" htmlFor={ selectId }>
-						{ __( 'Order by', 'woo-gutenberg-products-block' ) }
-					</label>
-					<select id={ selectId } className="wc-block-reviews-by-product__orderby__select" { ...selectProps }>
-						<option value="most-recent">
-							{ __( 'Most recent', 'woo-gutenberg-products-block' ) }
-						</option>
-						<option value="highest-rating">
-							{ __( 'Highest rating', 'woo-gutenberg-products-block' ) }
-						</option>
-						<option value="lowest-rating">
-							{ __( 'Lowest rating', 'woo-gutenberg-products-block' ) }
-						</option>
-					</select>
-				</p>
-				<ul className="wc-block-reviews-by-product__list">
-					{ reviews.length === 0 ?
-						(
-							renderReview( attrs )
-						) : (
-							reviews.map( ( review, i ) => renderReview( attrs, review, i ) )
-						)
-					}
-				</ul>
-				{ totalReviews > reviews.length && (
-					<button
-						className="wc-block-reviews-by-product__load-more"
-						onClick={ isPreview ? null : this.appendReviews }
-					>
-						{ __( 'Load more', 'woo-gutenberg-products-block' ) }
-					</button>
-				) }
+				{ this.renderOrderBySelect() }
+				{ this.renderReviewsList( showAvatar, showProductRating ) }
+				{ this.renderLoadMoreButton() }
 			</div>
 		);
 	}

diff --git a/assets/js/blocks/reviews-by-product/edit.js b/assets/js/blocks/reviews-by-product/edit.js
@@ -99,16 +99,18 @@ class ReviewsByProductEditor extends Component {
 					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Content', 'woo-gutenberg-products-block' ) }>
-					<ToggleControl
-						label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
-						help={
-							attributes.showProductRating ?
-								__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
-								__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
-						}
-						checked={ attributes.showProductRating }
-						onChange={ () => setAttributes( { showProductRating: ! attributes.showProductRating } ) }
-					/>
+					{ wc_product_block_data.enableReviewRating && (
+						<ToggleControl
+							label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
+							help={
+								attributes.showProductRating ?
+									__( 'Product rating is visible.', 'woo-gutenberg-products-block' ) :
+									__( 'Product rating is hidden.', 'woo-gutenberg-products-block' )
+							}
+							checked={ attributes.showProductRating }
+							onChange={ () => setAttributes( { showProductRating: ! attributes.showProductRating } ) }
+						/>
+					) }
 					<ToggleControl
 						label={ __( 'Reviewer name', 'woo-gutenberg-products-block' ) }
 						help={
@@ -282,7 +284,7 @@ class ReviewsByProductEditor extends Component {
 								} } />
 							</Placeholder>
 						) : (
-							<Block attributes={ attributes } />
+							<Block attributes={ attributes } isPreview />
 						) }
 					</Fragment>
 				) }

diff --git a/assets/js/blocks/reviews-by-product/utils.js b/assets/js/blocks/reviews-by-product/utils.js
@@ -14,9 +14,10 @@ import classNames from 'classnames';
  * @return {Object} React JSx nodes of the block
  */
 export function renderReview( attributes, review = {}, i = 0 ) {
-	const { showAvatar, showProductRating, showReviewDate, showReviewerName } = attributes;
+	const { showAvatar, showProductRating: showProductRatingAttr, showReviewDate, showReviewerName } = attributes;
 	const { id = null, date_created: dateCreated, rating, review: text = '', reviewer = '', reviewer_avatar_urls: avatarUrls = {} } = review;
 	const isLoading = ! Object.keys( review ).length > 0;
+	const showProductRating = Number.isFinite( rating ) && showProductRatingAttr;
 
 	const classes = classNames( 'wc-block-reviews-by-product__item', {
 		'has-avatar': showAvatar,
@@ -57,9 +58,7 @@ export function renderReview( attributes, review = {}, i = 0 ) {
 							{ showProductRating && (
 								<div className="wc-block-reviews-by-product__rating">
 									<div className="wc-block-reviews-by-product__rating__stars" role="img">
-										{ Number.isFinite( rating ) && (
-											<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
-										) }
+										<span style={ starStyle }>{ sprintf( __( 'Rated %d out of 5', 'woo-gutenberg-products-block' ), rating ) }</span>
 									</div>
 								</div>
 							) }

diff --git a/src/Assets.php b/src/Assets.php
@@ -127,20 +127,21 @@ public static function print_script_block_data() {
 
 		// Global settings used in each block.
 		$block_settings = array(
-			'min_columns'       => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
-			'max_columns'       => wc_get_theme_support( 'product_blocks::max_columns', 6 ),
-			'default_columns'   => wc_get_theme_support( 'product_blocks::default_columns', 3 ),
-			'min_rows'          => wc_get_theme_support( 'product_blocks::min_rows', 1 ),
-			'max_rows'          => wc_get_theme_support( 'product_blocks::max_rows', 6 ),
-			'default_rows'      => wc_get_theme_support( 'product_blocks::default_rows', 1 ),
-			'thumbnail_size'    => wc_get_theme_support( 'thumbnail_image_width', 300 ),
-			'placeholderImgSrc' => wc_placeholder_img_src(),
-			'min_height'        => wc_get_theme_support( 'featured_block::min_height', 500 ),
-			'default_height'    => wc_get_theme_support( 'featured_block::default_height', 500 ),
-			'isLargeCatalog'    => $product_counts->publish > 200,
-			'productCategories' => $product_categories,
-			'homeUrl'           => esc_js( home_url( '/' ) ),
-			'showAvatars'       => '1' === get_option( 'show_avatars' ),
+			'min_columns'        => wc_get_theme_support( 'product_blocks::min_columns', 1 ),
+			'max_columns'        => wc_get_theme_support( 'product_blocks::max_columns', 6 ),
+			'default_columns'    => wc_get_theme_support( 'product_blocks::default_columns', 3 ),
+			'min_rows'           => wc_get_theme_support( 'product_blocks::min_rows', 1 ),
+			'max_rows'           => wc_get_theme_support( 'product_blocks::max_rows', 6 ),
+			'default_rows'       => wc_get_theme_support( 'product_blocks::default_rows', 1 ),
+			'thumbnail_size'     => wc_get_theme_support( 'thumbnail_image_width', 300 ),
+			'placeholderImgSrc'  => wc_placeholder_img_src(),
+			'min_height'         => wc_get_theme_support( 'featured_block::min_height', 500 ),
+			'default_height'     => wc_get_theme_support( 'featured_block::default_height', 500 ),
+			'isLargeCatalog'     => $product_counts->publish > 200,
+			'productCategories'  => $product_categories,
+			'homeUrl'            => esc_js( home_url( '/' ) ),
+			'showAvatars'        => '1' === get_option( 'show_avatars' ),
+			'enableReviewRating' => 'yes' === get_option( 'woocommerce_enable_review_rating' ),
 		);
 		?>
 		<script type="text/javascript">

diff --git a/src/RestApi/Controllers/ProductReviews.php b/src/RestApi/Controllers/ProductReviews.php
@@ -217,14 +217,15 @@ protected function normalize_query_param( $query_param ) {
 	 */
 	public function prepare_item_for_response( $review, $request ) {
 		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$rating  = get_comment_meta( $review->comment_ID, 'rating', true ) === '' ? null : (int) get_comment_meta( $review->comment_ID, 'rating', true );
 		$data    = array(
 			'id'                   => (int) $review->comment_ID,
 			'date_created'         => wc_rest_prepare_date_response( $review->comment_date ),
 			'date_created_gmt'     => wc_rest_prepare_date_response( $review->comment_date_gmt ),
 			'product_id'           => (int) $review->comment_post_ID,
 			'reviewer'             => $review->comment_author,
 			'review'               => $review->comment_content,
-			'rating'               => (int) get_comment_meta( $review->comment_ID, 'rating', true ),
+			'rating'               => $rating,
 			'verified'             => wc_review_is_from_verified_owner( $review->comment_ID ),
 			'reviewer_avatar_urls' => rest_get_avatar_urls( $review->comment_author_email ),
 		);