Display the link to add the shipping address when shipping address is not available

assets/js/base/components/cart-checkout/shipping-location/index.tsx

@@ -2,56 +2,15 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { ShippingAddress, getSetting } from '@woocommerce/settings';
-import { decodeEntities } from '@wordpress/html-entities';
 
 interface ShippingLocationProps {
-	address: ShippingAddress;
+	formattedLocation: string | null;
 }
 
-/**
- * Shows a formatted shipping location.
- *
- * @param {Object} props         Incoming props for the component.
- * @param {Object} props.address Incoming address information.
- */
+// Shows a formatted shipping location.
 const ShippingLocation = ( {
-	address,
+	formattedLocation,
 }: ShippingLocationProps ): JSX.Element | null => {
-	// we bail early if we don't have an address.
-	if ( Object.values( address ).length === 0 ) {
-		return null;
-	}
-	const shippingCountries = getSetting( 'shippingCountries', {} ) as Record<
-		string,
-		string
-	>;
-	const shippingStates = getSetting( 'shippingStates', {} ) as Record<
-		string,
-		Record< string, string >
-	>;
-	const formattedCountry =
-		typeof shippingCountries[ address.country ] === 'string'
-			? decodeEntities( shippingCountries[ address.country ] )
-			: '';
-
-	const formattedState =
-		typeof shippingStates[ address.country ] === 'object' &&
-		typeof shippingStates[ address.country ][ address.state ] === 'string'
-			? decodeEntities(
-					shippingStates[ address.country ][ address.state ]
-			  )
-			: address.state;
-
-	const addressParts = [];
-
-	addressParts.push( address.postcode.toUpperCase() );
-	addressParts.push( address.city );
-	addressParts.push( formattedState );
-	addressParts.push( formattedCountry );
-
-	const formattedLocation = addressParts.filter( Boolean ).join( ', ' );
-
 	if ( ! formattedLocation ) {
 		return null;
 	}

assets/js/base/components/cart-checkout/totals/shipping/calculator-button.tsx

@@ -15,15 +15,20 @@ export const CalculatorButton = ( {
 	setIsShippingCalculatorOpen,
 }: CalculatorButtonProps ): JSX.Element => {
 	return (
-		<button
-			className="wc-block-components-totals-shipping__change-address-button"
-			onClick={ () => {
+		<a
+			role="button"
+			href="#wc-block-components-shipping-calculator-address__link"
+			className="wc-block-components-totals-shipping__change-address__link"
+			id="wc-block-components-totals-shipping__change-address__link"
+			onClick={ ( e ) => {
+				e.preventDefault();
 				setIsShippingCalculatorOpen( ! isShippingCalculatorOpen );
 			} }
+			aria-label={ label }
 			aria-expanded={ isShippingCalculatorOpen }
 		>
 			{ label }
-		</button>
+		</a>
 	);
 };
 

assets/js/base/components/cart-checkout/totals/shipping/index.tsx

@@ -10,6 +10,7 @@ import type { Currency } from '@woocommerce/price-format';
 import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';
 import { useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+import { isAddressComplete } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -67,6 +68,8 @@ export const TotalsShipping = ( {
 		}
 	);
 
+	const addressComplete = isAddressComplete( shippingAddress );
+
 	return (
 		<div
 			className={ classnames(
@@ -77,23 +80,26 @@ export const TotalsShipping = ( {
 			<TotalsItem
 				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
 				value={
-					hasRates && cartHasCalculatedShipping ? (
-						totalShippingValue
-					) : (
-						<ShippingPlaceholder
-							showCalculator={ showCalculator }
-							isCheckout={ isCheckout }
-							isShippingCalculatorOpen={
-								isShippingCalculatorOpen
-							}
-							setIsShippingCalculatorOpen={
-								setIsShippingCalculatorOpen
-							}
-						/>
-					)
+					hasRates && cartHasCalculatedShipping
+						? totalShippingValue
+						: // if address is not complete, display the link to add an address.
+						  ! addressComplete && (
+								<ShippingPlaceholder
+									showCalculator={ showCalculator }
+									isCheckout={ isCheckout }
+									isShippingCalculatorOpen={
+										isShippingCalculatorOpen
+									}
+									setIsShippingCalculatorOpen={
+										setIsShippingCalculatorOpen
+									}
+								/>
+						  )
 				}
 				description={
-					hasRates && cartHasCalculatedShipping ? (
+					// If address is complete, display the shipping address.
+					( hasRates && cartHasCalculatedShipping ) ||
+					addressComplete ? (
 						<>
 							<ShippingVia
 								selectedShippingRates={ selectedShippingRates }
@@ -132,6 +138,7 @@ export const TotalsShipping = ( {
 						hasRates={ hasRates }
 						shippingRates={ shippingRates }
 						isLoadingRates={ isLoadingRates }
+						isAddressComplete={ addressComplete }
 					/>
 				) }
 		</div>

assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import { EnteredAddress } from '@woocommerce/settings';
+import {
+	formatShippingAddress,
+	isAddressComplete,
+} from '@woocommerce/base-utils';
+import { useEditorContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
@@ -23,13 +28,21 @@ export const ShippingAddress = ( {
 	setIsShippingCalculatorOpen,
 	shippingAddress,
 }: ShippingAddressProps ): JSX.Element | null => {
+	const addressComplete = isAddressComplete( shippingAddress );
+	const { isEditor } = useEditorContext();
+
+	// If the address is incomplete, and we're not in the editor, don't show anything.
+	if ( ! addressComplete && ! isEditor ) {
+		return null;
+	}
+	const formattedLocation = formatShippingAddress( shippingAddress );
 	return (
 		<>
-			<ShippingLocation address={ shippingAddress } />
+			<ShippingLocation formattedLocation={ formattedLocation } />
 			{ showCalculator && (
 				<CalculatorButton
 					label={ __(
-						'(change address)',
+						'Change address',
 						'woo-gutenberg-products-block'
 					) }
 					isShippingCalculatorOpen={ isShippingCalculatorOpen }

assets/js/base/components/cart-checkout/totals/shipping/shipping-placeholder.tsx

@@ -39,6 +39,10 @@ export const ShippingPlaceholder = ( {
 
 	return (
 		<CalculatorButton
+			label={ __(
+				'Add an address for shipping options',
+				'woo-gutenberg-products-block'
+			) }
 			isShippingCalculatorOpen={ isShippingCalculatorOpen }
 			setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
 		/>

assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.tsx

@@ -2,8 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from 'wordpress-components';
-import classnames from 'classnames';
 import type { CartResponseShippingRate } from '@woocommerce/types';
 
 /**
@@ -15,12 +13,14 @@ export interface ShippingRateSelectorProps {
 	hasRates: boolean;
 	shippingRates: CartResponseShippingRate[];
 	isLoadingRates: boolean;
+	isAddressComplete: boolean;
 }
 
 export const ShippingRateSelector = ( {
 	hasRates,
 	shippingRates,
 	isLoadingRates,
+	isAddressComplete,
 }: ShippingRateSelectorProps ): JSX.Element => {
 	const legend = hasRates
 		? __( 'Shipping options', 'woo-gutenberg-products-block' )
@@ -31,18 +31,13 @@ export const ShippingRateSelector = ( {
 			<ShippingRatesControl
 				className="wc-block-components-totals-shipping__options"
 				noResultsMessage={
-					<Notice
-						isDismissible={ false }
-						className={ classnames(
-							'wc-block-components-shipping-rates-control__no-results-notice',
-							'woocommerce-error'
-						) }
-					>
-						{ __(
-							'No shipping options were found.',
-							'woo-gutenberg-products-block'
-						) }
-					</Notice>
+					<>
+						{ isAddressComplete &&
+							__(
+								'There are no shipping options available. Please check your shipping address.',
+								'woo-gutenberg-products-block'
+							) }
+					</>
 				}
 				shippingRates={ shippingRates }
 				isLoadingRates={ isLoadingRates }

assets/js/base/components/cart-checkout/totals/shipping/style.scss

@@ -20,12 +20,16 @@
 			flex-basis: 100%;
 			text-align: left;
 		}
+		margin-top: ($gap-small);
 	}
 
 	.wc-block-components-shipping-rates-control__no-results-notice {
 		margin: 0 0 em($gap-small);
 	}
 
+	.wc-block-components-totals-shipping__change-address__link {
+		font-weight: normal;
+	}
 	.wc-block-components-totals-shipping__change-address-button {
 		@include link-button();
 

assets/js/base/utils/address.ts

@@ -11,7 +11,9 @@ import {
 	defaultAddressFields,
 	ShippingAddress,
 	BillingAddress,
+	getSetting,
 } from '@woocommerce/settings';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Compare two addresses and see if they are the same.
@@ -100,3 +102,62 @@ export const emptyHiddenAddressFields = <
 
 	return newAddress;
 };
+
+/*
+ * Formats a shipping address for display.
+ *
+ * @param {Object} address The address to format.
+ * @return {string | null} The formatted address or null if no address is provided.
+ */
+export const formatShippingAddress = (
+	address: ShippingAddress | BillingAddress
+): string | null => {
+	// We bail early if we don't have an address.
+	if ( Object.values( address ).length === 0 ) {
+		return null;
+	}
+	const shippingCountries = getSetting< Record< string, string > >(
+		'shippingCountries',
+		{}
+	);
+	const shippingStates = getSetting< Record< string, string > >(
+		'shippingStates',
+		{}
+	);
+	const formattedCountry =
+		typeof shippingCountries[ address.country ] === 'string'
+			? decodeEntities( shippingCountries[ address.country ] )
+			: '';
+
+	const formattedState =
+		typeof shippingStates[ address.country ] === 'object' &&
+		typeof shippingStates[ address.country ][ address.state ] === 'string'
+			? decodeEntities(
+					shippingStates[ address.country ][ address.state ]
+			  )
+			: address.state;
+
+	const addressParts = [];
+
+	addressParts.push( address.postcode.toUpperCase() );
+	addressParts.push( address.city );
+	addressParts.push( formattedState );
+	addressParts.push( formattedCountry );
+
+	const formattedLocation = addressParts.filter( Boolean ).join( ', ' );
+
+	if ( ! formattedLocation ) {
+		return null;
+	}
+
+	return formattedLocation;
+};
+
+/**
+ * Returns true if the address has a city and country.
+ */
+export const isAddressComplete = (
+	address: ShippingAddress | BillingAddress
+): boolean => {
+	return !! address.city && !! address.country;
+};