fix(dashboard): Display shipping method in order summary (#4054)

packages/dashboard/src/app/routes/_authenticated/_orders/components/order-table-totals.tsx

@@ -1,4 +1,6 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { TableCell, TableRow } from '@/vdb/components/ui/table.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@lingui/react/macro';
 import { Order } from '../utils/order-types.js';
 import { MoneyGrossNet } from './money-gross-net.js';
@@ -9,6 +11,7 @@ export interface OrderTableTotalsProps {
 }
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
+    const { formatCurrency } = useLocalFormat();
     const currencyCode = order.currencyCode;
     return (
         <>
@@ -58,7 +61,19 @@ export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTota
             </TableRow>
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">
-                    <Trans>Shipping</Trans>
+                    <div className="flex flex-wrap gap-1">
+                        <div>
+                            <Trans>Shipping</Trans>
+                        </div>
+                        {order.shippingLines.map(sl => (
+                            <Badge variant="outline" key={sl.id}>
+                                {sl.shippingMethod.name}
+                                {order.shippingLines.length > 1
+                                    ? ` (${formatCurrency(sl.discountedPriceWithTax, order.currencyCode)})`
+                                    : ''}
+                            </Badge>
+                        ))}
+                    </div>
                 </TableCell>
                 <TableCell colSpan={1} className="h-12">
                     <MoneyGrossNet