Update free price display (#8241)

woocommerce · Jan 20, 2023 · 8ba1261 · 8ba1261
1 parent c65fe1c
commit 8ba1261
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { _n } from '@wordpress/i18n';
+import { _n, __ } from '@wordpress/i18n';
 import {
 	useState,
 	useEffect,
@@ -75,24 +75,31 @@ const renderPickupLocation = (
 		label: location
 			? decodeEntities( location )
 			: decodeEntities( option.name ),
-		secondaryLabel: createInterpolateElement(
-			/* translators: %1$s name of the product (ie: Sunglasses), %2$d number of units in the current cart package */
-			_n(
-				'<price/>',
-				'<price/> x <packageCount/> packages',
-				packageCount,
-				'woo-gutenberg-products-block'
+		secondaryLabel:
+			parseInt( priceWithTaxes, 10 ) > 0 ? (
+				createInterpolateElement(
+					/* translators: %1$s name of the product (ie: Sunglasses), %2$d number of units in the current cart package */
+					_n(
+						'<price/>',
+						'<price/> x <packageCount/> packages',
+						packageCount,
+						'woo-gutenberg-products-block'
+					),
+					{
+						price: (
+							<FormattedMonetaryAmount
+								currency={ getCurrencyFromPriceResponse(
+									option
+								) }
+								value={ priceWithTaxes }
+							/>
+						),
+						packageCount: <>{ packageCount }</>,
+					}
+				)
+			) : (
+				<em>{ __( 'free', 'woo-gutenberg-products-block' ) }</em>
 			),
-			{
-				price: (
-					<FormattedMonetaryAmount
-						currency={ getCurrencyFromPriceResponse( option ) }
-						value={ priceWithTaxes }
-					/>
-				),
-				packageCount: <>{ packageCount }</>,
-			}
-		),
 		description: decodeEntities( details ),
 		secondaryDescription: address ? (
 			<>

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
@@ -32,6 +32,12 @@
 			display: block;
 		}
 	}
+	.wc-block-components-radio-control__label-group {
+		em {
+			text-transform: uppercase;
+			font-style: inherit;
+		}
+	}
 	.wc-block-components-radio-control__description-group {
 		width: 100%;
 		box-sizing: border-box;

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/shared/rate-price.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/shared/rate-price.tsx
@@ -42,7 +42,12 @@ export const RatePrice = ( {
 			{ minRatePrice === maxRatePrice && ! multiple
 				? priceElement
 				: createInterpolateElement(
-						__( 'from <price />', 'woo-gutenberg-products-block' ),
+						minRatePrice === 0 && maxRatePrice === 0
+							? '<price />'
+							: __(
+									'from <price />',
+									'woo-gutenberg-products-block'
+							  ),
 						{
 							price: priceElement,
 						}