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
2025-11-10 11:23:42 +07:00
parent e502dcc807
commit 8bebd3abe5
3 changed files with 508 additions and 5 deletions

View File

@@ -456,21 +456,20 @@ export default function StoreDetailsPage() {
</div>
</SettingsCard>
{/* Summary Card - Dynamic with Flag */}
{/* Summary Card - Professional, No Flag */}
<div className="bg-primary/10 border border-primary/20 rounded-lg p-4">
{(() => {
// Find flag for current currency
const currencyFlag = flagsData.find((f: any) => f.code === settings.currency);
const currencyInfo = currencies.find((c: any) => c.code === settings.currency);
const flagEmoji = currencyFlag ? countryCodeToEmoji(currencyFlag.countryCode) : '';
const countryName = currencyFlag?.country || settings.country;
return (
<>
<p className="text-sm font-medium">
{flagEmoji} Your store is located in {currencyFlag?.country || settings.country}
📍 Store Location: {countryName}
</p>
<p className="text-sm text-muted-foreground mt-1">
Prices will be displayed in {currencyInfo?.name || settings.currency} Timezone: {settings.timezone}
Currency: {currencyInfo?.name || settings.currency} Timezone: {settings.timezone}
</p>
</>
);