[Woo POS] UI: Reader connection presentation flow with simulated happy path

[jaclync]

Simulated flow for #12711

Why

Before having a concrete design, we can start working on the card reader connection flow with a mocked state machine. In a WIP PR #12723, I worked on extracting the UI logic from CardReaderConnectionController so that we can reuse the state machine logic while the UI/UX differs from the existing app. From that WIP work, we know a list of UI states and we can build the reader connection flow based on that list.

How

All of the changes in this PR are in the POS framework (noted as pos).

After reviewing the code for the UI states in CardReaderConnectionController, I concluded them into the following smaller list combining a few similar states and defined a new UI state CardReaderConnectionUIState in pos:

• General connected/disconneceted states:
  • notConnected(search: () -> Void)
  • connected(readerID: String, disconnect: () -> Void)
• States from card reader connection based on CardReaderConnectionController
  • scanningForReader(cancel: () -> Void)
  • scanningFailed(error: Error, close: () -> Void)
  • connectingToReader
  • connectingFailed(error: CardReaderConnectionError, retrySearch: () -> Void, cancelSearch: () -> Void)
  • readersFound(readerIDs: [String], connect: (String) -> Void, continueSearch: () -> Void)
  • updateInProgress(requiredUpdate: Bool, progress: Float, cancel: (() -> Void)?)
  • updatingFailed(error: CardReaderUpdateError, tryAgain: (() -> Void)?, close: () -> Void)

Then, each UI state corresponds to a new SwiftUI view that follows the latest design when available.

To integrate with the POS dashboard, CardReaderConnectionView and its view model were created and shown in a sheet when the user taps on the "Reader not connected" CTA in the navigation bar.

To simulate the happy path for searching & connecting to a reader, CardReaderConnectionViewModel. checkReaderConnection is called on view's onAppear to mock the UI state transition.

Testing instructions

• Go to the Menu tab
• Ensure the POS feature switch is enabled (if not, go to Settings > Experimental Features, then enable "Point of Sale")
• Tap Point of Sale menu item
• Tap Reader not connected in the navigation bar --> the searching view should be shown first, then after 2 seconds, a list of 1 reader should be shown
• Tap Connect --> the connecting view should be shown first, then after 2 seconds, the connected view is shown

Screenshots

Simulator.Screen.Recording.-.iPad.Air.5th.generation.-.2024-05-15.at.16.42.05.mp4

---

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

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 18.7. 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 by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr12740-ff8c694
	Version	18.6
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	ff8c694
	App Center Build	WooCommerce - Prototype Builds #9065

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

[bozidarsevo]

Looks ok, I will check again once CI is green, if that is ok.

[jaclync]

Looks ok, I will check again once CI is green, if that is ok.

Sure, CI is green now. I'm not sure why the iPad UI tests failed to run at all, but all the PR changes are in the POS framework and aren't supposed to affect the app behavior.

[iamgabrielma]

💯 While simplified at this point, I like that we have some sort of init state which should help with testability if we want to start a flow in a specific stage, something we should think about implementing in the final designs

[iamgabrielma]

Looks good to me as well 👍

[jaclync]

@iamgabrielma @bozidarsevo When the PR looks okay, could you stamp it to enable merge? 😄 I'm preparing a PR #12747 that moves all the POS files including the ones in this PR to the main app.