[Woo POS][Barcodes] Scanner set up flow structure #15883

joshheald · 2025-07-08T15:57:25Z

Description

This PR adds some basic structure that we'll use to build the scanner set up flows. Sorry it's pretty big – I ended up having to move a lot of stuff around.

I'm doing this with a view to correctly transitioning between the views, keeping buttons and header more or less in the same place but having bigger transitions for the content. Not animated yet, this PR focuses on removing the use of NavigationStack.

We will define different steps for each scanner's flow, and then move along one flow at a time, handled by the PointOfSaleBarcodeScannerSetupFlowManager working with multiple flows.

Steps to reproduce

Launch the app and open POS
Tap ... and open Barcode Scanning to see the scanner selection screen
Tap Other – observe that the existing modal is shown (though a different size.)
Tap Back – observe that the selection screen is shown again
Tap a scanner – observe that a placeholder view is shown with customised buttons; Done only.

Screenshots

scanner.flow.structure.mp4

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

dangermattic · 2025-07-08T15:57:58Z

	2 Warnings
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	This PR is assigned to the milestone 22.8. 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 · 2025-07-08T16:06:44Z

📲 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	`pr15883-5e405e7`
	Version	`22.7`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`5e405e7`
	Installation URL	5j0t20lu1nsqo

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

staskus

Nice! 👍 I've done a few similar dynamic flows in other apps, I think it's done with the right balance:

Keeping the concept of a scan selection static
Adding title and button configurations, keeping the default option
Allowing to define content for each step

I thought the best way to review it to try the ergonomics and defining a custom flow.

I'm not approving it yet, I see the the navigation within the flow steps is not working, I don't know if it's supposed to be in the scope or not, although the code is written in the way that I think it should but the currentContent is not updating when calling .nextStep()

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift

staskus · 2025-07-09T19:09:36Z

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift

+                                   title: .constant(AttributedString(currentTitle)))
+
+            VStack {
+                currentContent


Maybe wrapping the content within the TabView will help with transition animations, although it could be tricky, especially if we don't know how many steps we have until the initial selection is made. Nevertheless, I would consider something like this here.

Yes... that's definitely worth trying, though I do want to keep it open to branching flows in future – e.g. additional steps after a failure for troubleshooting, going back to an arbitrary point in the flow.

though I do want to keep it open to branching flows in future – e.g. additional steps after a failure for troubleshooting, going back to an arbitrary point in the flow.

TabView seems to be only partially suitable for this dynamic approach. Some online answers suggest that it's needed to change .id(..) of TabView whenever the content changes. I haven't tested it, though.

This is where it becomes interesting with the dynamic approach. Question whether we want to define within the steps of the flow more like a tree, to see possible paths if failures happen.

Yeah, potentially. Let's avoid complicating it too much for now though.

The transitions in my early experiments could work pretty well like this, so we'll see how we get on 😊

Aside: controls for flows like this really feel like something a mobile platform should provide, given how common they are.

...erce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

WooCommerce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetup.swift

...erce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

...ce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupModels.swift

staskus · 2025-07-09T20:00:14Z

...erce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

+        switch scannerType {
+        case .socketS720:
+            return [
+                createWelcomeStep(title: "Socket S720 Setup")


This doesn't work fully, at least not yet. If I define more steps, the UI is not updated.

Interesting. I'll have a play, thanks.

I would expect it to work, but I pulled multi-step flows out a while ago while focusing on the structure and getting the PR to a managable size. My guess is that there's some failing of observation going on.

@staskus Yes, it was because the Flow wasn't @Observable.

Simple fix in 5e405e7, thanks for the catch and sorry for missing it!

content.changing.mp4

Wow, a simple fix indeed! Thanks. 👍

staskus · 2025-07-09T20:00:35Z

...erce/Classes/POS/Presentation/Barcode Scanner Setup/PointOfSaleBarcodeScannerSetupFlow.swift

+        )
+    }
+
+    private var steps: [PointOfSaleBarcodeScannerSetupStep] {


This is nice, it will be handy to have all the steps in one place 👍

Yeah. If we need to in future, we can pass them in and define them separately. I'm wary of generalising this too much right now, but also want to keep it open to that; we may have other flows in POS in future, e.g. printer set up, or even configuring a customer's choices for a subscription/booking cart item.

staskus

🚢

joshheald added 5 commits July 8, 2025 16:47

Initial flow-based setup implementation

770ec65

Simplify the flow specification approach

58b363d

Reduce temporary overhead in the code

548e4fb

Guard case for step finding functions

2c1b3c7

Move step management out of overall flow manager

512b836

joshheald added this to the 22.8 milestone Jul 8, 2025

joshheald added type: task An internally driven task. status: feature-flagged Behind a feature flag. Milestone is not strongly held. feature: POS labels Jul 8, 2025

Base automatically changed from woomob-695-woo-posbarcodes-set-up-flow-choose-a-scanner-screen to trunk July 9, 2025 06:06

joshheald added 15 commits July 9, 2025 09:07

Handle buttons in the flow

ccecc97

Use a button configuration

f090e16

Allow buttons to be customised

6f102c7

Split flow classes to files

147870a

Rename Flow to SetupFlow

edaf727

Rename ScannerOption

049b3b2

Rename ScannerType for specificity

34d44f7

Rename buttonConfiguration for specificity

99a862b

Move reusable flow buttons out

aee2986

Rename ScannerSelectionView for specificity

4fc9582

Rename remaining views for specificity

7f4c149

Remove unused localization

17799fb

Improve button configuration

2487604

Simplify configuration of flow buttons

ebf97cf

Button customization support readded

e39dd9f

joshheald marked this pull request as ready for review July 9, 2025 10:56

joshheald requested a review from staskus July 9, 2025 10:58

staskus self-assigned this Jul 9, 2025

staskus reviewed Jul 9, 2025

View reviewed changes

Ensure content changes when moving step

5e405e7

joshheald requested a review from staskus July 10, 2025 07:59

staskus approved these changes Jul 10, 2025

View reviewed changes

joshheald merged commit dba69c0 into trunk Jul 10, 2025
13 checks passed

joshheald deleted the woomob-695-woo-posbarcodes-set-up-flow-structure branch July 10, 2025 11:16

[Woo POS][Barcodes] Scanner set up flow structure #15883

[Woo POS][Barcodes] Scanner set up flow structure #15883

Uh oh!

Conversation

joshheald commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Screenshots

Uh oh!

dangermattic commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

staskus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

staskus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

joshheald commented Jul 8, 2025 •

edited

Loading

dangermattic commented Jul 8, 2025 •

edited

Loading

wpmobilebot commented Jul 8, 2025 •

edited

Loading