Merge pull request #5517 from woocommerce/issue/5408-order-creation-products-ui

Order Creation: Products section UI

Author: rachelmcr

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -667,6 +667,18 @@ extension UIImage {
         return UIImage(systemName: "plus", withConfiguration: Configurations.barButtonItemSymbol)!
     }
 
+    /// Small Plus Icon
+    ///
+    static var plusSmallImage: UIImage {
+        return UIImage.gridicon(.plusSmall)
+    }
+
+    /// Small Minus Icon
+    ///
+    static var minusSmallImage: UIImage {
+        return UIImage.gridicon(.minusSmall)
+    }
+
     /// Search Icon - used in `UIBarButtonItem`
     ///
     static var searchBarButtonItemImage: UIImage {

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

@@ -29,7 +29,7 @@ final class NewOrderHostingController: UIHostingController<NewOrder> {
             .sink { [weak self] notice in
                 switch notice {
                 case .error:
-                    self?.noticePresenter.enqueue(notice: .init(title: Localization.errorMessage, feedbackType: .error))
+                    self?.noticePresenter.enqueue(notice: .init(title: NewOrder.Localization.errorMessage, feedbackType: .error))
                 }
 
                 // Nullify the presentation intent.
@@ -45,11 +45,17 @@ struct NewOrder: View {
     @ObservedObject var viewModel: NewOrderViewModel
 
     var body: some View {
-        ScrollView {
-            EmptyView()
-        }
-        .background(Color(.listBackground))
+        GeometryReader { geometry in
+            ScrollView {
+                VStack(spacing: Layout.noSpacing) {
+                    Spacer(minLength: Layout.sectionSpacing)
+
+                    ProductsSection(geometry: geometry)
+                }
+            }
+            .background(Color(.listBackground))
             .ignoresSafeArea(.container, edges: [.horizontal, .bottom])
+        }
         .navigationTitle(Localization.title)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
@@ -70,11 +76,147 @@ struct NewOrder: View {
     }
 }
 
+// MARK: Order Sections
+/// Represents the Products section
+///
+private struct ProductsSection: View {
+    let geometry: GeometryProxy
+
+    var body: some View {
+        Group {
+            Divider()
+
+            VStack(alignment: .leading, spacing: NewOrder.Layout.verticalSpacing) {
+                Text(NewOrder.Localization.products)
+                    .headlineStyle()
+
+                // TODO: Add a product row for each product added to the order
+                ProductRow()
+
+                Button(NewOrder.Localization.addProduct) {
+                    // TODO: Open Add Product modal view
+                }
+                .buttonStyle(PlusButtonStyle())
+            }
+            .padding(.horizontal, insets: geometry.safeAreaInsets)
+            .padding()
+            .background(Color(.listForeground))
+
+            Divider()
+        }
+    }
+
+    /// Represent a single product row in the Product section
+    ///
+    struct ProductRow: View {
+
+        // Tracks the scale of the view due to accessibility changes
+        @ScaledMetric private var scale: CGFloat = 1
+
+        var body: some View {
+            AdaptiveStack(horizontalAlignment: .leading) {
+                HStack(alignment: .top) {
+                    // Product image
+                    // TODO: Display actual product image when available
+                    Image(uiImage: .productPlaceholderImage)
+                        .resizable()
+                        .aspectRatio(contentMode: .fill)
+                        .frame(width: NewOrder.Layout.productImageSize * scale, height: NewOrder.Layout.productImageSize * scale)
+                        .foregroundColor(Color(UIColor.listSmallIcon))
+                        .accessibilityHidden(true)
+
+                    // Product details
+                    VStack(alignment: .leading) {
+                        Text("Love Ficus") // Fake data - product name
+                        Text("7 in stock • $20.00") // Fake data - stock / price
+                            .subheadlineStyle()
+                        Text("SKU: 123456") // Fake data - SKU
+                            .subheadlineStyle()
+                    }
+                    .accessibilityElement(children: .combine)
+                }
+
+                Spacer()
+
+                ProductStepper()
+            }
+
+            Divider()
+        }
+    }
+
+    /// Represents a custom stepper.
+    /// Used to change the product quantity in the order.
+    ///
+    struct ProductStepper: View {
+
+        // Tracks the scale of the view due to accessibility changes
+        @ScaledMetric private var scale: CGFloat = 1
+
+        var body: some View {
+            HStack(spacing: NewOrder.Layout.stepperSpacing * scale) {
+                Button {
+                    // TODO: Decrement the product quantity
+                } label: {
+                    Image(uiImage: .minusSmallImage)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(height: NewOrder.Layout.stepperButtonSize * scale)
+                }
+
+                Text("1") // Fake data - quantity
+
+                Button {
+                    // TODO: Increment the product quantity
+                } label: {
+                    Image(uiImage: .plusSmallImage)
+                        .resizable()
+                        .aspectRatio(contentMode: .fit)
+                        .frame(height: NewOrder.Layout.stepperButtonSize * scale)
+                }
+            }
+            .padding(NewOrder.Layout.stepperSpacing/2 * scale)
+            .overlay(
+                RoundedRectangle(cornerRadius: NewOrder.Layout.stepperBorderRadius)
+                    .stroke(Color(UIColor.separator), lineWidth: NewOrder.Layout.stepperBorderWidth)
+            )
+            .accessibilityElement(children: .ignore)
+            .accessibility(label: Text("Quantity"))
+            .accessibility(value: Text("1")) // Fake static data - quantity
+            .accessibilityAdjustableAction { direction in
+                switch direction {
+                case .decrement:
+                    break // TODO: Decrement the product quantity
+                case .increment:
+                    break // TODO: Increment the product quantity
+                @unknown default:
+                    break
+                }
+            }
+        }
+    }
+}
+
 // MARK: Constants
-private 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 errorMessage = NSLocalizedString("Unable to create new order", comment: "Notice displayed when order creation fails")
+private extension NewOrder {
+    enum Layout {
+        static let sectionSpacing: CGFloat = 16.0
+        static let verticalSpacing: CGFloat = 22.0
+        static let noSpacing: CGFloat = 0.0
+        static let productImageSize: CGFloat = 44.0
+        static let stepperBorderWidth: CGFloat = 1.0
+        static let stepperBorderRadius: CGFloat = 4.0
+        static let stepperButtonSize: CGFloat = 22.0
+        static let stepperSpacing: CGFloat = 22.0
+    }
+
+    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 errorMessage = NSLocalizedString("Unable to create new order", comment: "Notice displayed when order creation fails")
+        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")
+    }
 }
 
 struct NewOrder_Previews: PreviewProvider {
@@ -84,5 +226,23 @@ struct NewOrder_Previews: PreviewProvider {
         NavigationView {
             NewOrder(viewModel: viewModel)
         }
+
+        NavigationView {
+            NewOrder(viewModel: viewModel)
+        }
+        .environment(\.sizeCategory, .accessibilityExtraExtraLarge)
+        .previewDisplayName("Accessibility")
+
+        NavigationView {
+            NewOrder(viewModel: viewModel)
+        }
+        .environment(\.colorScheme, .dark)
+        .previewDisplayName("Dark")
+
+        NavigationView {
+            NewOrder(viewModel: viewModel)
+        }
+        .environment(\.layoutDirection, .rightToLeft)
+        .previewDisplayName("Right to left")
     }
 }

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/ButtonStyles.swift

@@ -23,6 +23,12 @@ struct LinkButtonStyle: ButtonStyle {
     }
 }
 
+struct PlusButtonStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        return PlusButton(configuration: configuration)
+    }
+}
+
 /// Adds a primary button style while showing a progress view on top of the button when required.
 ///
 struct PrimaryLoadingButtonStyle: PrimitiveButtonStyle {
@@ -191,6 +197,28 @@ private struct LinkButton: View {
     }
 }
 
+private struct PlusButton: View {
+    let configuration: ButtonStyleConfiguration
+
+    var body: some View {
+        HStack {
+            Label {
+                configuration.label
+            } icon: {
+                Image(uiImage: .plusImage)
+            }
+            Spacer()
+        }
+        .frame(maxWidth: .infinity)
+        .foregroundColor(Color(foregroundColor))
+        .background(Color(.clear))
+    }
+
+    var foregroundColor: UIColor {
+        configuration.isPressed ? .accentDark : .accent
+    }
+}
+
 private enum Style {
     static let defaultCornerRadius = CGFloat(8.0)
     static let defaultBorderWidth = CGFloat(1.0)
@@ -216,6 +244,9 @@ struct PrimaryButton_Previews: PreviewProvider {
 
             Button("Link button") {}
                 .buttonStyle(LinkButtonStyle())
+
+            Button("Plus button") {}
+                .buttonStyle(PlusButtonStyle())
         }
         .padding()
     }

WooCommerce/WooCommerceTests/Extensions/IconsTests.swift

@@ -246,6 +246,10 @@ final class IconsTests: XCTestCase {
         XCTAssertNotNil(UIImage.mailImage)
     }
 
+    func test_minus_small_image_is_not_nil() {
+        XCTAssertNotNil(UIImage.minusSmallImage)
+    }
+
     func testMoreImageIconIsNotNil() {
         XCTAssertNotNil(UIImage.moreImage)
     }
@@ -318,6 +322,10 @@ final class IconsTests: XCTestCase {
         XCTAssertNotNil(UIImage.plusBarButtonItemImage)
     }
 
+    func test_plus_small_image_is_not_nil() {
+        XCTAssertNotNil(UIImage.plusSmallImage)
+    }
+
     func testPriceImageIconIsNotNil() {
         XCTAssertNotNil(UIImage.priceImage)
     }