Moving useProductHelper and useVariationsOrder hooks to product editor package (#37006)

packages/js/product-editor/changelog/update-move-product-hooks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Bringing in use-product-helper and related hooks.

packages/js/product-editor/package.json

@@ -29,7 +29,9 @@
 	},
 	"dependencies": {
 		"@woocommerce/components": "workspace:*",
+		"@woocommerce/currency": "workspace:*",
 		"@woocommerce/data": "workspace:^4.1.0",
+		"@woocommerce/number": "workspace:*",
 		"@woocommerce/tracks": "workspace:^1.3.0",
 		"@wordpress/components": "^19.5.0",
 		"@wordpress/element": "^4.1.1",
@@ -39,6 +41,7 @@
 	"devDependencies": {
 		"@types/react": "^17.0.2",
 		"@types/wordpress__components": "^19.10.1",
+		"@types/wordpress__data": "^6.0.0",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
 		"@wordpress/browserslist-config": "^4.1.1",

packages/js/product-editor/src/constants.ts

@@ -0,0 +1,3 @@
+export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
+export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
+export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';

packages/js/product-editor/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper';
+export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order';

packages/js/product-editor/src/hooks/use-product-helper.ts

@@ -2,10 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	AUTO_DRAFT_NAME,
-	getDerivedProductType,
-} from '@woocommerce/product-editor';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useContext, useState } from '@wordpress/element';
 import * as WooNumber from '@woocommerce/number';
@@ -25,11 +21,14 @@ import { CurrencyContext } from '@woocommerce/currency';
 /**
  * Internal dependencies
  */
+import { AUTO_DRAFT_NAME, getDerivedProductType } from '../index';
 import {
 	NUMBERS_AND_DECIMAL_SEPARATOR,
 	ONLY_ONE_DECIMAL_SEPARATOR,
-} from './constants';
+} from '../constants';
-import { ProductVariationsOrder } from './hooks/use-variations-order';
+import { ProductVariationsOrder } from './use-variations-order';
+
+// TODO: Having to add TS ignore comments here, should be able to address with TS config but running into issues.
 
 function removeReadonlyProperties(
 	product: Product
@@ -156,7 +155,11 @@ export function useProductHelper() {
 			},
 			{
 				update: Object.values( variationsOrder )
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
 					.flatMap( Object.entries )
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
 					.map( ( [ id, menu_order ] ) => ( {
 						id,
 						menu_order,
@@ -309,6 +312,8 @@ export function useProductHelper() {
 				'g'
 			);
 			const decimalRegex = new RegExp(
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
 				ONLY_ONE_DECIMAL_SEPARATOR.replaceAll( '%s', decimalSeparator ),
 				'g'
 			);

packages/js/product-editor/src/hooks/use-variations-order.ts

@@ -45,10 +45,10 @@ function sort(
 	} );
 }
 
-export default function useVariationsOrder( {
+export const useVariationsOrder = ( {
 	variations,
 	currentPage,
-}: UseVariationsOrderInput ): UseVariationsOrderOutput {
+}: UseVariationsOrderInput ): UseVariationsOrderOutput => {
 	const { setValue, values } = useFormContext< ProductVariationsOrder >();
 
 	function onOrderChange( items: JSX.Element[] ) {
@@ -71,7 +71,7 @@ export default function useVariationsOrder( {
 		getVariationKey,
 		onOrderChange,
 	};
-}
+};
 
 export type UseVariationsOrderInput = {
 	variations: ProductVariation[];

packages/js/product-editor/src/index.ts

@@ -4,3 +4,8 @@ export * from './components';
  * Utils
  */
 export * from './utils';
+
+/**
+ * Hooks
+ */
+export * from './hooks';

plugins/woocommerce-admin/client/products/fields/variations/variations.tsx

@@ -11,6 +11,7 @@ import {
 import {
 	getProductStockStatus,
 	getProductStockStatusClass,
+	__experimentalUseVariationsOrder as useVariationsOrder,
 } from '@woocommerce/product-editor';
 import {
 	Link,
@@ -31,7 +32,6 @@ import { CurrencyContext } from '@woocommerce/currency';
  * Internal dependencies
  */
 import { PRODUCT_VARIATION_TITLE_LIMIT } from '~/products/constants';
-import useVariationsOrder from '~/products/hooks/use-variations-order';
 import HiddenIcon from '~/products/images/hidden-icon';
 import VisibleIcon from '~/products/images/visible-icon';
 import './variations.scss';

plugins/woocommerce-admin/client/products/fills/pricing-section/pricing-section-fills.tsx

@@ -11,6 +11,7 @@ import {
 	__experimentalWooProductSectionItem as WooProductSectionItem,
 	__experimentalWooProductFieldItem as WooProductFieldItem,
 	__experimentalProductSectionLayout as ProductSectionLayout,
+	__experimentalUseProductHelper as useProductHelper,
 } from '@woocommerce/product-editor';
 import { recordEvent } from '@woocommerce/tracks';
 import { Product } from '@woocommerce/data';
@@ -27,7 +28,6 @@ import {
 	PricingTaxesClassField,
 	PricingTaxesChargeField,
 } from './index';
-import { useProductHelper } from '../../use-product-helper';
 import { PLUGIN_ID } from '../constants';
 
 import './pricing-section.scss';

plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-height.tsx

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { PartialProduct } from '@woocommerce/data';
+import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
 import {
 	BaseControl,
 	// @ts-expect-error `__experimentalInputControl` does exist.
@@ -14,7 +15,6 @@ import {
 /**
  * Internal dependencies
  */
-import { useProductHelper } from '../../use-product-helper';
 import { getInterpolatedSizeLabel } from './utils';
 import { ShippingDimensionsPropsType } from './index';
 

plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-length.tsx

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { PartialProduct } from '@woocommerce/data';
+import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
+
 import {
 	BaseControl,
 	// @ts-expect-error `__experimentalInputControl` does exist.
@@ -14,7 +16,6 @@ import {
 /**
  * Internal dependencies
  */
-import { useProductHelper } from '../../use-product-helper';
 import { getInterpolatedSizeLabel } from './utils';
 import { ShippingDimensionsPropsType } from './index';
 

plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-weight.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { OPTIONS_STORE_NAME, PartialProduct } from '@woocommerce/data';
 import { useSelect } from '@wordpress/data';
+import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
 import {
 	BaseControl,
 	// @ts-expect-error `__experimentalInputControl` does exist.
@@ -12,11 +13,6 @@ import {
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import { useProductHelper } from '../../use-product-helper';
-
 export const ShippingDimensionsWeightField = () => {
 	const { getInputProps } = useFormContext< PartialProduct >();
 	const { formatNumber, parseNumber } = useProductHelper();

plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-field-dimensions-width.tsx

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { PartialProduct } from '@woocommerce/data';
+import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
 import {
 	BaseControl,
 	// @ts-expect-error `__experimentalInputControl` does exist.
@@ -14,7 +15,6 @@ import {
 /**
  * Internal dependencies
  */
-import { useProductHelper } from '../../use-product-helper';
 import { getInterpolatedSizeLabel } from './utils';
 import { ShippingDimensionsPropsType } from './index';
 

plugins/woocommerce-admin/client/products/fills/shipping-section/shipping-section-fills.tsx

@@ -6,6 +6,7 @@ import {
 	__experimentalWooProductSectionItem as WooProductSectionItem,
 	__experimentalWooProductFieldItem as WooProductFieldItem,
 	__experimentalProductSectionLayout as ProductSectionLayout,
+	__experimentalUseProductHelper as useProductHelper,
 } from '@woocommerce/product-editor';
 import { PartialProduct, OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { useSelect } from '@wordpress/data';
@@ -30,7 +31,6 @@ import {
 	ShippingDimensionsImage,
 	ShippingDimensionsImageProps,
 } from '../../fields/shipping-dimensions-image';
-import { useProductHelper } from '../../use-product-helper';
 
 import './shipping-section.scss';
 

plugins/woocommerce-admin/client/products/product-form-actions.tsx

@@ -12,7 +12,10 @@ import {
 import { chevronDown, check, Icon } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
 import { useFormContext } from '@woocommerce/components';
-import { preventLeavingProductForm } from '@woocommerce/product-editor';
+import {
+	preventLeavingProductForm,
+	__experimentalUseProductHelper as useProductHelper,
+} from '@woocommerce/product-editor';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { navigateTo } from '@woocommerce/navigation';
@@ -27,7 +30,6 @@ import { store } from '@wordpress/viewport';
  */
 import usePreventLeavingPage from '~/hooks/usePreventLeavingPage';
 import { WooHeaderItem } from '~/header/utils';
-import { useProductHelper } from './use-product-helper';
 import './product-form-actions.scss';
 import { useProductMVPCESFooter } from '~/customer-effort-score-tracks/use-product-mvp-ces-footer';
 import { useCustomerEffortScoreExitPageTracker } from '~/customer-effort-score-tracks/use-customer-effort-score-exit-page-tracker';

plugins/woocommerce-admin/client/products/shared/edit-product-link-modal/edit-product-link-modal.tsx

@@ -10,12 +10,12 @@ import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
 import { useFormContext } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
+import { __experimentalUseProductHelper as useProductHelper } from '@woocommerce/product-editor';
 
 /**
  * Internal dependencies
  */
 import './edit-product-link-modal.scss';
-import { useProductHelper } from '../../use-product-helper';
 
 type EditProductLinkModalProps = {
 	product: Product;

plugins/woocommerce-admin/client/products/test/product-form-actions.spec.tsx

@@ -43,9 +43,9 @@ jest.mock( '~/header/utils', () => ( {
 		<Fragment { ...props }>{ props.children() }</Fragment>
 	),
 } ) );
-jest.mock( '../use-product-helper', () => {
+jest.mock( '@woocommerce/product-editor', () => {
 	return {
-		useProductHelper: () => ( {
+		__experimentalUseProductHelper: () => ( {
 			createProductWithStatus,
 			updateProductWithStatus,
 			copyProductWithStatus,

plugins/woocommerce/changelog/update-move-product-hooks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Moving use-product-helper and related product hooks to product editor package.

pnpm-lock.yaml

@@ -1297,10 +1297,13 @@ importers:
     specifiers:
       '@types/react': ^17.0.2
       '@types/wordpress__components': ^19.10.1
+      '@types/wordpress__data': ^6.0.0
       '@woocommerce/components': workspace:*
+      '@woocommerce/currency': workspace:*
       '@woocommerce/data': workspace:^4.1.0
       '@woocommerce/eslint-plugin': workspace:*
       '@woocommerce/internal-style-build': workspace:*
+      '@woocommerce/number': workspace:*
       '@woocommerce/tracks': workspace:^1.3.0
       '@wordpress/browserslist-config': ^4.1.1
       '@wordpress/components': ^19.5.0
@@ -1323,7 +1326,9 @@ importers:
       webpack-cli: ^3.3.12
     dependencies:
       '@woocommerce/components': link:../components
+      '@woocommerce/currency': link:../currency
       '@woocommerce/data': link:../data
+      '@woocommerce/number': link:../number
       '@woocommerce/tracks': link:../tracks
       '@wordpress/components': 19.12.0_tufdcic6wklrwyy3rhbsbktylu
       '@wordpress/element': 4.20.0
@@ -1332,6 +1337,7 @@ importers:
     devDependencies:
       '@types/react': 17.0.50
       '@types/wordpress__components': 19.10.1_sfoxds7t5ydpegc3knd667wn6m
+      '@types/wordpress__data': 6.0.0
       '@woocommerce/eslint-plugin': link:../eslint-plugin
       '@woocommerce/internal-style-build': link:../internal-style-build
       '@wordpress/browserslist-config': 4.1.3
@@ -3026,6 +3032,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.19.3
+    dev: true
 
   /@babel/helper-module-imports/7.16.7:
     resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
@@ -3082,6 +3089,7 @@ packages:
   /@babel/helper-plugin-utils/7.14.5:
     resolution: {integrity: sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==}
     engines: {node: '>=6.9.0'}
+    dev: true
 
   /@babel/helper-plugin-utils/7.18.9:
     resolution: {integrity: sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==}
@@ -4160,7 +4168,7 @@ packages:
       '@babel/core': 7.12.9
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.12.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.18.9
       '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.12.9
     transitivePeerDependencies:
       - supports-color
@@ -4175,7 +4183,7 @@ packages:
       '@babel/core': 7.16.12
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-create-class-features-plugin': 7.17.6_@babel+core@7.16.12
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.18.9
       '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.16.12
     transitivePeerDependencies:
       - supports-color