Replace cash view header with POSPageHeaderView with adjusted layout to remove extra padding originally for the header.

Author: jaclync

WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift

@@ -28,63 +28,60 @@ struct PointOfSaleCollectCashView: View {
     var body: some View {
         ScrollView {
             VStack(alignment: .center, spacing: conditionalPadding(8)) {
-                HStack {
+                POSPageHeaderView(title: Localization.backNavigationTitle,
+                                  subtitle: formattedOrderTotal,
+                                  backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
+                                                                 action: {
+                    Task { @MainActor in
+                        await posModel.cancelCashPayment()
+                        isTextFieldFocused = false
+                    }
+                }))
+
+                VStack {
+                    FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos)
+                        .focused($isTextFieldFocused)
+                        .dynamicTypeSize(...DynamicTypeSize.accessibility1)
+                        .onSubmit {
+                            Task { @MainActor in
+                                await submitCashAmount()
+                            }
+                        }
+                        .onChange(of: textFieldViewModel.amount) { newValue in
+                            textFieldAmountInput = newValue
+                            updateChangeDueMessage()
+                        }
+
+                    if let changeDue = changeDueMessage {
+                        Text(changeDue)
+                            .font(.posBodyLargeRegular())
+                            .foregroundColor(.posOnSurfaceVariantHighest)
+                    }
+
+                    if let errorMessage = errorMessage {
+                        Text(errorMessage)
+                            .font(POSFontStyle.posBodyLargeRegular())
+                            .foregroundColor(.red)
+                            .padding(.bottom, Constants.errorMessagePadding)
+                    }
+
                     Button(action: {
                         Task { @MainActor in
-                            await posModel.cancelCashPayment()
-                            isTextFieldFocused = false
+                            await submitCashAmount()
                         }
                     }, label: {
-                        navigationHeader
+                        Text(Localization.markPaymentCompletedButtonTitle)
                     })
-                    .disabled(isLoading)
-                    Spacer()
-                        .renderedIf(!dynamicTypeSize.isAccessibilitySize)
-                }
-
-                FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos)
-                    .focused($isTextFieldFocused)
+                    .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
+                    .frame(maxWidth: .infinity)
                     .dynamicTypeSize(...DynamicTypeSize.accessibility1)
-                    .onSubmit {
-                        Task { @MainActor in
-                            await submitCashAmount()
-                        }
-                    }
-                    .onChange(of: textFieldViewModel.amount) { newValue in
-                        textFieldAmountInput = newValue
-                        updateChangeDueMessage()
-                    }
-
-                if let changeDue = changeDueMessage {
-                    Text(changeDue)
-                        .font(.posBodyLargeRegular())
-                        .foregroundColor(.posOnSurfaceVariantHighest)
-                }
+                    .disabled(isLoading)
 
-                if let errorMessage = errorMessage {
-                    Text(errorMessage)
-                        .font(POSFontStyle.posBodyLargeRegular())
-                        .foregroundColor(.red)
-                        .padding(.bottom, Constants.errorMessagePadding)
+                    Spacer()
                 }
-
-                Button(action: {
-                    Task { @MainActor in
-                        await submitCashAmount()
-                    }
-                }, label: {
-                    Text(Localization.markPaymentCompletedButtonTitle)
-                })
-                .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
-                .frame(maxWidth: .infinity)
-                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
-                .disabled(isLoading)
-
-                Spacer()
+                .padding([.horizontal, .bottom])
             }
             .background(backgroundColor)
-            .padding(.top, conditionalPadding(Constants.navigationHeaderTopPadding))
-            .padding([.horizontal, .bottom])
             .animation(.easeInOut, value: errorMessage)
             .animation(.easeInOut, value: changeDueMessage)
             .onChange(of: textFieldAmountInput) { _ in
@@ -98,29 +95,6 @@ struct PointOfSaleCollectCashView: View {
     }
 }
 
-@available(iOS 17.0, *)
-private extension PointOfSaleCollectCashView {
-    @ViewBuilder
-    var navigationHeader: some View {
-        HStack(alignment: .top) {
-            Image(systemName: "chevron.backward")
-                .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
-            DynamicVStack(horizontalAlignment: .leading, spacing: Constants.navigationButtonSpacing) {
-                Text(Localization.backNavigationTitle)
-                    .font(.posHeading)
-                    .accessibilityAddTraits(.isHeader)
-                if dynamicTypeSize.isAccessibilitySize {
-                    Spacer()
-                }
-                Text(formattedOrderTotal)
-                    .font(.posBodyLargeRegular())
-            }
-            .padding(.top, -Constants.navigationButtonSpacing)
-        }
-        .foregroundColor(navigationForegroundColor)
-    }
-}
-
 @available(iOS 17.0, *)
 private extension PointOfSaleCollectCashView {
     private func submitCashAmount() async {
@@ -170,10 +144,6 @@ private extension PointOfSaleCollectCashView {
         .posSurface
     }
 
-    private var navigationForegroundColor: Color {
-        isLoading ? .posDisabledContainer : .primary
-    }
-
     enum Localization {
         static let backNavigationTitle = NSLocalizedString(
             "pointOfSale.cashview.back.navigation.title",

WooCommerce/Classes/POS/Presentation/TotalsView.swift

@@ -262,7 +262,14 @@ private extension TotalsView {
         let backgroundColor: Color
         let topPadding: CGFloat?
         let bottomPadding: CGFloat?
-        let sidePadding: CGFloat = 8
+        let sidePadding: CGFloat
+
+        init(backgroundColor: Color, topPadding: CGFloat?, bottomPadding: CGFloat?, sidePadding: CGFloat = 8) {
+            self.backgroundColor = backgroundColor
+            self.topPadding = topPadding
+            self.bottomPadding = bottomPadding
+            self.sidePadding = sidePadding
+        }
 
         static let primary = PaymentViewLayout(
             backgroundColor: .clear,
@@ -332,8 +339,9 @@ private extension TotalsView {
             }
         case .cash:
             return PaymentViewLayout(backgroundColor: backgroundColor,
-                                     topPadding: nil,
-                                     bottomPadding: nil)
+                                     topPadding: 0,
+                                     bottomPadding: nil,
+                                     sidePadding: 0)
         }
     }
 }