Merge pull request #5471 from woocommerce/issue/5404-bottom-sheet-to-create-order

Order Creation: Add bottom sheet to choose new order flow

Author: ealeksandrov

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -588,6 +588,12 @@ extension UIImage {
             .imageWithTintColor(tintColor)!
     }
 
+    /// Simple Payments Icon
+    ///
+    static var simplePaymentsImage: UIImage {
+        return UIImage(named: "icon-simple-payments")!
+    }
+
     /// Work In Progress banner icon on the Products Tab
     ///
     static var workInProgressBanner: UIImage {

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorViewController.swift

@@ -81,6 +81,9 @@ UIViewController, UITableViewDataSource, UITableViewDelegate where Command.Model
     }
 
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
+        guard viewProperties.title != nil else {
+            return nil
+        }
         guard let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: BottomSheetListSelectorSectionHeaderView.reuseIdentifier)
             as? BottomSheetListSelectorSectionHeaderView else {
                 fatalError()
@@ -103,7 +106,7 @@ private extension BottomSheetListSelectorViewController {
         tableView.dataSource = self
 
         tableView.rowHeight = UITableView.automaticDimension
-        tableView.estimatedSectionHeaderHeight = estimatedSectionHeight
+        tableView.estimatedSectionHeaderHeight = viewProperties.title != nil ? estimatedSectionHeight : .zero
         tableView.sectionHeaderHeight = UITableView.automaticDimension
 
         tableView.backgroundColor = .listForeground

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

@@ -0,0 +1,90 @@
+import UIKit
+import Yosemite
+
+final class AddOrderCoordinator: Coordinator {
+    var navigationController: UINavigationController
+
+    private let siteID: Int64
+    private let isOrderCreationEnabled: Bool
+    private let shouldShowSimplePaymentsButton: Bool
+    private let sourceBarButtonItem: UIBarButtonItem?
+    private let sourceView: UIView?
+
+    /// Assign this closure to be notified when a new order is created
+    ///
+    var onOrderCreated: (Order) -> Void = { _ in }
+
+    init(siteID: Int64,
+         isOrderCreationEnabled: Bool,
+         shouldShowSimplePaymentsButton: Bool,
+         sourceBarButtonItem: UIBarButtonItem,
+         sourceNavigationController: UINavigationController) {
+        self.siteID = siteID
+        self.isOrderCreationEnabled = isOrderCreationEnabled
+        self.shouldShowSimplePaymentsButton = shouldShowSimplePaymentsButton
+        self.sourceBarButtonItem = sourceBarButtonItem
+        self.sourceView = nil
+        self.navigationController = sourceNavigationController
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func start() {
+        switch (isOrderCreationEnabled, shouldShowSimplePaymentsButton) {
+        case (true, true):
+            presentOrderTypeBottomSheet()
+        case (false, true):
+            presentOrderCreationFlow(bottomSheetOrderType: .simple)
+        case (true, false):
+            presentOrderCreationFlow(bottomSheetOrderType: .full)
+        case (false, false):
+            return
+        }
+    }
+}
+
+// MARK: Navigation
+private extension AddOrderCoordinator {
+    func presentOrderTypeBottomSheet() {
+        let viewProperties = BottomSheetListSelectorViewProperties(title: nil)
+        let command = OrderTypeBottomSheetListSelectorCommand() { selectedBottomSheetOrderType in
+            self.navigationController.dismiss(animated: true)
+            self.presentOrderCreationFlow(bottomSheetOrderType: selectedBottomSheetOrderType)
+        }
+        let productTypesListPresenter = BottomSheetListSelectorPresenter(viewProperties: viewProperties, command: command)
+        productTypesListPresenter.show(from: navigationController, sourceView: sourceView, sourceBarButtonItem: sourceBarButtonItem, arrowDirections: .any)
+    }
+
+    func presentOrderCreationFlow(bottomSheetOrderType: BottomSheetOrderType) {
+        switch bottomSheetOrderType {
+        case .simple:
+            presentSimplePaymentsAmountController()
+        case .full:
+            presentNewOrderController()
+            return
+        }
+    }
+
+    /// Presents `SimplePaymentsAmountHostingController`.
+    ///
+    func presentSimplePaymentsAmountController() {
+        let viewModel = SimplePaymentsAmountViewModel(siteID: siteID)
+        viewModel.onOrderCreated = onOrderCreated
+
+        let viewController = SimplePaymentsAmountHostingController(viewModel: viewModel)
+        let simplePaymentsNC = WooNavigationController(rootViewController: viewController)
+        navigationController.present(simplePaymentsNC, animated: true)
+
+        ServiceLocator.analytics.track(event: WooAnalyticsEvent.SimplePayments.simplePaymentsFlowStarted())
+    }
+
+    /// Presents `NewOrderHostingController`.
+    ///
+    func presentNewOrderController() {
+        let viewController = NewOrderHostingController()
+        viewController.hidesBottomBarWhenPushed = true
+        navigationController.pushViewController(viewController, animated: true)
+    }
+}

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

@@ -0,0 +1,75 @@
+import Yosemite
+
+public enum BottomSheetOrderType: Hashable {
+    case simple
+    case full
+
+    /// Title shown on the action sheet.
+    ///
+    var actionSheetTitle: String {
+        switch self {
+        case .simple:
+            return NSLocalizedString("Simple Payments",
+                                     comment: "Action sheet option when the user wants to create Simple Payments order")
+        case .full:
+            return NSLocalizedString("Create order",
+                                     comment: "Action sheet option when the user wants to create full manual order")
+        }
+    }
+
+    /// Description shown on the action sheet.
+    ///
+    var actionSheetDescription: String {
+        switch self {
+        case .simple:
+            return NSLocalizedString("Create an order with minimal information",
+                                     comment: "Description of the Action sheet option when the user wants to create Simple Payments order")
+        case .full:
+            return NSLocalizedString("Create a new manual order",
+                                     comment: "Description of the Action sheet option when the user wants to create full manual order")
+        }
+    }
+
+    /// Image shown on the action sheet.
+    ///
+    var actionSheetImage: UIImage {
+        switch self {
+        case .simple:
+            return UIImage.simplePaymentsImage
+        case .full:
+            return UIImage.pagesImage
+        }
+    }
+}
+
+final class OrderTypeBottomSheetListSelectorCommand: BottomSheetListSelectorCommand {
+    typealias Model = BottomSheetOrderType
+    typealias Cell = ImageAndTitleAndTextTableViewCell
+
+    var data: [BottomSheetOrderType] = [
+        .full,
+        .simple
+    ]
+
+    var selected: BottomSheetOrderType? = nil
+
+    private let onSelection: (BottomSheetOrderType) -> Void
+
+    init(onSelection: @escaping (BottomSheetOrderType) -> Void) {
+        self.onSelection = onSelection
+    }
+
+    func configureCell(cell: ImageAndTitleAndTextTableViewCell, model: BottomSheetOrderType) {
+        let viewModel = ImageAndTitleAndTextTableViewCell.ViewModel(title: model.actionSheetTitle,
+                                                                    text: model.actionSheetDescription,
+                                                                    image: model.actionSheetImage,
+                                                                    imageTintColor: .gray(.shade20),
+                                                                    numberOfLinesForText: 0,
+                                                                    isActionable: false)
+        cell.updateUI(viewModel: viewModel)
+    }
+
+    func handleSelectedChange(selected: BottomSheetOrderType) {
+        onSelection(selected)
+    }
+}

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

@@ -1,5 +1,18 @@
 import SwiftUI
 
+/// Hosting controller that wraps an `NewOrder` view.
+///
+final class NewOrderHostingController: UIHostingController<NewOrder> {
+
+    init() {
+        super.init(rootView: NewOrder())
+    }
+
+    required dynamic init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}
+
 /// View to create a new manual order
 ///
 struct NewOrder: View {

WooCommerce/Classes/ViewRelated/Orders/OrdersRootViewController.swift

@@ -64,7 +64,7 @@ final class OrdersRootViewController: UIViewController {
 
     override func viewWillAppear(_ animated: Bool) {
         // Needed in ViewWillAppear because this View Controller is never recreated.
-        fetchSimplePaymentsExperimentalToggleAndConfigureNavigationButtons()
+        fetchExperimentalTogglesAndConfigureNavigationButtons()
     }
 
     override func viewDidLayoutSubviews() {
@@ -108,14 +108,15 @@ private extension OrdersRootViewController {
     /// Search: Is always present.
     /// Simple Payments: Depends on the local feature flag, experimental feature toggle and the inPersonPayments state.
     ///
-    func configureNavigationButtons(isSimplePaymentsExperimentalToggleEnabled: Bool) {
+    func configureNavigationButtons(isSimplePaymentsExperimentalToggleEnabled: Bool, isOrderCreationExperimentalToggleEnabled: Bool) {
         let shouldShowSimplePaymentsButton: Bool = {
             let isInPersonPaymentsConfigured = inPersonPaymentsUseCase.state == .completed
             return isSimplePaymentsExperimentalToggleEnabled && isInPersonPaymentsConfigured
         }()
         let buttons: [UIBarButtonItem?] = [
             ordersViewController.createSearchBarButtonItem(),
-            shouldShowSimplePaymentsButton ? ordersViewController.createAddSimplePaymentsOrderItem() : nil
+            ordersViewController.createAddOrderItem(isOrderCreationEnabled: isOrderCreationExperimentalToggleEnabled,
+                                                    shouldShowSimplePaymentsButton: shouldShowSimplePaymentsButton)
         ]
         navigationItem.rightBarButtonItems = buttons.compactMap { $0 }
     }
@@ -153,20 +154,38 @@ private extension OrdersRootViewController {
         inPersonPaymentsUseCase.$state
             .removeDuplicates()
             .sink { [weak self] _ in
-                self?.fetchSimplePaymentsExperimentalToggleAndConfigureNavigationButtons()
+                self?.fetchExperimentalTogglesAndConfigureNavigationButtons()
             }
             .store(in: &subscriptions)
         inPersonPaymentsUseCase.refresh()
     }
 
-    /// Fetches the latest value of the SimplePayments experimental feature toggle and re configures navigation buttons.
+    /// Fetches the latest values of order-related experimental feature toggles and re configures navigation buttons.
     ///
-    func fetchSimplePaymentsExperimentalToggleAndConfigureNavigationButtons() {
-        let action = AppSettingsAction.loadSimplePaymentsSwitchState { [weak self] result in
-            let isEnabled = (try? result.get()) ?? false
-            self?.configureNavigationButtons(isSimplePaymentsExperimentalToggleEnabled: isEnabled)
+    func fetchExperimentalTogglesAndConfigureNavigationButtons() {
+        let group = DispatchGroup()
+
+        var isSimplePaymentsEnabled = false
+        var isOrderCreationEnabled = false
+
+        group.enter()
+        let simplePaymentsAction = AppSettingsAction.loadSimplePaymentsSwitchState { result in
+            isSimplePaymentsEnabled = (try? result.get()) ?? false
+            group.leave()
+        }
+        ServiceLocator.stores.dispatch(simplePaymentsAction)
+
+        group.enter()
+        let orderCreationAction = AppSettingsAction.loadOrderCreationSwitchState { result in
+            isOrderCreationEnabled = (try? result.get()) ?? false
+            group.leave()
+        }
+        ServiceLocator.stores.dispatch(orderCreationAction)
+
+        group.notify(queue: .main) { [weak self] in
+            self?.configureNavigationButtons(isSimplePaymentsExperimentalToggleEnabled: isSimplePaymentsEnabled,
+                                             isOrderCreationExperimentalToggleEnabled: isOrderCreationEnabled)
         }
-        ServiceLocator.stores.dispatch(action)
     }
 }
 

WooCommerce/Classes/ViewRelated/Orders/OrdersTabbedViewController.swift

@@ -51,6 +51,9 @@ final class OrdersTabbedViewController: ButtonBarPagerTabStripViewController {
 
     private let siteID: Int64
 
+    private var isOrderCreationEnabled: Bool = false
+    private var shouldShowSimplePaymentsButton: Bool = false
+
     init(siteID: Int64) {
         self.siteID = siteID
         super.init(nibName: Self.nibName, bundle: nil)
@@ -130,24 +133,25 @@ final class OrdersTabbedViewController: ButtonBarPagerTabStripViewController {
         ServiceLocator.analytics.track(.orderOpen, withProperties: ["id": order.orderID, "status": order.status.rawValue])
     }
 
-    /// Presents `SimplePaymentsAmountHostingController`.
-    ///
-    @objc private func presentSimplePaymentsAmountController() {
-        let viewModel = SimplePaymentsAmountViewModel(siteID: siteID)
-        viewModel.onOrderCreated = { [weak self] order in
+    @objc func presentOrderCreationFlow(sender: UIBarButtonItem) {
+        guard let navigationController = navigationController else {
+            return
+        }
+
+        let coordinatingController = AddOrderCoordinator(siteID: siteID,
+                                                         isOrderCreationEnabled: isOrderCreationEnabled,
+                                                         shouldShowSimplePaymentsButton: shouldShowSimplePaymentsButton,
+                                                         sourceBarButtonItem: sender,
+                                                         sourceNavigationController: navigationController)
+        coordinatingController.onOrderCreated = { [weak self] order in
             guard let self = self else { return }
 
             self.moveToViewController(at: 1, animated: false) // AllOrders list is at index 1
             self.dismiss(animated: true) {
                 self.navigateToOrderDetail(order)
             }
         }
-
-        let viewController = SimplePaymentsAmountHostingController(viewModel: viewModel)
-        let navigationController = WooNavigationController(rootViewController: viewController)
-        present(navigationController, animated: true)
-
-        ServiceLocator.analytics.track(event: WooAnalyticsEvent.SimplePayments.simplePaymentsFlowStarted())
+        coordinatingController.start()
     }
 
     // MARK: - ButtonBarPagerTabStripViewController Conformance
@@ -262,16 +266,31 @@ extension OrdersTabbedViewController {
         return button
     }
 
-    /// Create a `UIBarButtonItem` to be used as a way to create a new simple payments order.
+    /// Create a `UIBarButtonItem` to be used as a way to create a new order.
     ///
-    func createAddSimplePaymentsOrderItem() -> UIBarButtonItem {
+    func createAddOrderItem(isOrderCreationEnabled: Bool, shouldShowSimplePaymentsButton: Bool) -> UIBarButtonItem? {
+        self.isOrderCreationEnabled = isOrderCreationEnabled
+        self.shouldShowSimplePaymentsButton = shouldShowSimplePaymentsButton
+
         let button = UIBarButtonItem(image: .plusBarButtonItemImage,
                                      style: .plain,
                                      target: self,
-                                     action: #selector(presentSimplePaymentsAmountController))
+                                     action: #selector(presentOrderCreationFlow(sender:)))
         button.accessibilityTraits = .button
-        button.accessibilityLabel = NSLocalizedString("Add simple payments order", comment: "Navigates to a screen to create a simple payments order")
-        button.accessibilityIdentifier = "simple-payments-add-button"
+
+        switch (isOrderCreationEnabled, shouldShowSimplePaymentsButton) {
+        case (false, false):
+            return nil
+        case (true, true):
+            button.accessibilityLabel = NSLocalizedString("Choose new order type", comment: "Opens action sheet to choose a type of a new order")
+            button.accessibilityIdentifier = "new-order-type-sheet-button"
+        case (true, false):
+            button.accessibilityLabel = NSLocalizedString("Add a new order", comment: "Navigates to a screen to create a full manual order")
+            button.accessibilityIdentifier = "full-order-add-button"
+        case (false, true):
+            button.accessibilityLabel = NSLocalizedString("Add simple payments order", comment: "Navigates to a screen to create a simple payments order")
+            button.accessibilityIdentifier = "simple-payments-add-button"
+        }
         return button
     }
 

WooCommerce/Resources/Images.xcassets/icon-simple-payments.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-simple-payments.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}