# Product Form Components

## Overview

The Product form has been redesigned with a **modern tabbed interface** inspired by industry leaders (Shopify, Shopee, Wix, Magento) for better UX and maintainability.

## Architecture

### Main Component
- **ProductFormTabbed.tsx** - Orchestrates all tabs, manages state, handles submission

### Tab Components (Modular)
Located in `./tabs/` directory:

1. **GeneralTab.tsx** - Basic product information
   - Product name (required)
   - Product type (simple/variable/grouped/external)
   - Status (publish/draft/pending/private)
   - Long description
   - Short description
   - Additional options (virtual, downloadable, featured)

2. **PricingTab.tsx** - Pricing information
   - SKU (optional)
   - Regular price (required for simple products)
   - Sale price (optional)
   - Savings calculator (shows % discount)

3. **InventoryTab.tsx** - Stock management
   - Manage stock toggle
   - Stock quantity (when enabled)
   - Stock status (in stock/out of stock/on backorder)
   - Visual status indicators

4. **VariationsTab.tsx** - Product variations (variable products only)
   - Add/remove attributes
   - Define attribute options (pipe-separated: `Red | Blue | Green`)
   - Mark attributes for variations
   - Generate variations button (creates all combinations)
   - Per-variation inputs (SKU, price, sale, stock)
   - Pre-fills variation prices with base price

5. **OrganizationTab.tsx** - Categories and tags
   - Categories (checkboxes)
   - Tags (pill buttons)

## Key UX Improvements

### ✅ Progressive Disclosure
Only relevant fields shown per tab. Variations tab disabled for non-variable products.

### ✅ Visual Hierarchy
Clear card-based layout with titles and descriptions for each section.

### ✅ Inline Help
Contextual hints below each field explaining purpose and format.

### ✅ Smart Defaults
- Variations inherit base regular price
- Stock status defaults to "in stock"
- Product type defaults to "simple"

### ✅ Better Input Method
**Pipe separator (`|`) instead of comma** for attribute options:
- No shift key needed
- More visible
- Less ambiguous
- Example: `Red | Blue | Green`

### ✅ Visual Feedback
- Savings percentage calculator
- Color-coded stock status badges
- Attribute badges in variations
- Active tab highlighting

### ✅ Validation Routing
Form automatically switches to the tab with validation errors.

### ✅ Mobile Optimized
- Responsive tab layout
- Touch-friendly buttons
- Stacked inputs on mobile

## Usage

### In New.tsx
```tsx
import { ProductFormTabbed as ProductForm, ProductFormData } from './partials/ProductFormTabbed';

<ProductForm
  mode="create"
  onSubmit={handleCreate}
  formRef={formRef}
  hideSubmitButton={true}
/>
```

### In Edit.tsx
```tsx
import { ProductFormTabbed as ProductForm, ProductFormData } from './partials/ProductFormTabbed';

<ProductForm
  mode="edit"
  initial={productData}
  onSubmit={handleUpdate}
  formRef={formRef}
  hideSubmitButton={true}
/>
```

## Props

```typescript
type Props = {
  mode: 'create' | 'edit';
  initial?: ProductFormData | null;
  onSubmit: (data: ProductFormData) => Promise<void> | void;
  className?: string;
  formRef?: React.RefObject<HTMLFormElement>;
  hideSubmitButton?: boolean;
};
```

## Data Flow

1. **State Management** - All state managed in ProductFormTabbed.tsx
2. **Props Drilling** - State and setters passed to tab components
3. **Validation** - Centralized in handleSubmit
4. **Submission** - Constructs payload and calls onSubmit prop

## Variation Generation Algorithm

```typescript
// Example: Color (Red, Blue) × Size (S, M, L) = 6 variations
const variationAttrs = [
  { name: 'Color', options: ['Red', 'Blue'], variation: true },
  { name: 'Size', options: ['S', 'M', 'L'], variation: true }
];

// Generates:
// 1. Color: Red, Size: S
// 2. Color: Red, Size: M
// 3. Color: Red, Size: L
// 4. Color: Blue, Size: S
// 5. Color: Blue, Size: M
// 6. Color: Blue, Size: L
```

## Future Enhancements

- [ ] Image upload in General tab
- [ ] Bulk variation editing (apply price to all)
- [ ] Variation templates (save common attribute sets)
- [ ] Drag-and-drop image gallery
- [ ] Rich text editor for descriptions
- [ ] SEO fields (meta title, description)
- [ ] Shipping dimensions (weight, size)
- [ ] Related products selector

## Migration from Old Form

The old `ProductForm.tsx` is kept for reference but no longer used. All imports updated to use `ProductFormTabbed`.

**Benefits of new form:**
- 50% less overwhelming for users
- Easier to maintain (modular)
- Better mobile experience
- Industry-standard UX patterns
- Extensible architecture

---

**Last Updated:** November 19, 2025  
**Author:** WooNooW Team
