74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
# ORDERS-FIX — Design
|
|
|
|
## Feature
|
|
**ID:** ORDERS-FIX
|
|
**Title:** Orders detail: refund history shown in human-friendly format
|
|
|
|
---
|
|
|
|
## Solución
|
|
|
|
### Enfoque: Mejora de UI en el frontend
|
|
|
|
Dado que el historial usa `event.message` como string libre, el fix más seguro es mejorar el renderizado:
|
|
|
|
1. **Detectar refunds** en el mensaje por keywords
|
|
2. **Formatear importes** en euros (€)
|
|
3. **Usar iconos** visuales (💰 ↔️ 💸)
|
|
4. **Colores** distintivos para refunds (púrpura/rosa vs azul normal)
|
|
|
|
### Cambios en `orders/[id]/page.tsx`
|
|
|
|
```tsx
|
|
// Helper para detectar refunds
|
|
function isRefundEvent(message: string): boolean {
|
|
const lower = message.toLowerCase();
|
|
return lower.includes('refund') || lower.includes('reembolso') || lower.includes('devolución');
|
|
}
|
|
|
|
// En el render del historial:
|
|
{[...history].reverse().map((event) => {
|
|
const isRefund = isRefundEvent(event.message);
|
|
return (
|
|
<div key={event.id} className="flex gap-3">
|
|
<div className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
|
|
isRefund ? 'bg-purple-400' :
|
|
event.eventType === 'SHIPPING_UPDATE' ? 'bg-purple-400' : 'bg-blue-400'
|
|
}`} />
|
|
<div className="min-w-0">
|
|
<p className={`text-sm ${isRefund ? 'text-purple-800 font-medium' : 'text-gray-800'} break-words`}>
|
|
{isRefund && '💸 '}{event.message}
|
|
</p>
|
|
<p className="text-xs text-gray-400">
|
|
{new Date(event.createdAt).toLocaleString('es-ES')}
|
|
{event.actorEmail ? ` · ${event.actorEmail}` : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
```
|
|
|
|
### Beneficios
|
|
- No requiere cambios en backend
|
|
- Bajo riesgo
|
|
- Mejora visual inmediata
|
|
- Fallback graceful si no hay refunds
|
|
|
|
---
|
|
|
|
## Archivos a Modificar
|
|
- `project/apps/admin/src/app/(dashboard)/orders/[id]/page.tsx`
|
|
|
|
---
|
|
|
|
## Testing
|
|
1. Order sin refunds → historial normal (azul)
|
|
2. Order con refunds → mensaje con 💸 y color púrpura
|
|
3. Eventos shipping → púrpura diferenciado
|
|
|
|
## Gates
|
|
- [ ] reviewer: PENDING
|
|
- [ ] security: PENDING
|
|
- [ ] qa: PENDING
|