[Woo POS][Design System] Use page header component in cart/cash/receipt views (#15171)

jaclync · web-flow · commit aae0ac7d8f9d · 2025-02-19T09:12:26.000+08:00
diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift
@@ -18,38 +18,18 @@ 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)
+            POSPageHeaderView(title: Localization.cartTitle,
+                              backButtonConfiguration: backButtonConfiguration,
+                              trailingContent: {
+                DynamicHStack(horizontalAlignment: .trailing, verticalAlignment: .center, spacing: Constants.cartHeaderElementSpacing) {
+                    if let itemsInCartLabel = viewHelper.itemsInCartLabel(for: posModel.cart.count) {
+                        Text(itemsInCartLabel)
+                            .font(Constants.itemsFont)
                             .lineLimit(1)
                             .minimumScaleFactor(0.5)
                             .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                            .foregroundColor(.posOnSurface)
-                            .accessibilityAddTraits(.isHeader)
-
-                        Spacer()
-
-                        if let itemsInCartLabel = viewHelper.itemsInCartLabel(for: posModel.cart.count) {
-                            Text(itemsInCartLabel)
-                                .font(Constants.itemsFont)
-                                .lineLimit(1)
-                                .minimumScaleFactor(0.5)
-                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                                .foregroundColor(Color.posOnSurfaceVariantLowest)
-                        }
+                            .foregroundColor(Color.posOnSurfaceVariantLowest)
                     }
-                    .accessibilityElement(children: .combine)
-                }
-
-                HStack {
-                    Spacer()
-                        .renderedIf(dynamicTypeSize.isAccessibilitySize)
 
                     Button {
                         posModel.removeAllItemsFromCart()
@@ -59,10 +39,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 {
@@ -210,7 +187,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
@@ -253,21 +229,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)
-                    .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                    .foregroundColor(.posOnSurface)
-            }
+            })
         }
     }
 
diff --git a/WooCommerce/Classes/POS/Presentation/ItemListView.swift b/WooCommerce/Classes/POS/Presentation/ItemListView.swift
@@ -180,7 +180,7 @@ private extension ItemListView {
         static let bannerVerticalPadding: CGFloat = 26
         static let bannerTextSpacing: CGFloat = 4
         static let bannerTitleSpacing: CGFloat = 8
-        static let infoIconInset: EdgeInsets = .init(top: 8, leading: 6, bottom: 8, trailing: 6)
+        static let infoIconInset: EdgeInsets = .init(top: 0, leading: 6, bottom: 0, trailing: 6)
         static let iconPadding: CGFloat = 26
         static let itemListPadding: CGFloat = 16
         static let bannerCardPadding: CGFloat = 16
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/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(alignment: .center, spacing: conditionalPadding(8)) {
+                    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,30 +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)
-                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-            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 {
@@ -171,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",
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift
@@ -61,7 +61,7 @@ struct POSPageHeaderView<TrailingContent: View>: View {
                         .lineLimit(1)
                         .minimumScaleFactor(0.5)
                         .dynamicTypeSize(...DynamicTypeSize.accessibility2)
-                        .foregroundColor(.posOnSurfaceVariantHighest)
+                        .foregroundColor(.posOnSurface)
                 }
             }
 
@@ -85,7 +85,7 @@ struct POSPageHeaderView<TrailingContent: View>: View {
                     .foregroundColor(configuration.state == .disabled ? .posOnSurfaceVariantLowest : .posOnSurface)
                     .padding(.horizontal, Constants.backButtonHorizontalPadding)
             }
-            .disabled(configuration.state == .disabled)
+            .disabled(configuration.state == .disabled || configuration.state == .shimmering)
             .if(configuration.state == .shimmering) { view in
                 view.shimmering()
             }
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift
@@ -18,61 +18,51 @@ struct POSSendReceiptView: View {
 
     var body: some View {
         VStack(alignment: .center, spacing: conditionalPadding(8)) {
-            HStack {
-                Button(action: {
-                    withAnimation {
-                        isShowingSendReceiptView = false
-                        isTextFieldFocused = false
-                    }
-                }, label: {
-                    HStack {
-                        Image(systemName: "chevron.backward")
-                        Text(Localization.emailReceiptNavigationText)
+            POSPageHeaderView(title: Localization.emailReceiptNavigationText,
+                              backButtonConfiguration: .init(state: isLoading ? .disabled: .enabled,
+                                                             action: {
+                withAnimation {
+                    isShowingSendReceiptView = false
+                    isTextFieldFocused = false
+                }
+            }))
+
+            VStack(alignment: .center, spacing: conditionalPadding(8)) {
+                TextField(Localization.textfieldPlaceholder, text: $textFieldInput)
+                    .dynamicTypeSize(...DynamicTypeSize.accessibility1)
+                    .keyboardType(.emailAddress)
+                    .textInputAutocapitalization(.never)
+                    .autocorrectionDisabled()
+                    .multilineTextAlignment(.center)
+                    .font(POSFontStyle.posBodyXLarge)
+                    .focused()
+                    .focused($isTextFieldFocused)
+                    .padding()
+                    .onSubmit {
+                        sendReceipt()
                     }
-                    .font(.posHeading)
-                    .foregroundColor(.posOnSurface)
-                    .dynamicTypeSize(...DynamicTypeSize.accessibility3)
-                    .accessibilityAddTraits(.isHeader)
-                })
-                Spacer()
-            }
-            .buttonStyle(.plain)
-            .disabled(isLoading)
 
-            TextField(Localization.textfieldPlaceholder, text: $textFieldInput)
-                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
-                .keyboardType(.emailAddress)
-                .textInputAutocapitalization(.never)
-                .autocorrectionDisabled()
-                .multilineTextAlignment(.center)
-                .font(POSFontStyle.posBodyXLarge)
-                .focused()
-                .focused($isTextFieldFocused)
-                .padding()
-                .onSubmit {
-                    sendReceipt()
+                if let errorMessage = errorMessage {
+                    Text(errorMessage)
+                        .font(POSFontStyle.posBodyLargeRegular())
+                        .foregroundColor(.red)
+                        .padding(.bottom, Constants.errorMessagePadding)
                 }
 
-            if let errorMessage = errorMessage {
-                Text(errorMessage)
-                    .font(POSFontStyle.posBodyLargeRegular())
-                    .foregroundColor(.red)
-                    .padding(.bottom, Constants.errorMessagePadding)
-            }
-
-            Button(action: {
-                sendReceipt()
-            }, label: {
-                Text(Localization.buttonTitle)
-            })
-            .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
-            .dynamicTypeSize(...DynamicTypeSize.accessibility3)
-            .frame(maxWidth: .infinity)
-            .disabled(isLoading)
+                Button(action: {
+                    sendReceipt()
+                }, label: {
+                    Text(Localization.buttonTitle)
+                })
+                .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
+                .dynamicTypeSize(...DynamicTypeSize.accessibility3)
+                .frame(maxWidth: .infinity)
+                .disabled(isLoading)
 
-            Spacer()
+                Spacer()
+            }
+            .padding([.horizontal, .bottom])
         }
-        .padding([.horizontal, .bottom])
         .animation(.easeInOut, value: errorMessage)
         .onChange(of: textFieldInput) { _ in
             errorMessage = nil
diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ struct POSPageHeaderView<TrailingContent: View>: View {`
`61`	`61`	`.lineLimit(1)`
`62`	`62`	`.minimumScaleFactor(0.5)`
`63`	`63`	`.dynamicTypeSize(...DynamicTypeSize.accessibility2)`
`64`		`- .foregroundColor(.posOnSurfaceVariantHighest)`
	`64`	`+ .foregroundColor(.posOnSurface)`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`
`@@ -85,7 +85,7 @@ struct POSPageHeaderView<TrailingContent: View>: View {`
`85`	`85`	`.foregroundColor(configuration.state == .disabled ? .posOnSurfaceVariantLowest : .posOnSurface)`
`86`	`86`	`.padding(.horizontal, Constants.backButtonHorizontalPadding)`
`87`	`87`	`}`
`88`		`- .disabled(configuration.state == .disabled)`
	`88`	`+ .disabled(configuration.state == .disabled \|\| configuration.state == .shimmering)`
`89`	`89`	`.if(configuration.state == .shimmering) { view in`
`90`	`90`	`view.shimmering()`
`91`	`91`	`}`