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 <github-actions@github.com>
This commit is contained in:
Niels Lange 2024-07-31 15:17:21 +02:00 committed by GitHub
parent 6e2fbcae52
commit 3dd6a4037b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 46 additions and 8 deletions

View File

@ -52,6 +52,10 @@ const AddressCard = ( {
address, address,
formatToUse formatToUse
); );
const label =
target === 'shipping'
? __( 'Edit shipping address', 'woocommerce' )
: __( 'Edit billing address', 'woocommerce' );
return ( return (
<div className="wc-block-components-address-card"> <div className="wc-block-components-address-card">
@ -82,7 +86,7 @@ const AddressCard = ( {
className="wc-block-components-address-card__edit" className="wc-block-components-address-card__edit"
aria-controls={ target } aria-controls={ target }
aria-expanded={ isExpanded } aria-expanded={ isExpanded }
aria-label={ __( 'Edit address', 'woocommerce' ) } aria-label={ label }
onClick={ ( e ) => { onClick={ ( e ) => {
e.preventDefault(); e.preventDefault();
onEdit(); onEdit();

View File

@ -7,6 +7,7 @@ import {
useCheckoutAddress, useCheckoutAddress,
useEditorContext, useEditorContext,
noticeContexts, noticeContexts,
useShippingData,
} from '@woocommerce/base-context'; } from '@woocommerce/base-context';
import Noninteractive from '@woocommerce/base-components/noninteractive'; import Noninteractive from '@woocommerce/base-components/noninteractive';
import type { ShippingAddress, FormFieldsConfig } from '@woocommerce/settings'; import type { ShippingAddress, FormFieldsConfig } from '@woocommerce/settings';
@ -42,6 +43,7 @@ const Block = ( {
useBillingAsShipping, useBillingAsShipping,
} = useCheckoutAddress(); } = useCheckoutAddress();
const { isEditor } = useEditorContext(); const { isEditor } = useEditorContext();
const { needsShipping } = useShippingData();
// Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled. // Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled.
useEffectOnce( () => { useEffectOnce( () => {
@ -110,7 +112,7 @@ const Block = ( {
shippingAddress shippingAddress
); );
const defaultEditingAddress = const defaultEditingAddress =
isEditor || ! hasAddress || billingMatchesShipping; isEditor || ! hasAddress || ( needsShipping && billingMatchesShipping );
return ( return (
<> <>

View File

@ -98,7 +98,11 @@ const CheckoutBlock = () => {
<Payment /> <Payment />
<AdditionalInformation /> <AdditionalInformation />
<OrderNote /> <OrderNote />
<Terms checkbox={ true } text={ termsCheckboxDefaultText } /> <Terms
checkbox={ true }
showSeparator={ false }
text={ termsCheckboxDefaultText }
/>
<Actions /> <Actions />
</Fields> </Fields>
<Totals> <Totals>
@ -148,7 +152,7 @@ describe( 'Testing Checkout', () => {
expect( fetchMock ).toHaveBeenCalledTimes( 1 ); 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( () => { act( () => {
const cartWithAddress = { const cartWithAddress = {
...previewCart, ...previewCart,
@ -190,7 +194,7 @@ describe( 'Testing Checkout', () => {
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() ); await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( expect(
screen.getByRole( 'button', { name: 'Edit address' } ) screen.getByRole( 'button', { name: 'Edit shipping address' } )
).toBeInTheDocument(); ).toBeInTheDocument();
expect( expect(
@ -258,6 +262,30 @@ describe( 'Testing Checkout', () => {
expect( fetchMock ).toHaveBeenCalledTimes( 1 ); 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( <CheckoutBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect(
screen.getByRole( 'button', { name: 'Edit billing address' } )
).toBeInTheDocument();
} );
it( 'Ensures checkbox labels have unique IDs', async () => { it( 'Ensures checkbox labels have unique IDs', async () => {
await act( async () => { await act( async () => {
// Set required settings // Set required settings

View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Display address card for virtual products if shopper's address is known

View File

@ -440,7 +440,7 @@ test.describe(
// verify shipping details // verify shipping details
await page await page
.getByLabel( 'Edit address', { exact: true } ) .getByLabel( 'Edit shipping address', { exact: true } )
.first() .first()
.click(); .click();
await expect( await expect(
@ -471,7 +471,7 @@ test.describe(
// verify billing details // verify billing details
await page await page
.getByLabel( 'Edit address', { exact: true } ) .getByLabel( 'Edit billing address', { exact: true } )
.last() .last()
.click(); .click();
await expect( await expect(
@ -782,7 +782,7 @@ test.describe(
).toBeVisible(); ).toBeVisible();
await page await page
.getByLabel( 'Edit address', { exact: true } ) .getByLabel( 'Edit shipping address', { exact: true } )
.first() .first()
.click(); .click();