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