Convert shipping components to typescript (#4135)

* Add type defs for customer Taken from https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/194ecccf780afe16843a894bb2e988509a0746df/assets/js/type-defs/customer.ts * Convert ShippingCalculatorAddress to TypeScript * Convert ShippingCalculator to TypeScript * Convert ShippingLocation to TypeScript * Allow packageId to be a number or string in useSelectShippingRate(s) * Convert ShippingRatesControl to TypeScript * Convert ShippingOptionsStep to TypeScript * Allow package_id to be a string or number This is because of Subscriptions using strings for package IDs * Change to use CartShippingRateItemShippingRate instead of Rate * Add extra props to PackageProps type * Make ShippingAddress have the correct type * Use CartShippingRateItemShippingRate instead of Rate * Remove Rate type * Set return types to JSX.Element * Change type of props.renderOption in ShippingRatesControl * Remove customer type defs and relocate aliases to default-address-fields * Add EnteredAddress type * Import EnteredAddress from new location * Remove unnecessary eslint ignore * Remove unused variable * Remove confusing use of word Item in Shipping types * Remove confusing use of word Item in Shipping types
woocommerce · May 10, 2021 · cbbd9d7 · cbbd9d7
1 parent 0de2e53
commit cbbd9d7
Show file tree

Hide file tree

Showing 18 changed files with 192 additions and 159 deletions.
diff --git a/...t-checkout/shipping-calculator/address.js → ...-checkout/shipping-calculator/address.tsx b/...t-checkout/shipping-calculator/address.js → ...-checkout/shipping-calculator/address.tsx
@@ -1,24 +1,29 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 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,
@@ -55,10 +60,4 @@ const ShippingCalculatorAddress = ( {
 	);
 };
 
-ShippingCalculatorAddress.propTypes = {
-	address: PropTypes.object.isRequired,
-	onUpdate: PropTypes.func.isRequired,
-	addressFields: PropTypes.array.isRequired,
-};
-
 export default ShippingCalculatorAddress;
diff --git a/...art-checkout/shipping-calculator/index.js → ...rt-checkout/shipping-calculator/index.tsx b/...art-checkout/shipping-calculator/index.js → ...rt-checkout/shipping-calculator/index.tsx
@@ -1,19 +1,26 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 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 = () => {},
+	onUpdate = () => {
+		/* Do nothing */
+	},
 	addressFields = [ 'country', 'state', 'city', 'postcode' ],
-} ) => {
+}: ShippingCalculatorProps ): JSX.Element => {
 	const { shippingAddress, setShippingAddress } = useShippingDataContext();
 	return (
 		<div className="wc-block-components-shipping-calculator">
@@ -29,9 +36,4 @@ const ShippingCalculator = ( {
 	);
 };
 
-ShippingCalculator.propTypes = {
-	onUpdate: PropTypes.func,
-	addressFields: PropTypes.array,
-};
-
 export default ShippingCalculator;
diff --git a/.../cart-checkout/shipping-location/index.js → ...cart-checkout/shipping-location/index.tsx b/.../cart-checkout/shipping-location/index.js → ...cart-checkout/shipping-location/index.tsx
@@ -1,24 +1,35 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { __, sprintf } from '@wordpress/i18n';
-import { getSetting } from '@woocommerce/settings';
+import { EnteredAddress, getSetting } from '@woocommerce/settings';
 import { decodeEntities } from '@wordpress/html-entities';
 
+interface ShippingLocationProps {
+	address: EnteredAddress;
+}
+
 /**
  * Shows a formatted shipping location.
  *
  * @param {Object} props Incoming props for the component.
  * @param {Object} props.address Incoming address information.
  */
-const ShippingLocation = ( { address } ) => {
+const ShippingLocation = ( {
+	address,
+}: 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', {} );
-	const shippingStates = getSetting( 'shippingStates', {} );
+	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 ] )
@@ -56,13 +67,4 @@ const ShippingLocation = ( { address } ) => {
 	);
 };
 
-ShippingLocation.propTypes = {
-	address: PropTypes.shape( {
-		city: PropTypes.string,
-		state: PropTypes.string,
-		postcode: PropTypes.string,
-		country: PropTypes.string,
-	} ),
-};
-
 export default ShippingLocation;
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -7,9 +7,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 import Label from '@woocommerce/base-components/label';
 import Title from '@woocommerce/base-components/title';
 import type { ReactElement } from 'react';
-import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
+import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { Panel } from '@woocommerce/blocks-checkout';
 import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
+import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
  * Internal dependencies
@@ -34,21 +35,28 @@ interface Destination {
 	country: string;
 }
 
+export interface PackageData {
+	destination: Destination;
+	name: string;
+	// eslint-disable-next-line camelcase
+	shipping_rates: CartShippingPackageShippingRate[];
+	items: PackageItem[];
+}
+
+export type PackageRateRenderOption = (
+	option: CartShippingPackageShippingRate
+) => PackageRateOption;
+
 interface PackageProps {
-	packageId: string;
-	renderOption: ( option: Rate ) => PackageRateOption;
-	collapse: boolean;
-	packageData: {
-		destination: Destination;
-		name: string;
-		// eslint-disable-next-line camelcase
-		shipping_rates: Rate[];
-		items: PackageItem[];
-	};
+	/* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */
+	packageId: string | number;
+	renderOption: PackageRateRenderOption;
+	collapse?: boolean;
+	packageData: PackageData;
 	className?: string;
 	collapsible?: boolean;
 	noResultsMessage: ReactElement;
-	showItems: boolean;
+	showItems?: boolean;
 }
 
 export const ShippingRatesControlPackage = ( {

diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx
@@ -4,8 +4,9 @@
 import RadioControl, {
 	RadioControlOptionLayout,
 } from '@woocommerce/base-components/radio-control';
-import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
+import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import type { ReactElement } from 'react';
+import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
  * Internal dependencies
@@ -14,8 +15,10 @@ import { renderPackageRateOption } from './render-package-rate-option';
 
 interface PackageRates {
 	onSelectRate: ( selectedRateId: string ) => void;
-	rates: Rate[];
-	renderOption?: ( option: Rate ) => PackageRateOption;
+	rates: CartShippingPackageShippingRate[];
+	renderOption?: (
+		option: CartShippingPackageShippingRate
+	) => PackageRateOption;
 	className?: string;
 	noResultsMessage: ReactElement;
 	selected?: string;

diff --git a/...se/components/cart-checkout/shipping-rates-control-package/render-package-rate-option.tsx b/...se/components/cart-checkout/shipping-rates-control-package/render-package-rate-option.tsx
@@ -4,15 +4,18 @@
 import { decodeEntities } from '@wordpress/html-entities';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
-import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
+import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { getSetting } from '@woocommerce/settings';
+import { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
  * Default render function for package rate options.
  *
  * @param {Object} rate Rate data.
  */
-export const renderPackageRateOption = ( rate: Rate ): PackageRateOption => {
+export const renderPackageRateOption = (
+	rate: CartShippingPackageShippingRate
+): PackageRateOption => {
 	const priceWithTaxes: number = getSetting(
 		'displayCartPricesIncludingTax',
 		false