Allow extensions to extend cart item price (https://github.com/woocommerce/woocommerce-blocks/pull/3750)

* Add filter to extend product price * Extend order summary product price too * Make it so 'format' is applied to all product price types * Order * Pass lineItem to the filter * Remove code targeting WC Subscriptions * Rename filter * Remove unnecessary CSS block that made prices be displayed as blocks * Use line item totals instead of product price multiplied by quantity to show line item price * Fix wrong currency usage * Add comment to disable eslint * Fix JS error when totals is undefined * Align order summary item price to the right * Use extendibility API instead of filters * Remove __EXPERIMENTAL_CART_ITEM_PRICE_FILTER from docs * fix rebase Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2021-02-12 00:37:05 +01:00 · 2021-02-12 00:37:05 +01:00 · e5f6a1047c
parent f7894b3c7f
commit e5f6a1047c
3 changed files with 77 additions and 25 deletions
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js
@ -31,9 +31,12 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		description: fullDescription,
 		item_data: itemData = [],
 		variation,
+		totals,
 		extensions,
 	} = cartItem;

+	const priceCurrency = getCurrency( prices );
+
 	const name = __experimentalApplyCheckoutFilter( {
 		filterName: 'itemName',
 		defaultValue: initialName,
@ -44,23 +47,23 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		validation: ( value ) => typeof value === 'string',
 	} );

-	const currency = getCurrency( prices );
 	const regularPriceSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.regular_price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
 	} )
-		.convertPrecision( currency.minorUnit )
+		.convertPrecision( priceCurrency.minorUnit )
 		.getAmount();
-	const unconvertedLinePrice = Dinero( {
+	const priceSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
-	} );
-	const linePriceSingle = unconvertedLinePrice
-		.convertPrecision( currency.minorUnit )
+	} )
+		.convertPrecision( priceCurrency.minorUnit )
 		.getAmount();
-	const linePrice = unconvertedLinePrice
-		.multiply( quantity )
-		.convertPrecision( currency.minorUnit )
+	const totalsCurrency = getCurrency( totals );
+	const totalsPrice = Dinero( {
+		amount: parseInt( totals.line_total, 10 ),
+	} )
+		.convertPrecision( totals.currency_minor_unit )
 		.getAmount();
 	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
 		filterName: 'subtotalPriceFormat',
@ -73,6 +76,18 @@ const OrderSummaryItem = ( { cartItem } ) => {
 			typeof value === 'string' && value.includes( '<price/>' ),
 	} );

+	// Allow extensions to filter how the price is displayed. Ie: prepending or appending some values.
+	const productPriceFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'cartItemPrice',
+		defaultValue: '<price/>',
+		arg: {
+			cartItem,
+			block: 'checkout',
+		},
+		validation: ( value ) =>
+			typeof value === 'string' && value.includes( '<price/>' ),
+	} );
+
 	return (
 		<div className="wc-block-components-order-summary-item">
 			<div className="wc-block-components-order-summary-item__image">
@ -95,8 +110,8 @@ const OrderSummaryItem = ( { cartItem } ) => {
 					permalink={ permalink }
 				/>
 				<ProductPrice
-					currency={ currency }
-					price={ linePriceSingle }
+					currency={ priceCurrency }
+					price={ priceSingle }
 					regularPrice={ regularPriceSingle }
 					className="wc-block-components-order-summary-item__individual-prices"
 					priceClassName="wc-block-components-order-summary-item__individual-price"
@ -120,7 +135,11 @@ const OrderSummaryItem = ( { cartItem } ) => {
 				/>
 			</div>
 			<div className="wc-block-components-order-summary-item__total-price">
-				<ProductPrice currency={ currency } price={ linePrice } />
+				<ProductPrice
+					currency={ totalsCurrency }
+					format={ productPriceFormat }
+					price={ totalsPrice }
+				/>
 			</div>
 		</div>
 	);
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
@ -83,6 +83,7 @@
 .wc-block-components-order-summary-item__total-price {
 	font-weight: bold;
 	margin-left: auto;
+	text-align: right;
 }


--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@ -72,6 +72,16 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				sale_price: '0',
 			},
 		},
+		totals = {
+			currency_code: 'USD',
+			currency_minor_unit: 2,
+			currency_symbol: '$',
+			currency_prefix: '$',
+			currency_suffix: '',
+			currency_decimal_separator: '.',
+			currency_thousand_separator: ',',
+			line_total: '0',
+		},
 		extensions,
 	} = lineItem;

@ -82,6 +92,8 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		isPendingDelete,
 	} = useStoreCartItemQuantity( lineItem );

+	const priceCurrency = getCurrency( prices );
+
 	const name = __experimentalApplyCheckoutFilter( {
 		filterName: 'itemName',
 		defaultValue: initialName,
@ -91,7 +103,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		},
 		validation: ( value ) => typeof value === 'string',
 	} );
-	const currency = getCurrency( prices );
+
 	const regularAmountSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.regular_price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
@ -100,16 +112,31 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		amount: parseInt( prices.raw_prices.price, 10 ),
 		precision: parseInt( prices.raw_prices.precision, 10 ),
 	} );
-	const regularAmount = regularAmountSingle.multiply( quantity );
-	const purchaseAmount = purchaseAmountSingle.multiply( quantity );
 	const saleAmountSingle = regularAmountSingle.subtract(
 		purchaseAmountSingle
 	);
-	const saleAmount = regularAmount.subtract( purchaseAmount );
+	const saleAmount = saleAmountSingle.multiply( quantity );
+	const totalsCurrency = getCurrency( totals );
+	const totalsPrice = Dinero( {
+		amount: parseInt( totals.line_total, 10 ),
+	} );
+
 	const firstImage = images.length ? images[ 0 ] : {};
 	const isProductHiddenFromCatalog =
 		catalogVisibility === 'hidden' || catalogVisibility === 'search';

+	// Allow extensions to filter how the price is displayed. Ie: prepending or appending some values.
+	const productPriceFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'cartItemPrice',
+		defaultValue: '<price/>',
+		arg: {
+			cartItem: lineItem,
+			block: 'cart',
+		},
+		validation: ( value ) =>
+			typeof value === 'string' && value.includes( '<price/>' ),
+	} );
+
 	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
 		filterName: 'subtotalPriceFormat',
 		defaultValue: '<price/>',
@ -120,6 +147,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		validation: ( value ) =>
 			typeof value === 'string' && value.includes( '<price/>' ),
 	} );
+
 	const saleBadgePriceFormat = __experimentalApplyCheckoutFilter( {
 		filterName: 'saleBadgePriceFormat',
 		defaultValue: '<price/>',
@ -169,24 +197,24 @@ const CartLineItemRow = ( { lineItem = {} } ) => {

 				<div className="wc-block-cart-item__prices">
 					<ProductPrice
-						currency={ currency }
+						currency={ priceCurrency }
 						regularPrice={ getAmountFromRawPrice(
 							regularAmountSingle,
-							currency
+							priceCurrency
 						) }
 						price={ getAmountFromRawPrice(
 							purchaseAmountSingle,
-							currency
+							priceCurrency
 						) }
 						format={ subtotalPriceFormat }
 					/>
 				</div>

 				<ProductSaleBadge
-					currency={ currency }
+					currency={ priceCurrency }
 					saleAmount={ getAmountFromRawPrice(
 						saleAmountSingle,
-						currency
+						priceCurrency
 					) }
 					format={ saleBadgePriceFormat }
 				/>
@ -217,16 +245,20 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 			</td>
 			<td className="wc-block-cart-item__total">
 				<ProductPrice
-					currency={ currency }
-					price={ getAmountFromRawPrice( purchaseAmount, currency ) }
+					currency={ totalsCurrency }
+					format={ productPriceFormat }
+					price={ getAmountFromRawPrice(
+						totalsPrice,
+						totalsCurrency
+					) }
 				/>

 				{ quantity > 1 && (
 					<ProductSaleBadge
-						currency={ currency }
+						currency={ priceCurrency }
 						saleAmount={ getAmountFromRawPrice(
 							saleAmount,
-							currency
+							priceCurrency
 						) }
 						format={ saleBadgePriceFormat }
 					/>