Move product editor utils to product editor package (woocommerce#36730)

* Move product editor utils to product editor package

* Add changelog entries

* Move remaining utils

* Move util import/exports to separate index file

packages/js/product-editor/changelog/update-36719

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add product editor utils

packages/js/product-editor/package.json

@@ -29,10 +29,15 @@
 	},
 	"dependencies": {
 		"@woocommerce/components": "workspace:*",
+		"@woocommerce/data": "workspace:^4.1.0",
+		"@woocommerce/tracks": "workspace:^1.3.0",
 		"@wordpress/components": "^19.5.0",
-		"@wordpress/element": "^4.1.1"
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/i18n": "^4.26.0",
+		"react-router-dom": "^6.3.0"
 	},
 	"devDependencies": {
+		"@types/react": "^17.0.2",
 		"@types/wordpress__components": "^19.10.1",
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
@@ -42,6 +47,7 @@
 		"jest": "^27.5.1",
 		"jest-cli": "^27.5.1",
 		"postcss-loader": "^3.0.0",
+		"react": "^17.0.2",
 		"sass-loader": "^10.2.1",
 		"ts-jest": "^27.1.3",
 		"typescript": "^4.8.3",
@@ -60,5 +66,9 @@
 		"start": "concurrently \"tsc --build --watch\" \"webpack --watch\"",
 		"prepack": "pnpm run clean && pnpm run build",
 		"lint:fix": "eslint src --fix"
+	},
+	"peerDependencies": {
+		"@types/react": "^17.0.2",
+		"react": "^17.0.2"
 	}
 }

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

@@ -2,3 +2,8 @@ export {
 	ProductSectionLayout as __experimentalProductSectionLayout,
 	ProductFieldSection as __experimentalProductFieldSection,
 } from './product-section-layout';
+
+/**
+ * Utils
+ */
+export * from './utils';

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

@@ -0,0 +1,9 @@
+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])';
+// This should never be a real slug value of any existing shipping class
+export const ADD_NEW_SHIPPING_CLASS_OPTION_VALUE =
+	'__ADD_NEW_SHIPPING_CLASS_OPTION__';
+export const UNCATEGORIZED_CATEGORY_SLUG = 'uncategorized';
+export const PRODUCT_VARIATION_TITLE_LIMIT = 32;
+export const STANDARD_RATE_TAX_CLASS_SLUG = 'standard';

packages/js/product-editor/src/utils/format-currency-display-value.ts

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import { NUMBERS_AND_ALLOWED_CHARS } from './constants';
+
+type CurrencyConfig = {
+	code: string;
+	symbol: string;
+	symbolPosition: string;
+	decimalSeparator: string;
+	priceFormat: string;
+	thousandSeparator: string;
+	precision: number;
+};
+
+/**
+ * Cleans and formats the currency value shown to the user.
+ *
+ * @param {string} value          Form value.
+ * @param {Object} currencyConfig Currency context.
+ * @return {string} Display value.
+ */
+export const formatCurrencyDisplayValue = (
+	value: string,
+	currencyConfig: CurrencyConfig,
+	format: ( number: number | string ) => string
+) => {
+	const { decimalSeparator, thousandSeparator } = currencyConfig;
+
+	const regex = new RegExp(
+		NUMBERS_AND_ALLOWED_CHARS.replace( '%s1', decimalSeparator ).replace(
+			'%s2',
+			thousandSeparator
+		),
+		'g'
+	);
+
+	return value === undefined ? value : format( value ).replace( regex, '' );
+};

packages/js/product-editor/src/utils/get-checkbox-tracks.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { ChangeEvent } from 'react';
+import { Product } from '@woocommerce/data';
+import { recordEvent } from '@woocommerce/tracks';
+
+/**
+ * Get additional props to be passed to all checkbox inputs.
+ *
+ * @param  name Name of the checkbox.
+ * @return Props.
+ */
+export function getCheckboxTracks< T = Product >( name: string ) {
+	return {
+		onChange: (
+			isChecked: ChangeEvent< HTMLInputElement > | T[ keyof T ]
+		) => {
+			recordEvent( `product_checkbox_${ name }`, {
+				checked: isChecked,
+			} );
+		},
+	};
+}

packages/js/product-editor/src/utils/get-currency-symbol-props.ts

@@ -0,0 +1,26 @@
+type CurrencyConfig = {
+	code: string;
+	symbol: string;
+	symbolPosition: string;
+	decimalSeparator: string;
+	priceFormat: string;
+	thousandSeparator: string;
+	precision: number;
+};
+
+/**
+ * Get input props for currency related values and symbol positions.
+ *
+ * @param {Object} currencyConfig - Currency context
+ * @return {Object} Props.
+ */
+export const getCurrencySymbolProps = ( currencyConfig: CurrencyConfig ) => {
+	const { symbol, symbolPosition } = currencyConfig;
+	const currencyPosition = symbolPosition.includes( 'left' )
+		? 'prefix'
+		: 'suffix';
+
+	return {
+		[ currencyPosition ]: symbol,
+	};
+};

plugins/woocommerce-admin/client/products/utils/get-product-variation-title.ts → packages/js/product-editor/src/utils/get-product-variation-title.ts

@@ -6,7 +6,7 @@ import { ProductVariation } from '@woocommerce/data';
 /**
  * Internal dependencies
  */
-import { PRODUCT_VARIATION_TITLE_LIMIT } from '../constants';
+import { PRODUCT_VARIATION_TITLE_LIMIT } from './constants';
 
 /**
  * Get the product variation title for use in the header.

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

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { formatCurrencyDisplayValue } from './format-currency-display-value';
+import { getCheckboxTracks } from './get-checkbox-tracks';
+import { getCurrencySymbolProps } from './get-currency-symbol-props';
+import { getDerivedProductType } from './get-derived-product-type';
+import { getProductStatus, PRODUCT_STATUS_LABELS } from './get-product-status';
+import {
+	getProductStockStatus,
+	getProductStockStatusClass,
+} from './get-product-stock-status';
+import { getProductTitle, AUTO_DRAFT_NAME } from './get-product-title';
+import {
+	getProductVariationTitle,
+	getTruncatedProductVariationTitle,
+} from './get-product-variation-title';
+import { preventLeavingProductForm } from './prevent-leaving-product-form';
+
+export {
+	AUTO_DRAFT_NAME,
+	formatCurrencyDisplayValue,
+	getCheckboxTracks,
+	getCurrencySymbolProps,
+	getDerivedProductType,
+	getProductStatus,
+	getProductStockStatus,
+	getProductStockStatusClass,
+	getProductTitle,
+	getProductVariationTitle,
+	getTruncatedProductVariationTitle,
+	preventLeavingProductForm,
+	PRODUCT_STATUS_LABELS,
+};

packages/js/product-editor/typings/global.d.ts

@@ -0,0 +1,9 @@
+declare global {
+	interface Window {
+		wcAdminFeatures: Record< string, boolean >;
+	}
+}
+
+/*~ If your module exports nothing, you'll need this line. Otherwise, delete it */
+export {};
+

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

@@ -8,6 +8,10 @@ import {
 	Product,
 	ProductVariation,
 } from '@woocommerce/data';
+import {
+	getProductStockStatus,
+	getProductStockStatusClass,
+} from '@woocommerce/product-editor';
 import {
 	Link,
 	ListItem,
@@ -31,10 +35,6 @@ import useVariationsOrder from '~/products/hooks/use-variations-order';
 import HiddenIcon from '~/products/images/hidden-icon';
 import VisibleIcon from '~/products/images/visible-icon';
 import { CurrencyContext } from '../../../lib/currency-context';
-import {
-	getProductStockStatus,
-	getProductStockStatusClass,
-} from '../../utils/get-product-stock-status';
 import './variations.scss';
 
 /**

plugins/woocommerce-admin/client/products/fills/details-section/details-field-feature.tsx

@@ -8,14 +8,14 @@ import {
 	Link,
 	__experimentalTooltip as Tooltip,
 } from '@woocommerce/components';
+import { getCheckboxTracks } from '@woocommerce/product-editor';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
  */
-import { getCheckboxTracks } from '../../sections/utils';
 import { PRODUCT_DETAILS_SLUG } from '../constants';
 
 export const DetailsFeatureField = () => {

plugins/woocommerce-admin/client/products/fills/inventory-section/inventory-field-stock-limit.tsx

@@ -4,13 +4,9 @@
 import { __ } from '@wordpress/i18n';
 import { useFormContext } from '@woocommerce/components';
 import { CheckboxControl } from '@wordpress/components';
+import { getCheckboxTracks } from '@woocommerce/product-editor';
 import { Product } from '@woocommerce/data';
 
-/**
- * Internal dependencies
- */
-import { getCheckboxTracks } from '../../sections/utils';
-
 export const InventoryStockLimitField = () => {
 	const { getCheckboxControlProps } = useFormContext< Product >();
 

plugins/woocommerce-admin/client/products/fills/inventory-section/inventory-field-track-quantity.tsx

@@ -6,14 +6,14 @@ import {
 	useFormContext,
 	__experimentalConditionalWrapper as ConditionalWrapper,
 } from '@woocommerce/components';
+import { getCheckboxTracks } from '@woocommerce/product-editor';
 import { Tooltip, ToggleControl } from '@wordpress/components';
 import { Product } from '@woocommerce/data';
 
 /**
  * Internal dependencies
  */
 import { getAdminSetting } from '~/utils/admin-settings';
-import { getCheckboxTracks } from '../../sections/utils';
 
 export const InventoryTrackQuantityField = () => {
 	const { getCheckboxControlProps } = useFormContext< Product >();

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { formatCurrencyDisplayValue } from '@woocommerce/product-editor';
 import { useFormContext, Link } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useContext } from '@wordpress/element';
@@ -18,7 +19,6 @@ import {
  * Internal dependencies
  */
 import { CurrencyInputProps } from './pricing-section-fills';
-import { formatCurrencyDisplayValue } from '../../sections/utils';
 import { CurrencyContext } from '../../../lib/currency-context';
 import { ADMIN_URL } from '~/utils/admin-settings';
 

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

@@ -14,6 +14,7 @@ import { Product, OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { useSelect } from '@wordpress/data';
 import interpolateComponents from '@automattic/interpolate-components';
 import { format as formatDate } from '@wordpress/date';
+import { formatCurrencyDisplayValue } from '@woocommerce/product-editor';
 import moment from 'moment';
 import {
 	BaseControl,
@@ -26,7 +27,6 @@ import {
  * Internal dependencies
  */
 import { CurrencyInputProps } from './pricing-section-fills';
-import { formatCurrencyDisplayValue } from '../../sections/utils';
 import { CurrencyContext } from '../../../lib/currency-context';
 
 type PricingListFieldProps = {

plugins/woocommerce-admin/client/products/hooks/use-product-variations-helper.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { AUTO_DRAFT_NAME } from '@woocommerce/product-editor';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
@@ -10,11 +11,6 @@ import {
 } from '@woocommerce/data';
 import { useFormContext } from '@woocommerce/components';
 
-/**
- * Internal dependencies
- */
-import { AUTO_DRAFT_NAME } from '../utils/get-product-title';
-
 export function useProductVariationsHelper() {
 	const {
 		generateProductVariations: _generateProductVariations,

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

@@ -12,6 +12,7 @@ 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 { Product } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
 import { navigateTo } from '@woocommerce/navigation';
@@ -24,7 +25,6 @@ import { store } from '@wordpress/viewport';
 /**
  * Internal dependencies
  */
-import { preventLeavingProductForm } from './utils/prevent-leaving-product-form';
 import usePreventLeavingPage from '~/hooks/usePreventLeavingPage';
 import { WooHeaderItem } from '~/header/utils';
 import { useProductHelper } from './use-product-helper';

plugins/woocommerce-admin/client/products/product-settings/product-settings.tsx

@@ -11,14 +11,14 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { closeSmall, cog } from '@wordpress/icons';
+import { getCheckboxTracks } from '@woocommerce/product-editor';
 import { Product } from '@woocommerce/data';
 import { useFormContext } from '@woocommerce/components';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { getCheckboxTracks } from '../sections/utils';
 import { WooHeaderItem } from '~/header/utils';
 import './product-settings.scss';
 

plugins/woocommerce-admin/client/products/product-status-badge.tsx

@@ -7,14 +7,14 @@ import { Pill } from '@woocommerce/components';
 import { PRODUCTS_STORE_NAME, WCDataSelector } from '@woocommerce/data';
 import { useParams } from 'react-router-dom';
 import { useSelect } from '@wordpress/data';
+import {
+	getProductStatus,
+	PRODUCT_STATUS_LABELS,
+} from '@woocommerce/product-editor';
 
 /**
  * Internal dependencies
  */
-import {
-	getProductStatus,
-	PRODUCT_STATUS_LABELS,
-} from './utils/get-product-status';
 import './product-status-badge.scss';
 
 export const ProductStatusBadge: React.FC = () => {