Remove Add Review link and hide rating when the Product has no rating (…

…#9556)
woocommerce · May 25, 2023 · 3a2ab1c · 3a2ab1c
1 parent d1d2d97
commit 3a2ab1c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 25 deletions.
diff --git a/assets/js/atomic/blocks/product-elements/rating/block.tsx b/assets/js/atomic/blocks/product-elements/rating/block.tsx
@@ -22,10 +22,6 @@ type RatingProps = {
 	parentClassName?: string;
 };
 
-type AddReviewProps = {
-	href?: string;
-};
-
 const getAverageRating = (
 	product: Omit< ProductResponseItem, 'average_rating' > & {
 		average_rating: string;
@@ -36,11 +32,6 @@ const getAverageRating = (
 	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
 };
 
-const getReviewsHref = ( product: ProductResponseItem ) => {
-	const { permalink } = product;
-	return `${ permalink }#reviews`;
-};
-
 const getRatingCount = ( product: ProductResponseItem ) => {
 	const count = isNumber( product.review_count )
 		? product.review_count
@@ -89,17 +80,6 @@ const Rating = ( props: RatingProps ): JSX.Element => {
 	);
 };
 
-const AddReview = ( props: AddReviewProps ): JSX.Element | null => {
-	const { href } = props;
-	const label = __( 'Add review', 'woo-gutenberg-products-block' );
-
-	return href ? (
-		<a className="wc-block-components-product-rating__link" href={ href }>
-			{ label }
-		</a>
-	) : null;
-};
-
 const ReviewsCount = ( props: { reviews: number } ): JSX.Element => {
 	const { reviews } = props;
 
@@ -128,16 +108,20 @@ interface ProductRatingProps {
 	isDescendentOfQueryLoop: boolean;
 	postId: number;
 	productId: number;
+	shouldDisplayMockedReviewsWhenProductHasNoReviews: boolean;
 }
 
 export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
-	const { textAlign, isDescendentOfSingleProductBlock } = props;
+	const {
+		textAlign,
+		isDescendentOfSingleProductBlock,
+		shouldDisplayMockedReviewsWhenProductHasNoReviews,
+	} = props;
 	const styleProps = useStyleProps( props );
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const rating = getAverageRating( product );
 	const reviews = getRatingCount( product );
-	const href = getReviewsHref( product );
 
 	const className = classnames(
 		styleProps.className,
@@ -147,6 +131,13 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		}
 	);
+	const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? (
+		<Rating
+			rating={ 0 }
+			reviews={ 0 }
+			parentClassName={ parentClassName }
+		/>
+	) : null;
 
 	const content = reviews ? (
 		<Rating
@@ -155,7 +146,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 			parentClassName={ parentClassName }
 		/>
 	) : (
-		<AddReview href={ href } />
+		mockedRatings
 	);
 
 	return (

diff --git a/assets/js/atomic/blocks/product-elements/rating/edit.tsx b/assets/js/atomic/blocks/product-elements/rating/edit.tsx
@@ -32,6 +32,7 @@ const Edit = ( {
 	const blockAttrs = {
 		...attributes,
 		...context,
+		shouldDisplayMockedReviewsWhenProductHasNoReviews: true,
 	};
 	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
 	const { isDescendentOfSingleProductBlock } =

diff --git a/src/BlockTypes/ProductRating.php b/src/BlockTypes/ProductRating.php
@@ -166,8 +166,7 @@ protected function render( $attributes, $content, $block ) {
 						$is_descendent_of_single_product_block ? $reviews_count_html : ''
 					);
 				} else {
-					$product_review_url = esc_url( $product_permalink . '#reviews' );
-					$html               = '<a class="wc-block-components-product-rating__link" href="' . $product_review_url . '">' . __( 'Add review', 'woo-gutenberg-products-block' ) . '</a>';
+					$html               = '';
 				}
 
 				return $html;