dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): shipping fallback and variation attribute styling

Browse Source 
1. Shipping method selector now shows static shippings list when
   address is not complete, instead of 'No shipping methods available'.
   Only shows the empty message when address IS complete but no methods
   matched.

2. Variation selector in Dialog and Drawer now displays attribute names
   (Size, Dispenser) in semibold and values (30ml, pump) in normal
   weight for better visual hierarchy.
This commit is contained in:
Dwindi Ramadhana
2026-01-08 09:26:54 +07:00
parent 687e51654b
commit 740cfcbb94
1 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
admin-spa/src/routes/Orders/partials/OrderForm.tsx
View File

@@ -729,10 +729,10 @@ export default function OrderForm({
</DialogHeader>
<div className="space-y-3 p-4">
{selectedProduct.variations?.map((variation) => {
const variationLabel = Object.entries(variation.attributes)
.map(([key, value]) => `${key}: ${value || ''}`)
// Build formatted label with styled key:value pairs
const variationParts = Object.entries(variation.attributes)
.filter(([_, value]) => value) // Remove empty values
.join(', ');
.map(([key, value]) => ({ key, value: value || '' }));
return (
<button
@@ -759,7 +759,7 @@ export default function OrderForm({
product_id: selectedProduct.id,
variation_id: variation.id,
name: selectedProduct.name,
variation_name: variationLabel,
variation_name: variationParts.map(p => `${p.key}: ${p.value}`).join(', '),
price: variation.price,
regular_price: variation.regular_price,
sale_price: variation.sale_price,
@@ -777,7 +777,15 @@ export default function OrderForm({
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<div className="font-medium">{variationLabel}</div>
<div className="text-sm">
{variationParts.map((part, idx) => (
<span key={part.key}>
<span className="font-semibold">{part.key}:</span>{' '}
<span>{part.value}</span>
{idx < variationParts.length - 1 && ', '}
</span>
))}
</div>
{variation.sku && (
<div className="text-xs text-muted-foreground mt-0.5">
SKU: {variation.sku}
@@ -827,10 +835,10 @@ export default function OrderForm({
</DrawerHeader>
<div className="p-4 space-y-3 max-h-[60vh] overflow-y-auto">
{selectedProduct.variations?.map((variation) => {
const variationLabel = Object.entries(variation.attributes)
.map(([key, value]) => `${key}: ${value || ''}`)
// Build formatted label with styled key:value pairs
const variationParts = Object.entries(variation.attributes)
.filter(([_, value]) => value) // Remove empty values
.join(', ');
.map(([key, value]) => ({ key, value: value || '' }));
return (
<button
@@ -857,7 +865,7 @@ export default function OrderForm({
product_id: selectedProduct.id,
variation_id: variation.id,
name: selectedProduct.name,
variation_name: variationLabel,
variation_name: variationParts.map(p => `${p.key}: ${p.value}`).join(', '),
price: variation.price,
regular_price: variation.regular_price,
sale_price: variation.sale_price,
@@ -875,7 +883,15 @@ export default function OrderForm({
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<div className="font-medium">{variationLabel}</div>
<div className="text-sm">
{variationParts.map((part, idx) => (
<span key={part.key}>
<span className="font-semibold">{part.key}:</span>{' '}
<span>{part.value}</span>
{idx < variationParts.length - 1 && ', '}
</span>
))}
</div>
{variation.sku && (
<div className="text-xs text-muted-foreground mt-0.5">
SKU: {variation.sku}
@@ -1263,17 +1279,21 @@ export default function OrderForm({
))}
</SelectContent>
</Select>
) : shippingData.country ? (
<div className="text-sm text-muted-foreground py-2">{__('No shipping methods available')}</div>
) : (
) : isShippingAddressComplete && effectiveShippingAddress.country ? (
/* Address is complete but no methods returned - show message */
<div className="text-sm text-muted-foreground py-2">{__('No shipping methods available for this address')}</div>
) : shippings.length > 0 ? (
/* Fallback to static list when address is not complete */
<Select value={shippingMethod} onValueChange={setShippingMethod}>
<SelectTrigger className="w-full"><SelectValue placeholder={shippings.length ? __('Select shipping') : __('No methods')} /></SelectTrigger>
<SelectTrigger className="w-full"><SelectValue placeholder={__('Select shipping')} /></SelectTrigger>
<SelectContent>
{shippings.map(s => (
<SelectItem key={s.id} value={s.id}>{s.title}</SelectItem>
<SelectItem key={s.id} value={s.id}>{s.title} {s.cost > 0 ? `- ${money(s.cost)}` : ''}</SelectItem>
))}
</SelectContent>
</Select>
) : (
<div className="text-sm text-muted-foreground py-2">{__('No shipping methods configured')}</div>
)}
</div>
)}