woocommerce/plugins/woocommerce
Manish Menaria 861bc091d4
Product Collection - Add Editor UI for missing product reference (#51114)
* Initial implementation of the missing product state

- Changed `getProductCollectionUIStateInEditor` to a hook `useProductCollectionUIState`.
	- As we added logic to check if selected product reference is deleted which require making an API call. Therefore, I decided to use a hook.
- While making an API call to check if product reference is deleted, I decided to show spinner in the block.
- Introduced new UI state `DELETED_PRODUCT_REFERENCE` to handle the missing product state.
- Updated existing `ProductPicker` component to handle the new UI state.
	- It's better to use existing component for the missing product state, as it already has all the required UI.

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

* Use getEntityRecord to check if product exists and other improvements

* Remove console log

* Add E2E tests for deleted product reference in Product Collection block

This commit introduces new E2E tests to verify the behavior of the Product
Collection block when dealing with deleted product references. The changes
include:

1. New test suite in register-product-collection-tester.block_theme.spec.ts
2. Modification to product-collection.page.ts to support custom product selection
3. Minor update to utils.tsx to handle trashed products

These tests ensure that the Product Collection block correctly handles
scenarios where referenced products are deleted, trashed, or restored,
improving the overall reliability of the feature.

* Simplify product creation in Product Collection block test

* Refactor E2E test for delete product reference picker

1. Removing the unnecessary `test.describe` block for "Deleted product reference"
2. Eliminating the `beforeEach` hook that was creating a test product
3. Integrating the test product creation directly into the main test

This change simplifies the test structure and improves readability while
maintaining the same test coverage for the Product Collection block's
behavior when dealing with deleted or unavailable products.

* Simplify logic for product collection UI state

This commit simplifies the handling of the `usesReference` prop in the
Product Collection block:

1. In `edit/index.tsx`, directly pass `usesReference` to
   `useProductCollectionUIState` hook without conditional spreading.

2. In `utils.tsx`, update the type definition of `usesReference` in the
   `useProductCollectionUIState` hook to explicitly include `undefined`.

* Refactor Product Collection block to improve prop passing

- Introduce ProductCollectionContentProps type for better prop management
- Refactor Edit component to use a renderComponent function
- Update component prop types to use more specific props
- Remove unnecessary props from ProductCollectionEditComponentProps
- Simplify component rendering logic in Edit component
- Adjust ProductPicker to receive only required props
- Update imports and prop types in various files to use new types

This refactoring improves code organization and reduces prop drilling by
only passing necessary props to each component. It enhances maintainability
and readability of the Product Collection block and related components.

* Refactor Product Collection block editor UI state handling

This commit simplifies the rendering logic in the Product Collection block's
Edit component. It removes a redundant case for the VALID state, as both
VALID and VALID_WITH_PREVIEW states now render the same ProductCollectionContent
component. This change improves code maintainability and reduces duplication.

* Fix: isDeletedProductReference is not set correctly

* Use "page.reload" instead of "admin.page.reload"

* Separate PRODUCT_REFERENCE_PICKER and DELETED_PRODUCT_REFERENCE cases

This improves readability and maintainability of the switch statement.

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-17 14:08:24 +05:30
..
.wordpress-org
assets Optimize large image files (#50517) 2024-08-14 12:29:03 +08:00
bin Update Action Scheduler to 3.8.2 (#51353) 2024-09-13 09:37:13 +02:00
changelog Product Collection - Add Editor UI for missing product reference (#51114) 2024-09-17 14:08:24 +05:30
client Add use-wp-horizon feature flag (#51421) 2024-09-16 21:02:21 -07:00
i18n Update symbol and formatting of the XPF currency (#46960) 2024-05-15 04:50:55 +07:00
includes Produce CSV Import enhancements (cherry-pick PR#51344) (#51348) 2024-09-13 11:39:37 -07:00
lib [Accessibility] Fix typos in inline documentation in woocommerce client, includes, and lib folders (#50739) 2024-08-27 16:23:04 +02:00
packages Update Woo.com references to WooCommerce.com (#46259) 2024-04-09 09:50:15 +01:00
patterns CYS: Fix icon alignment in header patterns used by CYS (#50952) 2024-08-29 08:56:27 +02:00
sample-data Update @woo.com email addresses to @woocommerce.com (#46387) 2024-04-19 21:11:01 +00:00
src Fix fatal when adding the Product Gallery (Beta) block into a pattern (#51189) 2024-09-17 09:49:53 +02:00
templates [Experimental] Product Filters: New and improved blocks structure (#51096) 2024-09-14 00:04:06 +07:00
tests [e2e] External - Expand WPCOM suite, part 1 (#51303) 2024-09-16 13:56:44 +02:00
.distignore Try reducing blocks build size (#43344) 2024-01-08 11:33:49 -06:00
.eslintignore Add JS lint scripts for woocommerce plugin (#46214) 2024-04-12 07:30:17 +03:00
.eslintrc.js Add JS lint scripts for woocommerce plugin (#46214) 2024-04-12 07:30:17 +03:00
.gitattributes
.gitignore Fixed Blocks INI File Path 2023-12-09 21:33:34 -08:00
.phpunit-watcher.yml Add php unit watcher and update unit test docs (#44681) 2024-02-19 16:40:29 +08:00
.wp-env.json [tests] Execute test env setup on host instead of wp-env container (reverts #50445) (#51021) 2024-08-29 11:17:31 +03:00
NEXT_CHANGELOG.md
README.md [Accessibility] Fix typos in inline documentation in woocommerce client, includes, and lib folders (#50739) 2024-08-27 16:23:04 +02:00
composer.json Update Action Scheduler to 3.8.2 (#51353) 2024-09-13 09:37:13 +02:00
composer.lock Update Action Scheduler to 3.8.2 (#51353) 2024-09-13 09:37:13 +02:00
license.txt
package.json [e2e] External sites - Include API tests for Pressable and WPCOM (#51284) 2024-09-12 16:01:40 +02:00
phpcs.xml [dev] PSR-4 naming fixes in tests (part 2) (#51198) 2024-09-09 11:26:55 +02:00
phpunit.xml PHPUnit: report slow tests. (#51253) 2024-09-10 12:37:23 +02:00
readme.txt Update stable tag to 9.2.3 (#50965) 2024-08-27 01:36:29 +07:00
tsconfig.json
uninstall.php
woocommerce.php Prep trunk for 9.4 cycle (#50859) 2024-08-22 09:47:25 -03:00

README.md

WooCommerce

License WordPress.org downloads WordPress.org rating Build Status codecov

This is the WooCommerce Core plugin. Here you can browse the source and keep track of development. We recommend all developers to follow the WooCommerce development blog to stay up to date about everything happening in the project. You can also follow @DevelopWC on Twitter for the latest development updates.

If you are not a developer, please use the WooCommerce plugin page on WordPress.org.

Getting Started

Please make sure you follow the repository's getting started guide first!

# Make sure that WooCommerce Core and all of its dependencies are built
pnpm --filter=@woocommerce/plugin-woocommerce build 
# Make sure you're in the WooCommerce Core directory
cd plugins/woocommerce
# Start the development environment
pnpm -- wp-env start

You should now be able to visit http://localhost:8888/ and access WooCommerce environment.

Building Components

There are two major client-side components included in WooCommerce Core that can be built, linted, and tested independently. We've organized these components in this way to take advantage of caching to prevent unnecessarily performing expensive rebuilds when only working in one of them.

plugins/woocommerce/client/legacy

This directory contains the Classic CSS and jQuery code for WooCommerce.

# Build the assets.
pnpm --filter=@woocommerce/classic-assets build 
# Lint the assets.
pnpm --filter=@woocommerce/classic-assets lint 

plugins/woocommerce-admin

This directory contains the React-based admin interface.

# Build the React-based admin client.
pnpm --filter=@woocommerce/admin-library build 
# Lint the React-based admin client.
pnpm --filter=@woocommerce/admin-library lint 
# Test the React-based admin client.
pnpm --filter=@woocommerce/admin-library test 

plugins/woocommerce-blocks

This directory contains the client for WooCommerce + Gutenberg.

# Build the Blocks client.
pnpm run --filter=@woocommerce/block-library build 
# Lint the Blocks client.
pnpm run --filter=@woocommerce/block-library lint 
# Test the Blocks client.
pnpm run --filter=@woocommerce/block-library test 

Helper Scripts

Here is a collection of scripts that can help when developing the React-based admin interface.

# Create a development build of the React-based admin client.
pnpm --filter=@woocommerce/admin-library dev 
# Create and watch a development build of the React-based admin client.
pnpm --filter=@woocommerce/admin-library start 
# Watch the tests of the React-based admin client.
pnpm --filter=@woocommerce/admin-library test:watch 
# Run a type check over the React-based admin client's TypeScript files.
pnpm --filter=@woocommerce/admin-library ts:check 

Documentation

Reporting Security Issues

To disclose a security issue to our team, please submit a report via HackerOne here.