Move PointOfSaleOrderBadgeView into a separate view to reuse

Author: staskus

WooCommerce/Classes/POS/Presentation/Orders/PointOfSaleOrderDetailsLoadingView.swift

@@ -27,11 +27,14 @@ struct PointOfSaleOrderDetailsLoadingView: View {
     @ViewBuilder
     private var shimmeringHeaderTrailingContent: some View {
         GeometryReader { geometry in
-            Rectangle()
-                .fill(Color.posOnSurfaceVariantLowest)
-                .frame(width: geometry.size.width * 0.6, height: 16)
-                .clipShape(RoundedRectangle(cornerRadius: 4))
-                .shimmering()
+            HStack {
+                Spacer()
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.3, height: 16)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+            }
         }
         .frame(height: 16)
     }

WooCommerce/Classes/POS/Presentation/Orders/PointOfSaleOrderDetailsView.swift

@@ -22,7 +22,7 @@ struct PointOfSaleOrderDetailsView: View {
             POSPageHeaderView(
                 title: Localization.orderTitle(order.number),
                 backButtonConfiguration: shouldShowBackButton ? .init(state: .enabled, action: onBack) : nil,
-                trailingContent: { orderStatusBadge(order.status) },
+                trailingContent: { PointOfSaleOrderBadgeView(order: order) },
                 bottomContent: { headerBottomContent(for: order) }
             )
 
@@ -110,16 +110,6 @@ private extension PointOfSaleOrderDetailsView {
         .multilineTextAlignment(.leading)
     }
 
-    @ViewBuilder
-    func orderStatusBadge(_ status: OrderStatusEnum) -> some View {
-        Text(status.localizedName)
-            .font(.posBodySmallRegular())
-            .foregroundStyle(statusColor(for: status))
-            .padding(.horizontal, POSPadding.small)
-            .padding(.vertical, POSPadding.xSmall)
-            .background(statusColor(for: status).opacity(0.1))
-            .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
-    }
 }
 
 // MARK: - Product Components
@@ -295,21 +285,6 @@ private extension PointOfSaleOrderDetailsView {
     }
 }
 
-// MARK: - Helpers
-
-private extension PointOfSaleOrderDetailsView {
-    func statusColor(for status: OrderStatusEnum) -> Color {
-        switch status {
-        case .completed:
-            return .posSuccess
-        case .failed:
-            return .posError
-        default:
-            return .posOnSurfaceVariantLowest
-        }
-    }
-}
-
 // MARK: - Localization
 
 private enum Localization {

WooCommerce/Classes/POS/Presentation/Orders/PointOfSaleOrderListView.swift

@@ -162,16 +162,7 @@ private struct OrderRowView: View {
                     .font(.posBodyLargeBold)
                     .foregroundStyle(Color.posOnSurface)
 
-                HStack(spacing: POSSpacing.xSmall) {
-                    if let paymentMethodIcon = paymentMethodIcon {
-                        Image(systemName: paymentMethodIcon)
-                            .foregroundStyle(statusColor)
-                            .font(.caption)
-                    }
-                    Text(order.status.localizedName)
-                        .font(.posBodySmallRegular())
-                        .foregroundStyle(statusColor)
-                }
+                PointOfSaleOrderBadgeView(order: order)
             }
             .multilineTextAlignment(.trailing)
         }
@@ -184,28 +175,7 @@ private struct OrderRowView: View {
 }
 
 private extension OrderRowView {
-    var paymentMethodIcon: String? {
-        let paymentMethod = OrderPaymentMethod(rawValue: order.paymentMethodID)
-        switch paymentMethod {
-        case .cod:
-            return "banknote"
-        case .stripe, .woocommercePayments:
-            return "creditcard"
-        default:
-            return nil
-        }
-    }
-
-    var statusColor: Color {
-        switch order.status {
-        case .completed:
-            return .posSuccess
-        case .failed:
-            return .posError
-        default:
-            return .posOnSurfaceVariantLowest
-        }
-    }
+    // No additional helpers needed - using shared PointOfSaleOrderBadgeView
 }
 
 private struct GhostOrderRowView: View {
@@ -263,6 +233,56 @@ private struct GhostOrderRowView: View {
     }
 }
 
+// MARK: - Order Badge View
+
+struct PointOfSaleOrderBadgeView: View {
+    let order: POSOrder
+
+    init(order: POSOrder) {
+        self.order = order
+    }
+
+    var body: some View {
+        HStack(spacing: POSSpacing.xSmall) {
+            if let paymentMethodIcon = paymentMethodIcon {
+                Image(systemName: paymentMethodIcon)
+                    .foregroundStyle(statusColor)
+                    .font(.caption)
+            }
+            Text(order.status.localizedName)
+                .font(.posCaptionRegular)
+                .foregroundStyle(statusColor)
+        }
+        .padding(.horizontal, POSPadding.small)
+        .padding(.vertical, POSPadding.xSmall)
+        .background(statusColor.opacity(0.1))
+        .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+    }
+
+    private var paymentMethodIcon: String? {
+        let paymentMethod = OrderPaymentMethod(rawValue: order.paymentMethodID)
+        switch paymentMethod {
+        case .cod:
+            return "banknote"
+        case .stripe, .woocommercePayments:
+            return "creditcard"
+        default:
+            return nil
+        }
+    }
+
+    private var statusColor: Color {
+        switch order.status {
+        case .completed:
+            return .posSuccess
+        case .failed:
+            return .posError
+        default:
+            return .posOnSurfaceVariantLowest
+        }
+    }
+}
+
 private enum Constants {
     static let orderCardMinHeight: CGFloat = 90
     static let maximumOrderCardHeight: CGFloat = Constants.orderCardMinHeight * 2