[Woo POS] Modularization: refactor FormattableAmountTextField to decouple from POS font

WooCommerce/Classes/POS/Adaptors/POSServiceLocatorAdaptor.swift

@@ -85,9 +85,10 @@ private struct POSExternalViewAdaptor: POSExternalViewProviding {
     }
 
     func createFormattableAmountTextField(preset: Decimal?,
+                                          font: Font,
                                           onSubmit: @escaping () -> Void,
                                           onChange: @escaping (String) -> Void) -> AnyView {
-        AnyView(POSFormattableAmountTextFieldAdaptor(preset: preset, onSubmit: onSubmit, onChange: onChange))
+        AnyView(POSFormattableAmountTextFieldAdaptor(preset: preset, font: font, onSubmit: onSubmit, onChange: onChange))
     }
 
     func createCouponCreationView(discountType: Coupon.DiscountType,

WooCommerce/Classes/POS/Adaptors/View Adaptors/POSFormattableAmountTextFieldAdaptor.swift

@@ -6,24 +6,26 @@ import SwiftUI
 ///
 struct POSFormattableAmountTextFieldAdaptor: View {
     @StateObject private var textFieldViewModel: FormattableAmountTextFieldViewModel
-    let preset: Decimal?
-    let onSubmit: () -> Void
-    let onChange: (String) -> Void
+    private let preset: Decimal?
+    private let style: FormattableAmountTextField.Style
+    private let onSubmit: () -> Void
+    private let onChange: (String) -> Void
 
-    init(preset: Decimal?, onSubmit: @escaping () -> Void, onChange: @escaping (String) -> Void) {
+    init(preset: Decimal?, font: Font, onSubmit: @escaping () -> Void, onChange: @escaping (String) -> Void) {
         self._textFieldViewModel = StateObject(wrappedValue: FormattableAmountTextFieldViewModel(
             size: .extraLarge,
             locale: Locale.autoupdatingCurrent,
             storeCurrencySettings: ServiceLocator.currencySettings,
             allowNegativeNumber: false)
         )
         self.preset = preset
+        self.style = .init(showsBorder: false, textAlignment: .center, font: font)
         self.onSubmit = onSubmit
         self.onChange = onChange
     }
 
     var body: some View {
-        FormattableAmountTextField(viewModel: textFieldViewModel, style: .pos)
+        FormattableAmountTextField(viewModel: textFieldViewModel, style: style)
             .dynamicTypeSize(...DynamicTypeSize.accessibility1)
             .onSubmit {
                 onSubmit()

WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift

@@ -3,6 +3,7 @@ import Combine
 import WooFoundation
 
 struct PointOfSaleCollectCashView: View {
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @Environment(\.posAnalytics) private var analytics
     @Environment(\.posExternalViews) private var externalViews
     @Environment(\.floatingControlAreaSize) private var floatingControlAreaSize: CGSize
@@ -57,6 +58,7 @@ struct PointOfSaleCollectCashView: View {
                         VStack(alignment: .center, spacing: conditionalPadding(POSSpacing.xSmall)) {
                             externalViews.createFormattableAmountTextField(
                                 preset: viewHelper.parseCurrency(orderTotal),
+                                font: POSFontStyle.posHeadingRegular.font(maximumContentSizeCategory: UIContentSizeCategory(dynamicTypeSize)),
                                 onSubmit: {
                                     Task { @MainActor in
                                         await submitCashAmount()

WooCommerce/Classes/POS/Protocols/POSDependencyProviding.swift

@@ -48,6 +48,7 @@ protocol POSExternalNavigationProviding {
 protocol POSExternalViewProviding {
     func createSupportFormView(isPresented: Binding<Bool>, sourceTag: String) -> AnyView
     func createFormattableAmountTextField(preset: Decimal?,
+                                          font: Font,
                                           onSubmit: @escaping () -> Void,
                                           onChange: @escaping (String) -> Void) -> AnyView
     func createCouponCreationView(discountType: Coupon.DiscountType,

WooCommerce/Classes/POS/Utils/POSEnvironmentKeys.swift

@@ -125,6 +125,7 @@ struct EmptyPOSAnalytics: POSAnalyticsProviding {
 struct EmptyPOSExternalView: POSExternalViewProviding {
     func createSupportFormView(isPresented: Binding<Bool>, sourceTag: String) -> AnyView { AnyView(EmptyView()) }
     func createFormattableAmountTextField(preset: Decimal?,
+                                          font: Font,
                                           onSubmit: @escaping () -> Void,
                                           onChange: @escaping (String) -> Void) -> AnyView {
         AnyView(EmptyView())

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/FormattableAmountTextField.swift

@@ -27,10 +27,7 @@ struct FormattableAmountTextField: View {
                 .opacity(0)
 
             Text(viewModel.formattedAmount)
-                .if(style == .pos) {
-                    $0.font(.posHeadingRegular)
-                }
-                .font(.system(size: Layout.amountFontSize(size: viewModel.amountTextSize.fontSize, scale: scale), weight: .bold))
+                .font(style.font ?? .system(size: Layout.amountFontSize(size: viewModel.amountTextSize.fontSize, scale: scale), weight: .bold))
                 .foregroundColor(Color(viewModel.amountTextColor))
                 .minimumScaleFactor(0.1)
                 .lineLimit(1)
@@ -48,27 +45,17 @@ struct FormattableAmountTextField: View {
 }
 
 extension FormattableAmountTextField {
-    enum Style {
-        case `default`
-        case pos
-
-        var showsBorder: Bool {
-            switch self {
-            case .default:
-                return true
-            case .pos:
-                return false
-            }
-        }
+    struct Style: Equatable {
+        let showsBorder: Bool
+        let textAlignment: Alignment
+        /// Optional font to use for the amount text. If nil, a default system font will be used.
+        let font: Font?
 
-        var textAlignment: Alignment {
-            switch self {
-            case .default:
-                return .leading
-            case .pos:
-                return .center
-            }
-        }
+        static let `default` = Style(
+            showsBorder: true,
+            textAlignment: .leading,
+            font: nil
+        )
     }
 }
 
@@ -90,7 +77,7 @@ private extension FormattableAmountTextField {
         FormattableAmountTextField(viewModel: viewModel, style: .default)
     }
     VStack {
-        Text("POS style")
-        FormattableAmountTextField(viewModel: viewModel, style: .pos)
+        Text("Other style")
+        FormattableAmountTextField(viewModel: viewModel, style: .init(showsBorder: false, textAlignment: .center, font: .title2))
     }
 }