Merge pull request #6578 from Juanpe/issue/6500-add-button-to-dismiss-new-order-modal

Add a cancel button to allow merchants to cancel the flow of creating a new order.

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Orders/Order Creation/NewOrder.swift

@@ -13,6 +13,11 @@ final class NewOrderHostingController: UIHostingController<NewOrder> {
     init(viewModel: NewOrderViewModel) {
         self.viewModel = viewModel
         super.init(rootView: NewOrder(viewModel: viewModel))
+
+        // Needed because a `SwiftUI` cannot be dismissed when being presented by a UIHostingController
+        rootView.dismissHandler = { [weak self] in
+            self?.dismiss(animated: true)
+        }
     }
 
     required dynamic init?(coder aDecoder: NSCoder) {
@@ -40,7 +45,9 @@ final class NewOrderHostingController: UIHostingController<NewOrder> {
 extension NewOrderHostingController {
     override func shouldPopOnBackButton() -> Bool {
         guard !viewModel.hasChanges else {
-            presentDiscardChangesActionSheet()
+            presentDiscardChangesActionSheet(onDiscard: { [weak self] in
+                self?.discardOrderAndPop()
+            })
             return false
         }
         return true
@@ -49,13 +56,6 @@ extension NewOrderHostingController {
     override func shouldPopOnSwipeBack() -> Bool {
         return shouldPopOnBackButton()
     }
-
-    private func presentDiscardChangesActionSheet() {
-        UIAlertController.presentDiscardChangesActionSheet(viewController: self, onDiscard: { [weak self] in
-            self?.viewModel.discardOrder()
-            self?.navigationController?.popViewController(animated: true)
-        })
-    }
 }
 
 /// Intercepts to the dismiss drag gesture.
@@ -66,16 +66,37 @@ extension NewOrderHostingController: UIAdaptivePresentationControllerDelegate {
     }
 
     func presentationControllerDidAttemptToDismiss(_ presentationController: UIPresentationController) {
-        UIAlertController.presentDiscardChangesActionSheet(viewController: self, onDiscard: { [weak self] in
-            self?.viewModel.discardOrder()
-            self?.dismiss(animated: true, completion: nil)
+        presentDiscardChangesActionSheet(onDiscard: { [weak self] in
+            self?.discardOrderAndDismiss()
         })
     }
 }
 
+/// Private methods
+///
+private extension NewOrderHostingController {
+    func presentDiscardChangesActionSheet(onDiscard: @escaping () -> Void) {
+        UIAlertController.presentDiscardChangesActionSheet(viewController: self, onDiscard: onDiscard)
+    }
+
+    func discardOrderAndDismiss() {
+        viewModel.discardOrder()
+        dismiss(animated: true)
+    }
+
+    func discardOrderAndPop() {
+        viewModel.discardOrder()
+        navigationController?.popViewController(animated: true)
+    }
+}
+
 /// View to create a new manual order
 ///
 struct NewOrder: View {
+    /// Set this closure with UIKit dismiss code. Needed because we need access to the UIHostingController `dismiss` method.
+    ///
+    var dismissHandler: (() -> Void) = {}
+
     @ObservedObject var viewModel: NewOrderViewModel
 
     /// Fix for breaking navbar button
@@ -113,14 +134,21 @@ struct NewOrder: View {
         .navigationTitle(Localization.title)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
+            ToolbarItem(placement: .cancellationAction) {
+                Button(Localization.cancelButton) {
+                    dismissHandler()
+                }
+                .accessibilityIdentifier(Accessibility.cancelButtonIdentifier)
+                .renderedIf(viewModel.shouldShowCancelButton)
+            }
             ToolbarItem(placement: .confirmationAction) {
                 switch viewModel.navigationTrailingItem {
                 case .create:
                     Button(Localization.createButton) {
                         viewModel.createOrder()
                     }
                     .id(navigationButtonID)
-                    .accessibilityIdentifier("new-order-create-button")
+                    .accessibilityIdentifier(Accessibility.createButtonIdentifier)
                     .disabled(viewModel.disabled)
 
                 case .loading:
@@ -213,11 +241,17 @@ private extension NewOrder {
     enum Localization {
         static let title = NSLocalizedString("New Order", comment: "Title for the order creation screen")
         static let createButton = NSLocalizedString("Create", comment: "Button to create an order on the New Order screen")
+        static let cancelButton = NSLocalizedString("Cancel", comment: "Button to cancel the creation of an order on the New Order screen")
         static let products = NSLocalizedString("Products", comment: "Title text of the section that shows the Products when creating a new order")
         static let addProduct = NSLocalizedString("Add Product", comment: "Title text of the button that adds a product when creating a new order")
         static let productRowAccessibilityHint = NSLocalizedString("Opens product detail.",
                                                                    comment: "Accessibility hint for selecting a product in a new order")
     }
+
+    enum Accessibility {
+        static let createButtonIdentifier = "new-order-create-button"
+        static let cancelButtonIdentifier = "new-order-cancel-button"
+    }
 }
 
 struct NewOrder_Previews: PreviewProvider {

WooCommerce/Classes/ViewRelated/Orders/Order Creation/NewOrderViewModel.swift

@@ -1,6 +1,7 @@
 import Yosemite
 import Combine
 import protocol Storage.StorageManagerType
+import Experiments
 
 /// View model for `NewOrder`.
 ///
@@ -9,6 +10,7 @@ final class NewOrderViewModel: ObservableObject {
     private let stores: StoresManager
     private let storageManager: StorageManagerType
     private let currencyFormatter: CurrencyFormatter
+    private let featureFlagService: FeatureFlagService
 
     private var cancellables: Set<AnyCancellable> = []
 
@@ -18,6 +20,12 @@ final class NewOrderViewModel: ObservableObject {
         orderSynchronizer.order != OrderFactory.emptyNewOrder
     }
 
+    /// Indicates whether the cancel button is visible.
+    ///
+    var shouldShowCancelButton: Bool {
+        featureFlagService.isFeatureFlagEnabled(.splitViewInOrdersTab)
+    }
+
     /// Active navigation bar trailing item.
     /// Defaults to create button.
     ///
@@ -192,13 +200,15 @@ final class NewOrderViewModel: ObservableObject {
          stores: StoresManager = ServiceLocator.stores,
          storageManager: StorageManagerType = ServiceLocator.storageManager,
          currencySettings: CurrencySettings = ServiceLocator.currencySettings,
-         analytics: Analytics = ServiceLocator.analytics) {
+         analytics: Analytics = ServiceLocator.analytics,
+         featureFlagService: FeatureFlagService = ServiceLocator.featureFlagService) {
         self.siteID = siteID
         self.stores = stores
         self.storageManager = storageManager
         self.currencyFormatter = CurrencyFormatter(currencySettings: currencySettings)
         self.analytics = analytics
         self.orderSynchronizer = RemoteOrderSynchronizer(siteID: siteID, stores: stores, currencySettings: currencySettings)
+        self.featureFlagService = featureFlagService
 
         // Set a temporary initial view model, as a workaround to avoid making it optional.
         // Needs to be reset before the view model is used.

WooCommerce/UITestsFoundation/Screens/Orders/NewOrderScreen.swift

@@ -7,12 +7,20 @@ public final class NewOrderScreen: ScreenObject {
         $0.buttons["new-order-create-button"]
     }
 
+    private let cancelButtonGetter: (XCUIApplication) -> XCUIElement = {
+        $0.buttons["new-order-cancel-button"]
+    }
+
     private let orderStatusEditButtonGetter: (XCUIApplication) -> XCUIElement = {
         $0.buttons["order-status-section-edit-button"]
     }
 
     private var createButton: XCUIElement { createButtonGetter(app) }
 
+    /// Cancel button in the Navigation bar.
+    ///
+    private var cancelButton: XCUIElement { cancelButtonGetter(app) }
+
     /// Edit button in the Order Status section.
     ///
     private var orderStatusEditButton: XCUIElement { orderStatusEditButtonGetter(app) }
@@ -32,6 +40,12 @@ public final class NewOrderScreen: ScreenObject {
         return try SingleOrderScreen()
     }
 
+    @discardableResult
+    public func cancelOrderCreation() throws -> OrdersScreen {
+        cancelButton.tap()
+        return try OrdersScreen()
+    }
+
     /// Opens the Order Status screen (to set a new order status).
     /// - Returns: Order Status screen object.
     @discardableResult

WooCommerce/WooCommerceUITests/Tests/OrdersTests.swift

@@ -32,4 +32,10 @@ final class OrdersTests: XCTestCase {
         try NewOrderFlow.editOrderStatus()
             .createOrder()
     }
+
+    func test_cancel_order_creation() throws {
+        try TabNavComponent().goToOrdersScreen()
+            .startOrderCreation()
+            .cancelOrderCreation()
+    }
 }

docs/UI-TESTS.md

@@ -18,6 +18,7 @@ The following flows are covered/planned to be covered by UI tests. Tests that ar
     - [ ] Tap chart on stats
 3. [Orders](../WooCommerce/WooCommerceUITests/Tests/OrdersTests.swift)
     - [x] Orders list and single order screens load
+    - [x] Dismissal of order creation flow when tapping the Close button
     - [ ] View product on single order screen
     - [ ] Add customer note
     - [ ] Add order note