From 740cfcbb9411535fd31520118d6821ac0d042420 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 8 Jan 2026 09:26:54 +0700
Subject: [PATCH] fix(admin): shipping fallback and variation attribute styling

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.
---
 .../src/routes/Orders/partials/OrderForm.tsx  | 50 +++++++++++++------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/admin-spa/src/routes/Orders/partials/OrderForm.tsx b/admin-spa/src/routes/Orders/partials/OrderForm.tsx
index 1f273a8..d0d9fff 100644
--- a/admin-spa/src/routes/Orders/partials/OrderForm.tsx
+++ b/admin-spa/src/routes/Orders/partials/OrderForm.tsx
@@ -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>
             )}