From 3dd6a4037bb076d60156ee1ccdc97c9a768f64e8 Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Wed, 31 Jul 2024 15:17:21 +0200 Subject: [PATCH] Display address card for virtual products if shopper's address is known (#50127) * Display address card for virtual products * Remove obsolete dependency * Optimise dependencies * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Adjust core e2e tests --------- Co-authored-by: github-actions --- .../js/blocks/checkout/address-card/index.tsx | 6 +++- .../checkout-billing-address-block/block.tsx | 4 ++- .../assets/js/blocks/checkout/test/block.js | 34 +++++++++++++++++-- ...-display-address-card-for-virtual-products | 4 +++ .../tests/shopper/checkout-block.spec.js | 6 ++-- 5 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 plugins/woocommerce/changelog/50127-fix-47557-display-address-card-for-virtual-products diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx index e88ab5efe6a..c6b97fe1e51 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx @@ -52,6 +52,10 @@ const AddressCard = ( { address, formatToUse ); + const label = + target === 'shipping' + ? __( 'Edit shipping address', 'woocommerce' ) + : __( 'Edit billing address', 'woocommerce' ); return (
@@ -82,7 +86,7 @@ const AddressCard = ( { className="wc-block-components-address-card__edit" aria-controls={ target } aria-expanded={ isExpanded } - aria-label={ __( 'Edit address', 'woocommerce' ) } + aria-label={ label } onClick={ ( e ) => { e.preventDefault(); onEdit(); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx index c59bc46022c..bcdcbac3e69 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx @@ -7,6 +7,7 @@ import { useCheckoutAddress, useEditorContext, noticeContexts, + useShippingData, } from '@woocommerce/base-context'; import Noninteractive from '@woocommerce/base-components/noninteractive'; import type { ShippingAddress, FormFieldsConfig } from '@woocommerce/settings'; @@ -42,6 +43,7 @@ const Block = ( { useBillingAsShipping, } = useCheckoutAddress(); const { isEditor } = useEditorContext(); + const { needsShipping } = useShippingData(); // Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled. useEffectOnce( () => { @@ -110,7 +112,7 @@ const Block = ( { shippingAddress ); const defaultEditingAddress = - isEditor || ! hasAddress || billingMatchesShipping; + isEditor || ! hasAddress || ( needsShipping && billingMatchesShipping ); return ( <> diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/test/block.js b/plugins/woocommerce-blocks/assets/js/blocks/checkout/test/block.js index 88a366d2294..bb4e72e4564 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/test/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/test/block.js @@ -98,7 +98,11 @@ const CheckoutBlock = () => { - + @@ -148,7 +152,7 @@ describe( 'Testing Checkout', () => { expect( fetchMock ).toHaveBeenCalledTimes( 1 ); } ); - it( 'Renders the address card if the address is filled', async () => { + it( 'Renders the shipping address card if the address is filled and the cart contains a shippable product', async () => { act( () => { const cartWithAddress = { ...previewCart, @@ -190,7 +194,7 @@ describe( 'Testing Checkout', () => { await waitFor( () => expect( fetchMock ).toHaveBeenCalled() ); expect( - screen.getByRole( 'button', { name: 'Edit address' } ) + screen.getByRole( 'button', { name: 'Edit shipping address' } ) ).toBeInTheDocument(); expect( @@ -258,6 +262,30 @@ describe( 'Testing Checkout', () => { expect( fetchMock ).toHaveBeenCalledTimes( 1 ); } ); + it( 'Renders the billing address card if the address is filled and the cart contains a virtual product', async () => { + act( () => { + const cartWithVirtualProduct = { + ...previewCart, + needs_shipping: false, + }; + fetchMock.mockResponse( ( req ) => { + if ( req.url.match( /wc\/store\/v1\/cart/ ) ) { + return Promise.resolve( + JSON.stringify( cartWithVirtualProduct ) + ); + } + return Promise.resolve( '' ); + } ); + } ); + render( ); + + await waitFor( () => expect( fetchMock ).toHaveBeenCalled() ); + + expect( + screen.getByRole( 'button', { name: 'Edit billing address' } ) + ).toBeInTheDocument(); + } ); + it( 'Ensures checkbox labels have unique IDs', async () => { await act( async () => { // Set required settings diff --git a/plugins/woocommerce/changelog/50127-fix-47557-display-address-card-for-virtual-products b/plugins/woocommerce/changelog/50127-fix-47557-display-address-card-for-virtual-products new file mode 100644 index 00000000000..eabec756bb8 --- /dev/null +++ b/plugins/woocommerce/changelog/50127-fix-47557-display-address-card-for-virtual-products @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Display address card for virtual products if shopper's address is known \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block.spec.js index 26b7e7f4b22..24ce0cb50f6 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/shopper/checkout-block.spec.js @@ -440,7 +440,7 @@ test.describe( // verify shipping details await page - .getByLabel( 'Edit address', { exact: true } ) + .getByLabel( 'Edit shipping address', { exact: true } ) .first() .click(); await expect( @@ -471,7 +471,7 @@ test.describe( // verify billing details await page - .getByLabel( 'Edit address', { exact: true } ) + .getByLabel( 'Edit billing address', { exact: true } ) .last() .click(); await expect( @@ -782,7 +782,7 @@ test.describe( ).toBeVisible(); await page - .getByLabel( 'Edit address', { exact: true } ) + .getByLabel( 'Edit shipping address', { exact: true } ) .first() .click();