[Woo POS] Add totals view. Shuffle views on checkout flow

WooCommerce/Classes/POS/Presentation/CartView.swift

@@ -25,9 +25,14 @@ struct CartView: View {
                 }
             }
             Spacer()
-            checkoutButton
-                .padding(.horizontal, 32)
-
+            switch viewModel.orderStage {
+            case .building:
+                checkoutButton
+                    .padding(.horizontal, 32)
+            case .finalizing:
+                addMoreButton
+                    .padding(.horizontal, 32)
+            }
         }
         .frame(maxWidth: .infinity)
         .background(Color.secondaryBackground)
@@ -48,6 +53,19 @@ private extension CartView {
         .background(Color.white)
         .cornerRadius(10)
     }
+
+    var addMoreButton: some View {
+        Button("Add More") {
+            viewModel.addMoreToCart()
+        }
+        .padding(.all, 20)
+        .frame(maxWidth: .infinity, idealHeight: 120)
+        .font(.title)
+        .foregroundColor(Color.white)
+        .background(Color.secondaryBackground)
+        .border(.white, width: 2)
+        .cornerRadius(10)
+    }
 }
 
 #if DEBUG

WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift

@@ -14,14 +14,18 @@ struct PointOfSaleDashboardView: View {
             Text("WooCommerce Point Of Sale")
                 .foregroundColor(Color.white)
             HStack {
-                ProductGridView(viewModel: viewModel)
-                    .background(Color.secondaryBackground)
-                    .frame(maxWidth: .infinity)
-                Spacer()
-                CartView(viewModel: viewModel)
-                    .background(Color.secondaryBackground)
-                    .frame(maxWidth: .infinity)
+                switch viewModel.orderStage {
+                case .building:
+                    productGridView
+                    Spacer()
+                    cartView
+                case .finalizing:
+                    cartView
+                    Spacer()
+                    totalsView
+                }
             }
+            .padding()
         }
         .background(Color.primaryBackground)
         .navigationBarBackButtonHidden(true)
@@ -51,6 +55,27 @@ struct PointOfSaleDashboardView: View {
     }
 }
 
+/// Helpers to generate all Dashboard subviews
+private extension PointOfSaleDashboardView {
+    var cartView: some View {
+        CartView(viewModel: viewModel)
+            .background(Color.secondaryBackground)
+            .frame(maxWidth: .infinity)
+    }
+
+    var totalsView: some View {
+        TotalsView(viewModel: viewModel)
+            .background(Color.secondaryBackground)
+            .frame(maxWidth: .infinity)
+    }
+
+    var productGridView: some View {
+        ProductGridView(viewModel: viewModel)
+            .background(Color.secondaryBackground)
+            .frame(maxWidth: .infinity)
+    }
+}
+
 #if DEBUG
 #Preview {
     PointOfSaleDashboardView(viewModel: PointOfSaleDashboardViewModel(products: POSProductFactory.makeFakeProducts(),

WooCommerce/Classes/POS/Presentation/TotalsView.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+struct TotalsView: View {
+    @ObservedObject private var viewModel: PointOfSaleDashboardViewModel
+
+    init(viewModel: PointOfSaleDashboardViewModel) {
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        VStack {
+            Text("Totals")
+                .font(.title)
+                .foregroundColor(Color.white)
+            ScrollView {
+                ForEach(viewModel.productsInCart, id: \.product.productID) { cartProduct in
+                    VStack {
+                        HStack {
+                            Text("\(cartProduct.quantity) x \(cartProduct.product.name) ")
+                            Spacer()
+                            Text("\(cartProduct.product.price)")
+                        }
+                    }
+                    .foregroundColor(.white)
+                }
+            }
+            Spacer()
+            HStack {
+                Button("Take payment") { debugPrint("Not implemented") }
+                    .padding(.all, 10)
+                    .frame(maxWidth: .infinity, idealHeight: 120)
+                    .font(.title)
+                    .foregroundColor(Color.white)
+                    .border(.white, width: 2)
+                Button("Cash") { debugPrint("Not implemented") }
+                    .padding(.all, 10)
+                    .frame(maxWidth: .infinity, idealHeight: 120)
+                    .font(.title)
+                    .foregroundColor(Color.primaryBackground)
+                    .background(Color.white)
+                Button("Card") { debugPrint("Not implemented") }
+                    .padding(.all, 10)
+                    .frame(maxWidth: .infinity, idealHeight: 120)
+                    .font(.title)
+                    .foregroundColor(Color.primaryBackground)
+                    .background(Color.white)
+            }
+        }
+    }
+}

WooCommerce/Classes/POS/ViewModels/PointOfSaleDashboardViewModel.swift

@@ -8,6 +8,13 @@ final class PointOfSaleDashboardViewModel: ObservableObject {
     @Published var showsFilterSheet: Bool = false
     @ObservedObject private(set) var cardReaderConnectionViewModel: CardReaderConnectionViewModel
 
+    enum OrderStage {
+        case building
+        case finalizing
+    }
+
+    @Published private(set) var orderStage: OrderStage = .building
+
     init(products: [POSProduct],
          cardReaderConnectionViewModel: CardReaderConnectionViewModel) {
         self.products = products
@@ -65,7 +72,12 @@ final class PointOfSaleDashboardViewModel: ObservableObject {
     }
 
     func submitCart() {
-        debugPrint("Not implemented")
+        // TODO: https://github.com/woocommerce/woocommerce-ios/issues/12810
+        orderStage = .finalizing
+    }
+
+    func addMoreToCart() {
+        orderStage = .building
     }
 
     func showCardReaderConnection() {

WooCommerce/WooCommerce.xcodeproj/project.pbxproj

@@ -1373,6 +1373,7 @@
 		68D1BEDB28FFEDC20074A29E /* OrderCustomerListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68D1BEDA28FFEDC20074A29E /* OrderCustomerListView.swift */; };
 		68D1BEDD2900E4180074A29E /* CustomerSearchUICommand.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68D1BEDC2900E4180074A29E /* CustomerSearchUICommand.swift */; };
 		68D5094E2AD39BC900B6FFD5 /* DiscountLineDetailsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68D5094D2AD39BC900B6FFD5 /* DiscountLineDetailsView.swift */; };
+		68D8FBD12BFEF9C700477C42 /* TotalsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68D8FBD02BFEF9C700477C42 /* TotalsView.swift */; };
 		68E6749F2A4DA01C0034BA1E /* WooWPComPlan.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68E6749E2A4DA01C0034BA1E /* WooWPComPlan.swift */; };
 		68E674A12A4DA0B30034BA1E /* InAppPurchasesError.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68E674A02A4DA0B30034BA1E /* InAppPurchasesError.swift */; };
 		68E674A32A4DA7990034BA1E /* PrePurchaseUpgradesErrorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68E674A22A4DA7990034BA1E /* PrePurchaseUpgradesErrorView.swift */; };
@@ -4121,6 +4122,7 @@
 		68D1BEDA28FFEDC20074A29E /* OrderCustomerListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderCustomerListView.swift; sourceTree = "<group>"; };
 		68D1BEDC2900E4180074A29E /* CustomerSearchUICommand.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomerSearchUICommand.swift; sourceTree = "<group>"; };
 		68D5094D2AD39BC900B6FFD5 /* DiscountLineDetailsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DiscountLineDetailsView.swift; sourceTree = "<group>"; };
+		68D8FBD02BFEF9C700477C42 /* TotalsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TotalsView.swift; sourceTree = "<group>"; };
 		68E6749E2A4DA01C0034BA1E /* WooWPComPlan.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooWPComPlan.swift; sourceTree = "<group>"; };
 		68E674A02A4DA0B30034BA1E /* InAppPurchasesError.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InAppPurchasesError.swift; sourceTree = "<group>"; };
 		68E674A22A4DA7990034BA1E /* PrePurchaseUpgradesErrorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PrePurchaseUpgradesErrorView.swift; sourceTree = "<group>"; };
@@ -6304,6 +6306,7 @@
 				026826A42BF59DF60036F959 /* ProductCardView.swift */,
 				68BB75322BFAF0FD0031C6FE /* FilterView.swift */,
 				68BB75342BFAF12F0031C6FE /* SearchView.swift */,
+				68D8FBD02BFEF9C700477C42 /* TotalsView.swift */,
 			);
 			path = Presentation;
 			sourceTree = "<group>";
@@ -14484,6 +14487,7 @@
 				DEC6C51C27477890006832D3 /* JCPJetpackInstallStepsView.swift in Sources */,
 				E15FC74526BC213500CF83E6 /* InPersonPaymentsLearnMore.swift in Sources */,
 				D83C12A022250BF0004CA04C /* OrderTrackingTableViewCell.swift in Sources */,
+				68D8FBD12BFEF9C700477C42 /* TotalsView.swift in Sources */,
 				E1ABAEF728479E0300F40BB2 /* InPersonPaymentsSelectPluginView.swift in Sources */,
 				B9B6DEEF283F8B9F00901FB7 /* Site+URL.swift in Sources */,
 				026826AE2BF59DF70036F959 /* QuantityBadgeView.swift in Sources */,