Support for multiple fee rows in the cart (#3678)

mikejolley · web-flow · commit 9a9fd51221dd · 2021-01-13T16:57:42.000Z
* Inject the routes controller

* Cart totals need to be calculated on cart routes or fees will be missing

* Add fees to schema and response

* Add fees to useStoreCart

* Fix styling of multiple fee rows

* Fix test shape
diff --git a/assets/js/base/components/cart-checkout/totals/fees/index.js b/assets/js/base/components/cart-checkout/totals/fees/index.js
@@ -6,36 +6,41 @@ import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import PropTypes from 'prop-types';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
 
-const TotalsFees = ( { currency, values } ) => {
-	const { total_fees: totalFees, total_fees_tax: totalFeesTax } = values;
-	const feesValue = parseInt( totalFees, 10 );
+const TotalsFees = ( { currency, cartFees } ) => {
+	return (
+		<>
+			{ cartFees.map( ( { id, name, totals } ) => {
+				const feesValue = parseInt( totals.total, 10 );
 
-	if ( ! feesValue ) {
-		return null;
-	}
+				if ( ! feesValue ) {
+					return null;
+				}
 
-	const feesTaxValue = parseInt( totalFeesTax, 10 );
+				const feesTaxValue = parseInt( totals.total_tax, 10 );
 
-	return (
-		<TotalsItem
-			className="wc-block-components-totals-fees"
-			currency={ currency }
-			label={ __( 'Fees', 'woo-gutenberg-products-block' ) }
-			value={
-				DISPLAY_CART_PRICES_INCLUDING_TAX
-					? feesValue + feesTaxValue
-					: feesValue
-			}
-		/>
+				return (
+					<TotalsItem
+						key={ id }
+						className="wc-block-components-totals-fees"
+						currency={ currency }
+						label={
+							name || __( 'Fee', 'woo-gutenberg-products-block' )
+						}
+						value={
+							DISPLAY_CART_PRICES_INCLUDING_TAX
+								? feesValue + feesTaxValue
+								: feesValue
+						}
+					/>
+				);
+			} ) }
+		</>
 	);
 };
 
 TotalsFees.propTypes = {
 	currency: PropTypes.object.isRequired,
-	values: PropTypes.shape( {
-		total_fees: PropTypes.string,
-		total_fees_tax: PropTypes.string,
-	} ).isRequired,
+	cartFees: PropTypes.array.isRequired,
 };
 
 export default TotalsFees;
diff --git a/assets/js/base/components/cart-checkout/totals/fees/stories/index.js b/assets/js/base/components/cart-checkout/totals/fees/stories/index.js
@@ -17,16 +17,22 @@ export default {
 
 export const Default = () => {
 	const currency = currencyKnob();
-	const totalFees = text( 'Total fees', '1000' );
-	const totalFeesTax = text( 'Total fees tax', '200' );
+	const totalFees = text( 'Total fee', '1000' );
+	const totalFeesTax = text( 'Total fee tax', '200' );
 
 	return (
 		<TotalsFees
 			currency={ currency }
-			values={ {
-				total_fees: totalFees,
-				total_fees_tax: totalFeesTax,
-			} }
+			cartFees={ [
+				{
+					id: 'fee',
+					name: 'Fee',
+					totals: {
+						total: totalFees,
+						total_tax: totalFeesTax,
+					},
+				},
+			] }
 		/>
 	);
 };
diff --git a/assets/js/base/hooks/cart/test/use-store-cart.js b/assets/js/base/hooks/cart/test/use-store-cart.js
@@ -37,6 +37,7 @@ describe( 'useStoreCart', () => {
 		cartIsLoading: false,
 		cartItemErrors: [],
 		cartErrors: [],
+		cartFees: [],
 		billingAddress: {
 			first_name: '',
 			last_name: '',
@@ -98,6 +99,7 @@ describe( 'useStoreCart', () => {
 		cartTotals: mockCartTotals,
 		cartIsLoading: mockCartIsLoading,
 		cartErrors: mockCartErrors,
+		cartFees: [],
 		billingAddress: {},
 		shippingAddress: mockShippingAddress,
 		shippingRates: [],
diff --git a/assets/js/base/hooks/cart/use-store-cart.js b/assets/js/base/hooks/cart/use-store-cart.js
@@ -37,6 +37,7 @@ const decodeAddress = ( address ) =>
 export const defaultCartData = {
 	cartCoupons: [],
 	cartItems: [],
+	cartFees: [],
 	cartItemsCount: 0,
 	cartItemsWeight: 0,
 	cartNeedsPayment: true,
@@ -80,6 +81,7 @@ export const useStoreCart = ( options = { shouldSelect: true } ) => {
 				return {
 					cartCoupons: previewCart.coupons,
 					cartItems: previewCart.items,
+					cartFees: previewCart.fees,
 					cartItemsCount: previewCart.items_count,
 					cartItemsWeight: previewCart.items_weight,
 					cartNeedsPayment: previewCart.needs_payment,
@@ -117,6 +119,7 @@ export const useStoreCart = ( options = { shouldSelect: true } ) => {
 			return {
 				cartCoupons: cartData.coupons,
 				cartItems: cartData.items || [],
+				cartFees: cartData.fees || [],
 				cartItemsCount: cartData.itemsCount,
 				cartItemsWeight: cartData.itemsWeight,
 				cartNeedsPayment: cartData.needsPayment,
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/index.js b/assets/js/blocks/cart-checkout/cart/full-cart/index.js
@@ -65,6 +65,7 @@ const Cart = ( { attributes } ) => {
 
 	const {
 		cartItems,
+		cartFees,
 		cartTotals,
 		cartIsLoading,
 		cartItemsCount,
@@ -114,7 +115,7 @@ const Cart = ( { attributes } ) => {
 					{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
 				</Title>
 				<Subtotal currency={ totalsCurrency } values={ cartTotals } />
-				<TotalsFees currency={ totalsCurrency } values={ cartTotals } />
+				<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
 				<TotalsDiscount
 					cartCoupons={ appliedCoupons }
 					currency={ totalsCurrency }
diff --git a/assets/js/blocks/cart-checkout/checkout/block.js b/assets/js/blocks/cart-checkout/checkout/block.js
@@ -65,6 +65,7 @@ const Checkout = ( { attributes, scrollToTop } ) => {
 		cartItems,
 		cartTotals,
 		cartCoupons,
+		cartFees,
 		cartNeedsPayment,
 	} = useStoreCart();
 	const {
@@ -157,6 +158,7 @@ const Checkout = ( { attributes, scrollToTop } ) => {
 						cartCoupons={ cartCoupons }
 						cartItems={ cartItems }
 						cartTotals={ cartTotals }
+						cartFees={ cartFees }
 					/>
 				</Sidebar>
 			</SidebarLayout>
diff --git a/assets/js/blocks/cart-checkout/checkout/sidebar/index.js b/assets/js/blocks/cart-checkout/checkout/sidebar/index.js
@@ -23,6 +23,7 @@ import { useStoreCartCoupons } from '@woocommerce/base-hooks';
 const CheckoutSidebar = ( {
 	cartCoupons = [],
 	cartItems = [],
+	cartFees = [],
 	cartTotals = {},
 } ) => {
 	const {
@@ -39,7 +40,7 @@ const CheckoutSidebar = ( {
 		<>
 			<OrderSummary cartItems={ cartItems } />
 			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
-			<TotalsFees currency={ totalsCurrency } values={ cartTotals } />
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
 			<TotalsDiscount
 				cartCoupons={ cartCoupons }
 				currency={ totalsCurrency }
diff --git a/assets/js/previews/cart.js b/assets/js/previews/cart.js
@@ -156,6 +156,7 @@ export const previewCart = {
 			},
 		},
 	],
+	fees: [],
 	items_count: 3,
 	items_weight: 0,
 	needs_payment: true,
diff --git a/assets/js/type-defs/hooks.js b/assets/js/type-defs/hooks.js
@@ -12,6 +12,8 @@
  *                                                      to the cart.
  * @property {Array}               cartItems            An array of items in the
  *                                                      cart.
+ * @property {Array}               cartFees             An array of fees in the
+ *                                                      cart.
  * @property {number}              cartItemsCount       The number of items in the
  *                                                      cart.
  * @property {number}              cartItemsWeight      The weight of all items in
diff --git a/packages/checkout/totals/item/style.scss b/packages/checkout/totals/item/style.scss
@@ -3,6 +3,10 @@
 	flex-wrap: wrap;
 	padding: em($gap-small) 0;
 	width: 100%;
+
+	&:not(:first-of-type):not(:last-of-type) {
+		@include with-translucent-border(1px 0 0);
+	}
 }
 
 .wc-block-components-totals-item__label {
diff --git a/src/Domain/Bootstrap.php b/src/Domain/Bootstrap.php
@@ -25,6 +25,8 @@
 use Automattic\WooCommerce\Blocks\StoreApi\Formatters\MoneyFormatter;
 use Automattic\WooCommerce\Blocks\StoreApi\Formatters\HtmlFormatter;
 use Automattic\WooCommerce\Blocks\StoreApi\Formatters\CurrencyFormatter;
+use Automattic\WooCommerce\Blocks\StoreApi\RoutesController;
+use Automattic\WooCommerce\Blocks\StoreApi\SchemaController;
 
 /**
  * Takes care of bootstrapping the plugin.
@@ -176,7 +178,7 @@ function ( Container $container ) {
 		$this->container->register(
 			RestApi::class,
 			function ( Container $container ) {
-				return new RestApi( $container->get( ExtendRestApi::class ) );
+				return new RestApi( $container->get( RoutesController::class ) );
 			}
 		);
 		$this->container->register(
@@ -207,6 +209,18 @@ function( Container $container ) {
 				return $formatters;
 			}
 		);
+		$this->container->register(
+			SchemaController::class,
+			function( Container $container ) {
+				return new SchemaController( $container->get( ExtendRestApi::class ) );
+			}
+		);
+		$this->container->register(
+			RoutesController::class,
+			function( Container $container ) {
+				return new RoutesController( $container->get( SchemaController::class ) );
+			}
+		);
 		$this->container->register(
 			ExtendRestApi::class,
 			function( Container $container ) {
diff --git a/src/RestApi.php b/src/RestApi.php
@@ -14,19 +14,19 @@
  */
 class RestApi {
 	/**
-	 * Stores Rest Extending instance
+	 * Stores Rest Routes instance
 	 *
-	 * @var ExtendRestApi
+	 * @var RoutesController
 	 */
-	private $extend;
+	private $routes;
 
 	/**
 	 * Constructor
 	 *
-	 * @param ExtendRestApi $extend Rest Extending instance.
+	 * @param RoutesController $routes Rest Routes instance.
 	 */
-	public function __construct( ExtendRestApi $extend ) {
-		$this->extend = $extend;
+	public function __construct( RoutesController $routes ) {
+		$this->routes = $routes;
 		$this->init();
 	}
 
@@ -43,9 +43,7 @@ protected function init() {
 	 * Register REST API routes.
 	 */
 	public function register_rest_routes() {
-		$schemas = new SchemaController( $this->extend );
-		$routes  = new RoutesController( $schemas );
-		$routes->register_routes();
+		$this->routes->register_routes();
 	}
 
 	/**
diff --git a/src/StoreApi/Routes/AbstractCartRoute.php b/src/StoreApi/Routes/AbstractCartRoute.php
@@ -17,31 +17,18 @@ abstract class AbstractCartRoute extends AbstractRoute {
 	 */
 	public function get_response( \WP_REST_Request $request ) {
 		$this->maybe_load_cart();
-		$this->maybe_recalculate_totals();
+		$this->calculate_totals();
 		return parent::get_response( $request );
 	}
 
 	/**
-	 * If shipping/tax data has changed on the server since last calculation, trigger a recalculation now.
-	 *
-	 * @return void
+	 * Ensures the cart totals are calculated before an API response is generated.
 	 */
-	protected function maybe_recalculate_totals() {
-		$current_hash = wc()->session->get( 'store_api_calculation_hash', '' );
-		$new_hash     = md5(
-			wp_json_encode(
-				[
-					\WC_Cache_Helper::get_transient_version( 'shipping' ),
-					wc()->cart->get_cart_hash(),
-				]
-			)
-		);
-		if ( ! hash_equals( $current_hash, $new_hash ) ) {
-			wc()->session->set( 'store_api_calculation_hash', $new_hash );
-			wc()->cart->get_cart();
-			wc()->cart->calculate_shipping();
-			wc()->cart->calculate_totals();
-		}
+	protected function calculate_totals() {
+		wc()->cart->get_cart();
+		wc()->cart->calculate_fees();
+		wc()->cart->calculate_shipping();
+		wc()->cart->calculate_totals();
 	}
 
 	/**
diff --git a/src/StoreApi/SchemaController.php b/src/StoreApi/SchemaController.php
@@ -70,6 +70,7 @@ protected function initialize() {
 					new Schemas\ImageAttachmentSchema( $this->extend )
 				),
 				new Schemas\CartCouponSchema( $this->extend ),
+				new Schemas\CartFeeSchema( $this->extend ),
 				new Schemas\CartShippingRateSchema( $this->extend ),
 				new Schemas\ShippingAddressSchema( $this->extend ),
 				new Schemas\BillingAddressSchema( $this->extend ),
@@ -80,6 +81,7 @@ protected function initialize() {
 				$this->extend,
 				new Schemas\ImageAttachmentSchema( $this->extend )
 			),
+			Schemas\CartFeeSchema::IDENTIFIER          => new Schemas\CartFeeSchema( $this->extend ),
 			Schemas\CheckoutSchema::IDENTIFIER         => new Schemas\CheckoutSchema(
 				$this->extend,
 				new Schemas\BillingAddressSchema( $this->extend ),
diff --git a/src/StoreApi/Schemas/CartFeeSchema.php b/src/StoreApi/Schemas/CartFeeSchema.php
diff --git a/src/StoreApi/Schemas/CartSchema.php b/src/StoreApi/Schemas/CartSchema.php
diff --git a/storybook/__mocks__/woocommerce-base-hooks.js b/storybook/__mocks__/woocommerce-base-hooks.js
