fix(tax): UI improvements - all 5 issues resolved

## Fixed Issues:

1.  Added Refresh button in header (like Shipping/Payments)
2.  Modal inputs now use shadcn Input component
3.  Modal select uses native select with shadcn styling (avoids blank screen)
4.  Display Settings now full width (removed md:w-[300px])
5.  All fields use Label component for consistency

## Changes:
- Added Input, Label imports
- Added action prop to SettingsLayout with Refresh button
- Replaced all <input> with <Input>
- Replaced all <label> with <Label>
- Used native <select> with shadcn classes for Tax Class
- Made all Display Settings selects full width

## Note:
Tax rates still not saving - investigating API response handling next
This commit is contained in:
dwindown
2025-11-10 13:55:21 +07:00
parent 0012d827bb
commit e9a2946321

View File

@@ -6,6 +6,8 @@ import { SettingsCard } from './components/SettingsCard';
import { SettingsSection } from './components/SettingsSection';
import { ToggleField } from './components/ToggleField';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -167,6 +169,19 @@ export default function TaxSettings() {
<SettingsLayout
title={__('Tax')}
description={__('Configure tax calculation and rates for your store')}
action={
<Button
variant="outline"
size="sm"
onClick={() => {
queryClient.invalidateQueries({ queryKey: ['tax-settings'] });
queryClient.invalidateQueries({ queryKey: ['tax-suggested'] });
}}
>
<RefreshCw className="h-4 w-4 mr-2" />
{__('Refresh')}
</Button>
}
>
<div className="space-y-6">
{/* Enable Tax Calculation */}
@@ -291,7 +306,7 @@ export default function TaxSettings() {
// Update setting
}}
>
<SelectTrigger className="w-full md:w-[300px]">
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -311,7 +326,7 @@ export default function TaxSettings() {
// Update setting
}}
>
<SelectTrigger className="w-full md:w-[300px]">
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -331,7 +346,7 @@ export default function TaxSettings() {
// Update setting
}}
>
<SelectTrigger className="w-full md:w-[300px]">
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -375,14 +390,13 @@ export default function TaxSettings() {
<form onSubmit={handleSubmit}>
<div className="space-y-4 py-4">
<div>
<label className="text-sm font-medium">{__('Country')}</label>
<input
<Label>{__('Country')}</Label>
<Input
name="country"
type="text"
placeholder="ID"
defaultValue={editingRate?.country || ''}
required
className="w-full mt-1.5 px-3 py-2 border rounded-md"
/>
<p className="text-xs text-muted-foreground mt-1">
{__('2-letter country code (e.g., ID, MY, SG)')}
@@ -390,13 +404,12 @@ export default function TaxSettings() {
</div>
<div>
<label className="text-sm font-medium">{__('State/Province (Optional)')}</label>
<input
<Label>{__('State/Province (Optional)')}</Label>
<Input
name="state"
type="text"
placeholder="CA"
defaultValue={editingRate?.state || ''}
className="w-full mt-1.5 px-3 py-2 border rounded-md"
/>
<p className="text-xs text-muted-foreground mt-1">
{__('Leave empty for country-wide rate')}
@@ -404,8 +417,8 @@ export default function TaxSettings() {
</div>
<div>
<label className="text-sm font-medium">{__('Tax Rate (%)')}</label>
<input
<Label>{__('Tax Rate (%)')}</Label>
<Input
name="rate"
type="number"
step="0.01"
@@ -414,28 +427,26 @@ export default function TaxSettings() {
placeholder="11"
defaultValue={editingRate?.rate || ''}
required
className="w-full mt-1.5 px-3 py-2 border rounded-md"
/>
</div>
<div>
<label className="text-sm font-medium">{__('Tax Name')}</label>
<input
<Label>{__('Tax Name')}</Label>
<Input
name="name"
type="text"
placeholder="PPN (VAT)"
defaultValue={editingRate?.name || ''}
required
className="w-full mt-1.5 px-3 py-2 border rounded-md"
/>
</div>
<div>
<label className="text-sm font-medium">{__('Tax Class (Optional)')}</label>
<Label>{__('Tax Class (Optional)')}</Label>
<select
name="tax_class"
defaultValue={editingRate?.tax_class || ''}
className="w-full mt-1.5 px-3 py-2 border rounded-md bg-background"
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>