docs: Flag emoji strategy + Tax design + Shipping types
## ✅ Issue #1: Flag Emoji Strategy (Research-Based) Your comprehensive research revealed: - Chrome on Windows does NOT render flag emojis - Flags work for country selection (expected UX) - Flags problematic for summary cards (political sensitivity) **Action Taken:** - ✅ Removed flag from Store summary card - ✅ Changed to: "📍 Store Location: Indonesia" - ✅ Kept flags in dropdowns (country, currency) - ✅ Professional, accessible, future-proof **Pattern:** - Dropdowns: 🇮🇩 Indonesia (visual aid) - Summary: 📍 Indonesia (neutral, professional) - Shipping zones: Text only (clean, scalable) ## ✅ Issue #2: Tax Settings Design Created TAX_SETTINGS_DESIGN.md with: - Toggle at top to enable/disable - **Predefined rates based on store country** - Indonesia: 11% (PPN) auto-shown - Malaysia: 6% (SST) auto-shown - Smart! No re-selecting country - Zero learning curve **User Flow:** 1. Enable tax toggle 2. See: "🇮🇩 Indonesia: 11% (Standard)" 3. Done! Tax working. **For multi-country:** 1. Click "+ Add Tax Rate" 2. Select Malaysia 3. Auto-fills: 6% 4. Save. Done! ## ✅ Issue #3: Shipping Method Types Created SHIPPING_METHOD_TYPES.md documenting: **Type 1: Static Methods** (WC Core) - Free Shipping, Flat Rate, Local Pickup - No API, immediate availability - Basic address fields **Type 2: Live Rate Methods** (API-based) - UPS, FedEx, DHL (International) - J&T, JNE, SiCepat (Indonesian) - Requires "Calculate" button - Returns service options **Address Requirements:** - International: Postal Code (required) - Indonesian: Subdistrict (required) - Static: Basic address only **The Pattern:** ``` Static → Immediate display Live Rate → Calculate → Service options → Select ``` **Next:** Fix Create Order to show conditional fields ## Documentation Added: - TAX_SETTINGS_DESIGN.md - SHIPPING_METHOD_TYPES.md Both ready for implementation!
This commit is contained in:
dwindown
177
TAX_SETTINGS_DESIGN.md
Normal file
177
TAX_SETTINGS_DESIGN.md
Normal file
@@ -0,0 +1,177 @@
|
||||
# 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:
|
||||
```json
|
||||
{
|
||||
"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
|
||||
Reference in New Issue
Block a user