[Woo POS][Historical Orders] Order List and Details Empty and Error States (Wireframe UI)

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListEmptyView.swift

@@ -1,17 +1,25 @@
 import SwiftUI
 
-struct PointOfSaleItemListEmptyView: View {
+protocol POSEmptyViewModelProtocol {
+    var title: String { get }
+    var subtitle: String { get }
+    var hint: String? { get }
+    var buttonTitle: String? { get }
+    var iconName: String { get }
+}
+
+struct POSListEmptyView: View {
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @Environment(\.floatingControlAreaSize) private var floatingControlAreaSize: CGSize
-    private let viewModel: PointOfSaleItemListEmptyViewModel
+    private let viewModel: any POSEmptyViewModelProtocol
 
     private let onAction: (() -> Void)?
 
     @State private var viewWidth: CGFloat = 0
 
     @Environment(\.keyboardObserver) private var keyboard
 
-    init(viewModel: PointOfSaleItemListEmptyViewModel, onAction: (() -> Void)? = nil) {
+    init(viewModel: any POSEmptyViewModelProtocol, onAction: (() -> Void)? = nil) {
         self.viewModel = viewModel
         self.onAction = onAction
     }
@@ -84,7 +92,7 @@ struct PointOfSaleItemListEmptyView: View {
     }
 }
 
-private extension PointOfSaleItemListEmptyView {
+private extension POSListEmptyView {
     enum Constants {
         static let iconSize: CGFloat = 88
     }
@@ -243,7 +251,7 @@ struct PointOfSaleItemListEmptyViewModel {
 // MARK: - Preview
 
 #Preview {
-    PointOfSaleItemListEmptyView(
+    POSListEmptyView(
         viewModel: PointOfSaleItemListEmptyViewModel(
             itemListType: .coupons(search: false),
             baseItem: .root
@@ -252,10 +260,14 @@ struct PointOfSaleItemListEmptyViewModel {
 }
 
 #Preview {
-    PointOfSaleItemListEmptyView(
+    POSListEmptyView(
         viewModel: PointOfSaleItemListEmptyViewModel(
             itemListType: .products(search: true),
             baseItem: .root
         )
     ) {}
 }
+
+// MARK: - Protocol Conformance
+
+extension PointOfSaleItemListEmptyViewModel: POSEmptyViewModelProtocol {}

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListFullscreenErrorView.swift

@@ -12,7 +12,7 @@ struct PointOfSaleItemListFullscreenErrorView: View {
 
     var body: some View {
         PointOfSaleItemListFullscreenView {
-            PointOfSaleItemListErrorView(error: error, onAction: onAction)
+            POSListErrorView(error: error, onAction: onAction)
         }
     }
 }

WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListFullscreenView.swift

@@ -30,7 +30,7 @@ private enum Localization {
 #Preview {
     PointOfSaleItemListFullscreenView(
         content: {
-            PointOfSaleItemListErrorView(
+            POSListErrorView(
                 error: .init(errorType: .productsLoadError, title: "Error", subtitle: "Something went wrong", buttonText: "Fix it"))
         })
 }

WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift

@@ -87,7 +87,7 @@ private extension ChildItemList {
     var emptyView: some View {
         VStack {
             headerView
-            PointOfSaleItemListEmptyView(
+            POSListEmptyView(
                 viewModel: PointOfSaleItemListEmptyViewModel(
                     itemListType: .products(search: false),
                     baseItem: node)) {
@@ -106,7 +106,7 @@ private extension ChildItemList {
                 Spacer()
             }
 
-            PointOfSaleItemListErrorView(error: error, onAction: {
+            POSListErrorView(error: error, onAction: {
                 Task {
                     await itemsController.loadItems(base: node)
                 }

WooCommerce/Classes/POS/Presentation/Item Selector/ItemList.swift

@@ -113,7 +113,7 @@ struct ItemList<HeaderView: View>: View {
                 GhostItemCardView()
             }
         case .inlineError(_, let errorState, .pagination):
-            ItemListErrorCardView(errorState: errorState,
+            POSListInlineErrorView(errorState: errorState,
                                   buttonAction: {
                 Task { @MainActor in
                     await itemsController.loadNextItems(base: node)
@@ -127,7 +127,7 @@ struct ItemList<HeaderView: View>: View {
     @ViewBuilder var headerRows: some View {
         switch state {
         case .inlineError(_, let errorState, .refresh):
-            ItemListErrorCardView(errorState: errorState,
+            POSListInlineErrorView(errorState: errorState,
                                   buttonAction: {
                 Task { @MainActor in
                     await itemsController.loadItems(base: .root)

WooCommerce/Classes/POS/Presentation/ItemListView.swift

@@ -293,7 +293,7 @@ private extension ItemListView {
     var emptyView: some View {
         switch selectedItemListType {
         case .products:
-            PointOfSaleItemListEmptyView(
+            POSListEmptyView(
                 viewModel: PointOfSaleItemListEmptyViewModel(
                     itemListType: selectedItemListType,
                     baseItem: .root)) {
@@ -302,7 +302,7 @@ private extension ItemListView {
                 }
             }
         case .coupons:
-            PointOfSaleItemListEmptyView(
+            POSListEmptyView(
                 viewModel: PointOfSaleItemListEmptyViewModel(
                     itemListType: selectedItemListType,
                     baseItem: .root)) {
@@ -315,14 +315,14 @@ private extension ItemListView {
     func errorView(_ errorState: PointOfSaleErrorState) -> some View {
         switch errorState.errorType {
         case .couponsDisabled:
-            PointOfSaleItemListErrorView(error: errorState, onAction: {
+            POSListErrorView(error: errorState, onAction: {
                 Task {
                     await posModel.couponsController.enableCoupons()
                     ServiceLocator.analytics.track(.couponSettingEnabled)
                 }
             })
         default:
-            PointOfSaleItemListErrorView(error: errorState, onAction: {
+            POSListErrorView(error: errorState, onAction: {
                 Task {
                     await itemsController(selectedItemListType).loadItems(base: .root)
                 }

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

@@ -2,18 +2,20 @@ import SwiftUI
 
 struct PointOfSaleOrderDetailsEmptyView: View {
     var body: some View {
-        // TODO: WOOMOB-1136
         VStack(spacing: 0) {
             POSPageHeaderView(
-                title: "Orders",
+                title: Localization.title,
                 backButtonConfiguration: nil
             )
 
             VStack {
                 Spacer()
-                Text("No Orders Loaded")
+
+                Text(Localization.noOrderToDisplay)
                     .font(.posBodyLargeRegular())
                     .foregroundStyle(Color.posOnSurfaceVariantHighest)
+                    .multilineTextAlignment(.center)
+
                 Spacer()
             }
         }
@@ -22,6 +24,20 @@ struct PointOfSaleOrderDetailsEmptyView: View {
     }
 }
 
+private enum Localization {
+    static let title = NSLocalizedString(
+        "pos.orderDetailsEmptyView.ordersTitle",
+        value: "Order",
+        comment: "Title at the header for the Order Details empty view."
+    )
+
+    static let noOrderToDisplay = NSLocalizedString(
+        "pos.orderDetailsEmptyView.noOrderToDisplay",
+        value: "No order to display",
+        comment: "Text appearing in the order details pane when there are no orders available."
+    )
+}
+
 #if DEBUG
 #Preview {
     PointOfSaleOrderDetailsEmptyView()

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

@@ -0,0 +1,63 @@
+import Foundation
+
+struct POSOrderListEmptyViewModel: POSListEmptyViewModelProtocol {
+    let isSearching: Bool
+
+    var title: String {
+        isSearching ? Localization.emptyOrdersSearchTitle : Localization.emptyOrdersTitle
+    }
+
+    var subtitle: String {
+        isSearching ? Localization.emptyOrdersSearchSubtitle : Localization.emptyOrdersSubtitle
+    }
+
+    var hint: String? {
+        isSearching ? Localization.emptyOrdersSearchHint : nil
+    }
+
+    var buttonTitle: String? {
+        isSearching ? nil : Localization.emptyOrdersButtonTitle
+    }
+
+    var iconName: String {
+        PointOfSaleAssets.magnifierNotFound.imageName
+    }
+}
+
+private enum Localization {
+    static let emptyOrdersTitle = NSLocalizedString(
+        "pos.orderListView.emptyOrdersTitle",
+        value: "No orders yet",
+        comment: "Title appearing when there are no orders to display."
+    )
+
+    static let emptyOrdersSubtitle = NSLocalizedString(
+        "pos.orderListView.emptyOrdersSubtitle",
+        value: "Orders will appear here once you start processing sales on the POS.",
+        comment: "Subtitle appearing when there are no orders to display."
+    )
+
+    static let emptyOrdersButtonTitle = NSLocalizedString(
+        "pos.orderListView.emptyOrdersButtonTitle",
+        value: "Refresh",
+        comment: "Button text for refreshing orders when list is empty."
+    )
+
+    static let emptyOrdersSearchTitle = NSLocalizedString(
+        "pos.orderListView.emptyOrdersSearchTitle",
+        value: "No orders found",
+        comment: "Title appearing when order search returns no results."
+    )
+
+    static let emptyOrdersSearchSubtitle = NSLocalizedString(
+        "pos.orderListView.emptyOrdersSearchSubtitle",
+        value: "We couldn't find any orders matching your search.",
+        comment: "Subtitle appearing when order search returns no results."
+    )
+
+    static let emptyOrdersSearchHint = NSLocalizedString(
+        "pos.orderListView.emptyOrdersSearchHint",
+        value: "Try adjusting your search term.",
+        comment: "Hint text suggesting to modify search terms when no orders are found."
+    )
+}