Adds Proceed to Checkout block to Cart i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4783)

* setup basic column blocks

* fix classnames

* move hacks back

* dubplciate columns

* add proceed to checkout block

* dub code

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx

@@ -10,7 +10,6 @@ import { PanelBody, ToggleControl, Notice } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
 import ViewSwitcher from '@woocommerce/editor-components/view-switcher';
-import PageSelector from '@woocommerce/editor-components/page-selector';
 import { CART_PAGE_ID } from '@woocommerce/block-settings';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import {
@@ -18,8 +17,8 @@ import {
 	useEditorContext,
 	CartProvider,
 } from '@woocommerce/base-context';
-import { createInterpolateElement, useRef } from '@wordpress/element';
-import { getAdminLink } from '@woocommerce/settings';
+import { createInterpolateElement } from '@wordpress/element';
+import { getAdminLink, getSetting } from '@woocommerce/settings';
 import { previewCart } from '@woocommerce/resource-previews';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 
@@ -30,9 +29,8 @@ import './editor.scss';
 import { Columns } from './columns';
 
 const BlockSettings = ( { attributes, setAttributes } ) => {
-	const { checkoutPageId, hasDarkControls } = attributes;
+	const { isShippingCalculatorEnabled, showRateAfterTaxName } = attributes;
 	const { currentPostId } = useEditorContext();
-	const { current: savedCheckoutPageId } = useRef( checkoutPageId );
 	return (
 		<InspectorControls>
 			{ currentPostId !== CART_PAGE_ID && (
@@ -61,45 +59,55 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
 					) }
 				</Notice>
 			) }
-			{ ! (
-				currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
-			) && (
-				<PageSelector
-					pageId={ checkoutPageId }
-					setPageId={ ( id ) =>
-						setAttributes( { checkoutPageId: id } )
-					}
-					labels={ {
-						title: __(
-							'Proceed to Checkout button',
+			{ getSetting( 'shippingEnabled', true ) && (
+				<PanelBody
+					title={ __(
+						'Shipping rates',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Shipping calculator',
 							'woo-gutenberg-products-block'
-						),
-						default: __(
-							'WooCommerce Checkout Page',
+						) }
+						help={ __(
+							'Allow customers to estimate shipping by entering their address.',
 							'woo-gutenberg-products-block'
-						),
-					} }
-				/>
+						) }
+						checked={ isShippingCalculatorEnabled }
+						onChange={ () =>
+							setAttributes( {
+								isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
+							} )
+						}
+					/>
+				</PanelBody>
 			) }
-			<PanelBody title={ __( 'Style', 'woo-gutenberg-products-block' ) }>
-				<ToggleControl
-					label={ __(
-						'Dark mode inputs',
-						'woo-gutenberg-products-block'
-					) }
-					help={ __(
-						'Inputs styled specifically for use on dark background colors.',
-						'woo-gutenberg-products-block'
-					) }
-					checked={ hasDarkControls }
-					onChange={ () =>
-						setAttributes( {
-							hasDarkControls: ! hasDarkControls,
-						} )
-					}
-				/>
-			</PanelBody>
-			<CartCheckoutFeedbackPrompt />
+			{ getSetting( 'taxesEnabled' ) &&
+				getSetting( 'displayItemizedTaxes', false ) &&
+				! getSetting( 'displayCartPricesIncludingTax', false ) && (
+					<PanelBody
+						title={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
+					>
+						<ToggleControl
+							label={ __(
+								'Show rate after tax name',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Show the percentage rate alongside each tax line in the summary.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ showRateAfterTaxName }
+							onChange={ () =>
+								setAttributes( {
+									showRateAfterTaxName: ! showRateAfterTaxName,
+								} )
+							}
+						/>
+					</PanelBody>
+				) }
 		</InspectorControls>
 	);
 };
@@ -134,7 +142,10 @@ const CartEditor = ( { className, attributes, setAttributes } ) => {
 		[
 			'woocommerce/cart-totals-block',
 			{},
-			[ [ 'woocommerce/cart-order-summary-block', {}, [] ] ],
+			[
+				[ 'woocommerce/cart-order-summary-block', {}, [] ],
+				[ 'woocommerce/proceed-to-checkout-block', {}, [] ],
+			],
 		],
 	];
 	return (

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx

@@ -5,3 +5,4 @@ import './cart-items-block';
 import './cart-totals-block';
 import './cart-line-items-block';
 import './cart-order-summary-block';
+import './proceed-to-checkout-block';

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/attributes.tsx

@@ -0,0 +1,13 @@
+export default {
+	checkoutPageId: {
+		type: 'number',
+		default: 0,
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/block.json

@@ -0,0 +1,25 @@
+{
+	"name": "woocommerce/proceed-to-checkout-block",
+	"version": "1.0.0",
+	"title": "Proceed to checkout",
+	"description": "Allow customers proceed to Checkout.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-totals-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/block.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import CheckoutButton from '../../checkout-button';
+
+const Block = ( {
+	checkoutPageId,
+}: {
+	checkoutPageId: number;
+} ): JSX.Element => {
+	return (
+		<CheckoutButton
+			link={ getSetting( 'page-' + checkoutPageId, false ) }
+		/>
+	);
+};
+
+export default Block;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/edit.tsx

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import PageSelector from '@woocommerce/editor-components/page-selector';
+import { Disabled } from '@wordpress/components';
+import { CART_PAGE_ID } from '@woocommerce/block-settings';
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { useBlockPropsWithLocking } from '../../hacks';
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		checkoutPageId: number;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const blockProps = useBlockPropsWithLocking( { attributes } );
+	const { checkoutPageId = 0 } = attributes;
+	const { current: savedCheckoutPageId } = useRef( checkoutPageId );
+	const currentPostId = useSelect(
+		( select ) => {
+			if ( ! savedCheckoutPageId ) {
+				const store = select( 'core/editor' );
+				return store.getCurrentPostId();
+			}
+			return savedCheckoutPageId;
+		},
+		[ savedCheckoutPageId ]
+	);
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				{ ! (
+					currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
+				) && (
+					<PageSelector
+						pageId={ checkoutPageId }
+						setPageId={ ( id ) =>
+							setAttributes( { checkoutPageId: id } )
+						}
+						labels={ {
+							title: __(
+								'Proceed to Checkout button',
+								'woo-gutenberg-products-block'
+							),
+							default: __(
+								'WooCommerce Checkout Page',
+								'woo-gutenberg-products-block'
+							),
+						} }
+					/>
+				) }
+			</InspectorControls>
+			<Disabled>
+				<Block checkoutPageId={ checkoutPageId } />
+			</Disabled>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/frontend.tsx

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon icon={ button } />,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );