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:
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user