[Woo POS][Historical Orders] Order List & Details (Designer UI)

Modules/Sources/Yosemite/Model/Copiable/Models+Copiable.generated.swift

@@ -66,7 +66,6 @@ extension Yosemite.POSOrder {
         formattedTotal: CopiableProp<String> = .copy,
         formattedSubtotal: CopiableProp<String> = .copy,
         customerEmail: NullableCopiableProp<String> = .copy,
-        paymentMethodID: CopiableProp<String> = .copy,
         paymentMethodTitle: CopiableProp<String> = .copy,
         lineItems: CopiableProp<[POSOrderItem]> = .copy,
         refunds: CopiableProp<[POSOrderRefund]> = .copy,
@@ -82,7 +81,6 @@ extension Yosemite.POSOrder {
         let formattedTotal = formattedTotal ?? self.formattedTotal
         let formattedSubtotal = formattedSubtotal ?? self.formattedSubtotal
         let customerEmail = customerEmail ?? self.customerEmail
-        let paymentMethodID = paymentMethodID ?? self.paymentMethodID
         let paymentMethodTitle = paymentMethodTitle ?? self.paymentMethodTitle
         let lineItems = lineItems ?? self.lineItems
         let refunds = refunds ?? self.refunds
@@ -99,7 +97,6 @@ extension Yosemite.POSOrder {
             formattedTotal: formattedTotal,
             formattedSubtotal: formattedSubtotal,
             customerEmail: customerEmail,
-            paymentMethodID: paymentMethodID,
             paymentMethodTitle: paymentMethodTitle,
             lineItems: lineItems,
             refunds: refunds,

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

@@ -15,7 +15,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
     public let formattedTotal: String
     public let formattedSubtotal: String
     public let customerEmail: String?
-    public let paymentMethodID: String
     public let paymentMethodTitle: String
     public let lineItems: [POSOrderItem]
     public let refunds: [POSOrderRefund]
@@ -31,7 +30,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
                 formattedTotal: String,
                 formattedSubtotal: String,
                 customerEmail: String? = nil,
-                paymentMethodID: String,
                 paymentMethodTitle: String,
                 lineItems: [POSOrderItem] = [],
                 refunds: [POSOrderRefund] = [],
@@ -46,7 +44,6 @@ public struct POSOrder: Equatable, Hashable, GeneratedCopiable {
         self.formattedTotal = formattedTotal
         self.formattedSubtotal = formattedSubtotal
         self.customerEmail = customerEmail
-        self.paymentMethodID = paymentMethodID
         self.paymentMethodTitle = paymentMethodTitle
         self.lineItems = lineItems
         self.refunds = refunds

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

@@ -41,7 +41,6 @@ struct POSOrderMapper {
             formattedTotal: currencyFormatter.formatAmount(order.total, with: order.currency) ?? "",
             formattedSubtotal: order.subtotalValue(currencyFormatter: currencyFormatter),
             customerEmail: customerEmail,
-            paymentMethodID: order.paymentMethodID,
             paymentMethodTitle: order.paymentMethodTitle,
             lineItems: posLineItems,
             refunds: posRefunds,

WooCommerce/Classes/POS/Presentation/Item Search/POSSearchTextFieldStyle.swift

@@ -6,6 +6,7 @@ struct POSSearchTextFieldModifier: ViewModifier {
     private let focused: Bool
     @Binding private var searchTerm: String
     @ScaledMetric private var searchFieldHeight: CGFloat = 56.0
+    @Environment(\.posSearchTextFieldUnfocusedBorderColor) private var unfocusedBorderColor
 
     init(focused: Bool, searchTerm: Binding<String>) {
         self.focused = focused
@@ -17,7 +18,7 @@ struct POSSearchTextFieldModifier: ViewModifier {
         .textFieldStyle(WooRoundedBorderTextFieldStyle(
             focused: focused,
             focusedBorderColor: .posPrimary,
-            unfocusedBorderColor: .posSurfaceBright,
+            unfocusedBorderColor: unfocusedBorderColor,
             backgroundColor: .posSurfaceBright,
             cornerRadius: POSCornerRadiusStyle.medium.value,
             insets: EdgeInsets(top: POSPadding.small, leading: POSPadding.medium, bottom: POSPadding.small, trailing: POSPadding.medium),

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

@@ -0,0 +1,36 @@
+import SwiftUI
+import WooFoundation
+import struct Yosemite.POSOrder
+
+struct POSOrderBadgeView: View {
+    private let order: POSOrder
+
+    init(order: POSOrder) {
+        self.order = order
+    }
+
+    var body: some View {
+        Text(order.status.localizedName)
+            .font(.posCaptionRegular)
+            .foregroundStyle(.black)
+            .padding(.horizontal, POSPadding.small)
+            .padding(.vertical, POSPadding.xSmall)
+            .background(statusBackgroundColor)
+            .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+    }
+
+    private var statusBackgroundColor: Color {
+        switch order.status {
+        case .completed:
+            return Color(uiColor: .withColorStudio(.blue, shade: .shade5))
+        case .failed:
+            return Color(uiColor: .withColorStudio(.red, shade: .shade5))
+        case .processing:
+            return Color(uiColor: .withColorStudio(.green, shade: .shade5))
+        case .onHold:
+            return Color(uiColor: .withColorStudio(.orange, shade: .shade5))
+        default:
+            return Color(uiColor: .gray(.shade5))
+        }
+    }
+}

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

@@ -2,20 +2,24 @@ import SwiftUI
 
 struct POSOrderDetailsLoadingView: View {
     var body: some View {
-        VStack(spacing: 0) {
+        VStack(spacing: POSSpacing.none) {
             POSPageHeaderView(
-                title: Localization.orderDetailsTitle,
+                title: "",
                 backButtonConfiguration: nil,
+                leadingContent: { shimmeringHeaderLeadingContent },
                 trailingContent: { shimmeringHeaderTrailingContent },
                 bottomContent: { shimmeringHeaderBottomContent }
             )
+            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
 
             ScrollView {
                 VStack(alignment: .leading, spacing: POSSpacing.medium) {
                     shimmeringProductsSection
                     shimmeringTotalsSection
                 }
+                .padding(.top, POSPadding.xSmall)
                 .padding(.horizontal, POSPadding.medium)
+                .padding(.bottom, POSPadding.medium)
             }
         }
         .background(Color.posSurface)
@@ -24,33 +28,49 @@ struct POSOrderDetailsLoadingView: View {
 
     // MARK: - Shimmer Components
 
+    @ViewBuilder
+    private var shimmeringHeaderLeadingContent: some View {
+        HStack {
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.longRowWidth, height: POSPadding.xxLarge)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
+            Spacer()
+        }
+    }
+
     @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()
-            }
+        HStack {
+            Spacer()
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.shortRowWidth, height: POSPadding.large)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .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()
-            }
+        VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.longRowWidth, height: POSPadding.medium)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
+
+            Spacer().frame(height: POSSpacing.xSmall)
+
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.shortRowWidth, height: POSPadding.medium)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
         }
-        .frame(height: 16)
+        .padding(.top, POSPadding.medium)
+        .multilineTextAlignment(.leading)
     }
 
     @ViewBuilder
@@ -61,8 +81,12 @@ struct POSOrderDetailsLoadingView: View {
                 .foregroundStyle(Color.posOnSurface)
 
             VStack(spacing: POSSpacing.small) {
-                ForEach(0..<2, id: \.self) { _ in
+                ForEach(0..<2, id: \.self) { index in
                     shimmeringProductRow
+
+                    if index < 1 {
+                        divider
+                    }
                 }
             }
         }
@@ -73,39 +97,35 @@ struct POSOrderDetailsLoadingView: View {
 
     @ViewBuilder
     private var shimmeringProductRow: some View {
-        GeometryReader { geometry in
-            HStack(alignment: .top, spacing: POSSpacing.medium) {
+        HStack(alignment: .center, spacing: POSSpacing.medium) {
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: POSPadding.xxLarge, height: POSPadding.xxLarge)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
+
+            VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
                 Rectangle()
                     .fill(Color.posOnSurfaceVariantLowest)
-                    .frame(width: 40, height: 40)
+                    .frame(width: Constants.longRowWidth, height: POSPadding.medium)
                     .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))
+                    .frame(width: Constants.shortRowWidth, height: POSPadding.medium)
+                    .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
                     .shimmering()
             }
-            .padding(.vertical, POSPadding.small)
+
+            Spacer()
+
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.shortRowWidth, height: POSPadding.medium)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
         }
-        .frame(height: 60)
     }
 
     @ViewBuilder
@@ -120,10 +140,10 @@ struct POSOrderDetailsLoadingView: View {
                 shimmeringTotalsRow
                 shimmeringTotalsRow
 
-                Divider()
-                    .background(Color.posSurfaceDim)
-
+                divider
                 shimmeringTotalsRow
+
+                divider
                 shimmeringTotalsRow
             }
         }
@@ -134,34 +154,38 @@ struct POSOrderDetailsLoadingView: View {
 
     @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()
-            }
+        HStack {
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.mediumRowWidth, height: POSPadding.large)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
+
+            Spacer()
+
+            Rectangle()
+                .fill(Color.posOnSurfaceVariantLowest)
+                .frame(width: Constants.shortRowWidth, height: POSPadding.large)
+                .clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
+                .shimmering()
         }
-        .frame(height: 20)
+    }
+
+    @ViewBuilder
+    private var divider: some View {
+        Divider()
+            .overlay(Color.posOutlineVariant.opacity(0.5))
+            .padding(.vertical, POSSpacing.small)
     }
 }
 
-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"
-    )
+private enum Constants {
+    static let longRowWidth: CGFloat = 120
+    static let mediumRowWidth: CGFloat = 100
+    static let shortRowWidth: CGFloat = 80
+}
 
+private enum Localization {
     static let productsTitle = NSLocalizedString(
         "pos.orderDetailsLoadingView.productsTitle",
         value: "Products",