Move Total components to checkout package (https://github.com/woocommerce/woocommerce-blocks/pull/3671)

* move items to package

* move components to package

* fix dep issue

* pass down classname

* move Panel and Price utils

* expose extensions

* fix import

* move cart call to inside slot

* fix unit tests

* fixes after rebase

* move ShippingRatesControl into packages/checkout

This fixes the `wc-blocks-checkout` circular dependency because `Package` was importing from `@woocommerce/checkout`.

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ProductPrice from '@woocommerce/base-components/product-price';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
+import { getCurrencyFromPriceResponse } from '@woocommerce/blocks-checkout';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js

@@ -13,7 +13,6 @@ export { default as ProductSaleBadge } from './product-sale-badge';
 export { default as ReturnToCartButton } from './return-to-cart-button';
 export { default as ShippingCalculator } from './shipping-calculator';
 export { default as ShippingLocation } from './shipping-location';
-export { default as ShippingRatesControl } from './shipping-rates-control';
 export { default as PaymentMethodIcons } from './payment-method-icons';
 export { default as PaymentMethodLabel } from './payment-method-label';
 export * from './totals';

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { useContainerWidthContext } from '@woocommerce/base-context';
-import Panel from '@woocommerce/base-components/panel';
+import { Panel } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -2,10 +2,10 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { getCurrency } from '@woocommerce/base-utils';
 import Label from '@woocommerce/base-components/label';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
+import { getCurrency } from '@woocommerce/blocks-checkout';
 import PropTypes from 'prop-types';
 import Dinero from 'dinero.js';
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/index.js

@@ -11,7 +11,7 @@ import LoadingMask from '@woocommerce/base-components/loading-mask';
 import PropTypes from 'prop-types';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
 import { useValidationContext } from '@woocommerce/base-context';
-import Panel from '@woocommerce/base-components/panel';
+import { Panel } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/index.js

@@ -1,7 +1,3 @@
-export { default as Subtotal } from './subtotal';
 export { default as TotalsCoupon } from './coupon';
 export { default as TotalsDiscount } from './discount';
-export { default as TotalsFees } from './fees';
 export { default as TotalsFooterItem } from './footer-item';
-export { default as TotalsShipping } from './shipping';
-export { default as TotalsTaxes } from './taxes';

plugins/woocommerce-blocks/assets/js/base/hooks/cart/test/use-store-cart.js

@@ -63,6 +63,7 @@ describe( 'useStoreCart', () => {
 			country: '',
 		},
 		shippingRates: previewCart.shipping_rates,
+		extensions: {},
 		shippingRatesLoading: false,
 		cartHasCalculatedShipping: true,
 	};
@@ -103,6 +104,7 @@ describe( 'useStoreCart', () => {
 		billingAddress: {},
 		shippingAddress: mockShippingAddress,
 		shippingRates: [],
+		extensions: {},
 		shippingRatesLoading: false,
 		cartHasCalculatedShipping: true,
 		receiveCart: undefined,

plugins/woocommerce-blocks/assets/js/base/hooks/cart/use-store-cart.js

@@ -92,6 +92,7 @@ export const useStoreCart = ( options = { shouldSelect: true } ) => {
 					cartErrors: [],
 					billingAddress: defaultBillingAddress,
 					shippingAddress: defaultShippingAddress,
+					extensions: {},
 					shippingRates: previewCart.shipping_rates,
 					shippingRatesLoading: false,
 					cartHasCalculatedShipping:
@@ -130,6 +131,7 @@ export const useStoreCart = ( options = { shouldSelect: true } ) => {
 				cartErrors,
 				billingAddress,
 				shippingAddress,
+				extensions: cartData.extensions || {},
 				shippingRates: cartData.shippingRates || [],
 				shippingRatesLoading,
 				cartHasCalculatedShipping: cartData.hasCalculatedShipping,

plugins/woocommerce-blocks/assets/js/base/hooks/payment-methods/use-payment-method-interface.js

@@ -8,7 +8,7 @@ import {
 	useCustomerDataContext,
 } from '@woocommerce/base-context';
 import { __ } from '@wordpress/i18n';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
+import { getCurrencyFromPriceResponse } from '@woocommerce/blocks-checkout';
 import { useEffect, useRef } from '@wordpress/element';
 import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import { ValidationInputError } from '@woocommerce/base-components/validation';

plugins/woocommerce-blocks/assets/js/base/utils/index.js

@@ -1,5 +1,4 @@
 export * from './errors';
-export * from './price';
 export * from './address';
 export * from './shipping-rates';
 export * from './legacy-events';

plugins/woocommerce-blocks/assets/js/blocks/active-filters/utils.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { formatPrice } from '@woocommerce/base-utils';
+import { formatPrice } from '@woocommerce/blocks-checkout';
 import { RemovableChip } from '@woocommerce/base-components/chip';
 
 /**

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import QuantitySelector from '@woocommerce/base-components/quantity-selector';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
-import { getCurrency } from '@woocommerce/base-utils';
 import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
 import { Icon, trash } from '@woocommerce/icons';
 import {
@@ -17,6 +16,7 @@ import {
 	ProductMetadata,
 	ProductSaleBadge,
 } from '@woocommerce/base-components/cart-checkout';
+import { getCurrency } from '@woocommerce/blocks-checkout';
 import Dinero from 'dinero.js';
 
 /**

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js

@@ -5,20 +5,22 @@
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import {
-	Subtotal,
-	TotalsFees,
 	TotalsCoupon,
 	TotalsDiscount,
 	TotalsFooterItem,
-	TotalsShipping,
-	TotalsTaxes,
 } from '@woocommerce/base-components/cart-checkout';
-import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+import {
+	Subtotal,
+	TotalsFees,
+	TotalsTaxes,
+	TotalsShipping,
+	ExperimentalOrderMeta,
+	getCurrencyFromPriceResponse,
+} from '@woocommerce/blocks-checkout';
 import {
 	COUPONS_ENABLED,
 	DISPLAY_CART_PRICES_INCLUDING_TAX,
 } from '@woocommerce/block-settings';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
 import { CartExpressPayment } from '@woocommerce/base-components/payment-methods';
 import {
 	useStoreCartCoupons,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.js

@@ -2,15 +2,15 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import {
-	FormStep,
-	ShippingRatesControl,
-} from '@woocommerce/base-components/cart-checkout';
-import {
-	getCurrencyFromPriceResponse,
 	getShippingRatesPackageCount,
 	getShippingRatesRateCount,
 } from '@woocommerce/base-utils';
+import {
+	getCurrencyFromPriceResponse,
+	ShippingRatesControl,
+} from '@woocommerce/blocks-checkout';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import {
 	useCheckoutContext,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/index.js

@@ -3,17 +3,19 @@
  */
 import {
 	OrderSummary,
-	Subtotal,
-	TotalsFees,
 	TotalsCoupon,
 	TotalsDiscount,
 	TotalsFooterItem,
-	TotalsShipping,
-	TotalsTaxes,
 } from '@woocommerce/base-components/cart-checkout';
-import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+import {
+	Subtotal,
+	TotalsFees,
+	TotalsTaxes,
+	TotalsShipping,
+	ExperimentalOrderMeta,
+	getCurrencyFromPriceResponse,
+} from '@woocommerce/blocks-checkout';
 import { useShippingDataContext } from '@woocommerce/base-context';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
 import {
 	COUPONS_ENABLED,
 	DISPLAY_CART_PRICES_INCLUDING_TAX,

plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js

@@ -11,7 +11,7 @@ import { useCallback, useState, useEffect } from '@wordpress/element';
 import PriceSlider from '@woocommerce/base-components/price-slider';
 import { useDebouncedCallback } from 'use-debounce';
 import PropTypes from 'prop-types';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
+import { getCurrencyFromPriceResponse } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies

plugins/woocommerce-blocks/assets/js/type-defs/hooks.js

@@ -35,6 +35,7 @@
  *                                                      cart.
  * @property {Array}               shippingRates        array of selected shipping
  *                                                      rates.
+ * @property {Object}              extensions           Values provided by  *                                                      extensions.
  * @property {boolean}             shippingRatesLoading Whether or not the
  *                                                      shipping rates are
  *                                                      being loaded.

plugins/woocommerce-blocks/packages/checkout/index.js

@@ -1,3 +1,6 @@
 export * from './totals';
+export * from './utils';
+export * from './shipping';
 export { default as ExperimentalOrderMeta } from './order-meta';
+export { default as Panel } from './panel';
 export { SlotFillProvider } from 'wordpress-components';

plugins/woocommerce-blocks/packages/checkout/order-meta/index.js

@@ -2,8 +2,10 @@
  * External dependencies
  */
 import { createSlotFill } from 'wordpress-components';
+import { Children, cloneElement } from 'wordpress-element';
 import classnames from 'classnames';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/block-settings';
+import { useStoreCart } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -16,16 +18,27 @@ const { Fill, Slot: OrderMetaSlot } = createSlotFill( slotName );
 function ExperimentalOrderMeta( { children } ) {
 	return (
 		<Fill>
-			<BlockErrorBoundary
-				renderError={ CURRENT_USER_IS_ADMIN ? null : () => null }
-			>
-				{ children }
-			</BlockErrorBoundary>
+			{ ( fillProps ) => {
+				return Children.map( children, ( fill ) => {
+					return (
+						<BlockErrorBoundary
+							renderError={
+								CURRENT_USER_IS_ADMIN ? null : () => null
+							}
+						>
+							{ cloneElement( fill, fillProps ) }
+						</BlockErrorBoundary>
+					);
+				} );
+			} }
 		</Fill>
 	);
 }
 
 function Slot( { className } ) {
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
 	return (
 		<OrderMetaSlot
 			bubblesVirtually
@@ -33,6 +46,7 @@ function Slot( { className } ) {
 				className,
 				'wc-block-components-order-meta'
 			) }
+			fillProps={ { extensions, cart } }
 		/>
 	);
 }

plugins/woocommerce-blocks/packages/checkout/shipping/index.js

@@ -0,0 +1 @@
+export * from './shipping-rates-control';

plugins/woocommerce-blocks/packages/checkout/shipping/shipping-rates-control/index.js

@@ -0,0 +1,2 @@
+export { default as ShippingRatesControl } from './shipping-rates-control';
+export { default as Packages } from './packages';

plugins/woocommerce-blocks/packages/checkout/shipping/shipping-rates-control/package.js

@@ -6,13 +6,13 @@ import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import Label from '@woocommerce/base-components/label';
 import Title from '@woocommerce/base-components/title';
-import Panel from '@woocommerce/base-components/panel';
 import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import PackageOptions from './package-options';
+import Panel from '../../panel';
 import './style.scss';
 
 const Package = ( {

plugins/woocommerce-blocks/packages/checkout/shipping/shipping-rates-control/shipping-rates-control.js

@@ -110,4 +110,3 @@ ShippingRatesControl.propTypes = {
 };
 
 export default ShippingRatesControl;
-export { Packages };

plugins/woocommerce-blocks/packages/checkout/totals/fees/index.js

@@ -1,12 +1,17 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import PropTypes from 'prop-types';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
 
-const TotalsFees = ( { currency, cartFees } ) => {
+/**
+ * Internal dependencies
+ */
+import TotalsItem from '../item';
+
+const TotalsFees = ( { currency, cartFees, className } ) => {
 	return (
 		<>
 			{ cartFees.map( ( { id, name, totals } ) => {
@@ -21,7 +26,10 @@ const TotalsFees = ( { currency, cartFees } ) => {
 				return (
 					<TotalsItem
 						key={ id }
-						className="wc-block-components-totals-fees"
+						className={ classnames(
+							'wc-block-components-totals-fees',
+							className
+						) }
 						currency={ currency }
 						label={
 							name || __( 'Fee', 'woo-gutenberg-products-block' )
@@ -41,6 +49,7 @@ const TotalsFees = ( { currency, cartFees } ) => {
 TotalsFees.propTypes = {
 	currency: PropTypes.object.isRequired,
 	cartFees: PropTypes.array.isRequired,
+	className: PropTypes.string,
 };
 
 export default TotalsFees;

plugins/woocommerce-blocks/packages/checkout/totals/fees/stories/index.js

@@ -10,8 +10,7 @@ import { currencyKnob } from '@woocommerce/knobs';
 import TotalsFees from '../';
 
 export default {
-	title:
-		'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsFees',
+	title: 'WooCommerce Blocks/@blocks-checkout/TotalsFees',
 	component: TotalsFees,
 };
 

plugins/woocommerce-blocks/packages/checkout/totals/index.js

@@ -1 +1,5 @@
 export { default as TotalsItem } from './item';
+export { default as Subtotal } from './subtotal';
+export { default as TotalsTaxes } from './taxes';
+export { default as TotalsShipping } from './shipping';
+export { default as TotalsFees } from './fees';

plugins/woocommerce-blocks/packages/checkout/totals/item/stories/index.js

@@ -10,8 +10,7 @@ import { currencyKnob } from '@woocommerce/knobs';
 import TotalsItem from '../';
 
 export default {
-	title:
-		'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsItem',
+	title: 'WooCommerce Blocks/@blocks-checkout/TotalsItem',
 	component: TotalsItem,
 };
 

plugins/woocommerce-blocks/packages/checkout/totals/shipping/index.js

@@ -1,20 +1,23 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import PropTypes from 'prop-types';
 import { useState } from '@wordpress/element';
 import { useStoreCart } from '@woocommerce/base-hooks';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
+import {
+	ShippingCalculator,
+	ShippingLocation,
+} from '@woocommerce/base-components/cart-checkout';
 
 /**
  * Internal dependencies
  */
+import TotalsItem from '../item';
 import ShippingRateSelector from './shipping-rate-selector';
 import hasShippingRate from './has-shipping-rate';
-import ShippingCalculator from '../../shipping-calculator';
-import ShippingLocation from '../../shipping-location';
 import './style.scss';
 
 /**
@@ -25,12 +28,14 @@ import './style.scss';
  * @param {Object} props.values Values in use.
  * @param {boolean} props.showRateSelector Whether to display the rate selector below the shipping total.
  * @param {boolean} props.showCalculator Whether to show shipping calculator or not.
+ * @param {string} props.className CSS Class supplied by consumer.
  */
 const TotalsShipping = ( {
 	currency,
 	values,
 	showCalculator = true,
 	showRateSelector = true,
+	className,
 } ) => {
 	const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = useState(
 		false
@@ -53,7 +58,12 @@ const TotalsShipping = ( {
 	};
 
 	return (
-		<div className="wc-block-components-totals-shipping">
+		<div
+			className={ classnames(
+				'wc-block-components-totals-shipping',
+				className
+			) }
+		>
 			<TotalsItem
 				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
 				value={
@@ -170,6 +180,7 @@ TotalsShipping.propTypes = {
 	} ).isRequired,
 	showRateSelector: PropTypes.bool,
 	showCalculator: PropTypes.bool,
+	className: PropTypes.string,
 };
 
 export default TotalsShipping;

plugins/woocommerce-blocks/packages/checkout/totals/shipping/shipping-rate-selector.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { decodeEntities } from '@wordpress/html-entities';
-import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
 import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import { Notice } from 'wordpress-components';
 import classnames from 'classnames';
@@ -12,7 +11,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import ShippingRatesControl from '../../shipping-rates-control';
+import { getCurrencyFromPriceResponse } from '../../utils';
+import { ShippingRatesControl } from '../../shipping';
 
 const renderShippingRatesControlOption = ( option ) => {
 	const priceWithTaxes = DISPLAY_CART_PRICES_INCLUDING_TAX

plugins/woocommerce-blocks/packages/checkout/totals/shipping/stories/index.js

@@ -10,8 +10,7 @@ import { currencyKnob } from '@woocommerce/knobs';
 import TotalsShipping from '../';
 
 export default {
-	title:
-		'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsShipping',
+	title: 'WooCommerce Blocks/@blocks-checkout/TotalsShipping',
 	component: TotalsShipping,
 };
 

plugins/woocommerce-blocks/packages/checkout/totals/subtotal/index.js

@@ -4,15 +4,20 @@
 import { __ } from '@wordpress/i18n';
 import { DISPLAY_CART_PRICES_INCLUDING_TAX } from '@woocommerce/block-settings';
 import PropTypes from 'prop-types';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
 
-const Subtotal = ( { currency, values } ) => {
+/**
+ * Internal dependencies
+ */
+import TotalsItem from '../item';
+
+const Subtotal = ( { currency, values, className } ) => {
 	const { total_items: totalItems, total_items_tax: totalItemsTax } = values;
 	const itemsValue = parseInt( totalItems, 10 );
 	const itemsTaxValue = parseInt( totalItemsTax, 10 );
 
 	return (
 		<TotalsItem
+			className={ className }
 			currency={ currency }
 			label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) }
 			value={
@@ -30,6 +35,7 @@ Subtotal.propTypes = {
 		total_items: PropTypes.string,
 		total_items_tax: PropTypes.string,
 	} ).isRequired,
+	className: PropTypes.string,
 };
 
 export default Subtotal;

plugins/woocommerce-blocks/packages/checkout/totals/subtotal/stories/index.js

@@ -10,7 +10,7 @@ import { currencyKnob } from '@woocommerce/knobs';
 import Subtotal from '../';
 
 export default {
-	title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Subtotal',
+	title: 'WooCommerce Blocks/@blocks-checkout/Subtotal',
 	component: Subtotal,
 };
 

plugins/woocommerce-blocks/packages/checkout/totals/taxes/index.js

@@ -1,20 +1,21 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import {
 	TAXES_ENABLED,
 	DISPLAY_ITEMIZED_TAXES,
 } from '@woocommerce/block-settings';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
+import TotalsItem from '../item';
 import './style.scss';
 
-const TotalsTaxes = ( { currency, values } ) => {
+const TotalsTaxes = ( { currency, values, className } ) => {
 	const { total_tax: totalTax, tax_lines: taxLines } = values;
 
 	if ( ! TAXES_ENABLED ) {
@@ -24,7 +25,10 @@ const TotalsTaxes = ( { currency, values } ) => {
 	if ( ! DISPLAY_ITEMIZED_TAXES ) {
 		return (
 			<TotalsItem
-				className="wc-block-components-totals-taxes"
+				className={ classnames(
+					'wc-block-components-totals-taxes',
+					className
+				) }
 				currency={ currency }
 				label={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
 				value={ parseInt( totalTax, 10 ) }
@@ -52,6 +56,7 @@ TotalsTaxes.propTypes = {
 	values: PropTypes.shape( {
 		total_tax: PropTypes.string,
 	} ).isRequired,
+	className: PropTypes.string,
 };
 
 export default TotalsTaxes;

plugins/woocommerce-blocks/packages/checkout/totals/taxes/stories/index.js

@@ -10,8 +10,7 @@ import { currencyKnob } from '@woocommerce/knobs';
 import TotalsTaxes from '../';
 
 export default {
-	title:
-		'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsTaxes',
+	title: 'WooCommerce Blocks/@blocks-checkout/TotalsTaxes',
 	component: TotalsTaxes,
 };
 

plugins/woocommerce-blocks/packages/checkout/utils/index.js

@@ -0,0 +1 @@
+export * from './price';