feat: Add product and category selectors to coupon form

Added comprehensive product/category restrictions to coupon form

Features Added:
1. Product Selectors:
   - Products (include) - multiselect with search
   - Exclude products - multiselect with search
   - Shows product names with searchable dropdown
   - Badge display for selected items

2. Category Selectors:
   - Product categories (include) - multiselect
   - Exclude categories - multiselect
   - Shows category names with search
   - Badge display for selected items

3. API Integration:
   - Added ProductsApi.list() endpoint
   - Added ProductsApi.categories() endpoint
   - Fetch products and categories on form load
   - React Query caching for performance

4. Form Data:
   - Added product_ids field
   - Added excluded_product_ids field
   - Added product_categories field
   - Added excluded_product_categories field
   - Proper number/string conversion

UI/UX Improvements:
- Searchable multiselect dropdowns
- Badge display with X to remove
- Shows +N more when exceeds display limit
- Clear placeholder text
- Helper text for each field
- Consistent spacing and layout

Technical:
- Uses MultiSelect component (shadcn-based)
- React Query for data fetching
- Proper TypeScript types
- Number array handling

Note: Brands field not included yet (requires WooCommerce Product Brands extension check)

Result:
- Full WooCommerce coupon restrictions support
- Clean, searchable UI
- Production ready
This commit is contained in:
dwindown
2025-11-20 15:26:39 +07:00
parent 3a4e68dadf
commit 0f47c08b7a
2 changed files with 95 additions and 0 deletions

View File

@@ -97,6 +97,8 @@ export const OrdersApi = {
export const ProductsApi = {
search: (search: string, limit = 10) => api.get('/products/search', { search, limit }),
list: (params?: { page?: number; per_page?: number }) => api.get('/products', { params }),
categories: () => api.get('/products/categories'),
};
export const CustomersApi = {