woocommerce/plugins/woocommerce-blocks/assets/js/blocks/product-collection
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
..
edit Add price range filter to Product Collection block (#42858) 2023-12-21 12:45:20 +05:30
inner-blocks/no-results update text domain in plugins/woocommerce-blocks (#42717) 2023-12-12 14:12:36 -08:00
variations Restructure Product Collection editor files (https://github.com/woocommerce/woocommerce-blocks/pull/11981) 2023-12-06 15:50:24 +01:00
block.json Update Blocks Text Domain 2023-12-09 05:44:54 -08:00
constants.ts Add price range filter to Product Collection block (#42858) 2023-12-21 12:45:20 +05:30
icon.tsx Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) 2023-05-15 08:51:49 +00:00
index.tsx Enable Product Collection as a core feature (https://github.com/woocommerce/woocommerce-blocks/pull/10524) 2023-08-25 15:58:11 +02:00
save.tsx Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352) 2023-05-15 08:51:49 +00:00
types.ts Add price range filter to Product Collection block (#42858) 2023-12-21 12:45:20 +05:30
utils.tsx Product Collection - Add Inherit query from template control (https://github.com/woocommerce/woocommerce-blocks/pull/9485) 2023-06-05 06:09:11 +00:00