Update shipping calculator wording and Cart/Checkout order summary title (#51072)
* Update isAddressComplete to allow only specific fields to be checked * Update tests for isAddressComplete * Update wording on "enter address" prompt in Cart sidebar * Update Shipping to Delivery in cart & checkout shipping total * Only check the city, state, country, & postcode fields in shipping calc * Update wording in the "Ships to" section of cart/checkout sidebar * Update shipping calculator button to say delivery * Update tests to use new strings * Remove test that was falsely passing anyway This test checked for presence of a string that wasn't in the codebase. It also doesn't seem like a valid test. Why would we want to remove the button just because default rates are available? * Add changelog * Left align text in shipping calculator button It floats weirdly in the middle with the new text changes * Update text in tests * Update wording in unit tests * Update shipping calculator text in test * Update shipping text in test * Update use of shipping in tests * Skip test with no translation available * Lint fixes --------- Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
This commit is contained in:
Thomas Roberts
GitHub
parent
acdf296215
commit
72112bd5d4
|
|
@ -19,7 +19,7 @@ const ShippingLocation = ( {
|
|||
<span className="wc-block-components-shipping-address">
|
||||
{ sprintf(
|
||||
/* translators: %s location. */
|
||||
__( 'Shipping to %s', 'woocommerce' ),
|
||||
__( 'Delivers to %s', 'woocommerce' ),
|
||||
formattedLocation
|
||||
) + ' ' }
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,12 @@ export const TotalsShipping = ( {
|
|||
.flatMap( ( rate ) => rate.name );
|
||||
}
|
||||
);
|
||||
const addressComplete = isAddressComplete( shippingAddress );
|
||||
const addressComplete = isAddressComplete( shippingAddress, [
|
||||
'state',
|
||||
'country',
|
||||
'postcode',
|
||||
'city',
|
||||
] );
|
||||
const shippingMethodsMissing = areShippingMethodsMissing(
|
||||
hasRates,
|
||||
prefersCollection,
|
||||
|
|
@ -100,7 +105,7 @@ export const TotalsShipping = ( {
|
|||
) }
|
||||
>
|
||||
<TotalsItem
|
||||
label={ __( 'Shipping', 'woocommerce' ) }
|
||||
label={ __( 'Delivery', 'woocommerce' ) }
|
||||
value={
|
||||
! shippingMethodsMissing && cartHasCalculatedShipping
|
||||
? // if address is not complete, display the link to add an address.
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export const ShippingAddress = ( {
|
|||
|
||||
const label = hasFormattedAddress
|
||||
? __( 'Change address', 'woocommerce' )
|
||||
: __( 'Calculate shipping for your location', 'woocommerce' );
|
||||
: __( 'Enter address to check delivery options', 'woocommerce' );
|
||||
const formattedLocation = formatShippingAddress( shippingAddress );
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,10 @@ export const ShippingPlaceholder = ( {
|
|||
|
||||
return (
|
||||
<CalculatorButton
|
||||
label={ __( 'Add an address for shipping options', 'woocommerce' ) }
|
||||
label={ __(
|
||||
'Enter address to check delivery options',
|
||||
'woocommerce'
|
||||
) }
|
||||
isShippingCalculatorOpen={ isShippingCalculatorOpen }
|
||||
setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
padding: 0;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.wc-block-components-totals-shipping__change-address-button {
|
||||
@include link-button();
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ describe( 'TotalsShipping', () => {
|
|||
);
|
||||
expect(
|
||||
screen.getByText(
|
||||
'Shipping to W1T 4JG, London, United Kingdom (UK)'
|
||||
'Delivers to W1T 4JG, London, United Kingdom (UK)'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
expect( screen.getByText( 'Change address' ) ).toBeInTheDocument();
|
||||
|
|
@ -368,57 +368,9 @@ describe( 'TotalsShipping', () => {
|
|||
screen.queryByText( 'Change address' )
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText( 'Add an address for shipping options' )
|
||||
screen.getByText( 'Enter address to check delivery options' )
|
||||
).toBeInTheDocument();
|
||||
} );
|
||||
it( 'does not show the calculator button when default rates are available and no address has been entered', () => {
|
||||
baseContextHooks.useStoreCart.mockReturnValue( {
|
||||
cartItems: mockPreviewCart.items,
|
||||
cartTotals: [ mockPreviewCart.totals ],
|
||||
cartCoupons: mockPreviewCart.coupons,
|
||||
cartFees: mockPreviewCart.fees,
|
||||
cartNeedsShipping: mockPreviewCart.needs_shipping,
|
||||
shippingRates: mockPreviewCart.shipping_rates,
|
||||
shippingAddress: {
|
||||
...shippingAddress,
|
||||
city: '',
|
||||
country: '',
|
||||
postcode: '',
|
||||
},
|
||||
billingAddress: mockPreviewCart.billing_address,
|
||||
cartHasCalculatedShipping: mockPreviewCart.has_calculated_shipping,
|
||||
isLoadingRates: false,
|
||||
} );
|
||||
render(
|
||||
<SlotFillProvider>
|
||||
<TotalsShipping
|
||||
currency={ {
|
||||
code: 'USD',
|
||||
symbol: '$',
|
||||
minorUnit: 2,
|
||||
decimalSeparator: '.',
|
||||
prefix: '',
|
||||
suffix: '',
|
||||
thousandSeparator: ', ',
|
||||
} }
|
||||
values={ {
|
||||
total_shipping: '0',
|
||||
total_shipping_tax: '0',
|
||||
} }
|
||||
showCalculator={ true }
|
||||
showRateSelector={ true }
|
||||
isCheckout={ false }
|
||||
className={ '' }
|
||||
/>
|
||||
</SlotFillProvider>
|
||||
);
|
||||
expect(
|
||||
screen.queryByText( 'Change address' )
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText( 'Add an address for shipping options' )
|
||||
).not.toBeInTheDocument();
|
||||
} );
|
||||
it( 'does show the calculator button when default rates are available and has formatted address', () => {
|
||||
baseContextHooks.useStoreCart.mockReturnValue( {
|
||||
cartItems: mockPreviewCart.items,
|
||||
|
|
@ -463,7 +415,7 @@ describe( 'TotalsShipping', () => {
|
|||
);
|
||||
expect( screen.queryByText( 'Change address' ) ).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText( 'Add an address for shipping options' )
|
||||
screen.queryByText( 'Enter address to check delivery options' )
|
||||
).not.toBeInTheDocument();
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ describe( 'ShippingAddress', () => {
|
|||
shippingAddress={ testShippingAddress }
|
||||
/>
|
||||
);
|
||||
expect( screen.getByText( /Shipping to 94107/ ) ).toBeInTheDocument();
|
||||
expect( screen.getByText( /Delivers to 94107/ ) ).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText( /Collection from/ )
|
||||
).not.toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,12 @@ import {
|
|||
type CartResponseShippingAddress,
|
||||
isObject,
|
||||
} from '@woocommerce/types';
|
||||
import { ShippingAddress, BillingAddress } from '@woocommerce/settings';
|
||||
import {
|
||||
ShippingAddress,
|
||||
BillingAddress,
|
||||
CoreAddress,
|
||||
KeyedFormField,
|
||||
} from '@woocommerce/settings';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import {
|
||||
SHIPPING_COUNTRIES,
|
||||
|
|
@ -181,9 +186,15 @@ export const formatShippingAddress = (
|
|||
|
||||
/**
|
||||
* Checks that all required fields in an address are completed based on the settings in countryLocale.
|
||||
*
|
||||
* @param {Object} address The address to check.
|
||||
* @param {Array} keysToCheck Optional override to include only specific keys for checking.
|
||||
* If there are other required fields in the address, but not specified in this arg then
|
||||
* they will be ignored.
|
||||
*/
|
||||
export const isAddressComplete = (
|
||||
address: ShippingAddress | BillingAddress
|
||||
address: ShippingAddress | BillingAddress,
|
||||
keysToCheck: ( keyof CoreAddress )[] = []
|
||||
): boolean => {
|
||||
if ( ! address.country ) {
|
||||
return false;
|
||||
|
|
@ -194,7 +205,17 @@ export const isAddressComplete = (
|
|||
address.country
|
||||
);
|
||||
|
||||
return addressForm.every(
|
||||
// Filter the address form so only fields from the keysToCheck arg remain, if that arg is empty, then default to the
|
||||
// full address form.
|
||||
const filteredAddressForm =
|
||||
keysToCheck.length > 0
|
||||
? ( Object.values( addressForm ) as KeyedFormField[] ).filter(
|
||||
( { key } ) =>
|
||||
keysToCheck.includes( key as keyof CoreAddress )
|
||||
)
|
||||
: addressForm;
|
||||
|
||||
return filteredAddressForm.every(
|
||||
( { key = '', hidden = false, required = false } ) => {
|
||||
if ( hidden || ! required ) {
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -106,6 +106,31 @@ describe( 'isAddressComplete', () => {
|
|||
address.state = 'CA';
|
||||
expect( isAddressComplete( address ) ).toBe( true );
|
||||
} );
|
||||
|
||||
it( 'Correctly assesses only fields specified in the keysToCheck arg', () => {
|
||||
const address = {
|
||||
first_name: 'John',
|
||||
last_name: 'Doe',
|
||||
company: 'Company',
|
||||
address_1: '409 Main Street',
|
||||
address_2: 'Apt 1',
|
||||
city: 'California',
|
||||
postcode: '90210',
|
||||
country: 'US',
|
||||
state: '',
|
||||
email: 'john.doe@company',
|
||||
phone: '+1234567890',
|
||||
};
|
||||
// US address requires state, but if we skip it in keysToCheck it should validate.
|
||||
expect(
|
||||
isAddressComplete( address, [
|
||||
'first_name',
|
||||
'last_name',
|
||||
'city',
|
||||
'postcode',
|
||||
] )
|
||||
).toBe( true );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'formatShippingAddress', () => {
|
||||
|
|
|
|||
|
|
@ -517,7 +517,7 @@ describe( 'Checkout Order Summary', () => {
|
|||
await findByText(
|
||||
container,
|
||||
textContentMatcherAcrossSiblings(
|
||||
'Shipping $40.00 Free shipping'
|
||||
'Delivery $40.00 Free shipping'
|
||||
)
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ test.describe( 'Shopper → Shipping', () => {
|
|||
await userFrontendUtils.goToCart();
|
||||
|
||||
await expect(
|
||||
userPage.getByLabel( 'Add an address for shipping options' )
|
||||
userPage.getByLabel( 'Enter address to check delivery options' )
|
||||
).toBeVisible();
|
||||
} );
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,8 @@ test.describe( 'Shopper → Translations', () => {
|
|||
).toBeVisible();
|
||||
|
||||
await expect( page.getByText( 'Subtotaal' ) ).toBeVisible();
|
||||
await expect( page.getByText( 'Verzending' ) ).toBeVisible();
|
||||
// TODO: Skipped test for now because translation is not ready. New string will be included with WC 9.4 - https://github.com/woocommerce/woocommerce/issues/51089
|
||||
//await expect( page.getByText( 'Verzending' ) ).toBeVisible();
|
||||
|
||||
await expect(
|
||||
page.getByText( 'Totaal', { exact: true } )
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Updated wording on the Cart/Checkout shipping sidebars
|
||||
|
|
@ -140,7 +140,9 @@ test.describe(
|
|||
await page.goto( cartBlockPage.slug );
|
||||
|
||||
// Set shipping country to Netherlands
|
||||
await page.getByLabel( 'Add an address for shipping' ).click();
|
||||
await page
|
||||
.getByLabel( 'Enter address to check delivery options' )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'combobox' )
|
||||
.first()
|
||||
|
|
@ -174,7 +176,9 @@ test.describe(
|
|||
await page.goto( cartBlockPage.slug );
|
||||
|
||||
// Set shipping country to Portugal
|
||||
await page.getByLabel( 'Add an address for shipping' ).click();
|
||||
await page
|
||||
.getByLabel( 'Enter address to check delivery options' )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'combobox' )
|
||||
.first()
|
||||
|
|
@ -188,7 +192,7 @@ test.describe(
|
|||
page.getByRole( 'group' ).getByText( 'Flat rate' )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByText( 'Shipping$5.00Flat' )
|
||||
page.getByText( 'Delivery$5.00Flat' )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByText( `$${ firstProductWithFlatRate }` )
|
||||
|
|
@ -202,7 +206,7 @@ test.describe(
|
|||
|
||||
// Verify updated shipping costs
|
||||
await expect(
|
||||
page.getByText( 'ShippingFreeLocal' )
|
||||
page.getByText( 'DeliveryFreeLocal' )
|
||||
).toBeVisible();
|
||||
await expect( page.getByText( '$' ).nth( 2 ) ).toContainText(
|
||||
firstProductPrice
|
||||
|
|
@ -220,7 +224,9 @@ test.describe(
|
|||
await page.goto( cartBlockPage.slug );
|
||||
|
||||
// Set shipping country to Portugal
|
||||
await page.getByLabel( 'Add an address for shipping' ).click();
|
||||
await page
|
||||
.getByLabel( 'Enter address to check delivery options' )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'combobox' )
|
||||
.first()
|
||||
|
|
@ -254,7 +260,9 @@ test.describe(
|
|||
await page.goto( cartBlockPage.slug );
|
||||
|
||||
// Set shipping country to Portugal
|
||||
await page.getByLabel( 'Add an address for shipping' ).click();
|
||||
await page
|
||||
.getByLabel( 'Enter address to check delivery options' )
|
||||
.click();
|
||||
await page
|
||||
.getByRole( 'combobox' )
|
||||
.first()
|
||||
|
|
@ -268,7 +276,7 @@ test.describe(
|
|||
page.getByRole( 'group' ).getByText( 'Flat rate' )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByText( 'Shipping$5.00Flat' )
|
||||
page.getByText( 'Delivery$5.00Flat' )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page.getByText(
|
||||
|
|
@ -288,7 +296,7 @@ test.describe(
|
|||
|
||||
// Verify updated shipping costs
|
||||
await expect(
|
||||
page.getByText( 'ShippingFreeLocal' )
|
||||
page.getByText( 'DeliveryFreeLocal' )
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
page
|
||||
|
|
|
|||
Loading…
Reference in New Issue