Commit Graph

6636 Commits

Author SHA1 Message Date
Seghir Nadir 6c136e4e1a
normalize IDs for form fields in Checkout (#47650)
* normalize IDs for form fields and fix types

* update docs as well

* update rest of docs

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

* fix linting for document

* also align classnames

* revert to correct classname

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-22 22:54:03 +02:00
Adrian Moldovan 13ab9007f6
[testing workflows] Add workflow_call trigger in CI workflow - support daily and other types of runs (#47612)
* Add workflow_call event

* Add tests-daily-run.yml

* Remove workflow version

* Update input value

* Remove secrets from caller workflow

* Rename job

* Check context

* Check context

* Check workflow_call inputs

* Override github.event_name with inputs.trigger

* Fix input name

* Add config for daily e2e tests with Gutenberg

* Update env commands for Gutenberg run

* Add disableHpos env variable in ci-utils

* Revert the trigger to push

* Revert the env variable setting in ci-jobs

* Revert the env variable setting in ci-jobs

* Rebuild utils

* Update test env start command

* Define the Gutenberg Playwright project

* Use path relative to workspace root

* Update events for test projects

* Update events for test projects

* Add changelogs

* Remove the e2e tests with Gutenberg tests from daily runs

* Set the schedule and workflow_dispatch triggers

* Add --project default flag to only run the default tests in CI

* Renamed snapshots to match the new Playwright project name
2024-05-22 11:04:44 -07:00
Seghir Nadir d2ac6ff953
Correctly attribute focus back when opening the mini cart several times (#47683)
* allow focusedOnMount element to be reset

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-22 17:03:22 +02:00
Thomas Roberts b7643b9b7a
Change Checkout form step numbering so it can only be toggled for all blocks, not individually per-step (#47479) 2024-05-22 07:03:48 -07:00
Karol Manijak f55e25b009
Filter by Attribute: fix potential reading property of undefined error (#47699)
* Fix reading from undefined error in attribute-filter

* Add changelog
2024-05-22 11:57:53 +02:00
Karol Manijak 313ab0eb74
Rename classic template blocks to avoid confusion (#44931)
* Rename  blocks to  to distinguish them from new blocks

* Add changelog

* Change the naming convention to XYZ (Classic)

* Update classic templates descriptions

* Fix package.json lint error
2024-05-22 10:53:43 +02:00
Alba Rincón 1d0ec79d43
Use the term attribute sort order for the "Filter by attribute" block (#47616)
* Use the term attribute sort order for the "Filter by attribute" block

* Allow `id` and `name_num` orderby values

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-21 15:44:08 +02:00
Niels Lange 5168a21920
Block-based checkout - Update address fields display logic (#47160)
* Add “Address line 2” toggle

* Allow apartment field to be required

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

* Rename “Apartment, suite, etc.” to “Address line 2”

* Remove unused dependency

* Add key to fragment

* Simplify keys

* Address failing e2e tests

* Change “Optional (Recommended)” to “Optional”

* Toggle address line 2 visibility in editor

* Add e2e tests

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

* Update e2e tests

* Update e2e tests

* Ensure the address 2 field stays open when the seller empties it

* Optimise hasAddress2FieldValue

* Move address 2 filed related functionality into separate component

* Rmove + sign from address 2 field links

* WIP: Introduce AddressField component

* Update AddressFields component

* Refactor AddressFields and Address2Field components

* Fix CSS lint error

* Fix JS lint error

* Fix failing e2e tests

* Fix typo in e2e tests

* Improve e2e selector

* Fix core e2e tests

* Use address line 2 label for the link text

* Lazy initialise the “isFieldVisible” state

* Remove obsolete code

* Add inline comments for clarity

* Fix JS lint error

* Improve e2e tests

* Revert "Remove obsolete code"

This reverts commit 027d6adc89.

* Adjust visibility toggle

* Delete obsolete changelog file

* Add inline comment

* Fix TS error

* Remove obsolete parts

* Solve TS warning

* Remove obsolete “fieldsRef”

* Remove obsolete “setHasFieldBeenModified”

* Address various TS warnings

* Fix link styling issue on mobile

* Fix JS lint error

* Refactor and simplify address components

* Optimise Address2Field component

* Improve inline docs

* Move ‘+’ from CSS to i18n

* Rename rest of values and pass correct onChange

* force component to remount

* remove unsed useEffect

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-05-21 15:48:24 +07:00
Karol Manijak 929564da82
Product Collection: remove Beta label (#47572)
* Remove Beta label from Product Collection

* Remove unnecessary dependency in Product Collection page object

* Add changelog

* Udpate block references
2024-05-21 08:36:40 +02:00
Ilyas Foo 7c1802fefa
Update coming soon pages to use cardo and inter fonts via editor (#47613)
* Add type safety, update coming soon entire site changes for fonts

* Add conditional font to support TT24 and other themes

* Revert unnecessary change

* Changelog

* Lint
2024-05-21 13:35:12 +08:00
Manish Menaria 3a3a386e34
Fix: Product Collection block should respects 'Out of stock visibility' setting (#47537)
* Fix: Ensure Product Collection Block Respects "Hide Out of Stock Items" Setting

- Added logic to include the "Out of stock visibility" setting in the Product Collection block.
- Modified `ProductTemplateEdit` component to use the `getDefaultStockStatuses` function.
- Ensured that out-of-stock products are hidden in the Product Collection block when the "Hide out of stock items from the catalog" option is enabled.

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-21 10:50:05 +05:30
Niels Lange 622f2d3805
Remove title from checkout page (#47529)
* Remove title Checkout page templates

* Fix checkout header site title padding

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

* Fix failing e2e tests

* Fix failing e2e test

* Fix failing e2e test

* Substitute frameLocator in e2e tests

* Fix failing e2e tests

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-21 01:56:32 +07:00
Thomas Roberts d7ca80d6c8
Make shipping total in Cart/Checkout block order summaries show FREE if shipping price is 0 (#47553)
* Make shipping total show FREE if price is 0

* Make free text uppercase in order summary

* Add test to check free/paid shipping displays as free or shows price

* Add changelog

* Update E2E test to make sure shipping is selected correctly

* Update shipping cost e2e tests

* Further fixes to e2e tests
2024-05-20 18:42:54 +02:00
Sam Seay 8538ca3498
Make sure JS tests run in blocks when configs change (#47513) 2024-05-19 18:57:55 +12:00
Seghir Nadir 1ae7ca5179
Make checkout sidebar (order summary) sticky on desktop (#47376)
* Make sidebar sticky on desktop

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

* limit sidebar sticky to cart only

* add useless new line

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-17 13:13:01 +02:00
Karol Manijak 40b43e8d9c
Prevent collection different than Product Catalog from being filtered (#45820)
* Prevent collection different than Produyct Catalog from being filtered

* Adjust Product Filters tests

* Split taxonomies filter into seperate filter per taxonomy

* Add changelog

* Improve onDeselect function

* Update Product Filter test handlebars so they all use Product Collection that inherits query from template

* Set Product Collection to inherit query from template in PHP unit tests

* Remove unnecessary empty space

* Add changelog

* Update tests

* Fix lint

* Update Product Collection attributes in filter E2E handlebars

* Update the Product Filters testing pages title

* Satisfy TS by returning single React element rather than array of elements

* Revert some incorrect changes

* Cleanup after accidental incorrect merge

* Add template utils to dynamic contents util

* Fix Attribute Filter tests

* Cleanup Attribute tests, refactor and fix types

* Add product filter on top of attirbute filter in handlebars

* Fix lint

* Update Rating filter tests to use Product Archive template instead of post

* Update Rating Filter handlebars

* Update Stock filter tests to use Product Archive template instead of post

* Update Stock Filter handlebars

* Add more granular util to update Produyct Catalog based on handlebar template

* Use Product Catalog util and simplify test scenarios

* Unify handlebar templates

* Fix Product Collection attributes in Product Filter handlebar templates

* Revert temporary timeouts increase

* Remove unused types

* Cleanup types

* Cleanup types

* Lint fix

* Rename updateTemplatesContent to updateTemplateContents to better depict its purpose

* Fix types

* Rename updateProductCatalogContent to updateProductCatalogTemplate to better depict its purpose

* Allow for beforeAll and afterAll in PW tests

* Use beforeAll and afterAll instead of using fixture in active filters test

* Use beforeAll and afterAll instead of using fixture in attribute filters test

* Use beforeAll and afterAll instead of using fixture in price filters test

* Use beforeAll and afterAll instead of using fixture in rating filters test

* Use beforeAll and afterAll instead of using fixture in stock status filters test

* Get rid of updateProductCatalogTemplate util as it's too specific

* Extract some constants

* Remove unused file probably added here by accident

* Adjust Attribute Filter block tests to the new logic

* Merge fix

* Bring back necessary handlebars file

* Merge fix

* Merge fix

* Update beforeAll

* Avoid relying on product collection page object in before all

* Bring back the original order of tests

* Switch Filter by Attribute tests to handlebars

* Fix typo

* Update test to new circumstances

* Fix hooks usage
We no longer use hooks other than `beforeEach` since we're resetting the DB for each test (#46125). Using other hooks was not caught by the linter (on this PR) because I accidentally removed the no-hooks rule in #47228 and restored it just now in #47500. 😅

* Fix the test

* Fix Price filter test

* Update attribute filter tests

* Share the handlebars between tests

* Update price filter tests

* Update rating filter tests

* Update stock filter tests

* Remove unnecessary product collection page object from filter tests

* Fix typo

* Fix Filter by Stock test

* Simplify Attribute filter test by remoiving one filter from page

* Try to wait for element to be visible

* Fix handlebars syntax for filters so it doesnt throw validation errors and warnings

* Wait for filters to be visible for sure before performing further part of test

* Wait for Site Editor canvas loader

* Fix linter error

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
2024-05-17 11:23:56 +02:00
Ron Rennick db50513c42
use valid repository url in blocks package (#46696)
* use valid repository url in blocks package

* add changelog file

---------

Co-authored-by: Ron Rennick <ronald.rennick@automattic.com>
2024-05-16 13:32:41 -07:00
Seghir Nadir edb930e04b
Fix a11y issues in Cart/Checkout (#47470)
* return focus on drawer

* adjust notice button color

* adjust cart/checkout input label color

* return focus for shipping form button

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 18:32:22 +02:00
Seghir Nadir 4f348eb540
remove the generic incompatible notice from Checkout block. (#47475)
* remove the generic incompatible notice

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 16:52:06 +02:00
Seghir Nadir 9b1e9344e0
Turn Cart change address link to button (#47460)
* Turn Change address link to button

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

* fix lint

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 16:51:03 +02:00
Bart Kalisz 90ee3f4ed9
Blocks E2E: Remove obsolete waitForSiteEditorFinishLoading util (#47547) 2024-05-16 16:39:30 +02:00
Bart Kalisz a7bbdb99a2
Blocks E2E: Wait for Site Editor canvas loader (#47541) 2024-05-16 14:49:32 +02:00
Sam Seay fcc421d550
Update cart/checkout usage of the @wordpress/components Slot Fill (#47105) 2024-05-16 21:46:24 +12:00
Manish Menaria a7a1264fec
Fix input clearing issue in PriceTextField with improved currency parsing (#47354)
* Fix input clearing issue in PriceTextField with improved currency parsing

This commit addresses a usability issue in the PriceTextField component, highlighted by @dinhtungdu, where the input field would clear itself if users omitted a space between the numeric value and the currency symbol when the currency is configured to appear on the right with a space (e.g., "20$" instead of "20 $"). The problem was rooted in the strict parsing logic that did not account for variations in user input related to currency formatting.

The fix involves an enhancement to the numeric parsing function, which now effectively handles various user inputs regardless of space or placement of the currency symbol. The revised parsing logic uses a regular expression to strip out any characters that are not numeric or the designated decimal separator, and then replaces the locale-specific decimal separator with a period for standard numeric conversion. This approach not only fixes the specific issue but also improves the robustness of the component against similar input variations.

* Refactor currency parsing and improve handling in PriceTextField

1. Renaming `formatValueAsCurrency` to `formatNumberAsCurrency` to better
   reflect its functionality.
2. Moving the `convertCurrencyStringToNumber` function outside of the
   PriceTextField component, enhancing readability and reusability.
3. Changing the internal state handling from `newValue` to `inputValue`,
   directly managing the string input and parsing it as needed for further
   processing. This will force input field to re-render.

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

* Fix: Handle empty string in price conversion to prevent 0 value

This commit fixes an issue where an empty string in the price conversion function resulted in a value of 0. Now, empty strings are properly handled and do not convert to a numerical value.

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 13:23:47 +05:30
Manish Menaria 1233fb4745
Fix: handle undefined templateSlug in Product Collection tracking utils (#47504)
* fix: handle undefined templateSlug in Product Collection tracking utils

The modification introduces a check for templateSlug before attempting to access its properties or use it in further logic. This change addresses a bug that manifested when users tried to edit a synchronized Product Collection block, resulting in a JavaScript error because templateSlug could be undefined.

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

* Update types to better reflect reality

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-05-16 11:17:52 +05:30
Chi-Hsuan Huang a120b99d7d
Fix coming soon page mobile UI issues (#47491)
* Update styles for WooCommerce coming soon page

- Add min-width to container for better responsiveness
- Adjust padding for smaller screens
- Update font size and text wrapping for banner

* Add changelog

* Improve readability
2024-05-16 12:46:26 +08:00
Alexandre Lara 7abb996017
[Experimental] Product Filters Redesign: Add the Product Filters block (#47294)
* Add Product Filters block

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

* Add the blocks template for the Product Filters block

* Dynamically add the highest product count attribute to the block template

* wip: Add E2E tests for the Product Filters block

* Add E2E tests for the Product Filters block

* Add CSS file to Product Filters block

* Fix css error lint

* Fix lint error

* Fix lint errors

* Remove unnecessary styles for the Product Filters block

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 18:09:48 -03:00
Luigi Teschio 8c6efe072b
Blocks: Fix JS unit tests (#47516)
* Blocks: Fix JS unit tests

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

* trigger CI

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 16:03:11 +00:00
Luigi Teschio 1af8e8a4d4
Blocks: Delete Jest-Puppeteer infrastructure (#46672)
* try db reset in page teardown

* move reset to setup step

* Use wp db cli

* Fix global setup
That part is overriding the logged in user state and wipes out the nonce and rootUrl fields.

* Try importing instead from a generated dump

* Revert "Try importing instead from a generated dump"

This reverts commit 987dc471c9.

* Revert "Revert "Try importing instead from a generated dump""

This reverts commit c8d008cb20.

* Don't bypass visitSiteEditor so that the Welcome Guide is closed

* use createNewPost

* Revert "Revert "Revert "Try importing instead from a generated dump"""

This reverts commit 2684273582.

* [Blocks]: Fix E2E tests (#46344)

* Load local pickup enabled setting as bool not string

* Add changelog

* Remove unused import

* Update plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/utils.ts

Co-authored-by: Niels Lange <info@nielslange.de>

* Use strict equality test

* try now

* try now

* add a new sql file

* remove default.sql

* fix welcome guide tour

* fix E2E tests

* Fix the template revert tests
...where the template is unreachable due to pagination.

* Add changelog entry

* improve logic to closeWelcomeGuideModal

* fix cart checkout tests

* improve flakiness

* improve flakiness

* fix flaky test

* fix company field

* fix E2E test

* fix E2E tests

---------

Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>

* Replace beforeAll w/ beforeEach + remove all after* hooks

* Fix broken hooks

* Activate plugins via requestUtils API

* [Blocks - E2E]: Add `playwright/no-hooks` ESlint rule (#46432)

add ESLint configuration

* Clean up console logs

* Remove obsolete language setup steps

* Remove more unnecessary setup steps

* Remove even more obsolete setup steps

* tmp: add the LYS fix

* Try stabilizing the company field test

* Use canvas param instead of manually entering edit mode

* Remove double site editor redirect

* Revert "Use canvas param instead of manually entering edit mode"

This reverts commit 5e6cc17154.

* Revert "Remove double site editor redirect"

This reverts commit 69a57a82a8.

* Fix flaky products sorting test

* Blocks: Fix ESLint errors (#46595)

fix eslint error

* Fix ESLint errors (#46626)

* Fix ESLint errors

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

---------

Co-authored-by: github-actions <github-actions@github.com>

* Blocks: Migrate multiple tests to Playwright

* fix path

* migrate other tests

* add product best sellers E2E tests

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

* migrate jest-puppetter E2E tests to Playwright

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

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

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

* Blocks: Delete Jest-Puppeteer infrastructure

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

* Remove obsolete waitForLoadState call

* improve E2E tests

* fix E2E tests

* improve E2E tests

* remove old test

* remove not necessary test

* fix number product

* fix E2E test

* fix number of products

* fix product count

* refactor store notice E2E tests

* update string

* fix E2E test

---------

Co-authored-by: Bart Kalisz <bartlomiej.kalisz@gmail.com>
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 14:22:36 +02:00
Bart Kalisz e765a717d2
Blocks E2E: Restore the no-hooks rule (#47500) 2024-05-15 13:05:52 +02:00
Sam Seay 3ef7a01840
Update blocks JS tests to React 18 (#47383) 2024-05-15 21:33:36 +12:00
Manish Menaria 9f5f93cba6
Product Collection: Implement Preview Mode (#46369)
* POC: Preview Mode using HOC

* Add explanation as comments

POC: Implement preview mode for Product Collection block in editor
- Added extensive commentary to clarify the mechanism and usage of the `handlePreviewState` function
- Implemented an internal state within `ProductCollectionContent` to manage preview status and messages, serving as a foundational example of how preview mode can enrich block functionality.
- Showcased the application of `handlePreviewState` by incorporating it as a prop in `BlockEdit`, illustrating the potential for extending the block's capabilities for dynamic and interactive previews.

This POC demonstrates a flexible approach to managing preview states within the editor, paving the way for further development and integration based on feedback and use-case analysis.

* Refactor preview state handling and collection registration

This commit introduces a centralized approach for registering product collection variations and managing their preview states. It abstracts the registration logic into a dedicated function and enhances the flexibility of preview state handling across different collection types.

* Rename file

* Minor improvements

* Don't pass previewState to handlePreviewState

I don't see any good use of it in handlePreviewState. Also, We will be going to call handlePreviewState only once
therefore, it will always have the same value as the initial value of the previewState. If in future, we decide to run it
multiple times then we can pass the previewState as an argument to handlePreviewState.

* Add comment

* Use JS closure to inject handlePreviewState

This commit introduces a refined approach for injecting the `handlePreviewState` function into product collection blocks, utilizing JavaScript closures to streamline the process. This method replaces the previous global registry mechanism, offering a more direct and efficient way to manage preview states.

Advantages of This Approach:
- Utilizing JavaScript closures for injecting `handlePreviewState` simplifies the overall architecture by directly modifying block edit components without relying on an external registry. This method enhances code clarity and reduces the cognitive load for developers.
- The conditional application of `withHandlePreviewState` ensures that the preview state handling logic is only added to blocks that require it, optimizing performance and maintainability.

* Refactor preview state management into custom hook

This commit enhances the organization and readability of the product collection content component by abstracting the preview state management into a custom hook named `usePreviewState`. This change streamlines the component's structure and aligns with React best practices for managing state and side effects.

Key Changes:
- Introduced `usePreviewState`, a custom hook responsible for initializing and managing the preview state (`isPreview` and `previewMessage`) of the product collection block. This hook encapsulates the state logic and its side effects, including the conditional invocation of `handlePreviewState`.
- Modified `ProductCollectionContent` to utilize `usePreviewState` for handling its preview state. This adjustment makes the component cleaner and focuses it more on presentation and behavior rather than state management details.

* Replace useEffect with useLayoutEffect

* Add cleanup function in handlePreviewState function

Based on [this discussion](https://github.com/woocommerce/woocommerce/pull/45703#discussion_r1535323883), I added a cleanup function support for handlePreviewState. `handlePreviewState` can return a function which will be called on cleanup in `useLayoutEffect` hook.

* Fetching random products in Preview mode

* Allow collection to set initial preview state

* Pass location & all attributes to handlePreviewState function

* Handling collection specific query for preview mode

- Consolidated `handlePreviewState` and `initialPreviewState` into a single `preview` prop in `register-product-collection.tsx` and `product-collection-content.tsx` to streamline prop passing and improve the component interface.
- Updated the `queryContextIncludes` in `constants.ts` to include 'previewState'
- Enhanced the `ProductCollection` PHP class to handle preview-specific queries more effectively, introducing a new method `get_preview_query_args` that adjusts query parameters based on the collection being previewed, thereby improving the relevance and accuracy of products displayed in preview mode.

* Always set initialPreviewState on load

* Refine preview state handling

- Renamed `HandlePreviewStateArgs` to `SetPreviewStateArgs` in `featured.tsx` to better reflect its purpose, which is now more focused on setting rather than handling states. The implementation details within `featured.tsx` have also been refined to include async operations and cleanup functions, demonstrating a more sophisticated approach to managing state.

Overall, these updates make the preview state logic more understandable and maintainable.

* Rename "initialState" to "initialPreviewState"

* Fix: Correct merging of newPreviewState into previewState attribute

This commit addresses an issue in the product-collection-content.tsx where the newPreviewState was not properly merged into the existing previewState attribute. Previously, the spread operator was incorrectly applied, leading to potential loss of existing state attributes. By changing the order of operations and correctly spreading the existing attributes before merging the newPreviewState, we ensure that all state attributes are preserved and updated correctly.

* Initial refactor POC code to productionize it

* Move `useSetPreviewState` to Utils

* Implement preview mode for Generic archive templates

Implemented a new useLayoutEffect in `utils.tsx` to dynamically set a preview message in the editor for product collection blocks located in generic archive templates (like Products by Category, Products by Tag, or Products by Attribute).

* Remove preview mode from Featured and On sale collection

* Remove preview query modfication for On Sale collection

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

* Fix: hide/show preview label based on value of "inherit"

If user change the toggle "Sync with current query", then it should reflect for the preview label as well.
- If the toggle is on, then the preview label should be shown.
- If the toggle is off, then the preview label should be hidden.

* Minor improvements

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

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

* Refactor: Simplify SetPreviewState type definition in types.ts

This commit refines the SetPreviewState type definition by eliminating the previously used intermediate interface, SetPreviewStateArgs. The change streamlines the type definition directly within the SetPreviewState type, enhancing readability and reducing redundancy.

* Update import syntax for ElementType in register-product-collection.tsx

This commit updates the import statement for `ElementType` from `@wordpress/element` to use the more modern and concise `import type` syntax. This change does not affect functionality but aligns with TypeScript best practices for importing types, ensuring that type imports are distinguished from regular imports. This helps in clarity and in optimizing the build process by explicitly indicating that `ElementType` is used solely for type checking and not included in the JavaScript runtime.

* Refactor: Update TypeScript usage in Product Collection

This commit introduces several TypeScript refinements across product-collection components:

1. **DEFAULT_ATTRIBUTES** in `constants.ts` now uses `Pick` to explicitly define its shape, ensuring only relevant attributes are included and typed accurately.
2. **ProductCollectionAdvancedInspectorControls** and **ToolbarControls** in the `edit` subdirectory now use `Omit` to exclude the 'preview' property from props, clarifying the intended prop usage and improving type safety.

These changes collectively tighten the type definitions and improve the codebase's adherence to best practices in TypeScript.

* Refactor: Update dependencies of useSetPreviewState hook in utils.tsx

This change enhances the stability and predictability of the hook's behavior, ensuring it updates its internal state accurately when its dependencies change, thus aligning with best practices in React development.

* Refactor preview button CSS and conditional rendering

1. **CSS Refactoring:** Moved the positioning styles of the `.wc-block-product-collection__preview-button` from inline styles in the JSX to the `editor.scss` file. This separation of concerns improves maintainability and readability, aligning the styling responsibilities solely within the CSS file.
2. **Conditional Rendering Logic:** Updated the rendering condition for the preview button. Now, it not only checks if `isPreview` is true but also if the block is currently selected (`props.isSelected`). This prevents the preview button from appearing when the block is not actively selected, reducing visual clutter and enhancing the user experience in the editor.

* Enhance: Update preview button visibility logic in ProductCollectionContent

This commit enhances the visibility logic of the preview button in the `ProductCollectionContent` component:

1. **Added `isSelectedOrInnerBlockSelected`:** Introduced a new `useSelect` hook to determine if the current block or any of its inner blocks are selected. This ensures that the preview button is visible when either the product collection block or any of its inner blocks are selected.
2. **Updated Conditional Rendering:** Adjusted the conditional rendering of the preview button to use the new `isSelectedOrInnerBlockSelected` value, providing a more intuitive user experience by ensuring the preview button remains visible when any relevant block is selected.

* use __private prefix with attribute name

* Add E2E tests for Preview Mode

1. **Template-Specific Tests:** Each template (tag, category, attribute) undergoes a test to ensure the preview button behaves as expected when replacing products with product collections in these contexts.
2. **Visibility Checks:** The tests verify that the preview button is visible when the block or its inner blocks are selected and hidden when the block is not selected. This helps confirm the correct implementation of the preview button visibility logic across different use cases.
3. **Interaction with Inner Blocks:** Additional checks are included to ensure the preview button's visibility toggles appropriately when interacting with inner blocks, reinforcing the dynamic nature of block selection and its effect on UI elements within the editor.

* Add setPreviewState to dependencies

* Add data-test-id to Preview button and update e2e locator

Modifications:
- Added `data-test-id="product-collection-preview-button"` to the Preview button in `product-collection-content.tsx`.
- Updated the corresponding e2e test locator in `product-collection.block_theme.side_effects.spec.ts` to use the new `data-test-id` instead of the class name.

By using `data-test-id`, we ensure that the e2e tests are not affected by changes in the styling or restructuring of the DOM that might alter CSS classes but do not affect functionality.

* Enhance: Localize preview message in useSetPreviewState hook

* Don't show shadow & outline on focus

* Make preview button font same as Admin

* Fix SCSS lint errors

* Add missing await keyword

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-15 13:18:43 +05:30
Thomas Roberts 35f07934a4
Remove bold text from selected payment method in Checkout block (#47412) 2024-05-14 02:00:30 -07:00
Bart Kalisz 1e1e7dd65d
Blocks E2E: Align ESLint and TS configs with Gutenberg (#47228) 2024-05-14 10:23:17 +02:00
Karol Manijak bf2d622a66
Product Collection: telemetry for filter usage (#46545)
* Create trackInteraction function and pass it to query Insprector Controls

* Add tracking to Attribute filter

* Add tracking to Created filter

* Add tracking to Featured filter

* Add tracking to Handpicked Products filter

* Add tracking to Inherit Query filter

* Add tracking to Keyqord filter

* Add tracking to On Sale filter

* Add tracking to Order By option

* Add tracking to Stock Statusoption

* Add tracking to Price Range filter

* Add tracking to Taxonomies filter

* Fix lint errors

* Add changelog

* Rearrange the logic of recognising the tracks location so it's more reliable
2024-05-14 09:45:33 +02:00
Christopher Allford b8aabe9005
Fixed Taxonomy Term Limit On Product Collection Filters (#47155)
In the interest of avoiding pagination this refactor swaps the current term loading with one that doesn't require a cache of all terms. We've removed the need for the cache by storing the ID and term name together in the token/suggestion list and using a display transformation to hide any unnecessary information.
2024-05-13 16:00:24 -07:00
Roy Ho f5dc46a385
Product Filters: add individual clear button (#47101)
* Product Filters: add individual clear button

* Remove unused style.scss

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

* Simplify searching for the tag

* Convert to use button instead of anchor

* Try using iAPI to show/hide clear button

* Use local context instead of global state

* Fix linting error

* Remove unneeded context

* Update clear button block description

* Fix frontend PHP error

* Add e2e tests for attributes filter clear button

* Add e2e tests for price filter clear button

* Add e2e tests for rating filter clear button

* Add e2e tests for stock status filter clear button

* Address feedback and use built in locators

* Address feedback and replace the use of timeouts

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:19:56 -03:00
Albert Juhé Lluveras 8da8a70839
Update docs about blocks styling to clearly state global styles are the recommended approach (#47269)
* Update docs about blocks styling to clearly state global styles are the recommended approach

* Markdown formatting fixes

* Add changelog file

* Add styling the Product Price block example

* Markdown formatting fixes (II)

* Update plugins/woocommerce-blocks/docs/designers/theming/README.md

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

* Update plugins/woocommerce-blocks/docs/designers/theming/README.md

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

---------

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
2024-05-13 18:26:50 +02:00
Seghir Nadir ccba86a616
Update additional fields document's TOC and link to it from another document. (#47137)
* update docs

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

* fix linting

* update manifest

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:46:46 +00:00
Seghir Nadir b5850bbfc1
Select a shipping rate after they load (#47120)
* select a shipping rate if there are no shipping rates on mount

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

* move code and explain it

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:29:04 +00:00
Bart Kalisz 9a71f3ac5f
Blocks E2E: Remove the DB snapshot on env reset (#47416) 2024-05-13 17:19:15 +02:00
Seghir Nadir b256336176
reset state and postcode if it's not valid for the current country (#47369)
* reset state if it's not valid for the current country

* reset postcode as well

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

* update logic so its in Checkout block instead of store api

* fix linting

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 16:46:08 +02:00
Paulo Arromba 98510fe9fd
Add woocommerce_order_received_verify_known_shoppers filter to order confirmation template (#46957)
* Adds filter `woocommerce_order_received_verify_known_shoppers` to allow known shoppers to access the order received page without being logged in in Order Confirmation template

* Added changelog

* Added filter docblock

* Refactored to apply the filter correctly for non-guests only.

* Restored comment.

* Added test

* Added test

* lint

* Change plugin package name

* Update plugin name (apparently slugs are formed from that)

* Added right prefix

* JS linting

* Refactored testing into a test.step()

* typo

* Fixed tests.

* Reverted change done by mistake.

* remove getByRole specificity

* Increase selector specificity specificity

* Change test prefix

* reduce test flakyness

* reduce test flakyness

* reduce test flakyness
2024-05-13 15:28:36 +01:00
Seghir Nadir 76a9e2eb27
Move country to top of form for all countries (#47375)
* Move country to top of form for all countries

* adjust styling

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 16:24:40 +02:00
Sam Seay 2db29164f9
Update to pnpm 9.1 (#47385)
* Update to pnpm 9.1 and fix a mini css bug

* Add changefile(s) from automation for the following project(s): @woocommerce/tracks, @woocommerce/product-editor, @woocommerce/onboarding, @woocommerce/number, @woocommerce/notices, @woocommerce/navigation, @woocommerce/internal-js-tests, @woocommerce/extend-cart-checkout-block, @woocommerce/expression-evaluation, @woocommerce/explat, @woocommerce/experimental, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/date, @woocommerce/data, @woocommerce/customer-effort-score, @woocommerce/currency, @woocommerce/csv-export, @woocommerce/create-woo-extension, @woocommerce/create-product-editor-block, @woocommerce/components, @woocommerce/api, @woocommerce/ai, @woocommerce/admin-e2e-tests, woocommerce-blocks, woocommerce-beta-tester, woocommerce, woo-ai

* temporarily disable swallowing build output to diagnose issue with perf workflow

* Ignore some type issues that commonly resurface when deps slightly change

* Fix persistent type issues that have recurred many times

* Add more ignores

* Fix lint issue

* Revert change to swallow build error

* Improve access of the config that needs updated build dir.

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 10:57:39 -03:00
Bart Kalisz 30756f74e3
Blocks E2E: Refactor configs and workflow (#46409) 2024-05-13 14:58:26 +02:00
Ramon Ahnert 49c379c5a7
Fix typo in the Exposing your data in the Store API documentation (#43488)
* Fix basic usage code snippet example in extend-rest-api-add-data.md

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:20:07 +07:00
Albert Juhé Lluveras 8b47443a1c
Remove unnecessary links to an ephemeral site (#47270)
* Remove unnecessary links to an ephemeral site

* Add changelog file

* Disable markdown lint in some lines
2024-05-08 15:24:25 +02:00
Niels Lange e7aff9428f
[Enhancement]: Block-based checkout - Pickup section updates (#47173)
* Change “Pickup options” to “Pickup locations”

* Always show pickup location and truncate pickup details

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

* Adjust spacing between pickup details and more link

* Hide pickup details of unselected pickup location

* Adjust line height of truncated text

* Show “Read more/less” instead of “more/less”

* Ensure both lines are equally filled with text

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-08 17:58:09 +07:00
Bart Kalisz 3ad9ebf52a
Blocks E2E: Fix flaky Product Collection tests (#47211) 2024-05-08 11:26:52 +02:00