Remove WC Core shipping settings if Cart/Checkout blocks are in use

assets/js/base/components/state-input/StateInputProps.ts

@@ -8,6 +8,7 @@ export interface StateInputProps {
 	onChange: ( value: string ) => void;
 	required?: boolean;
 	errorMessage?: string;
+	errorId?: string;
 }
 
 export type StateInputWithStatesProps = StateInputProps & {

assets/js/base/components/state-input/state-input.tsx

@@ -36,6 +36,7 @@ const StateInput = ( {
 	autoComplete = 'off',
 	value = '',
 	required = false,
+	errorId = '',
 }: StateInputWithStatesProps ): JSX.Element => {
 	const countryStates = states[ country ];
 	const options = useMemo(
@@ -102,6 +103,7 @@ const StateInput = ( {
 					'Please select a state.',
 					'woo-gutenberg-products-block'
 				) }
+				errorId={ errorId }
 				required={ required }
 				autoComplete={ autoComplete }
 			/>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx

@@ -44,4 +44,8 @@ export default {
 			remove: true,
 		},
 	},
+	shippingCostRequiresAddress: {
+		type: 'boolean',
+		default: false,
+	},
 };

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.json

@@ -19,6 +19,10 @@
 				"remove": true,
 				"move": true
 			}
+		},
+		"shippingCostRequiresAddress": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"parent": [ "woocommerce/checkout-fields-block" ],

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx

@@ -17,6 +17,7 @@ import './style.scss';
 import { RatePrice, getLocalPickupPrices, getShippingPrices } from './shared';
 import type { minMaxPrices } from './shared';
 import { defaultLocalPickupText, defaultShippingText } from './constants';
+import { shippingAddressHasValidationErrors } from '../../../../data/cart/utils';
 
 const LocalPickupSelector = ( {
 	checked,
@@ -71,15 +72,19 @@ const ShippingSelector = ( {
 	showPrice,
 	showIcon,
 	toggleText,
+	shippingCostRequiresAddress = false,
 }: {
 	checked: string;
 	rate: minMaxPrices;
 	showPrice: boolean;
 	showIcon: boolean;
+	shippingCostRequiresAddress: boolean;
 	toggleText: string;
 } ) => {
+	const rateShouldBeHidden =
+		shippingCostRequiresAddress && shippingAddressHasValidationErrors();
 	const Price =
-		rate.min === undefined ? (
+		rate.min === undefined || rateShouldBeHidden ? (
 			<span className="wc-block-checkout__shipping-method-option-price">
 				{ __(
 					'calculated with an address',
@@ -122,11 +127,13 @@ const Block = ( {
 	showIcon,
 	localPickupText,
 	shippingText,
+	shippingCostRequiresAddress = false,
 }: {
 	checked: string;
 	onChange: ( value: string ) => void;
 	showPrice: boolean;
 	showIcon: boolean;
+	shippingCostRequiresAddress: boolean;
 	localPickupText: string;
 	shippingText: string;
 } ): JSX.Element | null => {
@@ -145,6 +152,7 @@ const Block = ( {
 				rate={ getShippingPrices( shippingRates[ 0 ]?.shipping_rates ) }
 				showPrice={ showPrice }
 				showIcon={ showIcon }
+				shippingCostRequiresAddress={ shippingCostRequiresAddress }
 				toggleText={ shippingText || defaultShippingText }
 			/>
 			<LocalPickupSelector

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx

@@ -23,6 +23,8 @@ import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
+import { Attributes } from '@woocommerce/blocks/checkout/types';
+import { updateAttributeInSiblingBlock } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -152,7 +154,9 @@ const ShippingSelector = ( {
 export const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: {
+	clientId: string;
 	attributes: {
 		title: string;
 		description: string;
@@ -163,9 +167,16 @@ export const Edit = ( {
 		showPrice: boolean;
 		showIcon: boolean;
 		className: string;
+		shippingCostRequiresAddress: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element | null => {
+	const toggleAttribute = ( key: keyof Attributes ): void => {
+		const newAttributes = {} as Partial< Attributes >;
+		newAttributes[ key ] = ! ( attributes[ key ] as boolean );
+		setAttributes( newAttributes );
+	};
+
 	const { setPrefersCollection } = useDispatch( CHECKOUT_STORE_KEY );
 	const { prefersCollection } = useSelect( ( select ) => {
 		const checkoutStore = select( CHECKOUT_STORE_KEY );
@@ -210,6 +221,30 @@ export const Edit = ( {
 			) }
 		>
 			<InspectorControls>
+				<PanelBody
+					title={ __(
+						'Calculations',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Hide shipping costs until an address is entered',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ attributes.shippingCostRequiresAddress }
+						onChange={ ( selected ) => {
+							updateAttributeInSiblingBlock(
+								clientId,
+								'shippingCostRequiresAddress',
+								selected,
+								'woocommerce/checkout-shipping-methods-block'
+							);
+
+							toggleAttribute( 'shippingCostRequiresAddress' );
+						} }
+					/>
+				</PanelBody>
 				<PanelBody
 					title={ __( 'Appearance', 'woo-gutenberg-products-block' ) }
 				>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/frontend.tsx

@@ -25,10 +25,12 @@ const FrontendBlock = ( {
 	showIcon,
 	shippingText,
 	localPickupText,
+	shippingCostRequiresAddress,
 }: {
 	title: string;
 	description: string;
 	showStepNumber: boolean;
+	shippingCostRequiresAddress: boolean;
 	children: JSX.Element;
 	className?: string;
 	showPrice: boolean;
@@ -90,6 +92,7 @@ const FrontendBlock = ( {
 				showIcon={ showIcon }
 				localPickupText={ localPickupText }
 				shippingText={ shippingText }
+				shippingCostRequiresAddress={ shippingCostRequiresAddress }
 			/>
 			{ children }
 		</FormStep>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/attributes.tsx

@@ -24,4 +24,8 @@ export default {
 			remove: true,
 		},
 	},
+	shippingCostRequiresAddress: {
+		type: 'boolean',
+		default: false,
+	},
 };

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.json

@@ -19,6 +19,10 @@
 				"remove": true,
 				"move": true
 			}
+		},
+		"shippingCostRequiresAddress": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"parent": [ "woocommerce/checkout-fields-block" ],

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -21,11 +21,14 @@ import type {
 	CartShippingPackageShippingRate,
 } from '@woocommerce/types';
 import type { ReactElement } from 'react';
+import { useSelect } from '@wordpress/data';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { shippingAddressHasValidationErrors } from '../../../../data/cart/utils';
 
 /**
  * Renders a shipping rate control option.
@@ -52,7 +55,10 @@ const renderShippingRatesControlOption = (
 	};
 };
 
-const Block = ( { noShippingPlaceholder = null } ): ReactElement | null => {
+const Block = ( {
+	noShippingPlaceholder = null,
+	shippingCostRequiresAddress = false,
+} ): ReactElement | null => {
 	const { isEditor } = useEditorContext();
 
 	const {
@@ -63,6 +69,10 @@ const Block = ( { noShippingPlaceholder = null } ): ReactElement | null => {
 		isCollectable,
 	} = useShippingData();
 
+	const shippingAddressPushed = useSelect( ( select ) => {
+		return select( CART_STORE_KEY ).getFullShippingAddressPushed();
+	} );
+
 	const filteredShippingRates = isCollectable
 		? shippingRates.map( ( shippingRatesPackage ) => {
 				return {
@@ -81,13 +91,15 @@ const Block = ( { noShippingPlaceholder = null } ): ReactElement | null => {
 		return null;
 	}
 
+	const shippingAddressIsComplete = ! shippingAddressHasValidationErrors();
+
 	const shippingRatesPackageCount =
 		getShippingRatesPackageCount( shippingRates );
 
 	if (
-		! isEditor &&
-		! hasCalculatedShipping &&
-		! shippingRatesPackageCount
+		( ! hasCalculatedShipping && ! shippingRatesPackageCount ) ||
+		( shippingCostRequiresAddress &&
+			( ! shippingAddressPushed || ! shippingAddressIsComplete ) )
 	) {
 		return (
 			<p>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/edit.tsx

@@ -4,12 +4,14 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, ExternalLink } from '@wordpress/components';
+import { PanelBody, ExternalLink, ToggleControl } from '@wordpress/components';
 import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { Attributes } from '@woocommerce/blocks/checkout/types';
+import { updateAttributeInSiblingBlock } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
@@ -32,12 +34,15 @@ type shippingAdminLink = {
 export const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: {
+	clientId: string;
 	attributes: {
 		title: string;
 		description: string;
 		showStepNumber: boolean;
 		className: string;
+		shippingCostRequiresAddress: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element | null => {
@@ -54,6 +59,12 @@ export const Edit = ( {
 		return null;
 	}
 
+	const toggleAttribute = ( key: keyof Attributes ): void => {
+		const newAttributes = {} as Partial< Attributes >;
+		newAttributes[ key ] = ! ( attributes[ key ] as boolean );
+		setAttributes( newAttributes );
+	};
+
 	return (
 		<FormStepBlock
 			attributes={ attributes }
@@ -64,6 +75,29 @@ export const Edit = ( {
 			) }
 		>
 			<InspectorControls>
+				<PanelBody
+					title={ __(
+						'Calculations',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<ToggleControl
+						label={ __(
+							'Hide shipping costs until an address is entered',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ attributes.shippingCostRequiresAddress }
+						onChange={ ( selected ) => {
+							updateAttributeInSiblingBlock(
+								clientId,
+								'shippingCostRequiresAddress',
+								selected,
+								'woocommerce/checkout-shipping-method-block'
+							);
+							toggleAttribute( 'shippingCostRequiresAddress' );
+						} }
+					/>
+				</PanelBody>
 				{ globalShippingMethods.length > 0 && (
 					<PanelBody
 						title={ __(
@@ -129,7 +163,12 @@ export const Edit = ( {
 				) }
 			</InspectorControls>
 			<Noninteractive>
-				<Block noShippingPlaceholder={ <NoShippingPlaceholder /> } />
+				<Block
+					noShippingPlaceholder={ <NoShippingPlaceholder /> }
+					shippingCostRequiresAddress={
+						attributes.shippingCostRequiresAddress
+					}
+				/>
 			</Noninteractive>
 			<AdditionalFields block={ innerBlockAreas.SHIPPING_METHODS } />
 		</FormStepBlock>

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx

@@ -20,6 +20,7 @@ const FrontendBlock = ( {
 	showStepNumber,
 	children,
 	className,
+	shippingCostRequiresAddress = false,
 }: {
 	title: string;
 	description: string;
@@ -31,6 +32,7 @@ const FrontendBlock = ( {
 	showStepNumber: boolean;
 	children: JSX.Element;
 	className?: string;
+	shippingCostRequiresAddress: boolean;
 } ) => {
 	const checkoutIsProcessing = useSelect( ( select ) =>
 		select( CHECKOUT_STORE_KEY ).isProcessing()
@@ -53,7 +55,9 @@ const FrontendBlock = ( {
 			description={ description }
 			showStepNumber={ showStepNumber }
 		>
-			<Block />
+			<Block
+				shippingCostRequiresAddress={ shippingCostRequiresAddress }
+			/>
 			{ children }
 		</FormStep>
 	);

assets/js/data/cart/action-types.ts

@@ -1,5 +1,6 @@
 export const ACTION_TYPES = {
 	SET_CART_DATA: 'SET_CART_DATA',
+	SET_FULL_SHIPPING_ADDRESS_PUSHED: 'SET_FULL_SHIPPING_ADDRESS_PUSHED',
 	SET_ERROR_DATA: 'SET_ERROR_DATA',
 	APPLYING_COUPON: 'APPLYING_COUPON',
 	REMOVING_COUPON: 'REMOVING_COUPON',