diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts index 6acfa8a7150..5fb7e2899ab 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts +++ b/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 ) => - select( CHECKOUT_STORE_KEY ).getUseShippingAsBilling() + const { useShippingAsBilling, prefersCollection } = useSelect( + ( 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, - showBillingFields: ! needsShipping || ! useShippingAsBilling, + showShippingFields: + ! forcedBillingAddress && needsShipping && ! prefersCollection, + showBillingFields: + ! needsShipping || ! useShippingAsBilling || prefersCollection, forcedBillingAddress, }; }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-collection-method/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-collection-method/edit.tsx index 07c7f17128d..b2019fa4719 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-collection-method/edit.tsx +++ b/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 ( ) => 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 (