[Woo POS] Improve Checkout view adaptability to large font sizes (#15153)

staskus · web-flow · commit e4a327547145 · 2025-02-17T13:07:25.000+02:00
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift
@@ -58,7 +58,8 @@ struct CardReaderConnectionStatusView: View {
                 }
             }
         }
-        .font(Constants.font, maximumContentSizeCategory: .accessibilityLarge)
+        .font(Constants.font)
+        .dynamicTypeSize(...DynamicTypeSize.accessibility2)
         .opacity(isEnabled ? 1 : 0.5)
     }
 }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift
@@ -4,6 +4,7 @@ struct PointOfSaleCardPresentPaymentActivityIndicatingMessageView: View {
     let title: String
     let message: String
     let animation: POSCardPresentPaymentInLineMessageAnimation
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     var body: some View {
         VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.headerSpacing) {
@@ -12,6 +13,7 @@ struct PointOfSaleCardPresentPaymentActivityIndicatingMessageView: View {
                 .frame(width: PointOfSaleCardPresentPaymentLayout.headerSize.width,
                        height: PointOfSaleCardPresentPaymentLayout.headerSize.height)
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
+                .renderedIf(!dynamicTypeSize.isAccessibilitySize)
             VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.smallTextSpacing) {
                 Text(title)
                     .foregroundStyle(Color(.neutral(.shade40)))
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift
@@ -3,13 +3,15 @@ import SwiftUI
 struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View {
     let viewModel: PointOfSaleCardPresentPaymentDisplayReaderMessageMessageViewModel
     let animation: POSCardPresentPaymentInLineMessageAnimation
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     var body: some View {
         VStack(alignment: .center, spacing: Layout.headerSpacing) {
             ProgressView()
                 .progressViewStyle(CardWaveProgressViewStyle())
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
                 .accessibilityHidden(true)
+                .renderedIf(!dynamicTypeSize.isAccessibilitySize)
 
             VStack(alignment: .center, spacing: Layout.textSpacing) {
                 Text(viewModel.title)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift
@@ -3,12 +3,14 @@ import SwiftUI
 struct PointOfSaleCardPresentPaymentProcessingMessageView: View {
     let viewModel: PointOfSaleCardPresentPaymentProcessingMessageViewModel
     let animation: POSCardPresentPaymentInLineMessageAnimation
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     var body: some View {
         VStack(alignment: .center, spacing: Layout.headerSpacing) {
             ProgressView()
                 .progressViewStyle(CardWaveProgressViewStyle())
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
+                .renderedIf(!dynamicTypeSize.isAccessibilitySize)
 
             VStack(alignment: .center, spacing: Layout.textSpacing) {
                 Text(viewModel.title)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift
@@ -3,6 +3,7 @@ import SwiftUI
 struct PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView: View {
     let viewModel: PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageViewModel
     let animation: POSCardPresentPaymentInLineMessageAnimation
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     var body: some View {
         VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.headerSpacing) {
@@ -12,6 +13,7 @@ struct PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView: View {
                 .frame(width: PointOfSaleCardPresentPaymentLayout.headerSize.width,
                        height: PointOfSaleCardPresentPaymentLayout.headerSize.height)
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
+                .renderedIf(!dynamicTypeSize.isAccessibilitySize)
             VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.smallTextSpacing) {
                 Text(viewModel.title)
                     .foregroundStyle(Color.posOnSurface)
diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift
@@ -27,6 +27,9 @@ struct CartView: View {
                     HStack {
                         Text(Localization.cartTitle)
                             .font(Constants.primaryFont)
+                            .lineLimit(1)
+                            .minimumScaleFactor(0.5)
+                            .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                             .foregroundColor(.posOnSurface)
                             .accessibilityAddTraits(.isHeader)
 
@@ -35,6 +38,9 @@ struct CartView: View {
                         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)
                         }
                     }
@@ -258,7 +264,8 @@ private extension CartView {
                 posModel.addMoreToCart()
             } label: {
                 Image(systemName: Constants.backButtonSymbol)
-                    .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
+                    .font(.posBodyLargeBold)
+                    .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                     .foregroundColor(.posOnSurface)
             }
         }
diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift
@@ -50,7 +50,8 @@ private extension ChildItemList {
                 dismiss()
             } label: {
                 Image(systemName: "chevron.backward")
-                    .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
+                    .font(.posBodyLargeBold)
+                    .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                     .foregroundColor(.posOnSurface)
             }
             POSHeaderTitleView(title: title)
diff --git a/WooCommerce/Classes/POS/Presentation/ItemListView.swift b/WooCommerce/Classes/POS/Presentation/ItemListView.swift
@@ -122,10 +122,9 @@ private extension ItemListView {
         .padding(.bottom, Constants.bannerCardPadding)
     }
 
-    private var bannerHintAndLearnMoreText: Text {
-        Text(headerBannerHint + " ") +
-        Text(Localization.headerBannerLearnMoreHint)
-            .font(POSFontStyle.posBodySmallBold.font())
+    private var bannerHintAndLearnMoreText: some View {
+        Text("\(headerBannerHint) \(Localization.headerBannerLearnMoreHint)")
+            .font(.posBodySmallBold)
             .foregroundColor(Color(.posPrimary))
     }
 
diff --git a/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift b/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift
@@ -50,7 +50,8 @@ struct POSFloatingControlView: View {
                 VStack {
                     Spacer()
                     Image(systemName: "ellipsis")
-                        .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
+                        .font(.posBodyLargeBold)
+                        .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                         .foregroundStyle(fontColor)
                     Spacer()
                 }
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift
@@ -104,7 +104,8 @@ private extension PointOfSaleCollectCashView {
     var navigationHeader: some View {
         HStack(alignment: .top) {
             Image(systemName: "chevron.backward")
-                .font(.posBodyLargeBold, maximumContentSizeCategory: .accessibilityLarge)
+                .font(.posBodyLargeBold)
+                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
             DynamicVStack(horizontalAlignment: .leading, spacing: Constants.navigationButtonSpacing) {
                 Text(Localization.backNavigationTitle)
                     .font(.posHeading)
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSErrorExclamationMark.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSErrorExclamationMark.swift
@@ -10,7 +10,10 @@ struct POSErrorExclamationMark: View {
 
     var body: some View {
         Image(systemName: "exclamationmark.circle.fill")
-            .font(.system(size: size))
+            .resizable()
+            .aspectRatio(contentMode: .fit)
+            .frame(maxHeight: size)
+            .layoutPriority(-1)
             .foregroundStyle(Color.posAlert)
             .accessibilityHidden(true)
             .renderedIf(!dynamicTypeSize.isAccessibilitySize)
diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift
@@ -42,16 +42,19 @@ struct TotalsView: View {
                                 .padding(.top, dynamicTypeSize.isAccessibilitySize ? nil : cardReaderViewLayout.topPadding)
                                 .transition(.opacity)
                                 .accessibilityShowsLargeContentViewer()
-                                .layoutPriority(1)
                                 .background(backgroundColor)
+                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
+                                .minimumScaleFactor(isShowingTotalsFields ? 0.5 : 1)
+                                .geometryGroup()
                         }
 
                         if isShowingTotalsFields {
                             totalsFieldsView
                                 .transition(.opacity)
                                 .animation(.default, value: posModel.orderState.isSyncing)
                                 .opacity(viewHelper.shouldShowTotalsFields(for: posModel.paymentState) ? 1 : 0)
-                                .layoutPriority(2)
+                                .layoutPriority(1)
+                                .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                         }
                     }
                     .animation(.default, value: posModel.cardPresentPaymentInlineMessage)
@@ -65,11 +68,12 @@ struct TotalsView: View {
                     }, label: {
                         Text(Localization.cashPaymentButtonTitle)
                             .font(POSFontStyle.posBodyLargeBold)
-                            .minimumScaleFactor(0.5)
                     })
+                    .layoutPriority(1)
+                    .dynamicTypeSize(...DynamicTypeSize.accessibility2)
                     .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                     .padding(.horizontal, Constants.buttonHorizontalPadding)
-                    .padding(.bottom, Constants.cashButtonBottomPadding)
+                    .safeAreaPadding(.bottom, Constants.cashButtonBottomPadding)
                     .renderedIf(viewHelper.shouldShowCollectCashPaymentButton(orderState: posModel.orderState,
                                                                               paymentState: posModel.paymentState))
                 }
@@ -86,7 +90,7 @@ struct TotalsView: View {
             isShowingTotalsFields = shouldShowTotalsFields
         }
         .onChange(of: shouldShowTotalsFields, perform: hideTotalsFieldsWithDelay)
-        .geometryGroupIfSupported()
+        .geometryGroup()
     }
 
     private var backgroundColor: Color {
@@ -344,7 +348,7 @@ private extension TotalsView {
         static let pricesIdealWidth: CGFloat = 382
         static let verticalSpacing: CGFloat = 56
         static let buttonHorizontalPadding: CGFloat = 48
-        static let cashButtonBottomPadding: CGFloat = 16
+        static let cashButtonBottomPadding: CGFloat = 24
 
         static let totalsLineViewPadding: EdgeInsets = .init(top: 20, leading: 24, bottom: 20, trailing: 24)
         static let subtotalsVerticalSpacing: CGFloat = 8
@@ -407,20 +411,6 @@ private extension TotalsView {
     }
 }
 
-private extension View {
-    ///  Force the position and size values to be resolved and animated by the parent
-    ///  before being passed down to each subview.
-    ///  GeometryGroup is created to ensure that childs views stay locked together as animations are applied.
-    ///  It results in the whole TotalsView animated together when transitioning.
-    func geometryGroupIfSupported() -> some View {
-        if #available(iOS 17.0, *) {
-            return self.geometryGroup()
-        } else {
-            return self
-        }
-    }
-}
-
 #if DEBUG
 @available(iOS 17.0, *)
 #Preview {
diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift
@@ -17,7 +17,7 @@ enum POSFontStyle {
     case posButtonSymbolMedium
     case posButtonSymbolLarge
 
-    func font(maximumContentSizeCategory: UIContentSizeCategory? = nil) -> Font {
+    fileprivate func font(maximumContentSizeCategory: UIContentSizeCategory? = nil) -> Font {
         switch self {
         case .posHeading:
             Font.system(size: scaledValue(FontSize.heading, maximumContentSizeCategory: maximumContentSizeCategory ?? .accessibilityLarge), weight: .bold)
@@ -81,11 +81,12 @@ private struct POSScaledFont: ViewModifier {
     // Declaring dynamicTypeSize ensures it's automatically observed
     @Environment(\.dynamicTypeSize) var dynamicTypeSize
     var style: POSFontStyle
-    var maximumContentSizeCategory: UIContentSizeCategory? = nil
 
     func body(content: Content) -> some View {
-        content
-            .font(style.font(maximumContentSizeCategory: maximumContentSizeCategory))
+        let category = UIContentSizeCategory(dynamicTypeSize)
+
+        return content
+            .font(style.font(maximumContentSizeCategory: category))
             .if(shouldUnderline()) { view in
                 view.underline()
             }
@@ -104,8 +105,29 @@ private struct POSScaledFont: ViewModifier {
 }
 
 extension View {
-    func font(_ style: POSFontStyle, maximumContentSizeCategory: UIContentSizeCategory? = nil) -> some View {
-        return self.modifier(POSScaledFont(style: style, maximumContentSizeCategory: maximumContentSizeCategory))
+    func font(_ style: POSFontStyle) -> some View {
+        return self.modifier(POSScaledFont(style: style))
+    }
+}
+
+// Helper to convert DynamicTypeSize to UIContentSizeCategory
+extension UIContentSizeCategory {
+    init(_ dynamicTypeSize: DynamicTypeSize) {
+        switch dynamicTypeSize {
+        case .xSmall: self = .extraSmall
+        case .small: self = .small
+        case .medium: self = .medium
+        case .large: self = .large
+        case .xLarge: self = .extraLarge
+        case .xxLarge: self = .extraExtraLarge
+        case .xxxLarge: self = .extraExtraExtraLarge
+        case .accessibility1: self = .accessibilityMedium
+        case .accessibility2: self = .accessibilityLarge
+        case .accessibility3: self = .accessibilityExtraLarge
+        case .accessibility4: self = .accessibilityExtraExtraLarge
+        case .accessibility5: self = .accessibilityExtraExtraExtraLarge
+        @unknown default: self = .large
+        }
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,8 @@ struct CardReaderConnectionStatusView: View {`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`	`}`
`61`		`- .font(Constants.font, maximumContentSizeCategory: .accessibilityLarge)`
	`61`	`+ .font(Constants.font)`
	`62`	`+ .dynamicTypeSize(...DynamicTypeSize.accessibility2)`
`62`	`63`	`.opacity(isEnabled ? 1 : 0.5)`
`63`	`64`	`}`
`64`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -122,10 +122,9 @@ private extension ItemListView {`
`122`	`122`	`.padding(.bottom, Constants.bannerCardPadding)`
`123`	`123`	`}`
`124`	`124`
`125`		`- private var bannerHintAndLearnMoreText: Text {`
`126`		`- Text(headerBannerHint + " ") +`
`127`		`- Text(Localization.headerBannerLearnMoreHint)`
`128`		`- .font(POSFontStyle.posBodySmallBold.font())`
	`125`	`+ private var bannerHintAndLearnMoreText: some View {`
	`126`	`+ Text("\(headerBannerHint) \(Localization.headerBannerLearnMoreHint)")`
	`127`	`+ .font(.posBodySmallBold)`
`129`	`128`	`.foregroundColor(Color(.posPrimary))`
`130`	`129`	`}`
`131`	`130`