WooNooW/TAX_SETTINGS_DESIGN.md

Tax Settings Design - WooNooW

Philosophy: Zero Learning Curve

User should understand tax setup in 30 seconds, not 30 minutes.

---

UI Structure

Tax Settings Page
├── [Toggle] Enable tax calculations
│   └── Description: "Calculate and display taxes at checkout"
│
├── When ENABLED, show:
│
├── Predefined Tax Rates [SettingsCard]
│   └── Based on store country from Store Details
│   
│   Example for Indonesia:
│   ┌─────────────────────────────────────┐
│   │ 🇮🇩 Indonesia Tax Rates             │
│   ├─────────────────────────────────────┤
│   │ Standard Rate: 11%                  │
│   │ Applied to: All products            │
│   │ [Edit Rate]                         │
│   └─────────────────────────────────────┘
│
├── Additional Tax Rates [SettingsCard]
│   ├── [+ Add Tax Rate] button
│   └── List of custom rates:
│       ┌─────────────────────────────────┐
│       │ Malaysia: 6%                    │
│       │ Applied to: All products        │
│       │ [Edit] [Delete]                 │
│       └─────────────────────────────────┘
│
├── Display Settings [SettingsCard]
│   ├── Prices are entered: [Including tax / Excluding tax]
│   ├── Display prices in shop: [Including tax / Excluding tax]
│   └── Display prices in cart: [Including tax / Excluding tax]
│
└── Advanced Settings
    └── Link to WooCommerce tax settings

---

Predefined Tax Rates by Country

When user's store country is set, we show the standard rate:

Country	Standard Rate	Note
Indonesia	11%	PPN (VAT)
Malaysia	6%	SST
Singapore	9%	GST
Thailand	7%	VAT
Philippines	12%	VAT
Vietnam	10%	VAT
United States	0%	Varies by state - user adds manually
European Union	20%	Average - varies by country

---

User Flow

Scenario 1: Indonesian Store (Simple)

1. User enables tax toggle
2. Sees: "🇮🇩 Indonesia: 11% (Standard)"
3. Done! Tax is working.

Scenario 2: Multi-Country Store

1. User enables tax toggle
2. Sees predefined rate for their country
3. Clicks "+ Add Tax Rate"
4. Selects country: Malaysia
5. Rate auto-fills: 6%
6. Clicks Save
7. Done!

Scenario 3: US Store (Complex)

1. User enables tax toggle
2. Sees: "🇺🇸 United States: 0% (Add rates by state)"
3. Clicks "+ Add Tax Rate"
4. Selects: United States - California
5. Enters: 7.25%
6. Clicks Save
7. Repeats for other states

---

Add Tax Rate Dialog

Add Tax Rate
├── Country/Region [Searchable Select]
│   └── 🇮🇩 Indonesia
│       🇲🇾 Malaysia
│       🇺🇸 United States
│       └── California
│           Texas
│           New York
│
├── Tax Rate (%)
│   └── [Input: 11]
│
├── Tax Class
│   └── [Select: Standard / Reduced / Zero]
│
└── [Cancel] [Save Rate]

---

Backend Requirements

API Endpoints:

• GET /settings/tax/config - Get tax enabled status + rates
• POST /settings/tax/toggle - Enable/disable tax
• GET /settings/tax/rates - List all tax rates
• POST /settings/tax/rates - Create tax rate
• PUT /settings/tax/rates/{id} - Update tax rate
• DELETE /settings/tax/rates/{id} - Delete tax rate
• GET /settings/tax/predefined - Get predefined rates by country

Predefined Rates Data:

{
  "ID": {
    "country": "Indonesia",
    "rate": 11,
    "name": "PPN (VAT)",
    "class": "standard"
  },
  "MY": {
    "country": "Malaysia",
    "rate": 6,
    "name": "SST",
    "class": "standard"
  }
}

---

Benefits

✅ Zero learning curve - User sees their country's rate immediately ✅ No re-selection - Store country from Store Details is used ✅ Smart defaults - Predefined rates are accurate ✅ Flexible - Can add more countries/rates as needed ✅ Accessible - Clear labels, simple toggle ✅ Scalable - Works for single-country and multi-country stores

---

Comparison to WooCommerce

Feature	WooCommerce	WooNooW
Enable tax	Checkbox buried in settings	Toggle at top
Add rate	Navigate to Tax tab → Add rate → Fill form	Predefined + one-click add
Multi-country	Manual for each	Smart suggestions
Learning curve	30 minutes	30 seconds

---

Next Steps

1. Create Tax settings page component
2. Build backend API endpoints
3. Add predefined rates data
4. Test with Indonesian store
5. Test with multi-country store