[Mobile Payments] Fix trying out Tap to Pay is no-op from the About TTP screen

[jaclync]

Closes: #14078

Why

In Payments > About Tap To Pay > Set Up Tap To Pay on iPhone > Try a Payment: in production, nothing happens after the spinner stops as in the "before" screencast below. This is confusing and a broken flow as the merchant cannot test out the payment with Tap To Pay.

How

From debugging, the issue was because navigationDestination does not work when the SwiftUI view is not within a NavigationStack/NavigationView. In this PR, the top-level view is now wrapped in a NavigationStack and the navigation works as expected.

Steps to reproduce

1. Delete the app from your phone to clear the saved TTP transaction state
2. Log in to a TTP-eligible site
3. Navigate to Menu > Payments > About Tap to Pay on iPhone
4. Tap Set up Tap to Pay on iPhone
5. Go through the set up process
6. Tap Try a Payment --> it should navigate to the test payment page
7. Proceed with the test payment --> navigation should work as expected

Testing information

• @jaclync perform a confidence check on another entry point to TTP:

1. Delete the app from your phone to clear the saved TTP transaction state
2. Log in to a TTP-eligible site
3. Navigate to Menu > Payments > Set Up Tap to Pay on iPhone
4. Tap Set up Tap to Pay on iPhone
5. Go through the set up process
6. Tap Try a Payment --> it should navigate to the test payment page
7. Proceed with the test payment --> navigation should work as expected

• @jaclync perform a confidence check on onboarding in TTP

Screenshots

before:

RPReplay_Final1730962609.MP4

after:

RPReplay_Final1730962775.MP4

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

[wpmobilebot]

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

	App Name	WooCommerce iOS
	Build Number	pr14340-76cf3b3
	Version	21.1
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	76cf3b3
	App Center Build	WooCommerce - Prototype Builds #11526

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

[joshheald]

This works, but I think there might be a better place to make the change. Or, perhaps we have a too-confusing view set up for this flow and should simplify it to make this the right place for the change, I'm not sure.

We present this from two places, the payments menu, and the About TTP screen.

There's a slight difference between the two at the moment; the TapToPaySettingsFlowPresentingView presented from the menu is wrapped in a NavigationStack, while the PaymentSettingsFlowPresentingView presented from the about TTP screen is wrapped in a NavigationView.

I think we could instead use TapToPaySettingsFlowPresentingView from both (it's a convenience wrapper for PaymentSettingsFlowPresentingView) and use NavigationStack either in the sheets when they're presented, or in the TapToPaySettingsFlowPresentingView.

Alternatively we might keep it where it is in this PR, but take away some of the extra nav stacks higher up?

All these need a little care to make sure we don't double up the nav bars (which are hidden in some cases), but I think we may have more than we need at the moment...

Up to you but just wanted to point this out so you could check the best way before merging...

N.B. Try a Payment works fine from About when I change the NavigationView in AboutTapToPayView's sheet to a NavigationStack on trunk, without this PR's changes. However, the onboarding screens it can show before setting up get a nav bar they shouldn't have, but only when shown for the first time on a given store... which is strange. This doesn't happen with the extra stack approach from your PR. So that might be enough reason to just merge as is without digging further in to it!

[jaclync]

@joshheald great point on checking the two entry points, and the documentation of PaymentSettingsFlowPresentingView did mention not to be used directly.

woocommerce-ios/WooCommerce/Classes/ViewRelated/Dashboard/Settings/CardReadersV2/PaymentSettingsFlowPresentingViewController.swift

Lines 83 to 87 in 9a9b909

	/// N.B. this should not be used directly for the two concrete use cases it enables
	/// `SetUpTapToPayViewModelsOrderedList` and `CardReaderSettingsViewModelsOrderedList`
	/// If you use it directly, the view models will outlive the views, and likely disconnect readers which we subsequently connect to.
	/// Instead, use one of these wrappers, to ensure the view model has the same lifecycle as the view:
	/// `TapToPaySettingsFlowPresentingView` or `CardReaderSettingsFlowPresentingView`

As you mentioned, there's some unexpected navigation bar behavior because the views are presented differently in the two entry points. The use of UIHostingController and wrapping of CardPresentPaymentsOnboardingView in SetUpTapToPayOnboardingView also complicates the possible navigation stack scenarios. As it's the beginning of the release cycle, I spent some time trying to move the navigation stack to TapToPaySettingsFlowPresentingView, which should be the wrapper view to present in a sheet for both use cases without any necessary modifiers. I tested on the 1) onboarding scenario / refresh 2) TTP flow for both entry points 1) Payments > About Tap To Pay > Set Up Tap to Pay on iPhone 2) Payments > Set Up Tap to Pay on iPhone.

The PR is ready for another look and let me know if you find any issues / have any other suggestions!

[joshheald]

Works really well, thanks for the improvements here :)