Move POS custom amounts entry to a row in the products list by toupper · Pull Request #17013 · woocommerce/woocommerce-ios

toupper · 2026-04-29T14:11:39Z

Description

Replaces the cart-header + icon (and its TipKit popover) with a CustomAmountEntryRow rendered above the products list. When the merchant is in the products tab, building an order, and not currently searching, the first row in the list reads "Custom amount — Tap to add a one-off charge" with a tag icon. Tapping it opens the existing full-screen form.

This trades the low-discoverability cart icon for a glanceable affordance that lives where merchants already scan ("things I can add to the order"). Discussed both this and the literal variations-style left-pane push; we picked this approach because:

The POS principle "full screen for amount entry" still applies, so we keep posFullScreenCover for the form itself.
No expansion of ItemsStackState / POSItem to model "form-as-sub-state" — keeps the items model focused on listings.
Reuses the existing form unchanged.

State plumbing

The form's presentation state (isCustomAmountSheetPresented, editingCustomAmount) moves from CartView to PointOfSaleAggregateModel. Any entry point can call presentAddCustomAmount, presentEditCustomAmount(_:), or dismissCustomAmountSheet, driving the same sheet without prop-drilling. CartView keeps the posFullScreenCover attachment, reading state via @Bindable.

Removed

CartAddCustomAmountButton (the cart-header + icon)
AddCustomAmountTip and Tips.configure setup
CartViewHelper.shouldShowAddCustomAmountButton(...) and its three tests
import TipKit, import CocoaLumberjackSwift references that only existed to support the popover

This PR stacks on top of #16999. It auto-rebases onto trunk as the rest of the stack lands.

Test Steps

On a localDeveloper or alpha build (custom amounts flag on):

Open POS → Products tab. The first row reads "Custom amount — Tap to add a one-off charge" with a tag icon.
Tap the row. Form opens; submit adds the custom amount to the cart.
Tap the pencil on a custom amount in the cart. Form reopens in edit mode.
Switch to the Coupons tab and search products. The entry row is not shown in either.
Tap Check out (finalizing stage). The entry row hides.
Cart header no longer shows the + icon.

On an App Store build (flag off):

Products list matches trunk — no entry row, no cart +, no TipKit popover.

Screenshots

See the feature walkthrough video and design rationale in the feature announcement post.

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

dangermattic · 2026-04-29T14:12:24Z

	1 Warning
⚠️	View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity.

Generated by 🚫 Danger

wpmobilebot · 2026-04-29T14:23:07Z

📲 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	`pr17013-e0a7113`
	Version	`24.6`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`e0a7113`
	Installation URL	3mrmehdpb7dbo

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

Replaces the cart-header `+` icon (and its TipKit popover) with a `CustomAmountEntryRow` rendered above the products list when: - the products tab is selected, - `pointOfSaleCustomAmounts` is on, - the order stage is `.building`, - the merchant isn't currently searching. The row is product-card-shaped — same dimensions and visual rhythm as `SimpleProductCardView` — with a tag icon and a "Tap to add a one-off charge" subtitle, so it reads as part of the "things I can add" list the merchant already scans. This trades the low-discoverability cart icon for a glanceable affordance and lets us drop the TipKit popover that existed solely to teach the cart icon. State plumbing - The form's presentation state (`isCustomAmountSheetPresented`, `editingCustomAmount`) moves from `CartView` to `PointOfSaleAggregateModel`, with `presentAddCustomAmount`, `presentEditCustomAmount`, and `dismissCustomAmountSheet` methods. This lets entry points anywhere in the view hierarchy drive the same sheet without prop drilling. - `CartView` keeps the `posFullScreenCover` attachment, reading state via `@Bindable` on the aggregate model. - The cart row's pencil button now calls `posModel.presentEditCustomAmount(_:)` directly. Removed - `CartAddCustomAmountButton` (the cart-header `+` icon) - `AddCustomAmountTip` and `Tips.configure` in `PointOfSaleEntryPointView` - `CartViewHelper.shouldShowAddCustomAmountButton(...)` and its three tests - `import TipKit` from `CartView` and `PointOfSaleEntryPointView` - `import CocoaLumberjackSwift` from `PointOfSaleEntryPointView` (was only used for the TipKit configure error log) Follow-ups - The empty-cart state still says "Tap on a product to add it to the cart, or [Scan barcode]" — that copy stays accurate since custom amounts are now reachable from the products list. No empty-state change needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Extract the entry row's gating logic into a new `ItemListViewHelper.shouldShowCustomAmountEntryRow` and add five Swift Testing cases covering the tab, feature flag, order stage, and searching axes (mirrors how `CartViewHelper` was unit-tested). - Drop the restating block comment on the now one-line wrapper; the doc comment lives on the helper next to the rule. - Set explicit `accessibilityLabel` and `accessibilityHint` on the entry row (with `.accessibilityElement(children: .ignore)`) so VoiceOver reads "Custom amount" with "Tap to add a one-off charge" as a hint, instead of concatenating the two into one label. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Switch the row's icon from `tag` to `tag.badge.plus` so the affordance reads as "add a new fee" rather than "category". - Drop the imperative "Tap to" prefix; the row's tap target speaks for itself. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

`tag.badge.plus` either doesn't exist as an SF Symbol or renders inconsistently across iOS versions; the row showed up blank in testing. Replace it with `tag` + a `plus.circle.fill` overlay in the bottom-trailing corner, which renders correctly on every supported iOS release and conveys the "add a custom amount" affordance unambiguously. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

samiuelson · 2026-05-01T21:37:27Z

+                .padding(.horizontal, Constants.horizontalTextPadding * (1 / scale))
+                .padding(.vertical, Constants.verticalTextPadding * (1 / scale))
+                Spacer()
+            }


.accessibilityElement(children: .ignore) collapses the subtree into a single synthesized element, which drops the Button's .isButton trait. VoiceOver will read the label and hint but won't announce it as a button. Could you add the trait explicitly?

.accessibilityElement(children: .ignore) .accessibilityLabel(Text(Localization.title)) .accessibilityHint(Text(Localization.subtitle)) .accessibilityAddTraits(.isButton) .accessibilityIdentifier("pos-custom-amount-entry-row")

samiuelson · 2026-05-01T21:37:27Z

+        static let title = NSLocalizedString(
+            "pos.itemList.customAmountEntryRow.title",
+            value: "Custom amount",
+            comment: "Title for the row in the Point of Sale products list that opens the custom amount form.")


POS guidelines ask for an iPad-sized preview (the module is iPad-first) and ideally a Dynamic Type variant. The current single phone-sized preview is fine for a sanity check but doesn't show the layout under the conditions this row will actually run in. Worth adding a second preview at an accessibility size, since the row branches on dynamicTypeSize.isAccessibilitySize.

samiuelson · 2026-05-01T21:37:27Z

    }

+    /// Whether the custom amount entry sheet is currently presented.
+    var isCustomAmountSheetPresented: Bool = false


isCustomAmountSheetPresented is a fully settable var so CartView can @Bindable-bind it to posFullScreenCover. SwiftUI will write false directly through that binding on swipe-to-dismiss, and AddCustomAmountView.submit() also writes isPresented = false — both paths skip dismissCustomAmountSheet(), which is the only place that nils editingCustomAmount.

No live bug today (the next presentAddCustomAmount() resets it), but it's a stale-state foot-gun — anything that reads editingCustomAmount between dismiss and the next opener will see the previous edit target.

Two easy fixes:

Make isCustomAmountSheetPresented private(set) and expose a Binding<Bool> whose setter routes false through dismissCustomAmountSheet().

Or attach onDismiss: { posModel.dismissCustomAmountSheet() } to the posFullScreenCover and have the form call dismissCustomAmountSheet() instead of writing isPresented directly.

samiuelson · 2026-05-01T21:37:27Z

        cart.removeCustomAmount(id: id)
    }

+    func presentAddCustomAmount() {


The neighboring mutating methods (addMoreToCart, startNewCart, setStateForEditing, …) are all @MainActor, but these three new ones aren't. Probably harmless in practice since the callers are SwiftUI views, but worth annotating for consistency and to keep non-UI callers honest:

@MainActor func presentAddCustomAmount() { … } @MainActor func presentEditCustomAmount(_ customAmount: POSCustomAmount) { … } @MainActor func dismissCustomAmountSheet() { … }

samiuelson · 2026-05-01T21:37:27Z

+    func dismissCustomAmountSheet() {
+        isCustomAmountSheetPresented = false
+        editingCustomAmount = nil
+    }


While you're in PointOfSaleAggregateModel, would be great to lock down the new state with a few quick @Test cases (no existing PointOfSaleAggregateModelTests so it'd be a new file):

presentAddCustomAmount → isCustomAmountSheetPresented == true, editingCustomAmount == nil

presentEditCustomAmount(x) → isCustomAmountSheetPresented == true, editingCustomAmount == x

dismissCustomAmountSheet after edit → both cleared

The third one would also catch the cleanup-bypass concern above if/when it gets fixed.

samiuelson · 2026-05-01T21:37:27Z

                POSBarcodeScannerSetup(isPresented: $showBarcodeScanningModal, analytics: analytics)
            }
-            .posFullScreenCover(isPresented: $showCustomAmountSheet) {
+            .posFullScreenCover(isPresented: $posModel.isCustomAmountSheetPresented) {


One structural thing to think about: the sheet's posFullScreenCover is attached to CartView's body, but CartView is conditionally rendered in PointOfSaleDashboardView (hidden during full-screen card payment / cash success). The new entry point lives in ItemListView. Today it's safe because shouldShowCustomAmountEntryRow already requires orderStage == .building, but the trigger and the sheet host are now in two different views and the dependency isn't visible from either side.

Consider lifting the posFullScreenCover up to PointOfSaleDashboardView, which is where the always-rendered settings cover already lives — would match the spirit of "any view can drive the sheet."

samiuelson · 2026-05-01T21:37:27Z

+struct ItemListViewHelperTests {
+    let sut = ItemListViewHelper()
+
+    @Test func shouldShowCustomAmountEntryRow_when_all_conditions_met_then_true() {


Small convention thing: testing.md and Modules/Tests/CLAUDE.md ask for // Given / // When / // Then comment blocks, and the rest of the POS suite (e.g. CartViewHelperTests) sticks to it. Could you add them here? The branches you've covered are great, just want the structure to match.

samiuelson

LGTM. Tests good on iPad. I shared code improvement suggestions from claude.

toupper added type: enhancement A request for an enhancement. feature: POS status: feature-flagged Behind a feature flag. Milestone is not strongly held. labels Apr 29, 2026

toupper added this to the 24.7 milestone Apr 29, 2026

toupper mentioned this pull request Apr 30, 2026

Push the POS custom amount form from the products list #17022

Open

1 task

toupper requested a review from samiuelson April 30, 2026 14:22

toupper force-pushed the rsm/pos-custom-amounts-order-details branch from 8cb949e to 67dbf4b Compare April 30, 2026 19:11

toupper and others added 3 commits April 30, 2026 21:18

toupper force-pushed the rsm/pos-custom-amounts-products-list-entry branch from fbb8601 to ca2b18f Compare April 30, 2026 19:20

samiuelson self-assigned this May 1, 2026

samiuelson reviewed May 1, 2026

View reviewed changes

samiuelson approved these changes May 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move POS custom amounts entry to a row in the products list#17013

Move POS custom amounts entry to a row in the products list#17013
toupper wants to merge 4 commits intorsm/pos-custom-amounts-order-detailsfrom
rsm/pos-custom-amounts-products-list-entry

toupper commented Apr 29, 2026 •

edited

Loading

Uh oh!

dangermattic commented Apr 29, 2026

Uh oh!

wpmobilebot commented Apr 29, 2026 •

edited

Loading

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson May 1, 2026

Uh oh!

samiuelson left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

toupper commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

State plumbing

Removed

Test Steps

Screenshots

Uh oh!

dangermattic commented Apr 29, 2026

Uh oh!

wpmobilebot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson May 1, 2026

Choose a reason for hiding this comment

Uh oh!

samiuelson left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

toupper commented Apr 29, 2026 •

edited

Loading

wpmobilebot commented Apr 29, 2026 •

edited

Loading