Merge branch 'trunk' into fix/load-theme-specific-stylesheet-in-site-editor

This commit is contained in:
Néstor Soriano 2023-02-24 16:35:55 +01:00 committed by GitHub
commit 00b8a8e76c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
122 changed files with 3208 additions and 2189 deletions

View File

@ -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] -->

View File

@ -2,6 +2,10 @@ name: 'Pull request post-merge processing'
on:
pull_request_target:
types: [closed]
paths:
- 'packages/**'
- 'plugins/woocommerce/**'
- 'plugins/woocommerce-admin/**'
permissions: {}

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Add deprecated message to product slot fill components

View File

@ -27,16 +27,16 @@ A Slotfill component that will allow you to add a new field to a specific sectio
This is the fill component. You must provide the `id` prop to identify your product field fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| -------------| -------- | ------------------------------------------------------------------------------------------------------------------------ |
| `id` | String | A unique string to identify your fill. Used for configuiration management. |
| `section ` | String | The string used to identify the particular section where you want to render your field. |
| ---------- | ------ | ------------------------------------------------------------------------------------------------ |
| `id` | String | A unique string to identify your fill. Used for configuration management. |
| `sections` | Array | Contains an array of name and order values for which slots it should be rendered in. |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `order` | Number | (optional) This number will dictate the order that the fields rendered by a Slot will be appear. |
### WooProductFieldItem.Slot (slot)
This is the slot component, and will not be used as frequently. It must also receive the required `location` prop that will be identical to the fill `location`.
This is the slot component. This will render all the registered fills that match the `section` prop.
| Name | Type | Description |
| ----------- | ------ | ---------------------------------------------------------------------------------------------------- |
| --------- | ------ | --------------------------------------------------------------------------------------------------- |
| `section` | String | Unique to the section that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -4,6 +4,7 @@
import React, { useEffect } from 'react';
import { Slot, Fill } from '@wordpress/components';
import { createElement, Children, Fragment } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
@ -29,6 +30,8 @@ type WooProductFieldFillProps = {
children?: React.ReactNode;
};
const DEFAULT_FIELD_ORDER = 20;
const WooProductFieldFill: React.FC< WooProductFieldFillProps > = ( {
fieldName,
sectionName,
@ -39,6 +42,12 @@ const WooProductFieldFill: React.FC< WooProductFieldFillProps > = ( {
const fieldId = `product_field/${ sectionName }/${ fieldName }`;
deprecated( `__experimentalWooProductFieldItem`, {
version: '13.0.0',
plugin: '@woocommerce/components',
hint: 'Moved to @woocommerce/product-editor package: import { __experimentalWooProductFieldItem } from @woocommerce/product-editor',
} );
useEffect( () => {
registerFill( fieldId );
}, [] );
@ -75,7 +84,8 @@ export const WooProductFieldItem: React.FC< WooProductFieldItemProps > & {
} = ( { children, sections, id } ) => {
return (
<>
{ sections.map( ( { name: sectionName, order = 20 } ) => (
{ sections.map(
( { name: sectionName, order = DEFAULT_FIELD_ORDER } ) => (
<WooProductFieldFill
fieldName={ id }
sectionName={ sectionName }
@ -84,7 +94,8 @@ export const WooProductFieldItem: React.FC< WooProductFieldItemProps > & {
>
{ children }
</WooProductFieldFill>
) ) }
)
) }
</>
);
};

View File

@ -31,16 +31,16 @@ A Slotfill component that will allow you to add a new section to the product edi
This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| -------------| -------- | ------------------------------------------------------------------------------------------------------------------------ |
| ---------- | ------ | -------------------------------------------------------------------------------------------------- |
| `id` | String | A unique string to identify your fill. Used for configuiration management. |
| `location` | String | The string used to identify the particular location that you want to render your section. |
| `tabs` | Array | Contains an array of name and order of which slots it should be rendered in. |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
### WooProductSectionItem.Slot (slot)
This is the slot component, and will not be used as frequently. It must also receive the required `location` prop that will be identical to the fill `location`.
This is the slot component. This will render all the registered fills that match the `tab` prop.
| Name | Type | Description |
| ----------- | ------ | ---------------------------------------------------------------------------------------------------- |
| `location` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |
| ----- | ------ | ---------------------------------------------------------------------------------------------------- |
| `tab` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -4,6 +4,7 @@
import React from 'react';
import { Slot, Fill } from '@wordpress/components';
import { createElement, Fragment } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
@ -21,12 +22,20 @@ type WooProductSectionSlotProps = {
tab: string;
};
const DEFAULT_SECTION_ORDER = 20;
export const WooProductSectionItem: React.FC< WooProductSectionItemProps > & {
Slot: React.FC< Slot.Props & WooProductSectionSlotProps >;
} = ( { children, tabs } ) => {
deprecated( `__experimentalWooProductSectionItem`, {
version: '13.0.0',
plugin: '@woocommerce/components',
hint: 'Moved to @woocommerce/product-editor package: import { __experimentalWooProductSectionItem } from @woocommerce/product-editor',
} );
return (
<>
{ tabs.map( ( { name: tabName, order: tabOrder } ) => (
{ tabs.map( ( { name: tabName, order: sectionOrder } ) => (
<Fill
name={ `woocommerce_product_section_${ tabName }` }
key={ tabName }
@ -34,7 +43,7 @@ export const WooProductSectionItem: React.FC< WooProductSectionItemProps > & {
{ ( fillProps: Fill.Props ) => {
return createOrderedChildren<
Fill.Props & { tabName: string }
>( children, tabOrder || 20, {
>( children, sectionOrder || DEFAULT_SECTION_ORDER, {
tabName,
...fillProps,
} );

View File

@ -19,17 +19,17 @@ A Slotfill component that will allow you to add a new tab to the product editor.
This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| ---------- | ------ | -------------------------------------------------------------------------------------------------------------- |
| ----------- | ------ | -------------------------------------------------------------------------------------------------------------- |
| `id` | String | A unique string to identify your fill. Used for configuiration management. |
| `location` | String | The string used to identify the particular location that you want to render your section. |
| `templates` | Array | Array of name and order of which template slots it should be rendered in |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `tabProps` | Object | An object containing tab props: name, title, className, disabled (see TabPanel.Tab from @wordpress/components) |
| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
### WooProductTabItem.Slot (slot)
This is the slot component, and will not be used as frequently. It must also receive the required `location` prop that will be identical to the fill `location`.
This is the slot component. This will render all the registered fills that match the `template` prop.
| Name | Type | Description |
| ---------- | ------ | ---------------------------------------------------------------------------------------------------- |
| `location` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |
| `template` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -4,6 +4,7 @@
import React, { ReactElement, ReactNode } from 'react';
import { Slot, Fill, TabPanel } from '@wordpress/components';
import { createElement, Fragment } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
@ -30,11 +31,19 @@ type WooProductFieldSlotProps = {
) => ReactElement | null;
};
const DEFAULT_TAB_ORDER = 20;
export const WooProductTabItem: React.FC< WooProductTabItemProps > & {
Slot: React.VFC<
Omit< Slot.Props, 'children' > & WooProductFieldSlotProps
>;
} = ( { children, tabProps, templates } ) => {
deprecated( `__experimentalWooProductTabItem`, {
version: '13.0.0',
plugin: '@woocommerce/components',
hint: 'Moved to @woocommerce/product-editor package: import { __experimentalWooProductTabItem } from @woocommerce/product-editor',
} );
if ( ! templates ) {
// eslint-disable-next-line no-console
console.warn( 'WooProductTabItem fill is missing templates property.' );
@ -50,12 +59,12 @@ export const WooProductTabItem: React.FC< WooProductTabItemProps > & {
{ ( fillProps: Fill.Props ) => {
return createOrderedChildren< Fill.Props >(
children,
templateData.order || 20,
templateData.order || DEFAULT_TAB_ORDER,
{},
{
tabProps,
templateName: templateData.name,
order: templateData.order || 20,
order: templateData.order || DEFAULT_TAB_ORDER,
...fillProps,
}
);
@ -84,7 +93,7 @@ WooProductTabItem.Slot = ( { fillProps, template, children } ) => (
: props.tabProps;
tabs.push( {
...tabProps,
order: props.order ?? 20,
order: props.order ?? DEFAULT_TAB_ORDER,
} );
}
return {

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Copy over the product slot fill components from @woocommerce/components

View File

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

View File

@ -29,19 +29,28 @@
},
"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:*",
"@wordpress/browserslist-config": "^4.1.1",
"concurrently": "^7.0.0",
"css-loader": "^3.6.0",
"eslint": "^8.32.0",
"jest": "^27.5.1",
"jest-cli": "^27.5.1",
"postcss-loader": "^3.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"sass-loader": "^10.2.1",
"ts-jest": "^27.1.3",
"typescript": "^4.8.3",
@ -60,5 +69,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"
}
}

View File

@ -0,0 +1,7 @@
export {
ProductSectionLayout as __experimentalProductSectionLayout,
ProductFieldSection as __experimentalProductFieldSection,
} from './product-section-layout';
export { WooProductFieldItem as __experimentalWooProductFieldItem } from './woo-product-field-item';
export { WooProductSectionItem as __experimentalWooProductSectionItem } from './woo-product-section-item';
export { WooProductTabItem as __experimentalWooProductTabItem } from './woo-product-tab-item';

View File

@ -0,0 +1,42 @@
# WooProductFieldItem Slot & Fill
A Slotfill component that will allow you to add a new field to a specific section in the product editor.
## Usage
```jsx
<WooProductFieldItem id={ key } section="details" order={ 2 } pluginId="test-plugin" >
{ () => {
return (
<TextControl
label="Name"
name={ `product-mvp-name` }
placeholder="e.g. 12 oz Coffee Mug"
value="Test Name"
onChange={ () => console.debug( 'Changed!' ) }
/>
);
} }
</WooProductFieldItem>
<WooProductFieldItem.Slot section="details" />
```
### WooProductFieldItem (fill)
This is the fill component. You must provide the `id` prop to identify your product field fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| ---------- | ------ | ------------------------------------------------------------------------------------------------ |
| `id` | String | A unique string to identify your fill. Used for configuration management. |
| `sections` | Array | Contains an array of name and order values for which slots it should be rendered in. |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `order` | Number | (optional) This number will dictate the order that the fields rendered by a Slot will be appear. |
### WooProductFieldItem.Slot (slot)
This is the slot component. This will render all the registered fills that match the `section` prop.
| Name | Type | Description |
| --------- | ------ | --------------------------------------------------------------------------------------------------- |
| `section` | String | Unique to the section that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -0,0 +1 @@
export * from './woo-product-field-item';

View File

@ -0,0 +1,130 @@
/**
* External dependencies
*/
import { ReactNode } from 'react';
import { Slot, Fill } from '@wordpress/components';
import {
createElement,
Children,
Fragment,
useEffect,
} from '@wordpress/element';
import {
useSlotContext,
SlotContextHelpersType,
} from '@woocommerce/components';
/**
* Internal dependencies
*/
import { createOrderedChildren, sortFillsByOrder } from '../../utils';
import { ProductFillLocationType } from '../woo-product-tab-item';
type WooProductFieldItemProps = {
id: string;
sections: ProductFillLocationType[];
pluginId: string;
};
type WooProductFieldSlotProps = {
section: string;
};
type WooProductFieldFillProps = {
fieldName: string;
sectionName: string;
order: number;
children?: ReactNode;
};
const DEFAULT_FIELD_ORDER = 20;
const WooProductFieldFill: React.FC< WooProductFieldFillProps > = ( {
fieldName,
sectionName,
order,
children,
} ) => {
const { registerFill, getFillHelpers } = useSlotContext();
const fieldId = `product_field/${ sectionName }/${ fieldName }`;
useEffect( () => {
registerFill( fieldId );
}, [] );
return (
<Fill
name={ `woocommerce_product_field_${ sectionName }` }
key={ fieldId }
>
{ ( fillProps: Fill.Props ) =>
createOrderedChildren<
Fill.Props &
SlotContextHelpersType & {
sectionName: string;
},
{ _id: string }
>(
children,
order,
{
sectionName,
...fillProps,
...getFillHelpers(),
},
{ _id: fieldId }
)
}
</Fill>
);
};
export const WooProductFieldItem: React.FC< WooProductFieldItemProps > & {
Slot: React.FC< Slot.Props & WooProductFieldSlotProps >;
} = ( { children, sections, id } ) => {
return (
<>
{ sections.map(
( { name: sectionName, order = DEFAULT_FIELD_ORDER } ) => (
<WooProductFieldFill
fieldName={ id }
sectionName={ sectionName }
order={ order }
key={ sectionName }
>
{ children }
</WooProductFieldFill>
)
) }
</>
);
};
WooProductFieldItem.Slot = ( { fillProps, section } ) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { filterRegisteredFills } = useSlotContext();
return (
<Slot
name={ `woocommerce_product_field_${ section }` }
fillProps={ fillProps }
>
{ ( fills ) => {
if ( ! sortFillsByOrder ) {
return null;
}
return Children.map(
sortFillsByOrder( filterRegisteredFills( fills ) )?.props
.children,
( child ) => (
<div className="woocommerce-product-form__field">
{ child }
</div>
)
);
} }
</Slot>
);
};

View File

@ -0,0 +1,46 @@
# WooProductSectionItem Slot & Fill
A Slotfill component that will allow you to add a new section to the product editor.
## Usage
```jsx
<WooProductSectionItem id={ key } location="tab/general" order={ 2 } pluginId="test-plugin" >
{ () => {
return (
<ProductSectionLayout
title={ __( 'Product test section', 'woocommerce' ) }
description={ __(
'In this area you can describe the section.',
'woocommerce'
) }
>
<Card>
<CardBody>{ /* Section content */ }</CardBody>
</Card>
</ProductSectionLayout>
);
} }
</WooProductSectionItem>
<WooProductSectionItem.Slot location="tab/general" />
```
### WooProductSectionItem (fill)
This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| ---------- | ------ | -------------------------------------------------------------------------------------------------- |
| `id` | String | A unique string to identify your fill. Used for configuration management. |
| `tabs` | Array | Contains an array of name and order of which slots it should be rendered in. |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
### WooProductSectionItem.Slot (slot)
This is the slot component. This will render all the registered fills that match the `tab` prop.
| Name | Type | Description |
| ----- | ------ | ---------------------------------------------------------------------------------------------------- |
| `tab` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -0,0 +1 @@
export * from './woo-product-section-item';

View File

@ -0,0 +1,63 @@
/**
* External dependencies
*/
import React from 'react';
import { Slot, Fill } from '@wordpress/components';
import { createElement, Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import { createOrderedChildren, sortFillsByOrder } from '../../utils';
import { ProductFillLocationType } from '../woo-product-tab-item';
type WooProductSectionItemProps = {
id: string;
tabs: ProductFillLocationType[];
pluginId: string;
};
type WooProductSectionSlotProps = {
tab: string;
};
const DEFAULT_SECTION_ORDER = 20;
export const WooProductSectionItem: React.FC< WooProductSectionItemProps > & {
Slot: React.FC< Slot.Props & WooProductSectionSlotProps >;
} = ( { children, tabs } ) => {
return (
<>
{ tabs.map( ( { name: tabName, order: sectionOrder } ) => (
<Fill
name={ `woocommerce_product_section_${ tabName }` }
key={ tabName }
>
{ ( fillProps: Fill.Props ) => {
return createOrderedChildren<
Fill.Props & { tabName: string }
>( children, sectionOrder || DEFAULT_SECTION_ORDER, {
tabName,
...fillProps,
} );
} }
</Fill>
) ) }
</>
);
};
WooProductSectionItem.Slot = ( { fillProps, tab } ) => (
<Slot
name={ `woocommerce_product_section_${ tab }` }
fillProps={ fillProps }
>
{ ( fills ) => {
if ( ! sortFillsByOrder ) {
return null;
}
return sortFillsByOrder( fills );
} }
</Slot>
);

View File

@ -0,0 +1,35 @@
# WooProductTabItem Slot & Fill
A Slotfill component that will allow you to add a new tab to the product editor.
## Usage
```jsx
<WooProductTabItem id={ key } location="tab/general" order={ 2 } pluginId="test-plugin" tabProps={ { title: 'New tab', name: 'new-tab' } } >
<Card>
<CardBody>{ /* Tab content */ }</CardBody>
</Card>
</WooProductTabItem>
<WooProductTabItem.Slot location="tab/general" />
```
### WooProductTabItem (fill)
This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
| Prop | Type | Description |
| ----------- | ------ | -------------------------------------------------------------------------------------------------------------- |
| `id` | String | A unique string to identify your fill. Used for configuration management. |
| `templates` | Array | Array of name and order of which template slots it should be rendered in |
| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
| `tabProps` | Object | An object containing tab props: name, title, className, disabled (see TabPanel.Tab from @wordpress/components) |
| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
### WooProductTabItem.Slot (slot)
This is the slot component. This will render all the registered fills that match the `template` prop.
| Name | Type | Description |
| ---------- | ------ | ---------------------------------------------------------------------------------------------------- |
| `template` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |

View File

@ -0,0 +1 @@
export * from './woo-product-tab-item';

View File

@ -0,0 +1,109 @@
/**
* External dependencies
*/
import React, { ReactElement, ReactNode } from 'react';
import { Slot, Fill, TabPanel } from '@wordpress/components';
import { createElement, Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import { createOrderedChildren } from '../../utils';
export type ProductFillLocationType = { name: string; order?: number };
type WooProductTabItemProps = {
id: string;
pluginId: string;
tabProps:
| TabPanel.Tab
// eslint-disable-next-line @typescript-eslint/no-explicit-any
| ( ( fillProps: Record< string, any > | undefined ) => TabPanel.Tab );
templates?: Array< ProductFillLocationType >;
};
type WooProductFieldSlotProps = {
template: string;
children: (
tabs: TabPanel.Tab[],
tabChildren: Record< string, ReactNode >
) => ReactElement | null;
};
const DEFAULT_TAB_ORDER = 20;
export const WooProductTabItem: React.FC< WooProductTabItemProps > & {
Slot: React.VFC<
Omit< Slot.Props, 'children' > & WooProductFieldSlotProps
>;
} = ( { children, tabProps, templates } ) => {
if ( ! templates ) {
// eslint-disable-next-line no-console
console.warn( 'WooProductTabItem fill is missing templates property.' );
return null;
}
return (
<>
{ templates.map( ( templateData ) => (
<Fill
name={ `woocommerce_product_tab_${ templateData.name }` }
key={ templateData.name }
>
{ ( fillProps: Fill.Props ) => {
return createOrderedChildren< Fill.Props >(
children,
templateData.order || DEFAULT_TAB_ORDER,
{},
{
tabProps,
templateName: templateData.name,
order: templateData.order || DEFAULT_TAB_ORDER,
...fillProps,
}
);
} }
</Fill>
) ) }
</>
);
};
WooProductTabItem.Slot = ( { fillProps, template, children } ) => (
<Slot
name={ `woocommerce_product_tab_${ template }` }
fillProps={ fillProps }
>
{ ( fills ) => {
const tabData = fills.reduce(
( { childrenMap, tabs }, fill ) => {
const props: WooProductTabItemProps & { order: number } =
fill[ 0 ].props;
if ( props && props.tabProps ) {
childrenMap[ props.tabProps.name ] = fill[ 0 ];
const tabProps =
typeof props.tabProps === 'function'
? props.tabProps( fillProps )
: props.tabProps;
tabs.push( {
...tabProps,
order: props.order ?? DEFAULT_TAB_ORDER,
} );
}
return {
childrenMap,
tabs,
};
},
{ childrenMap: {}, tabs: [] } as {
childrenMap: Record< string, ReactElement >;
tabs: Array< TabPanel.Tab & { order: number } >;
}
);
const orderedTabs = tabData.tabs.sort( ( a, b ) => {
return a.order - b.order;
} );
return children( orderedTabs, tabData.childrenMap );
} }
</Slot>
);

View File

@ -1,4 +1,6 @@
export {
ProductSectionLayout as __experimentalProductSectionLayout,
ProductFieldSection as __experimentalProductFieldSection,
} from './product-section-layout';
export * from './components';
/**
* Utils
*/
export * from './utils';

View File

@ -1 +1 @@
@import 'product-section-layout/style.scss';
@import 'components/product-section-layout/style.scss';

View File

@ -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';

View File

@ -0,0 +1,72 @@
/**
* External dependencies
*/
import { isValidElement, Fragment } from 'react';
import { Slot, Fill } from '@wordpress/components';
import { cloneElement, createElement } from '@wordpress/element';
type ChildrenProps = {
order: number;
};
/**
* Returns an object with the children and props that will be used by `cloneElement`. They will change depending on the
* type of children passed in.
*
* @param {Node} children - Node children.
* @param {number} order - Node order.
* @param {Array} props - Fill props.
* @param {Object} injectProps - Props to inject.
* @return {Object} Object with the keys: children and props.
*/
function getChildrenAndProps< T = Fill.Props, S = Record< string, unknown > >(
children: React.ReactNode,
order: number,
props: T,
injectProps?: S
) {
if ( typeof children === 'function' ) {
return {
children: children( { ...props, order, ...injectProps } ),
props: { order, ...injectProps },
};
} else if ( isValidElement( children ) ) {
// This checks whether 'children' is a react element or a standard HTML element.
if ( typeof children?.type === 'function' ) {
return {
children,
props: {
...props,
order,
...injectProps,
},
};
}
return {
children: children as React.ReactElement< ChildrenProps >,
props: { order, ...injectProps },
};
}
throw Error( 'Invalid children type' );
}
/**
* Ordered fill item.
*
* @param {Node} children - Node children.
* @param {number} order - Node order.
* @param {Array} props - Fill props.
* @param {Object} injectProps - Props to inject.
* @return {Node} Node.
*/
function createOrderedChildren< T = Fill.Props, S = Record< string, unknown > >(
children: React.ReactNode,
order: number,
props: T,
injectProps?: S
) {
const { children: childrenToRender, props: propsToRender } =
getChildrenAndProps( children, order, props, injectProps );
return cloneElement( childrenToRender, propsToRender );
}
export { createOrderedChildren };

View File

@ -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, '' );
};

View File

@ -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,
} );
},
};
}

View File

@ -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,
};
};

View File

@ -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.

View File

@ -0,0 +1,37 @@
/**
* 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 * from './create-ordered-children';
export * from './sort-fills-by-order';
export {
AUTO_DRAFT_NAME,
formatCurrencyDisplayValue,
getCheckboxTracks,
getCurrencySymbolProps,
getDerivedProductType,
getProductStatus,
getProductStockStatus,
getProductStockStatusClass,
getProductTitle,
getProductVariationTitle,
getTruncatedProductVariationTitle,
preventLeavingProductForm,
PRODUCT_STATUS_LABELS,
};

View File

@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { Fragment } from 'react';
import { Slot } from '@wordpress/components';
import { createElement } from '@wordpress/element';
/**
* Sort fills by order for slot children.
*
* @param {Array} fills - slot's `Fill`s.
* @return {Node} Node.
*/
export const sortFillsByOrder: Slot.Props[ 'children' ] = ( fills ) => {
// Copy fills array here because its type is readonly array that doesn't have .sort method in Typescript definition.
const sortedFills = [ ...fills ].sort( ( a, b ) => {
return a[ 0 ].props.order - b[ 0 ].props.order;
} );
return <Fragment>{ sortedFills }</Fragment>;
};

View File

@ -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 {};

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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',
},
} );

View File

@ -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;
}
}

View File

@ -0,0 +1,100 @@
/**
* External dependencies
*/
import { TourKit, TourKitTypes } from '@woocommerce/components';
import { __ } from '@wordpress/i18n';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import {
createElement,
createInterpolateElement,
useState,
} from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { getAdminLink } from '@woocommerce/settings';
/**
* Internal dependencies
*/
import './report-date-tour.scss';
const DATE_TYPE_OPTION = 'woocommerce_date_type';
export const ReportDateTour: React.FC< {
optionName: string;
headingText: string;
} > = ( { optionName, headingText } ) => {
const [ isDismissed, setIsDismissed ] = useState( false );
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
const { shouldShowTour, isResolving } = useSelect( ( select ) => {
const { getOption, hasFinishedResolution } =
select( OPTIONS_STORE_NAME );
return {
shouldShowTour:
getOption( optionName ) !== 'yes' &&
getOption( DATE_TYPE_OPTION ) === false,
isResolving: ! (
hasFinishedResolution( 'getOption', [ optionName ] ) &&
hasFinishedResolution( 'getOption', [ DATE_TYPE_OPTION ] )
),
};
} );
if ( isDismissed || ! shouldShowTour || isResolving ) {
return null;
}
const config: TourKitTypes.WooConfig = {
steps: [
{
referenceElements: {
desktop:
'.woocommerce-filters-filter > .components-dropdown',
},
focusElement: {
desktop:
'.woocommerce-filters-filter > .components-dropdown',
},
meta: {
name: 'product-feedback-',
heading: headingText,
descriptions: {
desktop: createInterpolateElement(
__(
'We now collect orders in this table based on when the payment went through, rather than when they were placed. You can change this in <link>settings</link>.',
'woocommerce'
),
{
link: createElement( 'a', {
href: getAdminLink(
'admin.php?page=wc-admin&path=/analytics/settings'
),
'aria-label': __(
'Analytics date settings',
'woocommerce'
),
} ),
}
),
},
primaryButton: {
text: __( 'Got it', 'woocommerce' ),
},
},
options: {
classNames: {
desktop: 'woocommerce-revenue-report-date-tour',
},
},
},
],
closeHandler: () => {
updateOptions( {
[ optionName ]: 'yes',
} );
setIsDismissed( true );
},
};
return <TourKit config={ config } />;
};

View File

@ -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';
/**

View File

@ -2,12 +2,12 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Link } from '@woocommerce/components';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
Link,
} from '@woocommerce/components';
import { __experimentalProductSectionLayout as ProductSectionLayout } from '@woocommerce/product-editor';
__experimentalProductSectionLayout as ProductSectionLayout,
} from '@woocommerce/product-editor';
import { recordEvent } from '@woocommerce/tracks';
/**

View File

@ -8,6 +8,7 @@ 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';
@ -15,7 +16,6 @@ import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { getCheckboxTracks } from '../../sections/utils';
import { PRODUCT_DETAILS_SLUG } from '../constants';
export const DetailsFeatureField = () => {

View File

@ -3,10 +3,10 @@
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalProductFieldSection as ProductFieldSection,
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
} from '@woocommerce/components';
import { __experimentalProductFieldSection as ProductFieldSection } from '@woocommerce/product-editor';
} from '@woocommerce/product-editor';
/**
* Internal dependencies

View File

@ -2,12 +2,12 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Link } from '@woocommerce/components';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
Link,
} from '@woocommerce/components';
import { __experimentalProductFieldSection as ProductFieldSection } from '@woocommerce/product-editor';
__experimentalProductFieldSection as ProductFieldSection,
} from '@woocommerce/product-editor';
import { recordEvent } from '@woocommerce/tracks';
/**

View File

@ -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 >();

View File

@ -6,6 +6,7 @@ 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';
@ -13,7 +14,6 @@ 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 >();

View File

@ -3,13 +3,15 @@
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
Link,
useFormContext,
CollapsibleContent,
} from '@woocommerce/components';
import { __experimentalProductSectionLayout as ProductSectionLayout } from '@woocommerce/product-editor';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
__experimentalProductSectionLayout as ProductSectionLayout,
} from '@woocommerce/product-editor';
import { Card, CardBody } from '@wordpress/components';
import { recordEvent } from '@woocommerce/tracks';
import { getAdminLink } from '@woocommerce/settings';

View File

@ -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';

View File

@ -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 = {

View File

@ -3,13 +3,15 @@
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
Link,
useFormContext,
CollapsibleContent,
} from '@woocommerce/components';
import { __experimentalProductSectionLayout as ProductSectionLayout } from '@woocommerce/product-editor';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
__experimentalProductSectionLayout as ProductSectionLayout,
} from '@woocommerce/product-editor';
import { recordEvent } from '@woocommerce/tracks';
import { Product } from '@woocommerce/data';
import { useContext } from '@wordpress/element';

View File

@ -1,11 +1,8 @@
/**
* External dependencies
*/
import {
__experimentalWooProductFieldItem as WooProductFieldItem,
renderField,
useFormContext,
} from '@woocommerce/components';
import { renderField, useFormContext } from '@woocommerce/components';
import { __experimentalWooProductFieldItem as WooProductFieldItem } from '@woocommerce/product-editor';
import { Product, ProductFormField } from '@woocommerce/data';
export const Fields: React.FC< { fields: ProductFormField[] } > = ( {

View File

@ -2,8 +2,10 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { __experimentalWooProductSectionItem as WooProductSectionItem } from '@woocommerce/components';
import { __experimentalProductFieldSection as ProductFieldSection } from '@woocommerce/product-editor';
import {
__experimentalProductFieldSection as ProductFieldSection,
__experimentalWooProductSectionItem as WooProductSectionItem,
} from '@woocommerce/product-editor';
import { ProductFormSection } from '@woocommerce/data';
export const Sections: React.FC< { sections: ProductFormSection[] } > = ( {

View File

@ -6,8 +6,8 @@ import { registerPlugin } from '@wordpress/plugins';
import {
__experimentalWooProductTabItem as WooProductTabItem,
__experimentalWooProductSectionItem as WooProductSectionItem,
useFormContext,
} from '@woocommerce/components';
} from '@woocommerce/product-editor';
import { useFormContext } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
import { useMemo } from '@wordpress/element';

View File

@ -6,7 +6,7 @@ import { registerPlugin } from '@wordpress/plugins';
import {
__experimentalWooProductTabItem as WooProductTabItem,
__experimentalWooProductSectionItem as WooProductSectionItem,
} from '@woocommerce/components';
} from '@woocommerce/product-editor';
import { PartialProduct } from '@woocommerce/data';
/**

View File

@ -5,8 +5,8 @@ import { __ } from '@wordpress/i18n';
import {
__experimentalWooProductSectionItem as WooProductSectionItem,
__experimentalWooProductFieldItem as WooProductFieldItem,
} from '@woocommerce/components';
import { __experimentalProductSectionLayout as ProductSectionLayout } from '@woocommerce/product-editor';
__experimentalProductSectionLayout as ProductSectionLayout,
} from '@woocommerce/product-editor';
import { PartialProduct, OPTIONS_STORE_NAME } from '@woocommerce/data';
import { useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';

View File

@ -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,

View File

@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { TabPanel, Tooltip } from '@wordpress/components';
import { navigateTo, getNewPath, getQuery } from '@woocommerce/navigation';
import { __experimentalWooProductTabItem as WooProductTabItem } from '@woocommerce/components';
import { __experimentalWooProductTabItem as WooProductTabItem } from '@woocommerce/product-editor';
import { PartialProduct } from '@woocommerce/data';
import classnames from 'classnames';

View File

@ -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';

View File

@ -11,6 +11,7 @@ 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';
@ -18,7 +19,6 @@ import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getCheckboxTracks } from '../sections/utils';
import { WooHeaderItem } from '~/header/utils';
import './product-settings.scss';

View File

@ -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 = () => {

View File

@ -10,6 +10,11 @@ import {
} from '@woocommerce/data';
import { getAdminLink } from '@woocommerce/settings';
import { getNewPath } from '@woocommerce/navigation';
import {
getProductTitle,
getProductVariationTitle,
getTruncatedProductVariationTitle,
} from '@woocommerce/product-editor';
import { useFormContext } from '@woocommerce/components';
import { useParams } from 'react-router-dom';
import { useSelect } from '@wordpress/data';
@ -17,11 +22,6 @@ import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { getProductTitle } from './utils/get-product-title';
import {
getProductVariationTitle,
getTruncatedProductVariationTitle,
} from './utils/get-product-variation-title';
import { ProductBreadcrumbs } from './product-breadcrumbs';
import { ProductStatusBadge } from './product-status-badge';
import { WooHeaderPageTitle } from '~/header/utils';

View File

@ -7,6 +7,7 @@ import {
EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
ProductVariation,
} from '@woocommerce/data';
import { preventLeavingProductForm } from '@woocommerce/product-editor';
import { registerPlugin } from '@wordpress/plugins';
import { useDispatch } from '@wordpress/data';
import { useFormContext } from '@woocommerce/components';
@ -16,7 +17,6 @@ import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { preventLeavingProductForm } from './utils/prevent-leaving-product-form';
import usePreventLeavingPage from '~/hooks/usePreventLeavingPage';
import { WooHeaderItem } from '~/header/utils';
import './product-form-actions.scss';

View File

@ -9,6 +9,7 @@ import {
CardBody,
BaseControl,
} from '@wordpress/components';
import { getCheckboxTracks } from '@woocommerce/product-editor';
import { MediaItem } from '@wordpress/media-utils';
import {
useFormContext,
@ -21,7 +22,6 @@ import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getCheckboxTracks } from './utils';
import { ProductSectionLayout } from '../layout/product-section-layout';
import { SingleImageField } from '../fields/single-image-field';

View File

@ -1,81 +0,0 @@
/**
* External dependencies
*/
import { ChangeEvent } from 'react';
import { Product } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
/**
* 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;
};
/**
* 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,
} );
},
};
}
/**
* 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,
};
};
/**
* 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, '' );
};

View File

@ -2,6 +2,10 @@
* 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';
@ -20,9 +24,7 @@ import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { AUTO_DRAFT_NAME } from './utils/get-product-title';
import { CurrencyContext } from '../lib/currency-context';
import { getDerivedProductType } from './utils/get-derived-product-type';
import {
NUMBERS_AND_DECIMAL_SEPARATOR,
ONLY_ONE_DECIMAL_SEPARATOR,

View File

@ -20,7 +20,7 @@
"clean": "rimraf ../woocommerce/assets/client/admin/*",
"client:watch": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development webpack --watch",
"create-hook-reference": "node ./bin/hook-reference/index.js",
"create-wc-extension": "node ./bin/starter-pack/starter-pack.js",
"create-wc-extension": "pnpm -w run create-extension",
"dev": "cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config && cross-env WC_ADMIN_PHASE=development pnpm -w run build --filter='./packages/js/*' && cross-env WC_ADMIN_PHASE=development webpack",
"example": "webpack --config docs/examples/extensions/examples.config.js --watch",
"preinstall": "npx only-allow pnpm",

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add a cache for orders, to use when custom order tables are enabled

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix no enforcing of min/max limits in quantity selector of variable products.

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update create-wc-extension script within woocommerce-admin.

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Add support for null inputs to pnpm wc_add_number_precision

View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Trigger event `woocommerce_attributes_saved` following successful product meta box ajax update.

View File

@ -0,0 +1,4 @@
Significance: major
Type: update
Change the default date used on Revenue and Orders report to 'date_paid' and create spotlight on both reports

View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update imports of product slot fills to new @woocommerce/product-editor library

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Move product utils into product editor package

View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update WooCommerce Blocks to 9.6.2

View File

@ -797,6 +797,9 @@ jQuery( function ( $ ) {
$( '#variable_product_options' ).trigger( 'reload' );
}
);
$( document.body ).trigger( 'woocommerce_attributes_saved' );
}
} );
} );

View File

@ -263,7 +263,8 @@
$dimensions = form.$product.find(
'.product_dimensions, .woocommerce-product-attributes-item--dimensions .woocommerce-product-attributes-item__value'
),
$qty = form.$singleVariationWrap.find( '.quantity input[name="quantity"]' ),
$qty_input = form.$singleVariationWrap.find( '.quantity input.qty[name="quantity"]' ),
$qty = $qty_input.closest( '.quantity' ),
purchasable = true,
variation_id = '',
template = false,
@ -308,12 +309,11 @@
// Hide or show qty input
if ( variation.is_sold_individually === 'yes' ) {
$qty.find( 'input.qty' ).val( '1' ).attr( 'min', '1' ).attr( 'max', '' ).trigger( 'change' );
$qty_input.val( '1' ).attr( 'min', '1' ).attr( 'max', '' ).trigger( 'change' );
$qty.hide();
} else {
var $qty_input = $qty.find( 'input.qty' ),
qty_val = parseFloat( $qty_input.val() );
var qty_val = parseFloat( $qty_input.val() );
if ( isNaN( qty_val ) ) {
qty_val = variation.min_qty;

View File

@ -21,7 +21,7 @@
"maxmind-db/reader": "^1.11",
"pelago/emogrifier": "^6.0",
"woocommerce/action-scheduler": "3.5.4",
"woocommerce/woocommerce-blocks": "9.6.1"
"woocommerce/woocommerce-blocks": "9.6.2"
},
"require-dev": {
"automattic/jetpack-changelogger": "^3.3.0",

View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "092f7722dc1ab046fc4204f3a8d6ef5e",
"content-hash": "3114b2ae01803fb5d37d2e848b566b8e",
"packages": [
{
"name": "automattic/jetpack-autoloader",
@ -628,16 +628,16 @@
},
{
"name": "woocommerce/woocommerce-blocks",
"version": "v9.6.1",
"version": "v9.6.2",
"source": {
"type": "git",
"url": "https://github.com/woocommerce/woocommerce-blocks.git",
"reference": "5fae67e162c5300ca5da5ebeb4403005492483ac"
"reference": "1eb30afa09310d0dcbe8be1222ac3e5214c60328"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/woocommerce/woocommerce-blocks/zipball/5fae67e162c5300ca5da5ebeb4403005492483ac",
"reference": "5fae67e162c5300ca5da5ebeb4403005492483ac",
"url": "https://api.github.com/repos/woocommerce/woocommerce-blocks/zipball/1eb30afa09310d0dcbe8be1222ac3e5214c60328",
"reference": "1eb30afa09310d0dcbe8be1222ac3e5214c60328",
"shasum": ""
},
"require": {
@ -683,9 +683,9 @@
],
"support": {
"issues": "https://github.com/woocommerce/woocommerce-blocks/issues",
"source": "https://github.com/woocommerce/woocommerce-blocks/tree/v9.6.1"
"source": "https://github.com/woocommerce/woocommerce-blocks/tree/v9.6.2"
},
"time": "2023-02-17T14:57:23+00:00"
"time": "2023-02-22T13:56:14+00:00"
}
],
"packages-dev": [

View File

@ -10,9 +10,11 @@
* @package WooCommerce\Classes
*/
use Automattic\WooCommerce\Caches\OrderCache;
use Automattic\WooCommerce\Proxies\LegacyProxy;
use Automattic\WooCommerce\Utilities\ArrayUtil;
use Automattic\WooCommerce\Utilities\NumberUtil;
use Automattic\WooCommerce\Utilities\OrderUtil;
defined( 'ABSPATH' ) || exit;
@ -203,6 +205,11 @@ abstract class WC_Abstract_Order extends WC_Abstract_Legacy_Order {
$this->save_items();
if ( OrderUtil::orders_cache_usage_is_enabled() ) {
$order_cache = wc_get_container()->get( OrderCache::class );
$order_cache->update_if_cached( $this );
}
/**
* Trigger action after saving to the DB.
*

View File

@ -488,6 +488,8 @@ if ( ! class_exists( 'WC_Admin_Settings', false ) ) :
$visibility_class[] = 'show_options_if_checked';
}
$must_disable = ArrayUtil::get_value_or_default( $value, 'disabled', false );
if ( ! isset( $value['checkboxgroup'] ) || 'start' === $value['checkboxgroup'] ) {
$has_tooltip = isset( $value['tooltip'] ) && '' !== $value['tooltip'];
$tooltip_container_class = $has_tooltip ? 'with-tooltip' : '';
@ -515,6 +517,7 @@ if ( ! class_exists( 'WC_Admin_Settings', false ) ) :
?>
<label for="<?php echo esc_attr( $value['id'] ); ?>">
<input
<?php echo $must_disable ? 'disabled' : ''; ?>
name="<?php echo esc_attr( $value['field_name'] ); ?>"
id="<?php echo esc_attr( $value['id'] ); ?>"
type="checkbox"

View File

@ -5,12 +5,15 @@
* @package WooCommerce\Classes
*/
use Automattic\WooCommerce\Caching\CacheNameSpaceTrait;
defined( 'ABSPATH' ) || exit;
/**
* WC_Cache_Helper.
*/
class WC_Cache_Helper {
use CacheNameSpaceTrait;
/**
* Transients to delete on shutdown.
@ -114,44 +117,6 @@ class WC_Cache_Helper {
}
}
/**
* Get prefix for use with wp_cache_set. Allows all cache in a group to be invalidated at once.
*
* @param string $group Group of cache to get.
* @return string
*/
public static function get_cache_prefix( $group ) {
// Get cache key - uses cache key wc_orders_cache_prefix to invalidate when needed.
$prefix = wp_cache_get( 'wc_' . $group . '_cache_prefix', $group );
if ( false === $prefix ) {
$prefix = microtime();
wp_cache_set( 'wc_' . $group . '_cache_prefix', $prefix, $group );
}
return 'wc_cache_' . $prefix . '_';
}
/**
* Increment group cache prefix (invalidates cache).
*
* @param string $group Group of cache to clear.
*/
public static function incr_cache_prefix( $group ) {
wc_deprecated_function( 'WC_Cache_Helper::incr_cache_prefix', '3.9.0', 'WC_Cache_Helper::invalidate_cache_group' );
self::invalidate_cache_group( $group );
}
/**
* Invalidate cache group.
*
* @param string $group Group of cache to clear.
* @since 3.9.0
*/
public static function invalidate_cache_group( $group ) {
wp_cache_set( 'wc_' . $group . '_cache_prefix', microtime(), $group );
}
/**
* Get a hash of the customer location.
*

View File

@ -8,10 +8,11 @@
* @package WooCommerce\Classes
*/
defined( 'ABSPATH' ) || exit;
use Automattic\WooCommerce\Caches\OrderCache;
use Automattic\WooCommerce\Utilities\OrderUtil;
defined( 'ABSPATH' ) || exit;
/**
* Order factory class
*/
@ -30,13 +31,26 @@ class WC_Order_Factory {
return false;
}
$use_orders_cache = OrderUtil::orders_cache_usage_is_enabled();
if ( $use_orders_cache ) {
$order_cache = wc_get_container()->get( OrderCache::class );
$order = $order_cache->get( $order_id );
if ( ! is_null( $order ) ) {
return $order;
}
}
$classname = self::get_class_name_for_order_id( $order_id );
if ( ! $classname ) {
return false;
}
try {
return new $classname( $order_id );
$order = new $classname( $order_id );
if ( $use_orders_cache && $order instanceof \WC_Abstract_Legacy_Order ) {
$order_cache->set( $order, $order_id );
}
return $order;
} catch ( Exception $e ) {
wc_caught_exception( $e, __FUNCTION__, array( $order_id ) );
return false;
@ -56,6 +70,22 @@ class WC_Order_Factory {
$result = array();
$order_ids = array_filter( array_map( array( __CLASS__, 'get_order_id' ), $order_ids ) );
$already_cached_orders = array();
$use_orders_cache = OrderUtil::orders_cache_usage_is_enabled();
if ( $use_orders_cache ) {
$uncached_order_ids = array();
$order_cache = wc_get_container()->get( OrderCache::class );
foreach ( $order_ids as $order_id ) {
$cached_order = $order_cache->get( absint( $order_id ) );
if ( is_null( $cached_order ) ) {
$uncached_order_ids[] = $order_id;
} else {
$already_cached_orders[] = $cached_order;
}
}
$order_ids = $uncached_order_ids;
}
// We separate order list by class, since their datastore might be different.
$order_list_by_class = array();
$order_id_classnames = self::get_class_names_for_order_ids( $order_ids );
@ -99,9 +129,16 @@ class WC_Order_Factory {
}
// restore the sort order.
$result = array_replace( array_flip( $order_ids ), $result );
$result = array_values( array_replace( array_flip( $order_ids ), $result ) );
return array_values( $result );
if ( $use_orders_cache ) {
foreach ( $result as $order ) {
$order_cache->set( $order );
}
return array_merge( $already_cached_orders, $result );
} else {
return $result;
}
}
/**

View File

@ -1897,28 +1897,33 @@ function wc_get_tax_rounding_mode() {
/**
* Get rounding precision for internal WC calculations.
* Will increase the precision of wc_get_price_decimals by 2 decimals, unless WC_ROUNDING_PRECISION is set to a higher number.
* Will return the value of wc_get_price_decimals increased by 2 decimals, with WC_ROUNDING_PRECISION being the minimum.
*
* @since 2.6.3
* @return int
*/
function wc_get_rounding_precision() {
$precision = wc_get_price_decimals() + 2;
if ( absint( WC_ROUNDING_PRECISION ) > $precision ) {
if ( $precision < absint( WC_ROUNDING_PRECISION ) ) {
$precision = absint( WC_ROUNDING_PRECISION );
}
return $precision;
}
/**
* Add precision to a number and return a number.
* Add precision to a number by moving the decimal point to the right as many places as indicated by wc_get_price_decimals().
* Optionally the result is rounded so that the total number of digits equals wc_get_rounding_precision() plus one.
*
* @since 3.2.0
* @param float $value Number to add precision to.
* @param bool $round If should round after adding precision.
* @param float|null $value Number to add precision to.
* @param bool $round If the result should be rounded.
* @return int|float
*/
function wc_add_number_precision( float $value, bool $round = true ) {
function wc_add_number_precision( ?float $value, bool $round = true ) {
if ( ! $value ) {
return 0.0;
}
$cent_precision = pow( 10, wc_get_price_decimals() );
$value = $value * $cent_precision;
return $round ? NumberUtil::round( $value, wc_get_rounding_precision() - wc_get_price_decimals() ) : $value;
@ -1932,6 +1937,10 @@ function wc_add_number_precision( float $value, bool $round = true ) {
* @return float
*/
function wc_remove_number_precision( $value ) {
if ( ! $value ) {
return 0.0;
}
$cent_precision = pow( 10, wc_get_price_decimals() );
return $value / $cent_precision;
}

View File

@ -73,7 +73,7 @@ class DataStore extends ReportsDataStore implements DataStoreInterface {
* Dynamically sets the date column name based on configuration
*/
public function __construct() {
$this->date_column_name = get_option( 'woocommerce_date_type', 'date_created' );
$this->date_column_name = get_option( 'woocommerce_date_type', 'date_paid' );
parent::__construct();
}

View File

@ -0,0 +1,44 @@
<?php
namespace Automattic\WooCommerce\Caches;
use Automattic\WooCommerce\Caching\ObjectCache;
/**
* A class to cache order objects.
*/
class OrderCache extends ObjectCache {
/**
* Get the identifier for the type of the cached objects.
*
* @return string
*/
public function get_object_type(): string {
return 'orders';
}
/**
* Get the id of an object to be cached.
*
* @param array|object $object The object to be cached.
* @return int|string|null The id of the object, or null if it can't be determined.
*/
protected function get_object_id( $object ) {
return $object->get_id();
}
/**
* Validate an object before caching it.
*
* @param array|object $object The object to validate.
* @return string[]|null An array of error messages, or null if the object is valid.
*/
protected function validate( $object ): ?array {
if ( ! $object instanceof \WC_Abstract_Order ) {
return array( 'The supplied order is not an instance of WC_Abstract_Order, ' . gettype( $object ) );
}
return null;
}
}

Some files were not shown because too many files have changed in this diff Show More