Enhance order display item sorting in buildOrderDisplayItems function

- Introduced sorting logic to prioritize monthly subscriptions over one-time items in the order display.
- Refactored item mapping to store display items in a variable for improved readability and maintainability.
- Ensured that items with the same charge kind maintain their original order during sorting.

apps/portal/src/features/orders/utils/order-display.ts

@@ -200,7 +200,7 @@ export function buildOrderDisplayItems(
   }
 
   // Don't group items - show each one separately
-  return items.map((item, index) => {
+  const displayItems = items.map((item, index) => {
     const charges = aggregateCharges({ indices: [index], items: [item] });
     const isBundled = Boolean(item.isBundledAddon);
     
@@ -217,6 +217,20 @@ export function buildOrderDisplayItems(
       isBundle: isBundled,
     };
   });
+
+  // Sort: monthly subscriptions first, then one-time items
+  return displayItems.sort((a, b) => {
+    // Get the primary charge kind for each item
+    const aChargeKind = a.charges[0]?.kind ?? "other";
+    const bChargeKind = b.charges[0]?.kind ?? "other";
+    
+    // Sort by charge kind (monthly first, then one-time)
+    const orderDiff = CHARGE_ORDER[aChargeKind] - CHARGE_ORDER[bChargeKind];
+    if (orderDiff !== 0) return orderDiff;
+    
+    // If same charge kind, maintain original order
+    return 0;
+  });
 }
 
 export function summarizeOrderDisplayItems(