From a35f2c3d5da5936b51f74a7e4e8197e2dc1c8444 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Fri, 28 Apr 2023 11:33:56 -0400 Subject: [PATCH] Update List price Pricing link on the general tab to navigate to the Pricing tab (#37961) * Update List price Pricing link on the general tab to navigate to the Pricing tab * Add changelog files * Simplify the event name to product_pricing_help_click --- .../js/product-editor/changelog/add-37931 | 4 + .../src/blocks/pricing/block.json | 4 +- .../src/blocks/pricing/edit.tsx | 81 +++++++++---------- .../src/blocks/pricing/index.ts | 31 ++++--- .../src/blocks/pricing/types.ts | 10 +++ plugins/woocommerce/changelog/add-37931 | 4 + .../includes/class-wc-post-types.php | 11 ++- 7 files changed, 81 insertions(+), 64 deletions(-) create mode 100644 packages/js/product-editor/changelog/add-37931 create mode 100644 packages/js/product-editor/src/blocks/pricing/types.ts create mode 100644 plugins/woocommerce/changelog/add-37931 diff --git a/packages/js/product-editor/changelog/add-37931 b/packages/js/product-editor/changelog/add-37931 new file mode 100644 index 00000000000..20cbd4fc6d7 --- /dev/null +++ b/packages/js/product-editor/changelog/add-37931 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Update List price Pricing link on the general tab to navigate to the Pricing tab diff --git a/packages/js/product-editor/src/blocks/pricing/block.json b/packages/js/product-editor/src/blocks/pricing/block.json index d1670827342..0b0bece7105 100644 --- a/packages/js/product-editor/src/blocks/pricing/block.json +++ b/packages/js/product-editor/src/blocks/pricing/block.json @@ -15,8 +15,8 @@ "label": { "type": "string" }, - "showPricingSection": { - "type": "boolean" + "help": { + "type": "string" } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/pricing/edit.tsx b/packages/js/product-editor/src/blocks/pricing/edit.tsx index 8f8beda2973..ca4291243b0 100644 --- a/packages/js/product-editor/src/blocks/pricing/edit.tsx +++ b/packages/js/product-editor/src/blocks/pricing/edit.tsx @@ -1,19 +1,20 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; +import { Link } from '@woocommerce/components'; +import { CurrencyContext } from '@woocommerce/currency'; +import { getNewPath } from '@woocommerce/navigation'; +import { recordEvent } from '@woocommerce/tracks'; +import { useBlockProps } from '@wordpress/block-editor'; +import { BlockEditProps } from '@wordpress/blocks'; +import { useInstanceId } from '@wordpress/compose'; +import { useEntityProp } from '@wordpress/core-data'; import { createElement, useContext, createInterpolateElement, } from '@wordpress/element'; -import { Link } from '@woocommerce/components'; -import { useBlockProps } from '@wordpress/block-editor'; -import { useEntityProp } from '@wordpress/core-data'; -import { BlockAttributes } from '@wordpress/blocks'; -import { CurrencyContext } from '@woocommerce/currency'; -import { getSetting } from '@woocommerce/settings'; -import { recordEvent } from '@woocommerce/tracks'; +import { __ } from '@wordpress/i18n'; import { BaseControl, // @ts-expect-error `__experimentalInputControl` does exist. @@ -23,13 +24,16 @@ import { /** * Internal dependencies */ -import { formatCurrencyDisplayValue } from '../../utils'; import { useCurrencyInputProps } from '../../hooks/use-currency-input-props'; +import { formatCurrencyDisplayValue } from '../../utils'; +import { PricingBlockAttributes } from './types'; -export function Edit( { attributes }: { attributes: BlockAttributes } ) { +export function Edit( { + attributes, +}: BlockEditProps< PricingBlockAttributes > ) { const blockProps = useBlockProps(); - const { name, label, showPricingSection = false } = attributes; - const [ regularPrice, setRegularPrice ] = useEntityProp< string >( + const { name, label, help } = attributes; + const [ price, setPrice ] = useEntityProp< string >( 'postType', 'product', name @@ -38,51 +42,42 @@ export function Edit( { attributes }: { attributes: BlockAttributes } ) { const { getCurrencyConfig, formatAmount } = context; const currencyConfig = getCurrencyConfig(); const inputProps = useCurrencyInputProps( { - value: regularPrice, - setValue: setRegularPrice, + value: price, + setValue: setPrice, } ); - const taxSettingsElement = showPricingSection - ? createInterpolateElement( - __( - 'Manage more settings in Pricing.', - 'woocommerce' + const interpolatedHelp = help + ? createInterpolateElement( help, { + PricingTab: ( + { + recordEvent( 'product_pricing_help_click' ); + } } + /> ), - { - link: ( - { - recordEvent( - 'product_pricing_list_price_help_tax_settings_click' - ); - } } - > - ), - } - ) + } ) : null; + const priceId = useInstanceId( + BaseControl, + 'wp-block-woocommerce-product-pricing-field' + ) as string; + return (
- +
diff --git a/packages/js/product-editor/src/blocks/pricing/index.ts b/packages/js/product-editor/src/blocks/pricing/index.ts index 59d35906a12..b8d779c809e 100644 --- a/packages/js/product-editor/src/blocks/pricing/index.ts +++ b/packages/js/product-editor/src/blocks/pricing/index.ts @@ -1,22 +1,27 @@ +/** + * External dependencies + */ +import { BlockConfiguration } from '@wordpress/blocks'; + /** * Internal dependencies */ -import { initBlock } from '../../utils'; -import metadata from './block.json'; +import { initBlock } from '../../utils/init-blocks'; +import blockConfiguration from './block.json'; import { Edit } from './edit'; +import { PricingBlockAttributes } from './types'; -const { name } = metadata; +const { name, ...metadata } = + blockConfiguration as BlockConfiguration< PricingBlockAttributes >; export { metadata, name }; -export const settings = { - example: {}, - edit: Edit, -}; +export const settings: Partial< BlockConfiguration< PricingBlockAttributes > > = + { + example: {}, + edit: Edit, + }; -export const init = () => - initBlock( { - name, - metadata: metadata as never, - settings, - } ); +export function init() { + return initBlock( { name, metadata, settings } ); +} diff --git a/packages/js/product-editor/src/blocks/pricing/types.ts b/packages/js/product-editor/src/blocks/pricing/types.ts new file mode 100644 index 00000000000..ae5ec68b128 --- /dev/null +++ b/packages/js/product-editor/src/blocks/pricing/types.ts @@ -0,0 +1,10 @@ +/** + * External dependencies + */ +import { BlockAttributes } from '@wordpress/blocks'; + +export interface PricingBlockAttributes extends BlockAttributes { + name: string; + label: string; + help?: string; +} diff --git a/plugins/woocommerce/changelog/add-37931 b/plugins/woocommerce/changelog/add-37931 new file mode 100644 index 00000000000..20cbd4fc6d7 --- /dev/null +++ b/plugins/woocommerce/changelog/add-37931 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Update List price Pricing link on the general tab to navigate to the Pricing tab diff --git a/plugins/woocommerce/includes/class-wc-post-types.php b/plugins/woocommerce/includes/class-wc-post-types.php index e478d212e04..e89d254dfe8 100644 --- a/plugins/woocommerce/includes/class-wc-post-types.php +++ b/plugins/woocommerce/includes/class-wc-post-types.php @@ -405,9 +405,9 @@ class WC_Post_Types { array( 'woocommerce/product-pricing-field', array( - 'name' => 'regular_price', + 'name' => 'regular_price', 'label' => __( 'List price', 'woocommerce' ), - 'showPricingSection' => true, + 'help' => __( 'Manage more settings in Pricing.', 'woocommerce' ), ), ), ), @@ -421,7 +421,7 @@ class WC_Post_Types { array( 'woocommerce/product-pricing-field', array( - 'name' => 'sale_price', + 'name' => 'sale_price', 'label' => __( 'Sale price', 'woocommerce' ), ), ), @@ -521,9 +521,8 @@ class WC_Post_Types { array( 'woocommerce/product-pricing-field', array( - 'name' => 'regular_price', + 'name' => 'regular_price', 'label' => __( 'List price', 'woocommerce' ), - 'showPricingSection' => true, ), ), ), @@ -537,7 +536,7 @@ class WC_Post_Types { array( 'woocommerce/product-pricing-field', array( - 'name' => 'sale_price', + 'name' => 'sale_price', 'label' => __( 'Sale price', 'woocommerce' ), ), ),