initial commit

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/has-shipping-rate.js

@@ -0,0 +1,14 @@
+/**
+ * Searches an array of packages/rates to see if there are actually any rates
+ * available.
+ *
+ * @param {Array} shippingRatePackages An array of packages and rates.
+ * @return {boolean} True if a rate exists.
+ */
+const hasShippingRate = ( shippingRatePackages ) => {
+	return shippingRatePackages.some(
+		( shippingRatePackage ) => shippingRatePackage.shipping_rates.length
+	);
+};
+
+export default hasShippingRate;

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

@@ -0,0 +1,213 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsItem } from '@woocommerce/blocks-checkout';
+import type { Currency } from '@woocommerce/price-format';
+import type { ReactElement } from 'react';
+import { getSetting, EnteredAddress } from '@woocommerce/settings';
+import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';
+
+/**
+ * Internal dependencies
+ */
+import ShippingRateSelector from './shipping-rate-selector';
+import hasShippingRate from './has-shipping-rate';
+import ShippingCalculator from '../../shipping-calculator';
+import ShippingLocation from '../../shipping-location';
+import './style.scss';
+
+interface CalculatorButtonProps {
+	label?: string;
+	isShippingCalculatorOpen: boolean;
+	setIsShippingCalculatorOpen: ( isShippingCalculatorOpen: boolean ) => void;
+}
+
+const CalculatorButton = ( {
+	label = __( 'Calculate', 'woo-gutenberg-products-block' ),
+	isShippingCalculatorOpen,
+	setIsShippingCalculatorOpen,
+}: CalculatorButtonProps ): ReactElement => {
+	return (
+		<button
+			className="wc-block-components-totals-shipping__change-address-button"
+			onClick={ () => {
+				setIsShippingCalculatorOpen( ! isShippingCalculatorOpen );
+			} }
+			aria-expanded={ isShippingCalculatorOpen }
+		>
+			{ label }
+		</button>
+	);
+};
+
+interface ShippingAddressProps {
+	showCalculator: boolean;
+	isShippingCalculatorOpen: boolean;
+	setIsShippingCalculatorOpen: CalculatorButtonProps[ 'setIsShippingCalculatorOpen' ];
+	shippingAddress: EnteredAddress;
+}
+
+const ShippingAddress = ( {
+	showCalculator,
+	isShippingCalculatorOpen,
+	setIsShippingCalculatorOpen,
+	shippingAddress,
+}: ShippingAddressProps ): ReactElement | null => {
+	return (
+		<>
+			<ShippingLocation address={ shippingAddress } />
+			{ showCalculator && (
+				<CalculatorButton
+					label={ __(
+						'(change address)',
+						'woo-gutenberg-products-block'
+					) }
+					isShippingCalculatorOpen={ isShippingCalculatorOpen }
+					setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
+				/>
+			) }
+		</>
+	);
+};
+
+interface NoShippingPlaceholderProps {
+	showCalculator: boolean;
+	isShippingCalculatorOpen: boolean;
+	setIsShippingCalculatorOpen: CalculatorButtonProps[ 'setIsShippingCalculatorOpen' ];
+}
+
+const NoShippingPlaceholder = ( {
+	showCalculator,
+	isShippingCalculatorOpen,
+	setIsShippingCalculatorOpen,
+}: NoShippingPlaceholderProps ): ReactElement => {
+	if ( ! showCalculator ) {
+		return (
+			<em>
+				{ __(
+					'Calculated during checkout',
+					'woo-gutenberg-products-block'
+				) }
+			</em>
+		);
+	}
+
+	return (
+		<CalculatorButton
+			isShippingCalculatorOpen={ isShippingCalculatorOpen }
+			setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
+		/>
+	);
+};
+
+interface TotalShippingProps {
+	currency: Currency;
+	values: {
+		total_shipping: string;
+		total_shipping_tax: string;
+	}; // Values in use
+	showCalculator?: boolean; //Whether to display the rate selector below the shipping total.
+	showRateSelector?: boolean; // Whether to show shipping calculator or not.
+	className?: string;
+}
+
+const TotalsShipping = ( {
+	currency,
+	values,
+	showCalculator = true,
+	showRateSelector = true,
+	className,
+}: TotalShippingProps ): ReactElement => {
+	const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = useState(
+		false
+	);
+	const {
+		shippingAddress,
+		cartHasCalculatedShipping,
+		shippingRates,
+		shippingRatesLoading,
+	} = useStoreCart();
+
+	const totalShippingValue = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	)
+		? parseInt( values.total_shipping, 10 ) +
+		  parseInt( values.total_shipping_tax, 10 )
+		: parseInt( values.total_shipping, 10 );
+	const hasRates = hasShippingRate( shippingRates ) || totalShippingValue;
+	const calculatorButtonProps = {
+		isShippingCalculatorOpen,
+		setIsShippingCalculatorOpen,
+	};
+
+	const selectedShippingRates = shippingRates.flatMap(
+		( shippingPackage ) => {
+			return shippingPackage.shipping_rates
+				.filter( ( rate ) => rate.selected )
+				.flatMap( ( rate ) => rate.name );
+		}
+	);
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-totals-shipping',
+				className
+			) }
+		>
+			<TotalsItem
+				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
+				value={
+					cartHasCalculatedShipping ? (
+						totalShippingValue
+					) : (
+						<NoShippingPlaceholder
+							showCalculator={ showCalculator }
+							{ ...calculatorButtonProps }
+						/>
+					)
+				}
+				description={
+					<>
+						{ cartHasCalculatedShipping && (
+							<>
+								<ShippingVia
+									selectedShippingRates={
+										selectedShippingRates
+									}
+								/>
+								<ShippingAddress
+									shippingAddress={ shippingAddress }
+									showCalculator={ showCalculator }
+									{ ...calculatorButtonProps }
+								/>
+							</>
+						) }
+					</>
+				}
+				currency={ currency }
+			/>
+			{ showCalculator && isShippingCalculatorOpen && (
+				<ShippingCalculator
+					onUpdate={ () => {
+						setIsShippingCalculatorOpen( false );
+					} }
+				/>
+			) }
+			{ showRateSelector && cartHasCalculatedShipping && (
+				<ShippingRateSelector
+					hasRates={ hasRates }
+					shippingRates={ shippingRates }
+					shippingRatesLoading={ shippingRatesLoading }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default TotalsShipping;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice } from 'wordpress-components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import ShippingRatesControl from '../../shipping-rates-control';
+
+const ShippingRateSelector = ( {
+	hasRates,
+	shippingRates,
+	shippingRatesLoading,
+} ) => {
+	const legend = hasRates
+		? __( 'Shipping options', 'woocommerce' )
+		: __( 'Choose a shipping option', 'woocommerce' );
+	return (
+		<fieldset className="wc-block-components-totals-shipping__fieldset">
+			<legend className="screen-reader-text">{ legend }</legend>
+			<ShippingRatesControl
+				className="wc-block-components-totals-shipping__options"
+				collapsible={ true }
+				noResultsMessage={
+					<Notice
+						isDismissible={ false }
+						className={ classnames(
+							'wc-block-components-shipping-rates-control__no-results-notice',
+							'woocommerce-error'
+						) }
+					>
+						{ __(
+							'No shipping options were found.',
+							'woocommerce'
+						) }
+					</Notice>
+				}
+				shippingRates={ shippingRates }
+				shippingRatesLoading={ shippingRatesLoading }
+			/>
+		</fieldset>
+	);
+};
+
+export default ShippingRateSelector;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-via.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const ShippingVia = ( {
+	selectedShippingRates,
+}: {
+	selectedShippingRates: string[];
+} ): JSX.Element => {
+	return (
+		<div className="wc-block-components-totals-item__description wc-block-components-totals-shipping__via">
+			{ __( 'via', 'woo-gutenberg-products-block' ) }{ ' ' }
+			{ selectedShippingRates.join( ', ' ) }
+		</div>
+	);
+};

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/stories/index.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+import { currencyKnob } from '@woocommerce/knobs';
+
+/**
+ * Internal dependencies
+ */
+import TotalsShipping from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@blocks-checkout/TotalsShipping',
+	component: TotalsShipping,
+};
+
+export const Default = () => {
+	const currency = currencyKnob();
+	const showCalculator = boolean( 'Show calculator', true );
+	const showRateSelector = boolean( 'Show rate selector', true );
+	const totalShipping = text( 'Total shipping', '1000' );
+	const totalShippingTax = text( 'Total shipping tax', '200' );
+
+	return (
+		<TotalsShipping
+			currency={ currency }
+			showCalculator={ showCalculator }
+			showRateSelector={ showRateSelector }
+			values={ {
+				total_shipping: totalShipping,
+				total_shipping_tax: totalShippingTax,
+			} }
+		/>
+	);
+};

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

@@ -0,0 +1,42 @@
+.wc-block-components-totals-shipping {
+	// Added extra label for specificity.
+	fieldset.wc-block-components-totals-shipping__fieldset {
+		background-color: transparent;
+		margin: 0;
+		padding: 0;
+		border: 0;
+	}
+
+	.wc-block-components-totals-shipping__via {
+		margin-bottom: $gap;
+	}
+
+	.wc-block-components-totals-shipping__options {
+		.wc-block-components-radio-control__label,
+		.wc-block-components-radio-control__description,
+		.wc-block-components-radio-control__secondary-label,
+		.wc-block-components-radio-control__secondary-description {
+			flex-basis: 100%;
+			text-align: left;
+		}
+	}
+
+	.wc-block-components-shipping-rates-control__no-results-notice {
+		margin: 0 0 em($gap-small);
+	}
+
+	.wc-block-components-totals-shipping__change-address-button {
+		@include link-button();
+
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: 0.8;
+		}
+	}
+}
+
+// Extra classes for specificity.
+.theme-twentytwentyone.theme-twentytwentyone.theme-twentytwentyone .wc-block-components-totals-shipping__change-address-button {
+	@include link-button();
+}