[Woo POS][Barcodes] Show barcode scanning information from the menu #15750

staskus · 2025-06-13T20:48:22Z

WOOPRD-565

Description

Show barcode scanning information, used Android as an example for copy and structure:

Solution

Created a modal for barcode scanning with a new modal style
For reusability, allowed to inject content into a new modal and created a reusable ParagraphView
Reused the style between barcode scanning and

Steps to reproduce

Open POS
Open popover menu
Select "Barcode scanning"
Confirm it appears according to requirements and "More details" link works
Select "Where are my products?"
Confirm it uses a consistent style

Testing information

Tested on iPad Air 13 Inch M3

Screenshots

Barcode

Product Limitations

Dynamic Type

dynamic.type.mp4

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

…rmational modals

…exibility PointOfSaleBarcodeScannerInformationModal can use PointOfSaleInformationModal and built it more flexibly using PointOfSaleInformationParagraphView with its styles.

dangermattic · 2025-06-13T20:48:49Z

	1 Warning
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

Copilot

Pull Request Overview

This PR introduces a reusable information modal component for POS, adds a dedicated barcode-scanning info modal, and updates the floating control menu to expose this new modal.

Introduce PointOfSaleInformationModal and PointOfSaleInformationModalParagraphView for consistent info‐modal styling.
Implement PointOfSaleBarcodeScannerInformationModal with localized messages and link support.
Refactor SimpleProductsOnlyInformation to use the new modal and add a “Barcode scanning” button in POSFloatingControlView.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
WooCommerce/WooCommerce.xcodeproj/project.pbxproj	Added new modal source file references
WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift	Refactored to use `PointOfSaleInformationModal`
WooCommerce/Classes/POS/Presentation/PointOfSaleInformationModal.swift	New reusable POS information modal and paragraph view
WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift	New barcode scanning info modal
WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift	Added “Barcode scanning” button and modal integration

Comments suppressed due to low confidence (4)

WooCommerce/Classes/POS/Presentation/PointOfSaleInformationModal.swift:48

Using a fixed width of 896 points may cause overflow on smaller devices. Consider using .frame(maxWidth: Constants.modalFrameWidth) or constraining to the screen width.

.frame(width: Constants.modalFrameWidth)

WooCommerce/Classes/POS/Presentation/PointOfSaleInformationModal.swift:1

No UI or snapshot tests were added for this new reusable modal. Consider adding tests to verify layout, spacing, and behavior when isPresented toggles.

import SwiftUI

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift:1

The Foundation import isn’t used in this file. You can remove it to keep the imports minimal.

import Foundation

WooCommerce/Classes/POS/Presentation/PointOfSaleInformationModal.swift:70

Ensure a custom .if view‐modifier extension is available in scope, or replace this with a standard conditional modifier pattern to avoid compile errors.

.if(style == .default, transform: { view in

wpmobilebot · 2025-06-13T20:57: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	`30560`
	Version	`PR #15750`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`f99c050`
	Installation URL	20jq23hi7ch8o

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

joshheald

Some suggestions inline, but generally looks good, thanks for doing this 👍

joshheald · 2025-06-16T13:49:36Z

WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift

    @Binding private var showSupport: Bool
    @Binding private var showDocumentation: Bool
    @State private var showProductRestrictionsModal: Bool = false
+    @State private var showBarcodeScanning: Bool = false


Suggested change

@State private var showBarcodeScanning: Bool = false

@State private var showBarcodeScanningInformation: Bool = false

Nit: with plans to add camera-based scanning, which will also have a view to show, this might be a bit clearer in the future.

joshheald · 2025-06-16T13:53:00Z

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift

+
+    private var bulletPointWithLink: AttributedString {
+        var secondary = AttributedString(Localization.barcodeInfoSecondaryMessage + " ")
+        var moreDetails = AttributedString(Localization.barcodeInfoMoreDetailsLink)


This link relates primarily to setting up barcodes. I mentioned to Andrey that it should be on the first item in the list, not the second, and I believe he changed it there, the screenshot from Android is probably out of date.

Could you move this to the first bullet point please?

Yes, moved.

joshheald · 2025-06-16T13:54:21Z

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift

+        )
+        static let barcodeInfoTertiaryMessage = NSLocalizedString(
+            "pos.barcodeInfoModal.tertiaryMessage",
+            value: "• Connect your barcode scanner in System Bluetooth settings.",


"System" here was to avoid it being platform specific in the wireframes. I think we should say "iOS Bluetooth settings" or just "Bluetooth settings". cc @kidinov

joshheald · 2025-06-16T13:56:15Z

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift

+        static let barcodeInfoQuinaryMessage = NSLocalizedString(
+            "pos.barcodeInfoModal.quinaryMessage",
+            value: "The scanner emulates a keyboard, so sometimes it will prevent the software keyboard from showing, e.g. in search. " +
+                "Tap on the keyboard icon to show the software keyboard back.",


Suggested change

"Tap on the keyboard icon to show the software keyboard back.",

"Tap on the keyboard icon to show it again.",

Just a slight tweak here to make it read a little better – cc @kidinov

joshheald · 2025-06-16T14:00:46Z

WooCommerce/Classes/POS/Presentation/PointOfSaleInformationModal.swift

+    let content: Content
+
+    // Used to make ScrollView height increase together with the content height.
+    @State private var contentHeight: CGFloat = 0


I think that this (or something else about this struct) makes the modals grow as they transition for presentation/dismissal as well. That didn't happen in the past, they just faded in. It would be good if they could already have the correct size when we try to present them...

I'm not sure the best way to do it though...

It's only an iOS 17 animation issue, not for the first time.

Yes, it's likely related to contentHeight, I haven't found a quick way to properly size content within the ScrollView.

I found a quick workaround, applying a 0-second ease-in animation to contentHeigh transition does the job:

Simulator.Screen.Recording.-.iPad.Air.11-inch.17.5.-.2025-06-18.at.17.45.30.mp4

Nice one, and thanks for commenting about it too. I checked on device and it looks good.

joshheald · 2025-06-16T14:03:51Z

WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift

+        PointOfSaleInformationModal(isPresented: $isPresented, title: AttributedString(Localization.modalTitle)) {
+            PointOfSaleInformationModalParagraphView {
+                Text(issueMessage)


Nice one for sharing this code 👍 Looks better all round

…nning-information-from-the

…nsition

…nning-information-from-the

staskus added 6 commits June 13, 2025 20:01

Create PointOfSaleInformationModal to generalize presentation of info…

939e2e0

…rmational modals

Define barcode scanner information modal

15a674a

Apply additional styling to barcode scanner information modal

9702df1

Display barcode scanning popover menu item on POS

f5ba153

Structure PointOfSaleInformationModal as a container view for more fl…

d24c03b

…exibility PointOfSaleBarcodeScannerInformationModal can use PointOfSaleInformationModal and built it more flexibly using PointOfSaleInformationParagraphView with its styles.

Use PointOfSaleInformationModal for SimpleProductsOnlyInformation

40d9174

staskus added this to the 22.7 milestone Jun 13, 2025

staskus requested a review from Copilot June 13, 2025 20:48

staskus added type: task An internally driven task. feature: POS labels Jun 13, 2025

Copilot AI reviewed Jun 13, 2025

View reviewed changes

staskus added 2 commits June 16, 2025 14:40

Make modal scrollable to support large dynamic type sizes

9260aa9

Hide barcode documentation behind the feature flag

a2af267

staskus marked this pull request as ready for review June 16, 2025 11:48

staskus requested a review from joshheald June 16, 2025 11:48

joshheald approved these changes Jun 16, 2025

View reviewed changes

staskus and others added 5 commits June 18, 2025 16:22

Merge branch 'trunk' into wooprd-565-woo-posbarcodes-show-barcode-sca…

210cc08

…nning-information-from-the

Update the content in barcode scanner information modal

cd1e7ef

Rename variable to showBarcodeScanningInformation

0f523d5

Apply a workaround for modal on iOS17 to appear without expansion tra…

ccac2ee

…nsition

Merge branch 'trunk' into wooprd-565-woo-posbarcodes-show-barcode-sca…

f99c050

…nning-information-from-the

staskus enabled auto-merge June 18, 2025 14:56

staskus merged commit 12c61cd into trunk Jun 18, 2025
13 checks passed

staskus deleted the wooprd-565-woo-posbarcodes-show-barcode-scanning-information-from-the branch June 18, 2025 15:18

	@State private var showBarcodeScanning: Bool = false
	@State private var showBarcodeScanningInformation: Bool = false

	"Tap on the keyboard icon to show the software keyboard back.",
	"Tap on the keyboard icon to show it again.",

[Woo POS][Barcodes] Show barcode scanning information from the menu #15750

[Woo POS][Barcodes] Show barcode scanning information from the menu #15750

Uh oh!

Conversation

staskus commented Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Solution

Steps to reproduce

Testing information

Screenshots

Barcode

Product Limitations

Dynamic Type

Uh oh!

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

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

Uh oh!

Uh oh!

joshheald left a comment

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!

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

staskus commented Jun 13, 2025 •

edited

Loading

dangermattic commented Jun 13, 2025 •

edited

Loading

wpmobilebot commented Jun 13, 2025 •

edited

Loading