Improve divider management

Author: Ecarrion

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

@@ -108,10 +108,13 @@ struct OrderForm: View {
                 ScrollView {
                     VStack(spacing: Layout.noSpacing) {
 
-                        NonEditableOrderBanner(width: geometry.size.width)
-                            .renderedIf(viewModel.shouldShowNonEditableBanner)
+                        Group {
+                            Divider() // Needed because `NonEditableOrderBanner` does not have a top divider
+                            NonEditableOrderBanner(width: geometry.size.width)
+                        }
+                        .renderedIf(viewModel.shouldShowNonEditableBanner)
 
-                        OrderStatusSection(viewModel: viewModel)
+                        OrderStatusSection(viewModel: viewModel, topDivider: !viewModel.shouldShowNonEditableBanner)
 
                         Spacer(minLength: Layout.sectionSpacing)
 

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

@@ -4,12 +4,19 @@ import Yosemite
 /// Represents the Status section with date label, status badge and edit button.
 ///
 struct OrderStatusSection: View {
+
     @ObservedObject var viewModel: EditableOrderViewModel
 
     @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
 
+    /// Set false to not render the top divider.
+    /// Useful when there is a content on top that has its own divider.
+    ///
+    private(set) var topDivider: Bool = true
+
     var body: some View {
         Divider()
+            .renderedIf(topDivider)
 
         VStack(alignment: .leading, spacing: .zero) {
             Text(viewModel.dateString)