Merge pull request #5864 from woocommerce/issue/5412-update-customer-section

Order Creation: Update customer section

Author: ealeksandrov

WooCommerce/Classes/ViewRelated/Orders/Order Creation/CustomerSection/OrderCustomerSection.swift

@@ -3,101 +3,110 @@ import SwiftUI
 /// Represents the Customer section
 ///
 struct OrderCustomerSection: View {
-    let geometry: GeometryProxy
 
-    /// View model to drive the view content
-    let viewModel: NewOrderViewModel.CustomerDataViewModel
+    /// Parent view model to access all data
+    @ObservedObject var viewModel: NewOrderViewModel
 
-    /// View model for Address Form
-    let addressFormViewModel: CreateOrderAddressFormViewModel
+    /// View model to drive the view content
+    private var customerDataViewModel: NewOrderViewModel.CustomerDataViewModel {
+        viewModel.customerDataViewModel
+    }
 
     @State private var showAddressForm: Bool = false
 
     var body: some View {
-        Group {
-            Divider()
+        OrderCustomerSectionContent(viewModel: viewModel.customerDataViewModel, showAddressForm: $showAddressForm)
+        .sheet(isPresented: $showAddressForm) {
+            NavigationView {
+                EditOrderAddressForm(dismiss: {
+                    showAddressForm.toggle()
+                }, viewModel: viewModel.createOrderAddressFormViewModel())
+            }
+        }
+    }
+}
 
-            VStack(alignment: .leading) {
-                HStack(alignment: .top) {
-                    Text(Localization.customer)
-                        .headlineStyle()
-
-                    Spacer()
-
-                    if viewModel.isDataAvailable {
-                        Button(Localization.editButton) {
-                            showAddressForm.toggle()
-                        }
-                        .buttonStyle(LinkButtonStyle())
-                        .fixedSize(horizontal: true, vertical: true)
-                        .padding(.top, -Layout.linkButtonTopPadding) // remove padding to align button title to the top
-                        .padding(.trailing, -Layout.linkButtonTrailingPadding) // remove padding to align button title to the side
-                    }
-                }
+private struct OrderCustomerSectionContent: View {
+
+    /// View model to drive the view content
+    var viewModel: NewOrderViewModel.CustomerDataViewModel
+
+    @Binding var showAddressForm: Bool
+
+    @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
+
+    var body: some View {
+        Divider()
 
-                if !viewModel.isDataAvailable {
-                    createCustomerView
-                } else {
-                    customerDataView
+        VStack(alignment: .leading, spacing: .zero) {
+            HStack(alignment: .top) {
+                Text(Localization.customer)
+                    .headlineStyle()
+
+                Spacer()
+
+                if viewModel.isDataAvailable {
+                    Button(Localization.editButton) {
+                        showAddressForm.toggle()
+                    }
+                    .buttonStyle(LinkButtonStyle())
+                    .fixedSize(horizontal: true, vertical: true)
+                    .padding(.top, -Layout.linkButtonTopPadding) // remove padding to align button title to the top
+                    .padding(.trailing, -Layout.linkButtonTrailingPadding) // remove padding to align button title to the side
                 }
             }
-            .padding(.horizontal, insets: geometry.safeAreaInsets)
-            .padding()
-            .background(Color(.listForeground))
+            .padding([.leading, .top, .trailing])
 
-            Divider()
-        }
-        .sheet(isPresented: $showAddressForm) {
-            NavigationView {
-                EditOrderAddressForm(dismiss: {
-                    showAddressForm.toggle()
-                }, viewModel: addressFormViewModel)
+            if !viewModel.isDataAvailable {
+                Spacer(minLength: Layout.verticalHeadlineSpacing)
+                createCustomerView
+            } else {
+                customerDataView
             }
         }
+        .padding(.horizontal, insets: safeAreaInsets)
+        .background(Color(.listForeground))
+
+        Divider()
     }
 
     private var createCustomerView: some View {
         Button(Localization.addCustomer) {
             showAddressForm.toggle()
         }
         .buttonStyle(PlusButtonStyle())
+        .padding([.leading, .bottom, .trailing])
     }
 
     private var customerDataView: some View {
         Group {
-            VStack(alignment: .leading, spacing: Layout.verticalEmailSpacing) {
-                if let fullName = viewModel.fullName {
-                    Text(fullName)
-                        .bodyStyle()
-                }
-                if let email = viewModel.email {
-                    Text(email)
-                        .footnoteStyle()
-                }
-            }
-            if let billingAddressFormatted = viewModel.billingAddressFormatted {
-                addressDetails(title: Localization.billingTitle, formattedAddress: billingAddressFormatted)
-            }
-            if let shippingAddressFormatted = viewModel.shippingAddressFormatted {
-                addressDetails(title: Localization.shippingTitle, formattedAddress: shippingAddressFormatted)
-            }
+            addressDetails(title: Localization.shippingTitle, formattedAddress: viewModel.shippingAddressFormatted)
+            Divider()
+                .padding(.leading)
+            addressDetails(title: Localization.billingTitle, formattedAddress: viewModel.billingAddressFormatted)
         }
     }
 
-    @ViewBuilder private func addressDetails(title: String, formattedAddress: String) -> some View {
-        Divider()
+    @ViewBuilder private func addressDetails(title: String, formattedAddress: String?) -> some View {
         VStack(alignment: .leading, spacing: Layout.verticalAddressSpacing) {
             Text(title)
                 .headlineStyle()
-            Text(formattedAddress)
-                .bodyStyle()
+            if let formattedAddress = formattedAddress, formattedAddress.isNotEmpty {
+                Text(formattedAddress)
+                    .bodyStyle()
+            } else {
+                Text(Localization.noAddress)
+                    .bodyStyle()
+            }
         }
+        .padding()
     }
 }
 
 // MARK: Constants
-private extension OrderCustomerSection {
+private extension OrderCustomerSectionContent {
     enum Layout {
+        static let verticalHeadlineSpacing: CGFloat = 22.0
         static let verticalEmailSpacing: CGFloat = 4.0
         static let verticalAddressSpacing: CGFloat = 6.0
         static let linkButtonTopPadding: CGFloat = 12.0
@@ -111,28 +120,28 @@ private extension OrderCustomerSection {
 
         static let billingTitle = NSLocalizedString("Billing Address", comment: "Title for the Billing Address section in order customer data")
         static let shippingTitle = NSLocalizedString("Shipping Address", comment: "Title for the Edit Shipping Address section in order customer data")
+
+        static let noAddress = NSLocalizedString("No address specified.", comment: "Placeholder for empty address in order customer data")
     }
 }
 
+@available(iOS 15.0, *)
 struct OrderCustomerSection_Previews: PreviewProvider {
     static var previews: some View {
-        let orderAdressFormViewModel = NewOrderViewModel(siteID: 123).createOrderAddressFormViewModel()
         let emptyViewModel = NewOrderViewModel.CustomerDataViewModel(billingAddress: nil, shippingAddress: nil)
         let addressViewModel = NewOrderViewModel.CustomerDataViewModel(fullName: "Johnny Appleseed",
                                                                        email: "[email protected]",
-                                                                       billingAddressFormatted: """
+                                                                       billingAddressFormatted: nil,
+                                                                       shippingAddressFormatted: """
                                                                             Johnny Appleseed
                                                                             234 70th Street
                                                                             Niagara Falls NY 14304
                                                                             US
-                                                                            """,
-                                                                       shippingAddressFormatted: nil)
+                                                                            """)
 
-        GeometryReader { geometry in
-            ScrollView {
-                OrderCustomerSection(geometry: geometry, viewModel: emptyViewModel, addressFormViewModel: orderAdressFormViewModel)
-                OrderCustomerSection(geometry: geometry, viewModel: addressViewModel, addressFormViewModel: orderAdressFormViewModel)
-            }
+        ScrollView {
+            OrderCustomerSectionContent(viewModel: emptyViewModel, showAddressForm: .constant(false))
+            OrderCustomerSectionContent(viewModel: addressViewModel, showAddressForm: .constant(false))
         }
     }
 }

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

@@ -52,7 +52,7 @@ struct NewOrder: View {
             ScrollViewReader { scroll in
                 ScrollView {
                     VStack(spacing: Layout.noSpacing) {
-                        OrderStatusSection(geometry: geometry, viewModel: viewModel)
+                        OrderStatusSection(viewModel: viewModel)
 
                         Spacer(minLength: Layout.sectionSpacing)
 
@@ -66,9 +66,7 @@ struct NewOrder: View {
                             Spacer(minLength: Layout.sectionSpacing)
                         }
 
-                        OrderCustomerSection(geometry: geometry,
-                                             viewModel: viewModel.customerDataViewModel,
-                                             addressFormViewModel: viewModel.createOrderAddressFormViewModel())
+                        OrderCustomerSection(viewModel: viewModel)
                     }
                 }
                 .background(Color(.listBackground).ignoresSafeArea())

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

@@ -46,14 +46,6 @@ final class NewOrderViewModel: ObservableObject {
     ///
     @Published var shouldShowOrderStatusList: Bool = false
 
-    /// Representation of customer data display properties.
-    ///
-    @Published private(set) var customerDataViewModel: CustomerDataViewModel = .init(billingAddress: nil, shippingAddress: nil)
-
-    /// Assign this closure to be notified when a new order is created
-    ///
-    var onOrderCreated: (Order) -> Void = { _ in }
-
     /// Status Results Controller.
     ///
     private lazy var statusResultsController: ResultsController<StorageOrderStatus> = {
@@ -139,6 +131,12 @@ final class NewOrderViewModel: ObservableObject {
         configureProductRowViewModels()
     }
 
+    // MARK: Customer data properties
+
+    /// Representation of customer data display properties.
+    ///
+    @Published private(set) var customerDataViewModel: CustomerDataViewModel = .init(billingAddress: nil, shippingAddress: nil)
+
     /// Creates a view model to be used in Address Form for customer address.
     ///
     func createOrderAddressFormViewModel() -> CreateOrderAddressFormViewModel {
@@ -170,6 +168,10 @@ final class NewOrderViewModel: ObservableObject {
         }
         stores.dispatch(action)
     }
+
+    /// Assign this closure to be notified when a new order is created
+    ///
+    var onOrderCreated: (Order) -> Void = { _ in }
 }
 
 // MARK: - Types

WooCommerce/Classes/ViewRelated/Orders/Order Creation/StatusSection/OrderStatusSection.swift

@@ -4,9 +4,10 @@ import Yosemite
 /// Represents the Status section with date label, status badge and edit button.
 ///
 struct OrderStatusSection: View {
-    let geometry: GeometryProxy
     @ObservedObject var viewModel: NewOrderViewModel
 
+    @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
+
     var body: some View {
         Divider()
 
@@ -38,7 +39,7 @@ struct OrderStatusSection: View {
                 }
             }
         }
-        .padding(.horizontal, insets: geometry.safeAreaInsets)
+        .padding(.horizontal, insets: safeAreaInsets)
         .padding([.leading, .trailing, .top])
         .background(Color(.listForeground))
 
@@ -66,10 +67,8 @@ struct OrderStatusSection_Previews: PreviewProvider {
     static var previews: some View {
         let viewModel = NewOrderViewModel(siteID: 123)
 
-        GeometryReader { geometry in
-            ScrollView {
-                OrderStatusSection(geometry: geometry, viewModel: viewModel)
-            }
+        ScrollView {
+            OrderStatusSection(viewModel: viewModel)
         }
     }
 }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Address Edit/EditOrderAddressForm.swift

@@ -146,6 +146,7 @@ struct EditOrderAddressForm<ViewModel: AddressFormViewModelProtocol>: View {
                                          text: $viewModel.fields.email,
                                          symbol: nil,
                                          keyboardType: .emailAddress)
+                        .autocapitalization(.none)
                         .renderedIf(viewModel.showEmailField)
                     Divider()
                         .padding(.leading, Constants.dividerPadding)
@@ -222,6 +223,7 @@ struct EditOrderAddressForm<ViewModel: AddressFormViewModelProtocol>: View {
                         .background(Color(.systemBackground))
                 }
             }
+            .disableAutocorrection(true)
             .background(Color(.listBackground))
             .ignoresSafeArea(.container, edges: [.horizontal, .bottom])