Introduce Toggle between Shipping Options and Pickup Locations (https://github.com/woocommerce/woocommerce-blocks/pull/7308)

* prefersCollection controls shipping visibility

* Toggle shipping visibility based on prefersCollection

* Remove log

* Toggle in admin

plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts

@@ -39,8 +39,12 @@ interface CheckoutAddress {
  */
 export const useCheckoutAddress = (): CheckoutAddress => {
 	const { needsShipping } = useShippingData();
-	const useShippingAsBilling = useSelect( ( select ) =>
+	const { useShippingAsBilling, prefersCollection } = useSelect(
-		select( CHECKOUT_STORE_KEY ).getUseShippingAsBilling()
+		( select ) => ( {
+			useShippingAsBilling:
+				select( CHECKOUT_STORE_KEY ).getUseShippingAsBilling(),
+			prefersCollection: select( CHECKOUT_STORE_KEY ).prefersCollection(),
+		} )
 	);
 	const { __internalSetUseShippingAsBilling } =
 		useDispatch( CHECKOUT_STORE_KEY );
@@ -89,8 +93,10 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 		defaultAddressFields,
 		useShippingAsBilling,
 		setUseShippingAsBilling: __internalSetUseShippingAsBilling,
-		showShippingFields: ! forcedBillingAddress && needsShipping,
+		showShippingFields:
-		showBillingFields: ! needsShipping || ! useShippingAsBilling,
+			! forcedBillingAddress && needsShipping && ! prefersCollection,
+		showBillingFields:
+			! needsShipping || ! useShippingAsBilling || prefersCollection,
 		forcedBillingAddress,
 	};
 };

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-collection-method/edit.tsx

@@ -20,6 +20,8 @@ import {
 import { useShippingData } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -155,7 +157,13 @@ export const Edit = ( {
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const [ currentView, changeView ] = useState( 'shipping' );
+	const { setPrefersCollection } = useDispatch( CHECKOUT_STORE_KEY );
+	const { prefersCollection } = useSelect( ( select ) => {
+		const checkoutStore = select( CHECKOUT_STORE_KEY );
+		return {
+			prefersCollection: checkoutStore.prefersCollection(),
+		};
+	} );
 	const { showPrice, showIcon, className, localPickupText, shippingText } =
 		attributes;
 	const { shippingRates } = useShippingData();
@@ -165,6 +173,15 @@ export const Edit = ( {
 	const shippingStartingPrice = getShippingStartingPrice(
 		shippingRates[ 0 ]?.shipping_rates
 	);
+
+	const changeView = ( method: string ) => {
+		if ( method === 'pickup' ) {
+			setPrefersCollection( true );
+		} else {
+			setPrefersCollection( false );
+		}
+	};
+
 	return (
 		<FormStepBlock
 			attributes={ attributes }
@@ -215,10 +232,10 @@ export const Edit = ( {
 				className="wc-block-checkout__collection-method-container"
 				label="options"
 				onChange={ changeView }
-				checked={ currentView }
+				checked={ prefersCollection ? 'pickup' : 'shipping' }
 			>
 				<ShippingSelector
-					checked={ currentView }
+					checked={ prefersCollection ? 'pickup' : 'shipping' }
 					rate={ shippingStartingPrice }
 					showPrice={ showPrice }
 					showIcon={ showIcon }
@@ -226,7 +243,7 @@ export const Edit = ( {
 					toggleText={ shippingText }
 				/>
 				<LocalPickupSelector
-					checked={ currentView }
+					checked={ prefersCollection ? 'pickup' : 'shipping' }
 					rate={ localPickupStartingPrice }
 					showPrice={ showPrice }
 					showIcon={ showIcon }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx

@@ -3,6 +3,7 @@
  */
 import classnames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 /**
@@ -41,9 +42,11 @@ export const Edit = ( {
 	const { addressFieldControls: Controls } =
 		useCheckoutBlockControlsContext();
 	const { showShippingFields } = useCheckoutAddress();
+
 	if ( ! showShippingFields ) {
 		return null;
 	}
+
 	return (
 		<FormStepBlock
 			setAttributes={ setAttributes }

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

@@ -8,6 +8,7 @@ import { PanelBody, ExternalLink } 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';
 
 /**
@@ -37,7 +38,7 @@ export const Edit = ( {
 		className: string;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
+} ): JSX.Element | null => {
 	const globalShippingMethods = getSetting(
 		'globalShippingMethods'
 	) as shippingAdminLink[];
@@ -45,6 +46,12 @@ export const Edit = ( {
 		'activeShippingZones'
 	) as shippingAdminLink[];
 
+	const { showShippingFields } = useCheckoutAddress();
+
+	if ( ! showShippingFields ) {
+		return null;
+	}
+
 	return (
 		<FormStepBlock
 			attributes={ attributes }