From cf8ab9fa930e585bb1352110e384653d48946d1e Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Tue, 25 May 2021 12:49:13 +0100 Subject: [PATCH] Add key to each `CartTotalItem` (https://github.com/woocommerce/woocommerce-blocks/pull/4240) * Move type defs * Move type guards * Fix imports * Extract prepareTotalItems to TS file * usePaymentMethodInterface as TS file * Fix TS props * Fix currency type defs * Add return type to usePaymentMethodInterface * Add key prop to CartTotalItem * Fixed up js tests * Move SymbolPosition into type-defs package Co-authored-by: Thomas Roberts --- .../js/base/components/price-slider/index.js | 2 +- .../components/quantity-selector/index.tsx | 2 +- .../cart/use-store-cart-item-quantity.ts | 15 ++- .../test/use-payment-method-interface.js | 7 +- ...ace.js => use-payment-method-interface.ts} | 126 +++++------------- .../context/hooks/payment-methods/utils.ts | 85 ++++++++++++ .../base/context/hooks/use-customer-data.ts | 2 +- .../base/context/hooks/use-emit-response.ts | 4 +- .../cart-checkout/checkout-state/index.tsx | 2 +- .../assets/js/base/context/tsconfig.json | 3 +- .../assets/js/base/utils/index.js | 1 - .../cart/full-cart/cart-line-item-row.tsx | 2 +- .../js/settings/shared/settings-init.ts | 7 +- .../assets/js/settings/shared/tsconfig.json | 1 + .../assets/js/types/index.ts | 2 + .../{ => types}/type-defs/add-to-cart-form.js | 0 .../{ => types}/type-defs/address-fields.js | 0 .../js/{ => types}/type-defs/billing.js | 0 .../js/{ => types}/type-defs/cart-response.ts | 27 ++-- .../assets/js/{ => types}/type-defs/cart.js | 0 .../assets/js/{ => types}/type-defs/cart.ts | 0 .../js/{ => types}/type-defs/contexts.js | 8 +- .../assets/js/types/type-defs/currency.ts | 22 +++ .../assets/js/{ => types}/type-defs/hooks.js | 0 .../assets/js/{ => types}/type-defs/hooks.ts | 2 +- .../assets/js/{ => types}/type-defs/index.ts | 1 + .../js/{ => types}/type-defs/payments.js | 0 .../{ => types}/type-defs/product-response.ts | 16 +-- .../registered-payment-method-props.js | 0 .../js/{ => types}/type-defs/settings.js | 0 .../js/{ => types}/type-defs/shipping.js | 0 .../js/{ => types}/type-defs/shipping.ts | 0 .../type-guards/index.ts} | 4 +- .../woocommerce-blocks/bin/webpack-helpers.js | 1 + .../packages/prices/index.js | 1 - .../packages/prices/types.ts | 9 -- .../packages/prices/utils/price.ts | 17 +-- .../woocommerce-blocks/packages/tsconfig.json | 2 +- .../tests/js/jest.config.json | 3 +- plugins/woocommerce-blocks/tsconfig.base.json | 4 +- 40 files changed, 209 insertions(+), 169 deletions(-) rename plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/{use-payment-method-interface.js => use-payment-method-interface.ts} (69%) create mode 100644 plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts create mode 100644 plugins/woocommerce-blocks/assets/js/types/index.ts rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/add-to-cart-form.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/address-fields.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/billing.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/cart-response.ts (90%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/cart.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/cart.ts (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/contexts.js (98%) create mode 100644 plugins/woocommerce-blocks/assets/js/types/type-defs/currency.ts rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/hooks.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/hooks.ts (96%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/index.ts (80%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/payments.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/product-response.ts (88%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/registered-payment-method-props.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/settings.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/shipping.js (100%) rename plugins/woocommerce-blocks/assets/js/{ => types}/type-defs/shipping.ts (100%) rename plugins/woocommerce-blocks/assets/js/{base/utils/type-guards.ts => types/type-guards/index.ts} (92%) delete mode 100644 plugins/woocommerce-blocks/packages/prices/types.ts diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js index 71163168db6..2307aebbeae 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js @@ -12,7 +12,7 @@ import { import PropTypes from 'prop-types'; import classnames from 'classnames'; import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount'; -import { isObject } from '@woocommerce/base-utils'; +import { isObject } from '@woocommerce/types'; /** * Internal dependencies diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx index f5cfa9e9315..f27da359ec4 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/index.tsx @@ -6,12 +6,12 @@ import { speak } from '@wordpress/a11y'; import classNames from 'classnames'; import { useCallback } from '@wordpress/element'; import { DOWN, UP } from '@wordpress/keycodes'; +import { isNumber } from '@woocommerce/types'; /** * Internal dependencies */ import './style.scss'; -import { isNumber } from '../../utils/type-guards'; interface QuantitySelectorProps { className?: string; diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts index f98437c6c7f..db158b6e2ad 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts @@ -7,19 +7,20 @@ import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data'; import { useDebounce } from 'use-debounce'; import { usePrevious } from '@woocommerce/base-hooks'; import { triggerFragmentRefresh } from '@woocommerce/base-utils'; -import type { CartItem, StoreCartItemQuantity } from '@woocommerce/types'; +import { + CartItem, + StoreCartItemQuantity, + isNumber, + isObject, + isString, + objectHasProp, +} from '@woocommerce/types'; /** * Internal dependencies */ import { useStoreCart } from './use-store-cart'; import { useCheckoutContext } from '../../providers/cart-checkout'; -import { - isNumber, - isObject, - isString, - objectHasProp, -} from '../../../utils/type-guards'; /** * Ensures the object passed has props key: string and quantity: number diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js index 2fde03b38f9..de6323dd515 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { prepareTotalItems } from '../use-payment-method-interface'; +import { prepareTotalItems } from '../utils'; describe( 'prepareTotalItems', () => { const fixture = { @@ -17,21 +17,25 @@ describe( 'prepareTotalItems', () => { }; const expected = [ { + key: 'total_items', label: 'Subtotal:', value: 200, valueWithTax: 220, }, { + key: 'total_fees', label: 'Fees:', value: 100, valueWithTax: 110, }, { + key: 'total_discount', label: 'Discount:', value: 350, valueWithTax: 400, }, { + key: 'total_tax', label: 'Taxes:', value: 30, valueWithTax: 30, @@ -40,6 +44,7 @@ describe( 'prepareTotalItems', () => { const expectedWithShipping = [ ...expected, { + key: 'total_shipping', label: 'Shipping:', value: 50, valueWithTax: 55, diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts similarity index 69% rename from plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.js rename to plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts index 31a1cee8dde..d6765f960fe 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts @@ -19,67 +19,12 @@ import { useCheckoutContext } from '../../providers/cart-checkout/checkout-state import { usePaymentMethodDataContext } from '../../providers/cart-checkout/payment-methods'; import { useShippingDataContext } from '../../providers/cart-checkout/shipping'; import { useCustomerDataContext } from '../../providers/cart-checkout/customer'; +import { prepareTotalItems } from './utils'; /** - * @typedef {import('@woocommerce/type-defs/registered-payment-method-props').RegisteredPaymentMethodProps} RegisteredPaymentMethodProps - * @typedef {import('@woocommerce/type-defs/cart').CartTotalItem} CartTotalItem + * Returns am interface to use as payment method props. */ - -/** - * Prepares the total items into a shape usable for display as passed on to - * registered payment methods. - * - * @param {Object} totals Current cart total items - * @param {boolean} needsShipping Whether or not shipping is needed. - * - * @return {CartTotalItem[]} Array for cart total items prepared for use. - */ -export const prepareTotalItems = ( totals, needsShipping ) => { - const newTotals = []; - const factory = ( label, property ) => { - const value = parseInt( totals[ property ], 10 ); - const tax = parseInt( totals[ property + '_tax' ], 10 ); - return { - label, - value, - valueWithTax: value + tax, - }; - }; - newTotals.push( - factory( - __( 'Subtotal:', 'woo-gutenberg-products-block' ), - 'total_items' - ) - ); - newTotals.push( - factory( __( 'Fees:', 'woo-gutenberg-products-block' ), 'total_fees' ) - ); - newTotals.push( - factory( - __( 'Discount:', 'woo-gutenberg-products-block' ), - 'total_discount' - ) - ); - newTotals.push( { - label: __( 'Taxes:', 'woo-gutenberg-products-block' ), - value: parseInt( totals.total_tax, 10 ), - valueWithTax: parseInt( totals.total_tax, 10 ), - } ); - if ( needsShipping ) { - newTotals.push( - factory( - __( 'Shipping:', 'woo-gutenberg-products-block' ), - 'total_shipping' - ) - ); - } - return newTotals; -}; - -/** - * @return {RegisteredPaymentMethodProps} Interface to use as payment method props. - */ -export const usePaymentMethodInterface = () => { +export const usePaymentMethodInterface = (): Record< string, unknown > => { const { isCalculating, isComplete, @@ -107,7 +52,6 @@ export const usePaymentMethodInterface = () => { selectedRates, setSelectedRates, isSelectingRate, - onShippingRateSuccess, onShippingRateFail, onShippingRateSelectSuccess, @@ -142,27 +86,7 @@ export const usePaymentMethodInterface = () => { }, [ cartTotals, needsShipping ] ); return { - checkoutStatus: { - isCalculating, - isComplete, - isIdle, - isProcessing, - }, - paymentStatus: currentStatus, - shippingStatus: { - shippingErrorStatus, - shippingErrorTypes, - }, - shippingData: { - shippingRates, - shippingRatesLoading, - selectedRates, - setSelectedRates, - isSelectingRate, - shippingAddress, - setShippingAddress, - needsShipping, - }, + activePaymentMethod, billing: { billingData, cartTotal: currentCartTotal.current, @@ -171,10 +95,25 @@ export const usePaymentMethodInterface = () => { displayPricesIncludingTax: getSetting( 'displayCartPricesIncludingTax', false - ), + ) as boolean, appliedCoupons, customerId, }, + checkoutStatus: { + isCalculating, + isComplete, + isIdle, + isProcessing, + }, + components: { + ValidationInputError, + PaymentMethodIcons, + PaymentMethodLabel, + }, + emitResponse: { + noticeContexts, + responseTypes, + }, eventRegistration: { onCheckoutBeforeProcessing, onCheckoutValidationBeforeProcessing, @@ -186,18 +125,23 @@ export const usePaymentMethodInterface = () => { onShippingRateSelectFail, onPaymentProcessing, }, - components: { - ValidationInputError, - PaymentMethodIcons, - PaymentMethodLabel, - }, - emitResponse: { - noticeContexts, - responseTypes, - }, onSubmit, - activePaymentMethod, + paymentStatus: currentStatus, setExpressPaymentError, + shippingData: { + shippingRates, + shippingRatesLoading, + selectedRates, + setSelectedRates, + isSelectingRate, + shippingAddress, + setShippingAddress, + needsShipping, + }, + shippingStatus: { + shippingErrorStatus, + shippingErrorTypes, + }, shouldSavePayment, }; }; diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts new file mode 100644 index 00000000000..850f695f56e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts @@ -0,0 +1,85 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + CartResponseTotals, + objectHasProp, + isString, +} from '@woocommerce/types'; + +export interface CartTotalItem { + key: string; + label: string; + value: number; + valueWithTax: number; +} + +/** + * Prepares the total items into a shape usable for display as passed on to + * registered payment methods. + * + * @param {Object} totals Current cart total items + * @param {boolean} needsShipping Whether or not shipping is needed. + */ +export const prepareTotalItems = ( + totals: CartResponseTotals, + needsShipping: boolean +): CartTotalItem[] => { + const newTotals = []; + + const factory = ( label: string, property: string ): CartTotalItem => { + const taxProperty = property + '_tax'; + const value = + objectHasProp( totals, property ) && isString( totals[ property ] ) + ? parseInt( totals[ property ] as string, 10 ) + : 0; + const tax = + objectHasProp( totals, taxProperty ) && + isString( totals[ taxProperty ] ) + ? parseInt( totals[ taxProperty ] as string, 10 ) + : 0; + return { + key: property, + label, + value, + valueWithTax: value + tax, + }; + }; + + newTotals.push( + factory( + __( 'Subtotal:', 'woo-gutenberg-products-block' ), + 'total_items' + ) + ); + + newTotals.push( + factory( __( 'Fees:', 'woo-gutenberg-products-block' ), 'total_fees' ) + ); + + newTotals.push( + factory( + __( 'Discount:', 'woo-gutenberg-products-block' ), + 'total_discount' + ) + ); + + newTotals.push( { + key: 'total_tax', + label: __( 'Taxes:', 'woo-gutenberg-products-block' ), + value: parseInt( totals.total_tax, 10 ), + valueWithTax: parseInt( totals.total_tax, 10 ), + } ); + + if ( needsShipping ) { + newTotals.push( + factory( + __( 'Shipping:', 'woo-gutenberg-products-block' ), + 'total_shipping' + ) + ); + } + + return newTotals; +}; diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts index f1633098811..165fda1cc52 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts @@ -73,7 +73,7 @@ export const useCustomerData = (): { billingData: CartResponseBillingAddress; shippingAddress: CartResponseShippingAddress; setBillingData: ( data: CartResponseBillingAddress ) => void; - setShippingAddress: ( data: CartResponseBillingAddress ) => void; + setShippingAddress: ( data: CartResponseShippingAddress ) => void; } => { const { updateCustomerData } = useDispatch( storeKey ); const { addErrorNotice, removeNotice } = useStoreNotices(); diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-emit-response.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-emit-response.ts index a57c7492f31..dba4150b091 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-emit-response.ts +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-emit-response.ts @@ -1,7 +1,7 @@ /** - * Internal dependencies + * External dependencies */ -import { isObject } from '../../utils/type-guards'; +import { isObject } from '@woocommerce/types'; export enum responseTypes { SUCCESS = 'success', diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx index 0b97d95e26f..83daeaea332 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx @@ -13,6 +13,7 @@ import { import { __ } from '@wordpress/i18n'; import { usePrevious } from '@woocommerce/base-hooks'; import deprecated from '@wordpress/deprecated'; +import { isObject } from '@woocommerce/types'; /** * Internal dependencies @@ -41,7 +42,6 @@ import { useStoreNotices } from '../../../hooks/use-store-notices'; import { useStoreEvents } from '../../../hooks/use-store-events'; import { useCheckoutNotices } from '../../../hooks/use-checkout-notices'; import { useEmitResponse } from '../../../hooks/use-emit-response'; -import { isObject } from '../../../../utils/type-guards'; /** * @typedef {import('@woocommerce/type-defs/contexts').CheckoutDataContext} CheckoutDataContext diff --git a/plugins/woocommerce-blocks/assets/js/base/context/tsconfig.json b/plugins/woocommerce-blocks/assets/js/base/context/tsconfig.json index 67dcce3b07f..ee30528e736 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/tsconfig.json +++ b/plugins/woocommerce-blocks/assets/js/base/context/tsconfig.json @@ -7,10 +7,9 @@ "../../settings/shared/index.ts", "../../settings/blocks/index.ts", "../../base/hooks/index.js", - "../utils/type-guards.ts", "../../base/utils/", "../../data/", - "../../type-defs", + "../../types/", "../components" ], "exclude": [ "**/test/**" ] diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/index.js b/plugins/woocommerce-blocks/assets/js/base/utils/index.js index 16b08c3468c..59ebbab1835 100644 --- a/plugins/woocommerce-blocks/assets/js/base/utils/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/utils/index.js @@ -8,4 +8,3 @@ export * from './get-valid-block-attributes'; export * from './product-data'; export * from './derive-selected-shipping-rates'; export * from './from-entries-polyfill'; -export * from './type-guards'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx index 6ee8e7f5972..0901fc3d003 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx @@ -30,7 +30,7 @@ import { import Dinero from 'dinero.js'; import { useCallback, useMemo } from '@wordpress/element'; import type { CartItem } from '@woocommerce/type-defs/cart'; -import { objectHasProp } from '@woocommerce/base-utils'; +import { objectHasProp } from '@woocommerce/types'; import { getSetting } from '@woocommerce/settings'; /** diff --git a/plugins/woocommerce-blocks/assets/js/settings/shared/settings-init.ts b/plugins/woocommerce-blocks/assets/js/settings/shared/settings-init.ts index 77f947e2d1e..1f22e0d7938 100644 --- a/plugins/woocommerce-blocks/assets/js/settings/shared/settings-init.ts +++ b/plugins/woocommerce-blocks/assets/js/settings/shared/settings-init.ts @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { SymbolPosition } from '@woocommerce/type-defs/currency'; + declare global { interface Window { wcSettings: Record< string, unknown >; @@ -12,7 +17,7 @@ export interface WooCommerceSiteCurrency { // The symbol for the currency (eg '$') symbol: string; // The position for the symbol ('left', or 'right') - symbolPosition: 'left' | 'right' | 'left_space' | 'right_space'; + symbolPosition: SymbolPosition; // The string used for the decimal separator. decimalSeparator: string; // The string used for the thousands separator. diff --git a/plugins/woocommerce-blocks/assets/js/settings/shared/tsconfig.json b/plugins/woocommerce-blocks/assets/js/settings/shared/tsconfig.json index f4a70235d73..88f1693a6a7 100644 --- a/plugins/woocommerce-blocks/assets/js/settings/shared/tsconfig.json +++ b/plugins/woocommerce-blocks/assets/js/settings/shared/tsconfig.json @@ -3,6 +3,7 @@ "include": [ ".", "../../type-defs", + "../../types/", "../../mapped-types.ts", "../../filters/exclude-draft-status-from-analytics.js" ] diff --git a/plugins/woocommerce-blocks/assets/js/types/index.ts b/plugins/woocommerce-blocks/assets/js/types/index.ts new file mode 100644 index 00000000000..cb6658743ed --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/types/index.ts @@ -0,0 +1,2 @@ +export * from './type-defs'; +export * from './type-guards'; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/add-to-cart-form.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/add-to-cart-form.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/add-to-cart-form.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/add-to-cart-form.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/address-fields.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/address-fields.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/address-fields.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/address-fields.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/billing.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/billing.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/billing.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/billing.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/cart-response.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/cart-response.ts similarity index 90% rename from plugins/woocommerce-blocks/assets/js/type-defs/cart-response.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/cart-response.ts index 78fea67c2f9..4514af5327a 100644 --- a/plugins/woocommerce-blocks/assets/js/type-defs/cart-response.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/cart-response.ts @@ -1,26 +1,17 @@ /* eslint-disable camelcase -- API responses have camelcase properties */ /** - * External dependencies + * Internal dependencies */ +import { CurrencyResponse } from './currency'; import { CartImageItem, CartItemPrices, CartItemTotals, CartVariationItem, CatalogVisibility, -} from '@woocommerce/type-defs/cart'; +} from './cart'; -export interface CurrencyResponseInfo { - currency_code: string; - currency_symbol: string; - currency_minor_unit: number; - currency_decimal_separator: string; - currency_thousand_separator: string; - currency_prefix: string; - currency_suffix: string; -} - -export interface CartResponseTotalsItem extends CurrencyResponseInfo { +export interface CartResponseTotalsItem extends CurrencyResponse { total_discount: string; total_discount_tax: string; } @@ -61,7 +52,7 @@ export type ExtensionsData = | Record< string, never >; export interface CartResponseShippingPackageShippingRate - extends CurrencyResponseInfo { + extends CurrencyResponse { rate_id: string; name: string; description: string; @@ -110,7 +101,7 @@ export interface CartResponseVariationItem { value: string; } -export interface CartResponseItemPrices extends CurrencyResponseInfo { +export interface CartResponseItemPrices extends CurrencyResponse { price: string; regular_price: string; sale_price: string; @@ -123,7 +114,7 @@ export interface CartResponseItemPrices extends CurrencyResponseInfo { }; } -export interface CartResponseItemTotals extends CurrencyResponseInfo { +export interface CartResponseItemTotals extends CurrencyResponse { line_subtotal: string; line_subtotal_tax: string; line_total: string; @@ -160,7 +151,7 @@ export interface CartResponseTotalsTaxLineItem { rate: string; } -export interface CartResponseFeeItemTotals extends CurrencyResponseInfo { +export interface CartResponseFeeItemTotals extends CurrencyResponse { total: string; total_tax: string; } @@ -171,7 +162,7 @@ export type CartResponseFeeItem = { totals: CartResponseFeeItemTotals; }; -export interface CartResponseTotals extends CurrencyResponseInfo { +export interface CartResponseTotals extends CurrencyResponse { total_items: string; total_items_tax: string; total_fees: string; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/cart.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/cart.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/cart.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/cart.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/cart.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/cart.ts similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/cart.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/cart.ts diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js similarity index 98% rename from plugins/woocommerce-blocks/assets/js/type-defs/contexts.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js index fd762a2b11a..7ce328d16de 100644 --- a/plugins/woocommerce-blocks/assets/js/type-defs/contexts.js +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/contexts.js @@ -13,8 +13,8 @@ * * @property {BillingData} billingData The current billing data, including address and email. * @property {CartShippingAddress} shippingAddress The current set address for shipping. - * @property {Function} setBillingData A function for setting billing data. - * @property {Function} setShippingAddress A function for setting shipping address. + * @property {function()} setBillingData A function for setting billing data. + * @property {function()} setShippingAddress A function for setting shipping address. */ /** @@ -27,10 +27,10 @@ * @property {CartShippingOption[]} shippingRates An array of available shipping rates. * @property {boolean} shippingRatesLoading Whether or not the shipping rates are being loaded. * @property {string[]} selectedRates The ids of the rates that are selected. - * @property {Function} setSelectedRates Function for setting the selected rates. + * @property {function()} setSelectedRates Function for setting the selected rates. * @property {boolean} isSelectingRate True when rate is being selected. * @property {CartShippingAddress} shippingAddress The current set address for shipping. - * @property {Function} setShippingAddress Function for setting the shipping address. + * @property {function()} setShippingAddress Function for setting the shipping address. * @property {function()} onShippingRateSuccess Used to register a callback to be invoked when shipping * rates are retrieved. * @property {function()} onShippingRateSelectSuccess Used to register a callback to be invoked when shipping diff --git a/plugins/woocommerce-blocks/assets/js/types/type-defs/currency.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/currency.ts new file mode 100644 index 00000000000..c03b4249007 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/currency.ts @@ -0,0 +1,22 @@ +export interface Currency { + code: string; + decimalSeparator: string; + minorUnit: number; + prefix: string; + suffix: string; + symbol: string; + thousandSeparator: string; +} + +/* eslint-disable camelcase -- API responses have camelcase properties */ +export interface CurrencyResponse { + currency_code: string; + currency_symbol: string; + currency_minor_unit: number; + currency_decimal_separator: string; + currency_thousand_separator: string; + currency_prefix: string; + currency_suffix: string; +} + +export type SymbolPosition = 'left' | 'left_space' | 'right' | 'right_space'; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/hooks.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/hooks.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/hooks.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.ts similarity index 96% rename from plugins/woocommerce-blocks/assets/js/type-defs/hooks.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.ts index a17d0dd6716..6ce5a89656f 100644 --- a/plugins/woocommerce-blocks/assets/js/type-defs/hooks.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.ts @@ -12,7 +12,7 @@ import type { CartResponseShippingRate, CartResponse, } from './cart-response'; -import type { ResponseError } from '../data/types'; +import type { ResponseError } from '../../data/types'; export interface StoreCartItemQuantity { isPendingDelete: boolean; quantity: number; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/index.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/index.ts similarity index 80% rename from plugins/woocommerce-blocks/assets/js/type-defs/index.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/index.ts index 492bc51693b..125778a7b9f 100644 --- a/plugins/woocommerce-blocks/assets/js/type-defs/index.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/index.ts @@ -2,3 +2,4 @@ export * from './cart-response'; export * from './product-response'; export * from './cart'; export * from './hooks'; +export * from './currency'; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/payments.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/payments.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/payments.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/payments.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/product-response.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/product-response.ts similarity index 88% rename from plugins/woocommerce-blocks/assets/js/type-defs/product-response.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/product-response.ts index 9de7a8c162a..1dc16eef033 100644 --- a/plugins/woocommerce-blocks/assets/js/type-defs/product-response.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-defs/product-response.ts @@ -1,15 +1,11 @@ /* eslint-disable camelcase -- API responses have camelcase properties */ -export interface CurrencyResponseInfo { - currency_code: string; - currency_symbol: string; - currency_minor_unit: number; - currency_decimal_separator: string; - currency_thousand_separator: string; - currency_prefix: string; - currency_suffix: string; -} -export interface ProductResponseItemPrices extends CurrencyResponseInfo { +/** + * Internal dependencies + */ +import { CurrencyResponse } from './currency'; + +export interface ProductResponseItemPrices extends CurrencyResponse { price: string; regular_price: string; sale_price: string; diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/registered-payment-method-props.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/registered-payment-method-props.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/registered-payment-method-props.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/settings.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/settings.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/settings.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/settings.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/shipping.js b/plugins/woocommerce-blocks/assets/js/types/type-defs/shipping.js similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/shipping.js rename to plugins/woocommerce-blocks/assets/js/types/type-defs/shipping.js diff --git a/plugins/woocommerce-blocks/assets/js/type-defs/shipping.ts b/plugins/woocommerce-blocks/assets/js/types/type-defs/shipping.ts similarity index 100% rename from plugins/woocommerce-blocks/assets/js/type-defs/shipping.ts rename to plugins/woocommerce-blocks/assets/js/types/type-defs/shipping.ts diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/type-guards.ts b/plugins/woocommerce-blocks/assets/js/types/type-guards/index.ts similarity index 92% rename from plugins/woocommerce-blocks/assets/js/base/utils/type-guards.ts rename to plugins/woocommerce-blocks/assets/js/types/type-guards/index.ts index 5166bf7e39c..15f22717c5b 100644 --- a/plugins/woocommerce-blocks/assets/js/base/utils/type-guards.ts +++ b/plugins/woocommerce-blocks/assets/js/types/type-guards/index.ts @@ -17,11 +17,11 @@ export const isObject = < T extends Record< string, unknown >, U >( }; export function objectHasProp< P extends PropertyKey >( - target: Record< string, unknown >, + target: unknown, property: P ): target is { [ K in P ]: unknown } { // The `in` operator throws a `TypeError` for non-object values. - return property in target; + return isObject( target ) && property in target; } // eslint-disable-next-line @typescript-eslint/ban-types diff --git a/plugins/woocommerce-blocks/bin/webpack-helpers.js b/plugins/woocommerce-blocks/bin/webpack-helpers.js index d021d345cd7..dd7deb11e86 100644 --- a/plugins/woocommerce-blocks/bin/webpack-helpers.js +++ b/plugins/woocommerce-blocks/bin/webpack-helpers.js @@ -85,6 +85,7 @@ const getAlias = ( options = {} ) => { __dirname, `../assets/js/${ pathPart }previews/` ), + '@woocommerce/types': path.resolve( __dirname, `../assets/js/types/` ), }; }; diff --git a/plugins/woocommerce-blocks/packages/prices/index.js b/plugins/woocommerce-blocks/packages/prices/index.js index f0c4eaa5e07..04bca77e0de 100644 --- a/plugins/woocommerce-blocks/packages/prices/index.js +++ b/plugins/woocommerce-blocks/packages/prices/index.js @@ -1,2 +1 @@ export * from './utils'; -export * from './types'; diff --git a/plugins/woocommerce-blocks/packages/prices/types.ts b/plugins/woocommerce-blocks/packages/prices/types.ts deleted file mode 100644 index 79c74221ede..00000000000 --- a/plugins/woocommerce-blocks/packages/prices/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface Currency { - code: string; - decimalSeparator: string; - minorUnit: number; - prefix: string; - suffix: string; - symbol: string; - thousandSeparator: string; -} diff --git a/plugins/woocommerce-blocks/packages/prices/utils/price.ts b/plugins/woocommerce-blocks/packages/prices/utils/price.ts index 1b36c879aab..55914cb3753 100644 --- a/plugins/woocommerce-blocks/packages/prices/utils/price.ts +++ b/plugins/woocommerce-blocks/packages/prices/utils/price.ts @@ -2,15 +2,12 @@ * External dependencies */ import { CURRENCY } from '@woocommerce/settings'; -import type { CurrencyResponseInfo } from '@woocommerce/type-defs/cart-response'; -import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart'; - -/** - * Internal dependencies - */ -import type { Currency } from '../types'; - -type SymbolPosition = 'left' | 'left_space' | 'right' | 'right_space'; +import type { + Currency, + CurrencyResponse, + CartShippingPackageShippingRate, + SymbolPosition, +} from '@woocommerce/types'; /** * Get currency prefix. @@ -73,7 +70,7 @@ const siteCurrencySettings: Currency = { export const getCurrencyFromPriceResponse = ( // Currency data object, for example an API response containing currency formatting data. currencyData: - | CurrencyResponseInfo + | CurrencyResponse | Record< string, never > | CartShippingPackageShippingRate ): Currency => { diff --git a/plugins/woocommerce-blocks/packages/tsconfig.json b/plugins/woocommerce-blocks/packages/tsconfig.json index e7f1621a3fa..89b029a2675 100644 --- a/plugins/woocommerce-blocks/packages/tsconfig.json +++ b/plugins/woocommerce-blocks/packages/tsconfig.json @@ -5,7 +5,7 @@ ".", "../assets/js/icons", "../assets/js/settings", - "../assets/js/type-defs", + "../assets/js/types", "../assets/js/base/components", "../assets/js/base/hooks", "../settings/shared/index.ts", diff --git a/plugins/woocommerce-blocks/tests/js/jest.config.json b/plugins/woocommerce-blocks/tests/js/jest.config.json index b988a10d067..bb7b2aa35e4 100644 --- a/plugins/woocommerce-blocks/tests/js/jest.config.json +++ b/plugins/woocommerce-blocks/tests/js/jest.config.json @@ -27,7 +27,8 @@ "@woocommerce/resource-previews": "assets/js/previews", "@woocommerce/shared-context": "assets/js/shared/context", "@woocommerce/shared-hocs": "assets/js/shared/hocs", - "@woocommerce/blocks-test-utils": "tests/utils" + "@woocommerce/blocks-test-utils": "tests/utils", + "@woocommerce/types": "assets/js/types" }, "setupFiles": [ "@wordpress/jest-preset-default/scripts/setup-globals.js", diff --git a/plugins/woocommerce-blocks/tsconfig.base.json b/plugins/woocommerce-blocks/tsconfig.base.json index 757f1be4b65..f3c35cbda57 100644 --- a/plugins/woocommerce-blocks/tsconfig.base.json +++ b/plugins/woocommerce-blocks/tsconfig.base.json @@ -52,8 +52,8 @@ "@woocommerce/knobs": [ "storybook/knobs" ], "@woocommerce/settings": [ "assets/js/settings/shared" ], "@woocommerce/shared-context": [ "assets/js/shared/context" ], - "@woocommerce/type-defs/*": [ "assets/js/type-defs/*" ], - "@woocommerce/types": [ "assets/js/type-defs" ] + "@woocommerce/type-defs/*": [ "assets/js/types/type-defs/*" ], + "@woocommerce/types": [ "assets/js/types" ] } } }