woocommerce/plugins/woocommerce-blocks/assets/js
Manish Menaria ba4f3d4d29
Add price range filter to Product Collection block (#42858)
* Add price range filter to Product Collection block

This update introduces a price range filter feature to Product Collection. Changes include:

1. Constants Update:
   - Added `priceRange` as undefined in `DEFAULT_QUERY` and `DEFAULT_FILTERS` in `constants.ts`.

2. Style Adjustments:
   - Added CSS for `.wc-block-product-price-range-control` in `editor.scss` to align the input text to the end.

3. Component Integration:
   - In `inspector-controls/index.tsx`, the `PriceRangeControl` component is now imported and integrated.

4. New Components:
   - `PriceTextField.tsx` and `PriceRangeControl/index.tsx` have been created to handle price range inputs in the Product Collection block.

5. Backend Integration:
   - `PriceRange` interface added in `types.ts` for type support.
   - In `ProductCollection.php`, a filter (`add_price_range_filter`) is added to modify the main query based on the price range, including adjustments for tax considerations.

Overall, this enhancement allows users to filter products within a specific price range. The backend adjustments ensure that the filtering respects tax settings and displays accurate prices.

* Fix formatting

* Fix: Price range filter not working on Editor

* Improve: Share logic between Frontend & Editor

* Add changelog

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Remove duplicate changelog file

* Enhanced Input Control for Price Fields

Key changes include:

1. **Switch to Input Control**: Replaced the NumberControl component with the more versatile InputControl. This offers better handling of currency formatting and user input.

2. **Currency Formatting Logic**: Added robust logic for formatting numbers according to the currency settings. This includes handling thousand separators, decimal places, and currency symbols.

3. **String-to-Number Conversion**: Implemented a function to convert user-entered strings back to numbers, accounting for currency symbols and separators. This ensures accurate parsing of user input for processing.

4. **Input Handling Improvements**: Modified the onChange handlers for minimum and maximum price inputs. Now, they correctly handle edge cases like undefined or zero values, maintaining consistency in the user interface and data processing.

* Refactor price range query handling

1. Introduction of a new method `get_price_range_query_args()` to encapsulate the logic for handling price range queries, especially for the two edge cases:
   - Prices excluding tax displayed including tax.
   - Prices including tax displayed excluding tax.

2. Removal of direct conditionals in the `get_query_results()` method, replacing them with a call to the new `get_price_range_query_args()` method. This makes the code more modular and easier to understand.

This refactor enhances readability and maintainability of the code, ensuring that special cases in price range filtering are handled more effectively.

* Remove unnecessary suffix prop

* Refactor PriceTextField formatting logic for currency

1. Conditional application of thousand separators: The code now checks for the existence of `currency.thousandSeparator` before applying it. This prevents potential errors when the separator is undefined.

2. Simplified decimal separator handling: Introduced a fallback for the decimal separator, defaulting to a period ('.') if not specified by the currency settings.

3. Enhanced readability and documentation: Added comments to clarify the purpose of code blocks, especially where currency symbols are added or removed, and where value normalization occurs.

4. Function renaming for clarity: Renamed `formatValueWithCurrencySymbol` to `formatCurrency`, which better reflects its purpose.

* Fix onBlur issue with PriceTextField component

Refactored the PriceTextField component to utilize useState for better state management. This change introduces a local state variable, 'newValue', to store the current value. The state updates occur in the handleOnChange function, ensuring that the component's state is managed efficiently. Additionally, a new function, handleOnBlur, is implemented to handle the onBlur event, updating the component's state when focus is lost. The handleEnterKeyPress function captures the 'Enter' key press, providing a more user-friendly experience by allowing users to confirm their input with the Enter key.

* Fix linting error

---------

Co-authored-by: github-actions <github-actions@github.com>
2023-12-21 12:45:20 +05:30
..
atomic Trigger event `experimental__woocommerce_blocks-cart-add-item` in the SSR Product Button vis Interactivity API (#42946) 2023-12-20 13:50:43 +01:00
base Prevent "Use same address for billing" being checked by default if addresses differ (#42967) 2023-12-20 14:47:59 +07:00
blocks Add price range filter to Product Collection block (#42858) 2023-12-21 12:45:20 +05:30
blocks-registry Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00
data Introduce Additional Fields extensibility API (#42695) 2023-12-15 13:45:38 +01:00
editor-components Move the switch to classic shortcode block button to separate component (#42724) 2023-12-19 11:44:09 +04:00
extensions Allow HTML in built in payment method descriptions 2023-12-13 14:37:21 +00:00
filters Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00
hocs Update product category controls to use typescript (https://github.com/woocommerce/woocommerce-blocks/pull/11909) 2023-12-08 11:39:31 +00:00
icons Bump @wordpress/icons from 6.1.1 to 9.36.0 (https://github.com/woocommerce/woocommerce-blocks/pull/11611) 2023-11-16 17:40:53 +00:00
interactivity Migrate interactivity stock filter to new store API, add improvements and bugfixes (https://github.com/woocommerce/woocommerce-blocks/pull/11827) 2023-11-27 17:26:01 +13:00
middleware Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00
previews Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00
settings Add Checkbox support for Additional Fields in Checkout Block (#42780) 2023-12-18 13:21:36 +01:00
shared Convert inner-block-layout-context to typescript (https://github.com/woocommerce/woocommerce-blocks/pull/9799) 2023-06-14 06:36:39 -07:00
templates/revert-button update text domain in plugins/woocommerce-blocks (#42717) 2023-12-12 14:12:36 -08:00
types Update product category controls to use typescript (https://github.com/woocommerce/woocommerce-blocks/pull/11909) 2023-12-08 11:39:31 +00:00
utils Update product category controls to use typescript (https://github.com/woocommerce/woocommerce-blocks/pull/11909) 2023-12-08 11:39:31 +00:00
global.d.ts WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) 2021-07-22 12:03:00 +01:00
index.js Fixed Blocks Linting Errors (#42727) 2023-12-12 15:05:20 -08:00