Remove hardcoded notices & change display shipping calculator condition

- Replace hardcoded notices with text for Cart and Checkout block. - Fix shipping placeholder for the Checkout block when no shipping rates are available. - Created a function in base/utils to format Shipping address. - Remove the condition to check default customer address. Display the "Add shipping address" link only when there is no address available. - Hide shipping calculator if default shipping are defined.
woocommerce · Jan 23, 2023 · 52f902c · 52f902c
1 parent 774b8fa
commit 52f902c
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 70 deletions.
diff --git a/assets/js/base/components/cart-checkout/shipping-location/index.tsx b/assets/js/base/components/cart-checkout/shipping-location/index.tsx
@@ -2,56 +2,21 @@
  * 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.
+ * @param {Object} props                   Incoming props for the component.
+ * @param {string} props.formattedLocation Formatted location.
+ * @return {JSX.Element|null} The component.
  */
 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;
 	}

diff --git a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx b/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 { formatShippingAddress } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -67,6 +68,8 @@ export const TotalsShipping = ( {
 		}
 	);
 
+	const isAddressComplete = !! formatShippingAddress( shippingAddress );
+
 	return (
 		<div
 			className={ classnames(
@@ -132,6 +135,7 @@ export const TotalsShipping = ( {
 						hasRates={ hasRates }
 						shippingRates={ shippingRates }
 						isLoadingRates={ isLoadingRates }
+						isAddressComplete={ isAddressComplete }
 					/>
 				) }
 		</div>

diff --git a/assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx b/assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { EnteredAddress } from '@woocommerce/settings';
+import { formatShippingAddress } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -23,9 +24,13 @@ export const ShippingAddress = ( {
 	setIsShippingCalculatorOpen,
 	shippingAddress,
 }: ShippingAddressProps ): JSX.Element | null => {
+	const formattedLocation = formatShippingAddress( shippingAddress );
+	if ( ! formattedLocation ) {
+		return null;
+	}
 	return (
 		<>
-			<ShippingLocation address={ shippingAddress } />
+			<ShippingLocation formattedLocation={ formattedLocation } />
 			{ showCalculator && (
 				<CalculatorButton
 					label={ __(

diff --git a/assets/js/base/components/cart-checkout/totals/shipping/shipping-placeholder.tsx b/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 rates',
+				'woo-gutenberg-products-block'
+			) }
 			isShippingCalculatorOpen={ isShippingCalculatorOpen }
 			setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
 		/>

diff --git a/assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.tsx b/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 &&
+							__(
+								'No shipping options were found.',
+								'woo-gutenberg-products-block'
+							) }
+					</>
 				}
 				shippingRates={ shippingRates }
 				isLoadingRates={ isLoadingRates }

diff --git a/assets/js/base/utils/address.ts b/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,53 @@ 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( '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;
+	}
+
+	return formattedLocation;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -26,6 +26,7 @@ const Block = ( {
 				showRateSelector={ false }
 				values={ cartTotals }
 				currency={ totalsCurrency }
+				isCheckout={ true }
 			/>
 		</TotalsWrapper>
 	);

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
@@ -4,19 +4,22 @@
 import { __ } from '@wordpress/i18n';
 import { useShippingData } from '@woocommerce/base-context/hooks';
 import { ShippingRatesControl } from '@woocommerce/base-components/cart-checkout';
-import { getShippingRatesPackageCount } from '@woocommerce/base-utils';
+import {
+	getShippingRatesPackageCount,
+	formatShippingAddress,
+} from '@woocommerce/base-utils';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { useEditorContext, noticeContexts } from '@woocommerce/base-context';
 import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Notice } from 'wordpress-components';
-import classnames from 'classnames';
 import { getSetting } from '@woocommerce/settings';
 import type {
 	PackageRateOption,
 	CartShippingPackageShippingRate,
 } from '@woocommerce/types';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -73,10 +76,15 @@ const Block = (): JSX.Element | null => {
 		  } )
 		: shippingRates;
 
+	const shippingAddress = useSelect( ( select ) => {
+		return select( CART_STORE_KEY ).getCustomerData()?.shippingAddress;
+	} );
+
 	if ( ! needsShipping ) {
 		return null;
 	}
 
+	const addressComplete = !! formatShippingAddress( shippingAddress );
 	const shippingRatesPackageCount =
 		getShippingRatesPackageCount( shippingRates );
 
@@ -105,18 +113,17 @@ const Block = (): JSX.Element | null => {
 			) : (
 				<ShippingRatesControl
 					noResultsMessage={
-						<Notice
-							isDismissible={ false }
-							className={ classnames(
-								'wc-block-components-shipping-rates-control__no-results-notice',
-								'woocommerce-error'
-							) }
-						>
-							{ __(
-								'There are no shipping options available. Please check your shipping address.',
-								'woo-gutenberg-products-block'
-							) }
-						</Notice>
+						<>
+							{ addressComplete
+								? __(
+										'There are no shipping options available. Please check your shipping address.',
+										'woo-gutenberg-products-block'
+								  )
+								: __(
+										'Add a shipping address to view shipping options.',
+										'woo-gutenberg-products-block'
+								  ) }
+						</>
 					}
 					renderOption={ renderShippingRatesControlOption }
 					collapsible={ false }