diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx index eebdf257250..d7f44c21c28 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/edit.tsx @@ -19,7 +19,7 @@ import { CartProvider, } from '@woocommerce/base-context'; import { createInterpolateElement, useRef } from '@wordpress/element'; -import { getAdminLink, getSetting } from '@woocommerce/settings'; +import { getAdminLink } from '@woocommerce/settings'; import { previewCart } from '@woocommerce/resource-previews'; import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout'; @@ -30,12 +30,7 @@ import './editor.scss'; import { Columns } from './columns'; const BlockSettings = ( { attributes, setAttributes } ) => { - const { - isShippingCalculatorEnabled, - checkoutPageId, - hasDarkControls, - showRateAfterTaxName, - } = attributes; + const { checkoutPageId, hasDarkControls } = attributes; const { currentPostId } = useEditorContext(); const { current: savedCheckoutPageId } = useRef( checkoutPageId ); return ( @@ -66,55 +61,6 @@ const BlockSettings = ( { attributes, setAttributes } ) => { ) } ) } - { getSetting( 'shippingEnabled', true ) && ( - - - setAttributes( { - isShippingCalculatorEnabled: ! isShippingCalculatorEnabled, - } ) - } - /> - - ) } - { getSetting( 'taxesEnabled' ) && - getSetting( 'displayItemizedTaxes', false ) && - ! getSetting( 'displayCartPricesIncludingTax', false ) && ( - - - setAttributes( { - showRateAfterTaxName: ! showRateAfterTaxName, - } ) - } - /> - - ) } { ! ( currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0 ) && ( @@ -185,7 +131,11 @@ const CartEditor = ( { className, attributes, setAttributes } ) => { {}, [ [ 'woocommerce/cart-line-items-block', {}, [] ] ], ], - [ 'woocommerce/cart-totals-block', {}, [] ], + [ + 'woocommerce/cart-totals-block', + {}, + [ [ 'woocommerce/cart-order-summary-block', {}, [] ] ], + ], ]; return (
{ + const { cartFees, cartTotals, cartNeedsShipping } = useStoreCart(); + + const { + applyCoupon, + removeCoupon, + isApplyingCoupon, + isRemovingCoupon, + appliedCoupons, + } = useStoreCartCoupons(); + + const totalsCurrency = getCurrencyFromPriceResponse( cartTotals ); + + // Prepare props to pass to the ExperimentalOrderMeta slot fill. + // We need to pluck out receiveCart. + // eslint-disable-next-line no-unused-vars + const { extensions, ...cart } = useStoreCart(); + const slotFillProps = { + extensions, + cart, + }; + + const discountsSlotFillProps = { + extensions, + cart, + }; + + return ( + <> + + + + + + { getSetting( 'couponsEnabled', true ) && ( + + + + ) } + + { cartNeedsShipping && ( + + + + ) } + { ! getSetting( 'displayCartPricesIncludingTax', false ) && + parseInt( cartTotals.total_tax, 10 ) > 0 && ( + + + + ) } + + + + + + + ); +}; + +export default Block; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/edit.tsx new file mode 100644 index 00000000000..affac8bcbcc --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/edit.tsx @@ -0,0 +1,110 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import { Disabled, PanelBody, ToggleControl } from '@wordpress/components'; +import { getSetting } from '@woocommerce/settings'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { useBlockPropsWithLocking } from '../../hacks'; + +export const Edit = ( { + attributes, + setAttributes, +}: { + attributes: { + showRateAfterTaxName: boolean; + isShippingCalculatorEnabled: boolean; + lock: { + move: boolean; + remove: boolean; + }; + }; + setAttributes: ( attributes: Record< string, unknown > ) => void; +} ): JSX.Element => { + const { showRateAfterTaxName, isShippingCalculatorEnabled } = attributes; + const blockProps = useBlockPropsWithLocking( { attributes } ); + const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean; + const displayItemizedTaxes = getSetting( + 'displayItemizedTaxes', + false + ) as boolean; + const displayCartPricesIncludingTax = getSetting( + 'displayCartPricesIncludingTax', + false + ) as boolean; + return ( +
+ + { getSetting( 'shippingEnabled', true ) && ( + + + setAttributes( { + isShippingCalculatorEnabled: ! isShippingCalculatorEnabled, + } ) + } + /> + + ) } + { taxesEnabled && + displayItemizedTaxes && + ! displayCartPricesIncludingTax && ( + + + setAttributes( { + showRateAfterTaxName: ! showRateAfterTaxName, + } ) + } + /> + + ) } + + + + +
+ ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/index.tsx new file mode 100644 index 00000000000..6b497f9bf33 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/index.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { Icon, totals } from '@woocommerce/icons'; +import { registerFeaturePluginBlockType } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import { Edit, Save } from './edit'; +import attributes from './attributes'; +import metadata from './block.json'; + +registerFeaturePluginBlockType( metadata, { + icon: { + src: , + foreground: '#874FB9', + }, + attributes, + edit: Edit, + save: Save, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx index 06e387dba28..a790aad4254 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx @@ -4,3 +4,4 @@ import './cart-items-block'; import './cart-totals-block'; import './cart-line-items-block'; +import './cart-order-summary-block';