Merge branch 'trunk' into fix/36890_create_wc_extension_script

.github/PULL_REQUEST_TEMPLATE.md

@@ -14,15 +14,11 @@
 
 Closes # .
 
-<!-- The next section is mandatory. If your PR doesn't require testing, please indicate that you are purposefully omitting instructions. -->
-
-- [ ] This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).
-
 <!-- Begin testing instructions -->
 
 ### How to test the changes in this Pull Request:
 
-<!-- Otherwise, please include detailed instructions on how these changes can be tested. Please, make sure to review and follow the guide for writing high-quality testing instructions below. -->
+<!-- Please include detailed instructions on how these changes can be tested, make sure to review and follow the guide for writing high-quality testing instructions below. -->
 
 - [ ] Have you followed the [Writing high-quality testing instructions guide](https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions)?
 
@@ -37,6 +33,7 @@ Closes # .
 -   [ ] Have you added an explanation of what your changes do and why you'd like us to include them?
 -   [ ] Have you written new tests for your changes, as applicable?
 -   [ ] Have you created a changelog file for each project being changed, ie `pnpm --filter=<project> changelog add`?
+-   [ ] Have you included testing instructions?
 
 <!-- Mark completed items with an [x] -->
 

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/analytics/report/orders/index.js

@@ -3,6 +3,7 @@
  */
 import { Component, Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,6 +14,7 @@ import OrdersReportTable from './table';
 import ReportChart from '../../components/report-chart';
 import ReportSummary from '../../components/report-summary';
 import ReportFilters from '../../components/report-filters';
+import { ReportDateTour } from '~/guided-tours/report-date-tour';
 
 export default class OrdersReport extends Component {
 	render() {
@@ -49,6 +51,13 @@ export default class OrdersReport extends Component {
 					filters={ filters }
 					advancedFilters={ advancedFilters }
 				/>
+				<ReportDateTour
+					optionName="woocommerce_orders_report_date_tour_shown"
+					headingText={ __(
+						'Orders are now reported based on the payment dates ✅',
+						'woocommerce'
+					) }
+				/>
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/client/analytics/report/revenue/index.js

@@ -3,6 +3,7 @@
  */
 import { Component, Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,6 +14,7 @@ import ReportChart from '../../components/report-chart';
 import ReportSummary from '../../components/report-summary';
 import RevenueReportTable from './table';
 import ReportFilters from '../../components/report-filters';
+import { ReportDateTour } from '~/guided-tours/report-date-tour';
 
 export default class RevenueReport extends Component {
 	render() {
@@ -49,6 +51,13 @@ export default class RevenueReport extends Component {
 					filters={ filters }
 					advancedFilters={ advancedFilters }
 				/>
+				<ReportDateTour
+					optionName="woocommerce_revenue_report_date_tour_shown"
+					headingText={ __(
+						'Revenue is now reported from paid orders ✅',
+						'woocommerce'
+					) }
+				/>
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/client/analytics/settings/config.js

@@ -123,6 +123,11 @@ export const config = applyFilters( SETTINGS_FILTER, {
 		label: __( 'Date type:', 'woocommerce' ),
 		inputType: 'select',
 		options: [
+			{
+				label: __( 'Select a date type', 'woocommerce' ),
+				value: '',
+				disabled: true,
+			},
 			{
 				label: __( 'Date created', 'woocommerce' ),
 				value: 'date_created',
@@ -143,6 +148,5 @@ export const config = applyFilters( SETTINGS_FILTER, {
 			'Database date field considered for Revenue and Orders reports',
 			'woocommerce'
 		),
-		defaultValue: 'date_created',
 	},
 } );

plugins/woocommerce-admin/client/guided-tours/report-date-tour.scss

@@ -0,0 +1,7 @@
+.woocommerce-revenue-report-date-tour {
+	h2.woocommerce-tour-kit-step__heading {
+		font-size: 1.5em;
+		line-height: 1.5em;
+		letter-spacing: 0.4px;
+	}
+}