Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit cbbd9d7

Browse files
opropr
authored
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
1 parent 0de2e53 commit cbbd9d7

File tree

18 files changed

+192
-159
lines changed

18 files changed

+192
-159
lines changed

assets/js/base/components/cart-checkout/shipping-calculator/address.js renamed to assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
/**
22
* External dependencies
33
*/
4-
import PropTypes from 'prop-types';
54
import { __ } from '@wordpress/i18n';
65
import Button from '@woocommerce/base-components/button';
76
import { useState } from '@wordpress/element';
87
import isShallowEqual from '@wordpress/is-shallow-equal';
98
import { useValidationContext } from '@woocommerce/base-context';
9+
import type { EnteredAddress, AddressFields } from '@woocommerce/settings';
1010

1111
/**
1212
* Internal dependencies
1313
*/
1414
import './style.scss';
1515
import { AddressForm } from '../address-form';
1616

17+
interface ShippingCalculatorAddressProps {
18+
address: EnteredAddress;
19+
onUpdate: ( address: EnteredAddress ) => void;
20+
addressFields: Partial< keyof AddressFields >[];
21+
}
1722
const ShippingCalculatorAddress = ( {
1823
address: initialAddress,
1924
onUpdate,
2025
addressFields,
21-
} ) => {
26+
}: ShippingCalculatorAddressProps ): JSX.Element => {
2227
const [ address, setAddress ] = useState( initialAddress );
2328
const {
2429
hasValidationErrors,
@@ -55,10 +60,4 @@ const ShippingCalculatorAddress = ( {
5560
);
5661
};
5762

58-
ShippingCalculatorAddress.propTypes = {
59-
address: PropTypes.object.isRequired,
60-
onUpdate: PropTypes.func.isRequired,
61-
addressFields: PropTypes.array.isRequired,
62-
};
63-
6463
export default ShippingCalculatorAddress;

assets/js/base/components/cart-checkout/shipping-calculator/index.js renamed to assets/js/base/components/cart-checkout/shipping-calculator/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
/**
22
* External dependencies
33
*/
4-
import PropTypes from 'prop-types';
54
import { useShippingDataContext } from '@woocommerce/base-context';
5+
import type { EnteredAddress } from '@woocommerce/settings';
66

77
/**
88
* Internal dependencies
99
*/
1010
import ShippingCalculatorAddress from './address';
1111
import './style.scss';
1212

13+
interface ShippingCalculatorProps {
14+
onUpdate?: ( newAddress: EnteredAddress ) => void;
15+
addressFields?: Partial< keyof EnteredAddress >[];
16+
}
17+
1318
const ShippingCalculator = ( {
14-
onUpdate = () => {},
19+
onUpdate = () => {
20+
/* Do nothing */
21+
},
1522
addressFields = [ 'country', 'state', 'city', 'postcode' ],
16-
} ) => {
23+
}: ShippingCalculatorProps ): JSX.Element => {
1724
const { shippingAddress, setShippingAddress } = useShippingDataContext();
1825
return (
1926
<div className="wc-block-components-shipping-calculator">
@@ -29,9 +36,4 @@ const ShippingCalculator = ( {
2936
);
3037
};
3138

32-
ShippingCalculator.propTypes = {
33-
onUpdate: PropTypes.func,
34-
addressFields: PropTypes.array,
35-
};
36-
3739
export default ShippingCalculator;

assets/js/base/components/cart-checkout/shipping-location/index.js renamed to assets/js/base/components/cart-checkout/shipping-location/index.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,35 @@
11
/**
22
* External dependencies
33
*/
4-
import PropTypes from 'prop-types';
54
import { __, sprintf } from '@wordpress/i18n';
6-
import { getSetting } from '@woocommerce/settings';
5+
import { EnteredAddress, getSetting } from '@woocommerce/settings';
76
import { decodeEntities } from '@wordpress/html-entities';
87

8+
interface ShippingLocationProps {
9+
address: EnteredAddress;
10+
}
11+
912
/**
1013
* Shows a formatted shipping location.
1114
*
1215
* @param {Object} props Incoming props for the component.
1316
* @param {Object} props.address Incoming address information.
1417
*/
15-
const ShippingLocation = ( { address } ) => {
18+
const ShippingLocation = ( {
19+
address,
20+
}: ShippingLocationProps ): JSX.Element | null => {
1621
// we bail early if we don't have an address.
1722
if ( Object.values( address ).length === 0 ) {
1823
return null;
1924
}
20-
const shippingCountries = getSetting( 'shippingCountries', {} );
21-
const shippingStates = getSetting( 'shippingStates', {} );
25+
const shippingCountries = getSetting( 'shippingCountries', {} ) as Record<
26+
string,
27+
string
28+
>;
29+
const shippingStates = getSetting( 'shippingStates', {} ) as Record<
30+
string,
31+
Record< string, string >
32+
>;
2233
const formattedCountry =
2334
typeof shippingCountries[ address.country ] === 'string'
2435
? decodeEntities( shippingCountries[ address.country ] )
@@ -56,13 +67,4 @@ const ShippingLocation = ( { address } ) => {
5667
);
5768
};
5869

59-
ShippingLocation.propTypes = {
60-
address: PropTypes.shape( {
61-
city: PropTypes.string,
62-
state: PropTypes.string,
63-
postcode: PropTypes.string,
64-
country: PropTypes.string,
65-
} ),
66-
};
67-
6870
export default ShippingLocation;

‎assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import { decodeEntities } from '@wordpress/html-entities';
77
import Label from '@woocommerce/base-components/label';
88
import Title from '@woocommerce/base-components/title';
99
import type { ReactElement } from 'react';
10-
import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
10+
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
1111
import { Panel } from '@woocommerce/blocks-checkout';
1212
import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
13+
import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
1314

1415
/**
1516
* Internal dependencies
@@ -34,21 +35,28 @@ interface Destination {
3435
country: string;
3536
}
3637

38+
export interface PackageData {
39+
destination: Destination;
40+
name: string;
41+
// eslint-disable-next-line camelcase
42+
shipping_rates: CartShippingPackageShippingRate[];
43+
items: PackageItem[];
44+
}
45+
46+
export type PackageRateRenderOption = (
47+
option: CartShippingPackageShippingRate
48+
) => PackageRateOption;
49+
3750
interface PackageProps {
38-
packageId: string;
39-
renderOption: ( option: Rate ) => PackageRateOption;
40-
collapse: boolean;
41-
packageData: {
42-
destination: Destination;
43-
name: string;
44-
// eslint-disable-next-line camelcase
45-
shipping_rates: Rate[];
46-
items: PackageItem[];
47-
};
51+
/* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */
52+
packageId: string | number;
53+
renderOption: PackageRateRenderOption;
54+
collapse?: boolean;
55+
packageData: PackageData;
4856
className?: string;
4957
collapsible?: boolean;
5058
noResultsMessage: ReactElement;
51-
showItems: boolean;
59+
showItems?: boolean;
5260
}
5361

5462
export const ShippingRatesControlPackage = ( {

‎assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
import RadioControl, {
55
RadioControlOptionLayout,
66
} from '@woocommerce/base-components/radio-control';
7-
import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
7+
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
88
import type { ReactElement } from 'react';
9+
import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
910

1011
/**
1112
* Internal dependencies
@@ -14,8 +15,10 @@ import { renderPackageRateOption } from './render-package-rate-option';
1415

1516
interface PackageRates {
1617
onSelectRate: ( selectedRateId: string ) => void;
17-
rates: Rate[];
18-
renderOption?: ( option: Rate ) => PackageRateOption;
18+
rates: CartShippingPackageShippingRate[];
19+
renderOption?: (
20+
option: CartShippingPackageShippingRate
21+
) => PackageRateOption;
1922
className?: string;
2023
noResultsMessage: ReactElement;
2124
selected?: string;

‎assets/js/base/components/cart-checkout/shipping-rates-control-package/render-package-rate-option.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@
44
import { decodeEntities } from '@wordpress/html-entities';
55
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
66
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
7-
import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
7+
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
88
import { getSetting } from '@woocommerce/settings';
9+
import { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
910

1011
/**
1112
* Default render function for package rate options.
1213
*
1314
* @param {Object} rate Rate data.
1415
*/
15-
export const renderPackageRateOption = ( rate: Rate ): PackageRateOption => {
16+
export const renderPackageRateOption = (
17+
rate: CartShippingPackageShippingRate
18+
): PackageRateOption => {
1619
const priceWithTaxes: number = getSetting(
1720
'displayCartPricesIncludingTax',
1821
false

0 commit comments

Comments
 (0)