[Woo POS][Historical Orders] Order Details (Wireframe UI)

Modules/Sources/Yosemite/PointOfSale/OrderList/POSOrder.swift

@@ -10,6 +10,7 @@ public struct POSOrder: Equatable, Hashable {
     public let id: Int64
     public let number: String
     public let dateCreated: Date
+    public let datePaid: Date?
     public let status: OrderStatusEnum
     public let total: String
     public let customerEmail: String?
@@ -18,11 +19,13 @@ public struct POSOrder: Equatable, Hashable {
     public let lineItems: [POSOrderItem]
     public let refunds: [POSOrderRefund]
     public let currency: String
-    public let currencySymbol: String
+    public let discountTotal: String
+    public let totalTax: String
 
     public init(id: Int64,
                 number: String,
                 dateCreated: Date,
+                datePaid: Date? = nil,
                 status: OrderStatusEnum,
                 total: String,
                 customerEmail: String? = nil,
@@ -31,10 +34,12 @@ public struct POSOrder: Equatable, Hashable {
                 lineItems: [POSOrderItem] = [],
                 refunds: [POSOrderRefund] = [],
                 currency: String,
-                currencySymbol: String) {
+                discountTotal: String,
+                totalTax: String) {
         self.id = id
         self.number = number
         self.dateCreated = dateCreated
+        self.datePaid = datePaid
         self.status = status
         self.total = total
         self.customerEmail = customerEmail
@@ -43,7 +48,8 @@ public struct POSOrder: Equatable, Hashable {
         self.lineItems = lineItems
         self.refunds = refunds
         self.currency = currency
-        self.currencySymbol = currencySymbol
+        self.discountTotal = discountTotal
+        self.totalTax = totalTax
     }
 }
 
@@ -63,6 +69,7 @@ public extension POSOrder {
             id: order.orderID,
             number: order.number,
             dateCreated: order.dateCreated,
+            datePaid: order.datePaid,
             status: order.status,
             total: order.total,
             customerEmail: customerEmail,
@@ -71,7 +78,8 @@ public extension POSOrder {
             lineItems: posLineItems,
             refunds: posRefunds,
             currency: order.currency,
-            currencySymbol: order.currencySymbol
+            discountTotal: order.discountTotal,
+            totalTax: order.totalTax
         )
     }
 }

Modules/Sources/Yosemite/PointOfSale/OrderList/POSOrderItem.swift

@@ -1,20 +1,36 @@
 import Foundation
 import struct NetworkingCore.OrderItem
+import struct NetworkingCore.OrderItemAttribute
 
 public struct POSOrderItem: Equatable, Hashable {
     public let itemID: Int64
     public let name: String
+    public let productID: Int64
+    public let variationID: Int64
     public let quantity: Decimal
+    public let price: NSDecimalNumber
+    public let subtotal: String
     public let total: String
+    public let attributes: [OrderItemAttribute]
 
     public init(itemID: Int64,
                 name: String,
+                productID: Int64,
+                variationID: Int64,
                 quantity: Decimal,
-                total: String) {
+                price: NSDecimalNumber,
+                subtotal: String,
+                total: String,
+                attributes: [OrderItemAttribute]) {
         self.itemID = itemID
         self.name = name
+        self.productID = productID
+        self.variationID = variationID
         self.quantity = quantity
+        self.price = price
+        self.subtotal = subtotal
         self.total = total
+        self.attributes = attributes
     }
 }
 
@@ -24,8 +40,13 @@ public extension POSOrderItem {
         self.init(
             itemID: orderItem.itemID,
             name: orderItem.name,
+            productID: orderItem.productID,
+            variationID: orderItem.variationID,
             quantity: orderItem.quantity,
-            total: orderItem.total
+            price: orderItem.price,
+            subtotal: orderItem.subtotal,
+            total: orderItem.total,
+            attributes: orderItem.attributes
         )
     }
 }

WooCommerce/Classes/POS/Controllers/PointOfSaleOrderListController.swift

@@ -11,16 +11,19 @@ import class Yosemite.Store
 
 protocol PointOfSaleOrderListControllerProtocol {
     var ordersViewState: OrderListState { get }
+    var selectedOrder: POSOrder? { get }
     func loadOrders() async
     func refreshOrders() async
     func loadNextOrders() async
+    func selectOrder(_ order: POSOrder?)
 }
 
 @Observable final class PointOfSaleOrderListController: PointOfSaleOrderListControllerProtocol {
     var ordersViewState: OrderListState
     private let paginationTracker: AsyncPaginationTracker
     private var fetchStrategy: PointOfSaleOrderListFetchStrategy
     private var cachedOrders: [POSOrder] = []
+    private(set) var selectedOrder: POSOrder?
 
     init(orderListFetchStrategyFactory: PointOfSaleOrderListFetchStrategyFactoryProtocol,
          initialState: OrderListState = .loading([])) {
@@ -118,4 +121,9 @@ protocol PointOfSaleOrderListControllerProtocol {
 
         ordersViewState = .loading(cachedOrders)
     }
+
+    @MainActor
+    func selectOrder(_ order: POSOrder?) {
+        selectedOrder = order
+    }
 }

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

@@ -0,0 +1,29 @@
+import SwiftUI
+
+struct PointOfSaleOrderDetailsEmptyView: View {
+    var body: some View {
+        // TODO: WOOMOB-1136
+        VStack(spacing: 0) {
+            POSPageHeaderView(
+                title: "Orders",
+                backButtonConfiguration: nil
+            )
+
+            VStack {
+                Spacer()
+                Text("No Orders Loaded")
+                    .font(.posBodyLargeRegular())
+                    .foregroundStyle(Color.posOnSurfaceVariantHighest)
+                Spacer()
+            }
+        }
+        .background(Color.posSurface)
+        .navigationBarHidden(true)
+    }
+}
+
+#if DEBUG
+#Preview {
+    PointOfSaleOrderDetailsEmptyView()
+}
+#endif

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

@@ -0,0 +1,182 @@
+import SwiftUI
+
+struct PointOfSaleOrderDetailsLoadingView: View {
+    var body: some View {
+        VStack(spacing: 0) {
+            POSPageHeaderView(
+                title: Localization.orderDetailsTitle,
+                backButtonConfiguration: nil,
+                trailingContent: { shimmeringHeaderTrailingContent },
+                bottomContent: { shimmeringHeaderBottomContent }
+            )
+
+            ScrollView {
+                VStack(alignment: .leading, spacing: POSSpacing.medium) {
+                    shimmeringProductsSection
+                    shimmeringTotalsSection
+                }
+                .padding(.horizontal, POSPadding.medium)
+            }
+        }
+        .background(Color.posSurface)
+        .navigationBarHidden(true)
+    }
+
+    // MARK: - Shimmer Components
+
+    @ViewBuilder
+    private var shimmeringHeaderTrailingContent: some View {
+        GeometryReader { geometry in
+            HStack {
+                Spacer()
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.3, height: 16)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+            }
+        }
+        .frame(height: 16)
+    }
+
+    @ViewBuilder
+    private var shimmeringHeaderBottomContent: some View {
+        GeometryReader { geometry in
+            VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.5, height: 16)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+            }
+        }
+        .frame(height: 16)
+    }
+
+    @ViewBuilder
+    private var shimmeringProductsSection: some View {
+        VStack(alignment: .leading, spacing: POSSpacing.medium) {
+            Text(Localization.productsTitle)
+                .font(.posBodyLargeBold)
+                .foregroundStyle(Color.posOnSurface)
+
+            VStack(spacing: POSSpacing.small) {
+                ForEach(0..<2, id: \.self) { _ in
+                    shimmeringProductRow
+                }
+            }
+        }
+        .padding(POSPadding.medium)
+        .background(Color.posSurfaceContainerLowest)
+        .posItemCardBorderStyles()
+    }
+
+    @ViewBuilder
+    private var shimmeringProductRow: some View {
+        GeometryReader { geometry in
+            HStack(alignment: .top, spacing: POSSpacing.medium) {
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: 40, height: 40)
+                    .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                    .shimmering()
+
+                VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
+                    Rectangle()
+                        .fill(Color.posOnSurfaceVariantLowest)
+                        .frame(width: geometry.size.width * 0.45, height: 20)
+                        .clipShape(RoundedRectangle(cornerRadius: 4))
+                        .shimmering()
+
+                    Rectangle()
+                        .fill(Color.posOnSurfaceVariantLowest)
+                        .frame(width: geometry.size.width * 0.35, height: 16)
+                        .clipShape(RoundedRectangle(cornerRadius: 4))
+                        .shimmering()
+                }
+
+                Spacer()
+
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.2, height: 20)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+            }
+            .padding(.vertical, POSPadding.small)
+        }
+        .frame(height: 60)
+    }
+
+    @ViewBuilder
+    private var shimmeringTotalsSection: some View {
+        VStack(alignment: .leading, spacing: POSSpacing.medium) {
+            Text(Localization.totalsTitle)
+                .font(.posBodyLargeBold)
+                .foregroundStyle(Color.posOnSurface)
+
+            VStack(spacing: POSSpacing.medium) {
+                shimmeringTotalsRow
+                shimmeringTotalsRow
+                shimmeringTotalsRow
+
+                Divider()
+                    .background(Color.posSurfaceDim)
+
+                shimmeringTotalsRow
+                shimmeringTotalsRow
+            }
+        }
+        .padding(POSPadding.medium)
+        .background(Color.posSurfaceContainerLowest)
+        .posItemCardBorderStyles()
+    }
+
+    @ViewBuilder
+    private var shimmeringTotalsRow: some View {
+        GeometryReader { geometry in
+            HStack {
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.3, height: 20)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+
+                Spacer()
+
+                Rectangle()
+                    .fill(Color.posOnSurfaceVariantLowest)
+                    .frame(width: geometry.size.width * 0.25, height: 20)
+                    .clipShape(RoundedRectangle(cornerRadius: 4))
+                    .shimmering()
+            }
+        }
+        .frame(height: 20)
+    }
+}
+
+private enum Localization {
+    static let orderDetailsTitle = NSLocalizedString(
+        "pos.orderDetailsLoadingView.title",
+        value: "Order",
+        comment: "Title for the order details screen when no specific order is selected"
+    )
+
+    static let productsTitle = NSLocalizedString(
+        "pos.orderDetailsLoadingView.productsTitle",
+        value: "Products",
+        comment: "Section title for the products list"
+    )
+
+    static let totalsTitle = NSLocalizedString(
+        "pos.orderDetailsLoadingView.totalsTitle",
+        value: "Totals",
+        comment: "Section title for the order totals breakdown"
+    )
+}
+
+#if DEBUG
+#Preview {
+    PointOfSaleOrderDetailsLoadingView()
+}
+#endif