[Woo POS][Settings] i2: Reader connection modal flow (2)

[iamgabrielma]

Continuation of #16283
Closes WOOMOB-1570

Description

This PR adds the card reader connection modal flow through POS settings. For this we copy the existing implementation held in PointOfSaleDashboardView, except the onboarding part (this will come in the next PR), so the merchant already has to be onboarded.

I kept onboarding out of scope of the PR for now, so we can test it separately.

Changes

• Renamed some of the affected files to use the POS prefix
• POSSettingsHardwareDetailView contains 1 new modal, triggering PointOfSaleCardPresentPaymentAlert, which listens to cardPresentPaymentAlertViewModel and triggers the alert presentation for the card reader connection flow depending on the current reader state.

Test Steps

• In POS > Settings, try the connection flow both starting disconnected, as well as connected. Connect, dismiss, move forward with a payment. It should work normally.
• When disconnected, we show the "Connect card reader" card, while when connected we show the reader details. UI to be updated soon.

Screen.Recording.2025-10-29.at.17.18.11.480p.mov

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 23.6. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	pr16290-3b4822d
	Version	23.5
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	3b4822d
	Installation URL	16iq0ae5m8mcg

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

[joshheald]

Works as expected. Some questions/suggestions inling

[joshheald]

Should this be part of this PR? It seems to work fine but just be unrelated...

[iamgabrielma]

Yeah, is not new code, just moved it from lines 93-100 from being declared in the view to the private extension on 345-352. I see I forgot to remove the double private access control though, fixed here: 3b4822d

[joshheald]

Perhaps there could be a shared definition of this somehow? Not if it's difficult; we're not going to use it in that many places, but it's essentially identical to PointOfSaleDashboardView's use.

I think it would have to be a view modifier, something like this:

struct CardReaderConnectingModifier: ViewModifier {
    @Environment(PointOfSaleAggregateModel.self) private var posModel

    func body(content: Content) -> some View {
        @Bindable var posModel = self.posModel
        content
            .posModal(item: $posModel.cardPresentPaymentAlertViewModel,
                      onDismiss: {
                posModel.cardPresentPaymentAlertViewModel?.onDismiss?()
            }) { alertType in
                PointOfSaleCardPresentPaymentAlert(alertType: alertType)
                    .posInteractiveDismissDisabled(alertType.isDismissDisabled)
            }
    }
}

extension View {
    func cardReaderConnecting() -> some View {
        modifier(CardReaderConnectingModifier())
    }
}

Though perhaps it would be better named as POS specific, and have the posModal requirement more obvious than using the environment var directly. It might be interesting to try some options for a few minutes.

[iamgabrielma]

That definitely looks cleaner, thanks! I'll play with this separately and merge this PR for now.