initial commit

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import Button from '@woocommerce/base-components/button';
+import { useState } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { useValidationContext } from '@woocommerce/base-context';
+import type { EnteredAddress, AddressFields } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { AddressForm } from '../address-form';
+
+interface ShippingCalculatorAddressProps {
+	address: EnteredAddress;
+	onUpdate: ( address: EnteredAddress ) => void;
+	addressFields: Partial< keyof AddressFields >[];
+}
+const ShippingCalculatorAddress = ( {
+	address: initialAddress,
+	onUpdate,
+	addressFields,
+}: ShippingCalculatorAddressProps ): JSX.Element => {
+	const [ address, setAddress ] = useState( initialAddress );
+	const {
+		hasValidationErrors,
+		showAllValidationErrors,
+	} = useValidationContext();
+
+	const validateSubmit = () => {
+		showAllValidationErrors();
+		return ! hasValidationErrors;
+	};
+
+	return (
+		<form className="wc-block-components-shipping-calculator-address">
+			<AddressForm
+				fields={ addressFields }
+				onChange={ setAddress }
+				values={ address }
+			/>
+			<Button
+				className="wc-block-components-shipping-calculator-address__button"
+				disabled={ isShallowEqual( address, initialAddress ) }
+				onClick={ ( e ) => {
+					e.preventDefault();
+					const isAddressValid = validateSubmit();
+					if ( isAddressValid ) {
+						return onUpdate( address );
+					}
+				} }
+				type="submit"
+			>
+				{ __( 'Update', 'woo-gutenberg-products-block' ) }
+			</Button>
+		</form>
+	);
+};
+
+export default ShippingCalculatorAddress;

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

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { useShippingDataContext } from '@woocommerce/base-context';
+import type { EnteredAddress } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import ShippingCalculatorAddress from './address';
+import './style.scss';
+
+interface ShippingCalculatorProps {
+	onUpdate?: ( newAddress: EnteredAddress ) => void;
+	addressFields?: Partial< keyof EnteredAddress >[];
+}
+
+const ShippingCalculator = ( {
+	onUpdate = () => {
+		/* Do nothing */
+	},
+	addressFields = [ 'country', 'state', 'city', 'postcode' ],
+}: ShippingCalculatorProps ): JSX.Element => {
+	const { shippingAddress, setShippingAddress } = useShippingDataContext();
+	return (
+		<div className="wc-block-components-shipping-calculator">
+			<ShippingCalculatorAddress
+				address={ shippingAddress }
+				addressFields={ addressFields }
+				onUpdate={ ( newAddress ) => {
+					setShippingAddress( newAddress );
+					onUpdate( newAddress );
+				} }
+			/>
+		</div>
+	);
+};
+
+export default ShippingCalculator;

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

@@ -0,0 +1,12 @@
+.wc-block-components-shipping-calculator-address {
+	margin-bottom: 0;
+}
+
+.wc-block-components-shipping-calculator-address__button {
+	width: 100%;
+	margin-top: em($gap-large);
+}
+
+.wc-block-components-shipping-calculator {
+	padding: em($gap-smaller) 0 em($gap-small);
+}