[Woo POS][Settings] i2: Feature flag and initial reader connection (#16283)

Author: iamgabrielma

Modules/Sources/Experiments/DefaultFeatureFlagService.swift

@@ -100,6 +100,8 @@ public struct DefaultFeatureFlagService: FeatureFlagService {
             return buildConfig == .localDeveloper || buildConfig == .alpha
         case .pointOfSaleSurveys:
             return buildConfig == .localDeveloper || buildConfig == .alpha
+        case .pointOfSaleSettingsCardReaderFlow:
+            return buildConfig == .localDeveloper || buildConfig == .alpha
         default:
             return true
         }

Modules/Sources/Experiments/FeatureFlag.swift

@@ -207,4 +207,8 @@ public enum FeatureFlag: Int {
     /// Enables surveys for potential and current POS merchants
     ///
     case pointOfSaleSurveys
+
+    /// Enables card reader connection flow within POS settings
+    ///
+    case pointOfSaleSettingsCardReaderFlow
 }

Modules/Sources/PointOfSale/Presentation/Settings/POSSettingsCardView.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+
+struct POSSettingsCardView: View {
+    let title: String
+    let subtitle: String
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            VStack(alignment: .leading, spacing: POSPadding.xSmall) {
+                Text(title)
+                    .font(.posBodyLargeRegular())
+                    .foregroundStyle(Color.posOnSurface)
+                Text(subtitle)
+                    .font(.posBodyMediumRegular())
+                    .foregroundStyle(.secondary)
+            }
+            .padding()
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color.posSurfaceContainerLowest)
+            .dynamicTypeSize(...DynamicTypeSize.accessibility2)
+            .posItemCardBorderStyles()
+        }
+        .buttonStyle(.plain)
+        .accessibilityAddTraits(.isButton)
+        .accessibilityLabel("\(title), \(subtitle)")
+    }
+}
+
+#if DEBUG
+#Preview {
+    POSSettingsCardView(
+        title: "Documentation",
+        subtitle: "Learn more about accepting mobile payments",
+        action: { }
+    )
+}
+#endif

Modules/Sources/PointOfSale/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift

@@ -2,6 +2,8 @@ import SwiftUI
 import struct WooFoundation.SafariView
 
 struct PointOfSaleSettingsHardwareDetailView: View {
+    @Environment(PointOfSaleAggregateModel.self) private var posModel
+    @Environment(\.posFeatureFlags) private var featureFlags
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @Environment(\.posAnalytics) private var analytics
 
@@ -69,7 +71,12 @@ struct PointOfSaleSettingsHardwareDetailView: View {
             .navigationDestination(for: NavigationDestination.self) { destination in
                 switch destination {
                 case .hardware(.cardReaders):
-                    cardReadersView
+                    if featureFlags.isFeatureFlagEnabled(.pointOfSaleSettingsCardReaderFlow) {
+                        cardReadersView
+                    } else {
+                        // TODO: Legacy view to be removed along feature flag on WOOMOB-1591
+                        legacyCardReadersView
+                    }
                 case .hardware(.scanners):
                     scannersView
                 }
@@ -92,7 +99,7 @@ struct PointOfSaleSettingsHardwareDetailView: View {
         }
     }
 
-    private var cardReadersView: some View {
+    private var legacyCardReadersView: some View {
         VStack(spacing: POSSpacing.none) {
             POSPageHeaderView(
                 title: Localization.cardReadersTitle,
@@ -161,6 +168,62 @@ struct PointOfSaleSettingsHardwareDetailView: View {
         }
     }
 
+    private var cardReadersView: some View {
+        VStack(spacing: POSSpacing.none) {
+            POSPageHeaderView(
+                title: Localization.cardReadersTitle,
+                backButtonConfiguration: .init(state: .enabled, action: {
+                    navigationPath.removeLast()
+                }, buttonIcon: "chevron.left"))
+            .foregroundColor(.posSurface)
+
+            List {
+                if case .connected = posModel.cardReaderConnectionStatus {
+                    VStack(spacing: POSPadding.xSmall) {
+                        HStack {
+                            Text(Localization.readerModelTitle)
+                                .foregroundStyle(.primary)
+                            Spacer()
+                            Text(cardReaderName)
+                                .foregroundStyle(.secondary)
+                        }
+                        .padding()
+                        HStack {
+                            Text(Localization.readerBatteryTitle)
+                                .foregroundStyle(.primary)
+                            Spacer()
+                            Text(formattedBatteryLevel)
+                                .foregroundStyle(.secondary)
+                        }
+                        .padding()
+                    }
+                    .font(.posBodyMediumRegular())
+                } else {
+                    POSSettingsCardView(title: Localization.cardReaderConnectTitle,
+                                        subtitle: Localization.cardReaderConnectSubtitle,
+                                        action: {
+                        posModel.connectCardReader()
+                    })
+                }
+
+                POSSettingsCardView(title: Localization.cardReaderDocumentationTitle,
+                                    subtitle: Localization.cardReaderDocumentationSubtitle,
+                                    action: { showCardReaderDocumentationModal = true })
+                .accessibilityAddTraits(.isButton)
+                .listRowSeparator(.hidden)
+            }
+            .listStyle(.plain)
+            .scrollContentBackground(.hidden)
+            .listRowBackground(Color.clear)
+            .background(backgroundColor)
+            .foregroundColor(.posOnSurface)
+        }
+        .navigationBarBackButtonHidden(true)
+        .posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
+            SafariView(url: POSConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
+        }
+    }
+
     private var scannersView: some View {
         VStack(spacing: POSSpacing.none) {
             POSPageHeaderView(
@@ -204,7 +267,8 @@ struct PointOfSaleSettingsHardwareDetailView: View {
     }
 }
 
-extension PointOfSaleSettingsHardwareDetailView {
+// MARK: - Navigation
+private extension PointOfSaleSettingsHardwareDetailView {
     enum HardwareDestination: Identifiable, CaseIterable {
         case cardReaders
         case scanners
@@ -381,6 +445,16 @@ private extension PointOfSaleSettingsHardwareDetailView {
             value: "Configure barcode scanner settings",
             comment: "Description of Barcode scanner settings configuration."
         )
+        static let cardReaderConnectTitle = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.cardReaderConnectTitle",
+            value: "Connect card reader",
+            comment: "Title for card reader connect button when no reader is connected."
+        )
+        static let cardReaderConnectSubtitle = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.cardReaderConnectSubtitle",
+            value: "Connect your card reader and start accepting payments",
+            comment: "Subtitle for card reader connect button when no reader is connected."
+        )
     }
 }