Merge branch 'add/5229-add-align-support-legacy-template' of github.c…

…om:woocommerce/woocommerce-gutenberg-products-block into add/5229-add-align-support-legacy-template

.eslintrc.js

@@ -29,7 +29,6 @@ module.exports = {
 			'@woocommerce/settings',
 			'@woocommerce/shared-context',
 			'@woocommerce/shared-hocs',
-			'@woocommerce/knobs',
 			'@wordpress/a11y',
 			'@wordpress/api-fetch',
 			'@wordpress/block-editor',

.gitignore

@@ -8,6 +8,7 @@ project.properties
 .idea
 .vscode
 !.vscode/extensions.json
+!.vscode/storybook.code-snippets
 *.sublime-project
 *.sublime-workspace
 .sublimelinterrc

.nvmrc

@@ -1 +1 @@
-16.13.0
+16.13.1

.vscode/storybook.code-snippets

@@ -0,0 +1,40 @@
+{
+	"Storybook Story": {
+		"prefix": [ "storybook", "sbs" ],
+		"body": [
+			"/**",
+			" * External dependencies",
+			" */",
+			"import { Story, Meta } from '@storybook/react';",
+			"",
+			"/**",
+			" * Internal dependencies",
+			" */",
+			"import ${1:${TM_DIRECTORY/.*\\/(.*)\\/.*$/${1:/pascalcase}/}}, { ${2:${TM_DIRECTORY/.*\\/(.*)\\/.*$/${1:/pascalcase}/}Props} } from '..';",
+			"",
+			"export default {",
+			"\ttitle: 'WooCommerce Blocks/${3|@base-components,editor-components,woocommerce,Checkout Blocks|}/${1}',",
+			"\tcomponent: ${1},",
+			"} as Meta< ${2} >;",
+			"",
+			"const Template: Story< ${2} > = ( args ) => (",
+			"\t<${1} { ...args } />",
+			");",
+			"",
+			"export const Default = Template.bind( {} );",
+			"Default.args = {};",
+			""
+		],
+		"description": "Scaffolds a Storybook story",
+		"scope": "typescript, typescriptreact"
+	},
+	"Storybook Story from Template": {
+		"prefix": [ "sbt" ],
+		"body": [
+			"export const ${1:MyStory} = Template.bind( {} );",
+			"$1.args = {",
+			"\t$2",
+			"};"
+		]
+	}
+}

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

@@ -77,21 +77,28 @@ const ShippingAddress = ( {
 interface NoShippingPlaceholderProps {
 	showCalculator: boolean;
 	isShippingCalculatorOpen: boolean;
+	isCheckout?: boolean;
 	setIsShippingCalculatorOpen: CalculatorButtonProps[ 'setIsShippingCalculatorOpen' ];
 }
 
 const NoShippingPlaceholder = ( {
 	showCalculator,
 	isShippingCalculatorOpen,
 	setIsShippingCalculatorOpen,
+	isCheckout = false,
 }: NoShippingPlaceholderProps ): ReactElement => {
 	if ( ! showCalculator ) {
 		return (
 			<em>
-				{ __(
-					'Calculated during checkout',
-					'woo-gutenberg-products-block'
-				) }
+				{ isCheckout
+					? __(
+							'No shipping options available',
+							'woo-gutenberg-products-block'
+					  )
+					: __(
+							'Calculated during checkout',
+							'woo-gutenberg-products-block'
+					  ) }
 			</em>
 		);
 	}
@@ -104,7 +111,7 @@ const NoShippingPlaceholder = ( {
 	);
 };
 
-interface TotalShippingProps {
+export interface TotalShippingProps {
 	currency: Currency;
 	values: {
 		total_shipping: string;
@@ -113,13 +120,15 @@ interface TotalShippingProps {
 	showCalculator?: boolean; //Whether to display the rate selector below the shipping total.
 	showRateSelector?: boolean; // Whether to show shipping calculator or not.
 	className?: string;
+	isCheckout?: boolean;
 }
 
-const TotalsShipping = ( {
+export const TotalsShipping = ( {
 	currency,
 	values,
 	showCalculator = true,
 	showRateSelector = true,
+	isCheckout = false,
 	className,
 }: TotalShippingProps ): ReactElement => {
 	const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = useState(
@@ -163,32 +172,29 @@ const TotalsShipping = ( {
 			<TotalsItem
 				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
 				value={
-					cartHasCalculatedShipping ? (
+					hasRates && cartHasCalculatedShipping ? (
 						totalShippingValue
 					) : (
 						<NoShippingPlaceholder
 							showCalculator={ showCalculator }
+							isCheckout={ isCheckout }
 							{ ...calculatorButtonProps }
 						/>
 					)
 				}
 				description={
-					<>
-						{ cartHasCalculatedShipping && (
-							<>
-								<ShippingVia
-									selectedShippingRates={
-										selectedShippingRates
-									}
-								/>
-								<ShippingAddress
-									shippingAddress={ shippingAddress }
-									showCalculator={ showCalculator }
-									{ ...calculatorButtonProps }
-								/>
-							</>
-						) }
-					</>
+					hasRates && cartHasCalculatedShipping ? (
+						<>
+							<ShippingVia
+								selectedShippingRates={ selectedShippingRates }
+							/>
+							<ShippingAddress
+								shippingAddress={ shippingAddress }
+								showCalculator={ showCalculator }
+								{ ...calculatorButtonProps }
+							/>
+						</>
+					) : null
 				}
 				currency={ currency }
 			/>

assets/js/base/context/hooks/use-checkout-address.js

@@ -27,7 +27,7 @@ export const useCheckoutAddress = () => {
 	} = useCustomerDataContext();
 
 	const currentShippingAsBilling = useRef( shippingAsBilling );
-	const previousBillingData = useRef( billingData );
+	const previousBillingData = useRef();
 
 	/**
 	 * Sets shipping address data, and also billing if using the same address.
@@ -71,7 +71,7 @@ export const useCheckoutAddress = () => {
 					email,
 					/* eslint-enable no-unused-vars */
 					...billingAddress
-				} = previousBillingData.current;
+				} = previousBillingData.current || billingData;
 
 				setBillingData( {
 					...billingAddress,