[POS Settings] Display card reader details in hardware section (#16045)

iamgabrielma · web-flow · commit f5af05b08302 · 2025-08-28T14:42:52.000+07:00
diff --git a/WooCommerce/Classes/POS/Models/PointOfSaleAggregateModel.swift b/WooCommerce/Classes/POS/Models/PointOfSaleAggregateModel.swift
@@ -323,6 +323,7 @@ extension PointOfSaleAggregateModel {
         }
     }
 
+
     /// Starts a payment immediately if a reader is connected.
     /// Otherwise, schedules a payment to start the next time a reader connects.
     /// Note that any scheduled payments are cancelled by `cancelReaderPreparation`
diff --git a/WooCommerce/Classes/POS/Models/PointOfSaleSettingsController.swift b/WooCommerce/Classes/POS/Models/PointOfSaleSettingsController.swift
@@ -1,4 +1,5 @@
 import Foundation
+import Combine
 import struct Yosemite.SiteSetting
 import enum Yosemite.Plugin
 import class Yosemite.PluginsService
@@ -19,6 +20,8 @@ protocol PointOfSaleSettingsControllerProtocol {
     var storeName: String { get }
     var storeAddress: String { get }
 
+    var connectedCardReader: CardPresentPaymentCardReader? { get }
+
     func retrievePOSReceiptSettings() async
 }
 
@@ -34,13 +37,33 @@ protocol PointOfSaleSettingsControllerProtocol {
     private let defaultSiteName: String?
     private let settingsService: PointOfSaleSettingsServiceProtocol
     private let siteSettings: [SiteSetting]
+    private(set) var connectedCardReader: CardPresentPaymentCardReader?
+    private var cancellables: AnyCancellable?
 
     init(settingsService: PointOfSaleSettingsServiceProtocol,
+         cardPresentPaymentService: CardPresentPaymentFacade,
          defaultSiteName: String? = ServiceLocator.stores.sessionManager.defaultSite?.name,
          siteSettings: [SiteSetting] = ServiceLocator.selectedSiteSettings.siteSettings) {
         self.settingsService = settingsService
         self.defaultSiteName = defaultSiteName
         self.siteSettings = siteSettings
+
+        observeCardReader(from: cardPresentPaymentService)
+    }
+
+    private func observeCardReader(from service: CardPresentPaymentFacade) {
+        cancellables = service.readerConnectionStatusPublisher
+            .sink(receiveValue: { [weak self] connectionStatus in
+                guard let self else { return }
+                let cardReader: CardPresentPaymentCardReader?
+                switch connectionStatus {
+                case .connected(let reader):
+                    cardReader = reader
+                default:
+                    cardReader = nil
+                }
+                connectedCardReader = cardReader
+            })
     }
 
     var storeName: String {
@@ -128,12 +151,18 @@ final class PointOfSaleSettingsPreviewController: PointOfSaleSettingsControllerP
     var shouldShowReceiptInformation: Bool = true
     var storeName: String = "Sample Store"
 
+    var connectedCardReader: CardPresentPaymentCardReader? = CardPresentPaymentCardReader(
+        name: "WisePad 3",
+        batteryLevel: 0.75
+    )
+
     var storeAddress: String {
         "123 Main Street\nAnytown, ST 12345"
     }
 
     func retrievePOSReceiptSettings() async {
         // no-op
     }
+
 }
 #endif
diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift
@@ -1,13 +1,30 @@
 import SwiftUI
-import enum Yosemite.AppSettingsAction
 
 struct PointOfSaleSettingsHardwareDetailView: View {
+    let settingsController: PointOfSaleSettingsControllerProtocol
+
     @State private var navigationPath: [NavigationDestination] = []
-    @State private var lastKnownLoadedCardReader: String?
     @State private var showBarcodeScanningSetupModal: Bool = false
     @State private var showBarcodeScanningDocumentationModal: Bool = false
     @State private var showCardReaderDocumentationModal: Bool = false
 
+    private var cardReaderName: String {
+        if let cardReaderName = settingsController.connectedCardReader?.name {
+            return cardReaderName
+        } else {
+            return Localization.cardReaderNotConnected
+        }
+    }
+
+    private var formattedBatteryLevel: String {
+        if let batteryLevel = settingsController.connectedCardReader?.batteryLevel {
+            let percentage = Int(batteryLevel * 100)
+            return "\(percentage)%"
+        } else {
+            return Localization.batteryLevelUnknown
+        }
+    }
+
     var body: some View {
         NavigationStack(path: $navigationPath) {
             List(HardwareDestination.allCases) { destination in
@@ -53,37 +70,29 @@ struct PointOfSaleSettingsHardwareDetailView: View {
 
     private var cardReadersView: some View {
         VStack(spacing: POSSpacing.large) {
-            VStack(spacing: POSSpacing.medium) {
-                VStack(spacing: POSPadding.small) {
-                    Text(Localization.cardReadersDescription)
-                        .font(.posBodyLargeRegular())
-                        .multilineTextAlignment(.center)
-                    Text(Localization.cardReadersSubtitle1)
-                        .font(.posBodyMediumRegular())
-                        .foregroundStyle(.secondary)
-                        .multilineTextAlignment(.center)
-                    Text(Localization.cardReadersSubtitle2)
-                        .font(.posBodyMediumRegular())
-                        .foregroundStyle(.secondary)
-                        .multilineTextAlignment(.center)
-                    Text(Localization.cardReadersSubtitle3)
-                        .font(.posBodyMediumRegular())
-                        .foregroundStyle(.secondary)
-                        .multilineTextAlignment(.center)
-                }
-            }
-            .padding()
-
-            if let lastKnownLoadedCardReader {
-                HStack {
-                    Text("Model: \(lastKnownLoadedCardReader)")
-                        .font(.posBodyMediumRegular())
-                        .foregroundStyle(.secondary)
-                        .multilineTextAlignment(.center)
-                }
-            }
-
             List {
+                VStack(spacing: POSPadding.xSmall) {
+                    HStack {
+                        Text(Localization.readerModelTitle)
+                            .font(.posBodyMediumRegular())
+                            .foregroundStyle(.primary)
+                        Spacer()
+                        Text(cardReaderName)
+                            .font(.posBodyMediumRegular())
+                            .foregroundStyle(.secondary)
+                    }
+                    .padding()
+                    HStack {
+                        Text(Localization.readerBatteryTitle)
+                            .font(.posBodyMediumRegular())
+                            .foregroundStyle(.primary)
+                        Spacer()
+                        Text(formattedBatteryLevel)
+                            .font(.posBodyMediumRegular())
+                            .foregroundStyle(.secondary)
+                    }
+                    .padding()
+                }
                 Button {
                     showCardReaderDocumentationModal = true
                 } label: {
@@ -106,18 +115,6 @@ struct PointOfSaleSettingsHardwareDetailView: View {
         .posFullScreenCover(isPresented: $showCardReaderDocumentationModal) {
             SafariView(url: WooConstants.URLs.inPersonPaymentsLearnMoreWCPay.asURL())
         }
-        .task { @MainActor in
-            // TODO: WOOMOB-1172
-            let action = AppSettingsAction.loadCardReader { reader in
-                switch reader {
-                case let .success(foundReader):
-                    lastKnownLoadedCardReader = foundReader
-                case let .failure(error):
-                    debugPrint(error)
-                }
-            }
-            ServiceLocator.stores.dispatch(action)
-        }
     }
 
     private var scannersView: some View {
@@ -220,6 +217,30 @@ extension PointOfSaleSettingsHardwareDetailView {
 
 private extension PointOfSaleSettingsHardwareDetailView {
     enum Localization {
+        static let readerModelTitle = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.readerModelTitle",
+            value: "Model",
+            comment: "Text displayed on Point of Sale settings pointing to the card reader model."
+        )
+
+        static let readerBatteryTitle = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.readerBatteryTitle",
+            value: "Battery",
+            comment: "Text displayed on Point of Sale settings pointing to the card reader battery."
+        )
+
+        static let cardReaderNotConnected = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.cardReaderNotConnected",
+            value: "Reader not connected",
+            comment: "Text displayed on Point of Sale settings when the card reader is not connected."
+        )
+
+        static let batteryLevelUnknown = NSLocalizedString(
+            "pointOfSaleSettingsHardwareDetailView.batteryLevelUnknown",
+            value: "Unknown",
+            comment: "Text displayed on Point of Sale settings when card reader battery is unknown."
+        )
+
         static let cardReadersTitle = NSLocalizedString(
             "pointOfSaleSettingsHardwareDetailView.cardReadersTitle",
             value: "Card readers",
@@ -256,30 +277,6 @@ private extension PointOfSaleSettingsHardwareDetailView {
             comment: "Subtitle describing barcode scanner documentation in Point of Sale settings."
         )
 
-        static let cardReadersDescription = NSLocalizedString(
-            "pointOfSaleSettingsHardwareDetailView.cardReadersDescription",
-            value: "Accept secure and fast payments in person",
-            comment: "Main description for card readers functionality in Point of Sale settings."
-        )
-
-        static let cardReadersSubtitle1 = NSLocalizedString(
-            "pointOfSaleSettingsHardwareDetailView.cardReadersSubtitle.1",
-            value: "Make sure the card reader is charged",
-            comment: "Subtitle describing card reader connection in Point of Sale settings."
-        )
-
-        static let cardReadersSubtitle2 = NSLocalizedString(
-            "pointOfSaleSettingsHardwareDetailView.cardReadersSubtitle.2",
-            value: "Turn the card reader on, and place it next to the mobile device",
-            comment: "Subtitle describing card reader connection in Point of Sale settings."
-        )
-
-        static let cardReadersSubtitle3 = NSLocalizedString(
-            "pointOfSaleSettingsHardwareDetailView.cardReadersSubtitle.3",
-            value: "Turn the mobile device bluetooth on",
-            comment: "Subtitle describing card reader connection in Point of Sale settings."
-        )
-
         static let cardReaderDocumentationTitle = NSLocalizedString(
             "pointOfSaleSettingsHardwareDetailView.cardReaderDocumentationTitle",
             value: "Documentation",
@@ -317,3 +314,9 @@ private extension PointOfSaleSettingsHardwareDetailView {
         )
     }
 }
+
+#if DEBUG
+#Preview {
+    PointOfSaleSettingsHardwareDetailView(settingsController: PointOfSaleSettingsPreviewController())
+}
+#endif
diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift
@@ -64,7 +64,7 @@ extension PointOfSaleSettingsView {
         case .store:
             PointOfSaleSettingsStoreDetailView(settingsController: settingsController)
         case .hardware:
-            PointOfSaleSettingsHardwareDetailView()
+            PointOfSaleSettingsHardwareDetailView(settingsController: settingsController)
         case .help:
             PointOfSaleSettingsHelpDetailView()
         default:
diff --git a/WooCommerce/Classes/POS/TabBar/POSTabCoordinator.swift b/WooCommerce/Classes/POS/TabBar/POSTabCoordinator.swift
@@ -126,7 +126,8 @@ private extension POSTabCoordinator {
                     cardPresentPaymentService: cardPresentPaymentService,
                     orderController: PointOfSaleOrderController(orderService: orderService,
                                                                 receiptService: receiptService),
-                    settingsController: PointOfSaleSettingsController(settingsService: settingsService),
+                    settingsController: PointOfSaleSettingsController(settingsService: settingsService,
+                                                                      cardPresentPaymentService: cardPresentPaymentService),
                     collectOrderPaymentAnalyticsTracker: collectOrderPaymentAnalyticsTracker,
                     searchHistoryService: POSSearchHistoryService(siteID: siteID),
                     popularPurchasableItemsController: PointOfSaleItemsController(
diff --git a/WooCommerce/WooCommerceTests/POS/Controllers/PointOfSaleSettingsControllerTests.swift b/WooCommerce/WooCommerceTests/POS/Controllers/PointOfSaleSettingsControllerTests.swift
@@ -1,4 +1,3 @@
-
 import Testing
 import Foundation
 @testable import WooCommerce
@@ -9,11 +8,13 @@ import Storage
 struct PointOfSaleSettingsControllerTests {
     private let mockSettingsService = MockPointOfSaleSettingsService()
     private let mockStorageManager = MockStorageManager()
+    private let mockCardPresentPaymentService = MockCardPresentPaymentService()
 
     @Test func storeName_when_defaultSiteName_provided_then_returns_defaultSiteName() async throws {
         // Given
         let expectedStoreName = "My Test Store"
         let sut = PointOfSaleSettingsController(settingsService: mockSettingsService,
+                                                cardPresentPaymentService: mockCardPresentPaymentService,
                                                 defaultSiteName: expectedStoreName,
                                                 siteSettings: [])
 
@@ -27,6 +28,7 @@ struct PointOfSaleSettingsControllerTests {
     @Test func storeName_when_defaultSiteName_nil_then_returns_notSet() async throws {
         // Given
         let sut = PointOfSaleSettingsController(settingsService: mockSettingsService,
+                                                cardPresentPaymentService: mockCardPresentPaymentService,
                                                 defaultSiteName: nil,
                                                 siteSettings: [])
 
@@ -41,6 +43,7 @@ struct PointOfSaleSettingsControllerTests {
         // Given
         let siteSettings = makeSampleSiteSettings()
         let sut = PointOfSaleSettingsController(settingsService: mockSettingsService,
+                                                cardPresentPaymentService: mockCardPresentPaymentService,
                                                 defaultSiteName: "Test Store",
                                                 siteSettings: siteSettings)
 
@@ -51,6 +54,41 @@ struct PointOfSaleSettingsControllerTests {
         #expect(!storeAddress.isEmpty)
     }
 
+    @Test func connectedCardReader_initially_nil() async throws {
+        // Given
+        let sut = PointOfSaleSettingsController(settingsService: mockSettingsService,
+                                                cardPresentPaymentService: mockCardPresentPaymentService,
+                                                defaultSiteName: "Test Store",
+                                                siteSettings: [])
+
+        // When
+        let cardReader = sut.connectedCardReader
+
+        // Then
+        #expect(cardReader == nil)
+    }
+
+    @Test func cardReader_observation_updates_connectedCardReader() async throws {
+        // Given
+        let mockService = MockCardPresentPaymentService()
+        let sut = PointOfSaleSettingsController(settingsService: mockSettingsService,
+                                                cardPresentPaymentService: mockService,
+                                                defaultSiteName: "Test Store",
+                                                siteSettings: [])
+
+        // Initially nil
+        #expect(sut.connectedCardReader == nil)
+
+        // When
+        let cardReader = CardPresentPaymentCardReader(name: "WisePad 3", batteryLevel: 0.75)
+        mockService.connectedReader = cardReader
+
+        // Then
+        #expect(sut.connectedCardReader?.name == "WisePad 3")
+        #expect(sut.connectedCardReader?.batteryLevel == 0.75)
+    }
+
+
     private func makeSampleSiteSettings() -> [Yosemite.SiteSetting] {
         return [
             SiteSetting(siteID: 123,
@@ -105,7 +143,10 @@ final class MockPointOfSaleSettingsController: PointOfSaleSettingsControllerProt
         "123 Main Street\nAnytown, ST 12345"
     }
 
+    var connectedCardReader: CardPresentPaymentCardReader? = nil
+
     func retrievePOSReceiptSettings() async {
         // no-op
     }
+
 }

Original file line number	Diff line number	Diff line change
`@@ -323,6 +323,7 @@ extension PointOfSaleAggregateModel {`
`323`	`323`	`}`
`324`	`324`	`}`
`325`	`325`
	`326`	`+`
`326`	`327`	`/// Starts a payment immediately if a reader is connected.`
`327`	`328`	`/// Otherwise, schedules a payment to start the next time a reader connects.`
`328`	`329`	/// Note that any scheduled payments are cancelled by `cancelReaderPreparation`