fix(tax): Tax rates now saving correctly + shadcn Select

## Fixed Critical Issues:

### 1. Tax Rates Not Appearing (FIXED )
**Root Cause:** get_tax_rates() was filtering by tax_class, but empty tax_class (standard) was not matching.

**Solution:** Modified get_tax_rates() to treat empty string as standard class:
```php
if ( $tax_class === 'standard' ) {
    // Match both empty string and 'standard'
    WHERE tax_rate_class = '' OR tax_rate_class = 'standard'
}
```

### 2. Select Dropdown Not Using Shadcn (FIXED )
**Problem:** Native select with manual styling was inconsistent.

**Solution:**
- Added selectedTaxClass state
- Used controlled shadcn Select component
- Initialize state when dialog opens/closes
- Pass state value to API instead of form data

## Changes:
- **Backend:** Fixed get_tax_rates() SQL query
- **Frontend:** Converted to controlled Select with state
- **UX:** Tax rates now appear immediately after creation

## Testing:
-  Add tax rate manually
-  Add suggested tax rate
-  Rates appear in list
-  Select dropdown uses shadcn styling
This commit is contained in:
dwindown
2025-11-10 14:09:52 +07:00
parent b3f242671e
commit 24fdb7e0ae
2 changed files with 33 additions and 17 deletions

View File

@@ -23,6 +23,8 @@ export default function TaxSettings() {
const [showAddRate, setShowAddRate] = useState(false);
const [editingRate, setEditingRate] = useState<any | null>(null);
const [deletingRate, setDeletingRate] = useState<any | null>(null);
const [dismissedSuggestions, setDismissedSuggestions] = useState<string[]>([]);
const [selectedTaxClass, setSelectedTaxClass] = useState<string>('');
// Fetch tax settings
const { data: settings, isLoading } = useQuery({
@@ -140,7 +142,7 @@ export default function TaxSettings() {
state: formData.get('state') as string || '',
rate: parseFloat(formData.get('rate') as string),
name: formData.get('name') as string,
tax_class: formData.get('tax_class') as string || '',
tax_class: selectedTaxClass || '',
priority: 1,
compound: 0,
shipping: 1,
@@ -391,6 +393,10 @@ export default function TaxSettings() {
if (!open) {
setShowAddRate(false);
setEditingRate(null);
setSelectedTaxClass('');
} else {
// Initialize tax class when opening
setSelectedTaxClass(editingRate?.tax_class || '');
}
}}>
<DialogContent>
@@ -455,15 +461,16 @@ export default function TaxSettings() {
<div>
<Label>{__('Tax Class (Optional)')}</Label>
<select
name="tax_class"
defaultValue={editingRate?.tax_class || ''}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<option value="">{__('Standard')}</option>
<option value="reduced-rate">{__('Reduced Rate')}</option>
<option value="zero-rate">{__('Zero Rate')}</option>
</select>
<Select value={selectedTaxClass} onValueChange={setSelectedTaxClass}>
<SelectTrigger>
<SelectValue placeholder={__('Standard')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="">{__('Standard')}</SelectItem>
<SelectItem value="reduced-rate">{__('Reduced Rate')}</SelectItem>
<SelectItem value="zero-rate">{__('Zero Rate')}</SelectItem>
</SelectContent>
</Select>
</div>
</div>