Replace cart view header with POSPageHeaderView.

Author: jaclync

WooCommerce/Classes/POS/Presentation/CartView.swift

@@ -18,33 +18,16 @@ struct CartView: View {
 
     var body: some View {
         VStack {
-            DynamicHStack(spacing: Constants.cartHeaderSpacing) {
-                HStack(spacing: Constants.cartHeaderElementSpacing) {
-                    backAddMoreButton
-                        .disabled(shouldPreventCartEditing)
-                        .shimmering(active: shouldPreventCartEditing)
-
-                    HStack {
-                        Text(Localization.cartTitle)
-                            .font(Constants.primaryFont)
-                            .foregroundColor(.posOnSurface)
-                            .accessibilityAddTraits(.isHeader)
-
-                        Spacer()
-
-                        if let itemsInCartLabel = viewHelper.itemsInCartLabel(for: posModel.cart.count) {
-                            Text(itemsInCartLabel)
-                                .font(Constants.itemsFont)
-                                .foregroundColor(Color.posOnSurfaceVariantLowest)
-                        }
-                    }
-                    .accessibilityElement(children: .combine)
+            POSPageHeaderView(title: Localization.cartTitle,
+                              backButtonConfiguration: backButtonConfiguration,
+                              trailingContent: {
+                if let itemsInCartLabel = viewHelper.itemsInCartLabel(for: posModel.cart.count) {
+                    Text(itemsInCartLabel)
+                        .font(Constants.itemsFont)
+                        .foregroundColor(Color.posOnSurfaceVariantLowest)
                 }
 
                 HStack {
-                    Spacer()
-                        .renderedIf(dynamicTypeSize.isAccessibilitySize)
-
                     Button {
                         posModel.removeAllItemsFromCart()
                     } label: {
@@ -53,10 +36,7 @@ struct CartView: View {
                     .buttonStyle(POSOutlinedButtonStyle(size: .extraSmall))
                     .renderedIf(shouldShowClearCartButton)
                 }
-            }
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(.horizontal, POSHeaderLayoutConstants.sectionHorizontalPadding)
-            .padding(.vertical, POSHeaderLayoutConstants.sectionVerticalPadding)
+            })
             .if(shouldApplyHeaderBottomShadow, transform: { $0.applyBottomShadow(backgroundColor: backgroundColor) })
 
             if posModel.cart.isNotEmpty {
@@ -204,7 +184,6 @@ private extension CartView {
         static let scrollViewCoordinateSpaceIdentifier: String = "CartScrollView"
         static let emptyViewImageTextSpacing: CGFloat = 30 // This should be 40 by designs, but the overlay technique means we have to tweak it
         static let cartHeaderSpacing: CGFloat = 8
-        static let backButtonSymbol: String = "chevron.backward"
         static let cartHeaderElementSpacing: CGFloat = 16
         static let cartAnimation: Animation = .spring(duration: 0.2)
         static let checkoutButtonVerticalPadding: CGFloat = 16
@@ -247,20 +226,16 @@ private extension CartView {
         .buttonStyle(POSFilledButtonStyle(size: .normal))
     }
 
-    @ViewBuilder
-    var backAddMoreButton: some View {
+    var backButtonConfiguration: POSPageHeaderBackButtonConfiguration? {
         switch posModel.orderStage {
         case .building:
-            EmptyView()
+            return nil
         case .finalizing:
-            Button {
+            let state: POSPageHeaderBackButtonConfiguration.State = shouldPreventCartEditing ? .shimmering : .enabled
+            return .init(state: state, action: {
                 ServiceLocator.analytics.track(.pointOfSaleBackToCartTapped)
                 posModel.addMoreToCart()
-            } label: {
-                Image(systemName: Constants.backButtonSymbol)
-                    .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
-                    .foregroundColor(.posOnSurface)
-            }
+            })
         }
     }