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