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