WIP: Add Inner blocks to order summary (#6065)

* Sub/Total/Fee inner blocks

* Row blocks within the inner block

* Update icons

* Resolve stying issues

* Remove old block

* Pin totals row

* Locking logic update

* Heading inner block

* Refactor where inner blocks are defined

* Add todos

* Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.

* Improve frontend registration of components using new entrypoint

* Experiment- external block context

* Revert "Experiment- external block context"

This reverts commit 4b75668.

* Duplicate inner blocks to avoid conflicts with context

* Remove todo

* Rename block dir

* Some test fixes

* Fix import

* fix import

* linting

* Remove unused attributes

* Optional classname

* fix coupons import

* fix shipping mocks

* Styling

* Fix selectors in e2e tests

* Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary

Because, removing them was:
-  a breaking change for the old structure
- was making it harder to target the inner blocks. Before the class was used to target each segment
- it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency

* Reuse the TotalsWrapper component for C& C blocks inner blocks

This component was removed in this PR, but  we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.

Co-authored-by: Nadir Seghir <[email protected]>
Co-authored-by: Raluca Stan <[email protected]>

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -42,13 +42,3 @@
 	content: ", ";
 	white-space: pre;
 }
-
-// Target the shipping selection in checkout only, the Cart block has enough spacing because of the buttons on the panel.
-.wc-block-checkout .wc-block-components-shipping-rates-control__package {
-	margin-bottom: em($gap-large);
-
-	&:last-of-type {
-		margin-bottom: 0;
-	}
-
-}

assets/js/base/components/cart-checkout/totals/footer-item/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import {
@@ -30,6 +31,7 @@ export interface TotalsFooterItemProps {
 	 * convenience, but will use only these two properties.
 	 */
 	values: LooselyMustHave< CartResponseTotals, 'total_price' | 'total_tax' >;
+	className?: string;
 }
 
 /**
@@ -42,6 +44,7 @@ export interface TotalsFooterItemProps {
 const TotalsFooterItem = ( {
 	currency,
 	values,
+	className,
 }: TotalsFooterItemProps ): JSX.Element => {
 	const SHOW_TAXES =
 		getSetting< boolean >( 'taxesEnabled', true ) &&
@@ -64,7 +67,10 @@ const TotalsFooterItem = ( {
 
 	return (
 		<TotalsItem
-			className="wc-block-components-totals-footer-item"
+			className={ classNames(
+				'wc-block-components-totals-footer-item',
+				className
+			) }
 			currency={ currency }
 			label={ label }
 			value={ parseInt( totalPrice, 10 ) }

assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import CartLineItemsTable from '../../../cart/cart-line-items-table';
+import CartLineItemsTable from '../../../../cart/cart-line-items-table';
 
 type MiniCartContentsBlockProps = {
 	className: string;

assets/js/blocks/cart-checkout/cart/edit.js → assets/js/blocks/cart/edit.js

@@ -29,13 +29,14 @@ import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import './inner-blocks';
 import './editor.scss';
 import {
 	addClassToBody,
 	useViewSwitcher,
 	useBlockPropsWithLocking,
 	useForcedLayout,
-} from '../shared';
+} from '../cart-checkout/shared';
 import { CartBlockContext } from './context';
 
 // This is adds a class to body to signal if the selected block is locked

assets/js/blocks/cart-checkout/cart/editor.scss → assets/js/blocks/cart/editor.scss

@@ -29,3 +29,13 @@ body.wc-lock-selected-block--remove {
 		position: relative;
 	}
 }
+
+.wp-block-woocommerce-cart-order-summary-block {
+	.block-editor-block-list__layout > div {
+		margin: 0 !important;
+	}
+
+	.wc-block-components-totals-wrapper {
+		box-sizing: border-box;
+	}
+}

assets/js/blocks/cart-checkout/cart/index.js → assets/js/blocks/cart/index.js

@@ -63,12 +63,7 @@ const settings = {
 				);
 			},
 			migrate: ( attributes, innerBlocks ) => {
-				const {
-					isShippingCalculatorEnabled,
-					showRateAfterTaxName,
-					checkoutPageId,
-					align,
-				} = attributes;
+				const { checkoutPageId, align } = attributes;
 				return [
 					attributes,
 					[
@@ -83,10 +78,7 @@ const settings = {
 									[
 										createBlock(
 											'woocommerce/cart-order-summary-block',
-											{
-												isShippingCalculatorEnabled,
-												showRateAfterTaxName,
-											}
+											{}
 										),
 										createBlock(
 											'woocommerce/cart-express-payment-block'

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx → assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { CartExpressPayment } from '../../../payment-methods';
+import { CartExpressPayment } from '../../../cart-checkout/payment-methods';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const { cartNeedsPayment } = useStoreCart();

assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;

assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx → assets/js/blocks/cart/inner-blocks/cart-items-block/edit.tsx

@@ -8,7 +8,10 @@ import type { TemplateArray } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );

assets/js/blocks/cart/inner-blocks/cart-line-items-block/frontend.tsx

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;