[Woo POS] Coupons: Products/Coupons Header #15512

staskus · 2025-04-16T20:13:46Z

Closes: #

Description

Creating a header view for switching between Products and Coupons

Updated POSPageHeaderView to support multiple titles with action
Created POSPageHeaderActionButton for displaying a round action button
Updated ItemListView to display a new header if the feature flag is enabled

Info button is deliberately removed based on the designs and discussions during the design phase.

Steps to reproduce

Enable enableCouponsInPointOfSale feature flag

Open POS
Compare the header with the designs FnDpCHVQ3Zpefad04ptbd4-fi-297_13359
Confirm switching between Products and Coupons continue to work
Confirm adding coupon action "+" continues to work

Testing information

Tested on iPad Air 11 Inch iOS 18.4 Simulator

Screenshots

Header View

products-coupons-switch.mp4

Hidden Simple Products Banner

simple.and.variable.products.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.

- Accept multiple items with titles, subtitles, and action - Change selected item index on action

dangermattic · 2025-04-16T20:14:16Z

	1 Warning
⚠️	This PR is assigned to the milestone 22.2. The due date for this milestone has already passed. Please assign it to a milestone with a later deadline or check whether the release for this milestone has already been finished.

Generated by 🚫 Danger

Copilot

Pull Request Overview

This PR updates the POS header view to support switching between Products and Coupons by introducing a multi-item header and an associated round action button. Key changes include:

Adding a new POSPageHeaderItem structure and updating POSPageHeaderView to render multiple header items with selection support.
Creating a new POSPageHeaderActionButton view for displaying a round action button.
Adjusting ItemListView to use the new header view and control the display logic based on feature flags.

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

File	Description
WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift	Added multi-item support with selectable header buttons and updated accessibility traits.
WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderActionButton.swift	Created a new view for rendering a round action button.
WooCommerce/Classes/POS/Presentation/Reusable Views/POSHeaderLayoutConstants.swift	Added a new constant (minHeight) for header layout consistency.
WooCommerce/Classes/POS/Presentation/ItemListView.swift	Updated header rendering logic to integrate multiple header items and apply conditional rendering for the info button.

Files not reviewed (1)

WooCommerce/WooCommerce.xcodeproj/project.pbxproj: Language not supported

Comments suppressed due to low confidence (1)

WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift:74

[nitpick] Consider using items.enumerated() or iterating directly over items (e.g. ForEach(items)) to leverage the Identifiable conformance of POSPageHeaderItem, which may improve code clarity and reduce reliance on index arithmetic.

ForEach(0..<items.count, id: \ .self) { index in

Copilot · 2025-04-16T20:14:24Z

WooCommerce/Classes/POS/Presentation/ItemListView.swift

                            .padding(Constants.infoIconInset)
                    })
-                    .renderedIf(!shouldShowHeaderBanner)
+                    .renderedIf(!shouldShowHeaderBanner && !shouldShowCoupons)


Review the combined condition for rendering the info button to ensure that the button is hidden only when both header banners and coupons are active, as this logic change affects the UI behavior.

Suggested change

.renderedIf(!shouldShowHeaderBanner && !shouldShowCoupons)

.renderedIf(!(shouldShowHeaderBanner && shouldShowCoupons))

wpmobilebot · 2025-04-16T20:23:58Z

📲 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	`29360`
	Version	`PR #15512`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`84c974f`
	Installation URL	32lldhtvndif0

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

joshheald

Works as expected and matches designs.

It gets pretty funky when the search field is shown at any dynamic type size; you get an animation effect on the titles changing size, as they're smaller when they're constrained by the search field, but then grow when you switch to coupons. That's not a blocker because you won't be able to switch tabs in search mode.

You can see a subtler version of the same issue when at very large dynamic sizes and constrained width, but it's acceptable for the extreme text size used. It's caused by the + button only being shown on Coupons.

Zoom.effect.on.title.mp4

joshheald · 2025-04-17T16:37:51Z

WooCommerce/Classes/POS/Presentation/ItemListView.swift

+        var items = [
+            POSPageHeaderItem(
+                title: Localization.productsTitle,
+                action: {
+                    displayItemListType(.products(search: searchTerm.isNotEmpty))
+                }
+            )
+        ]
+
+        if shouldShowCoupons {
+            items.append(
+                POSPageHeaderItem(
+                    title: Localization.couponsTitle,
+                    action: {
+                        displayItemListType(.coupons)
+                    }
+                )
+            )


Nice and clean at the callsite

joshheald · 2025-04-17T16:39:55Z

WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderActionButton.swift

+                        .font(.posButtonSymbolSmall)
+                        .foregroundColor(.posOnSurface)
+                }
+                .frame(width: POSHeaderLayoutConstants.minHeight, height: POSHeaderLayoutConstants.minHeight)


This starts to look a little odd at larger dynamic type sizes. Perhaps use a @ScaledMetric inited with the min height, rather than the raw value? You can use the min of that and the constant, to avoid the button getting too small.

I tried playing with ScaledMetric, likely min and max values are required since it also grows a bit too gigantic. I'll try to combine them.

joshheald · 2025-04-17T16:42:16Z

WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift


    private var hStackAlignment: VerticalAlignment {
-        subtitle == nil ? .center: .firstTextBaseline
+        items.first?.subtitle == nil ? .center: .firstTextBaseline


Is the subtitle going to be used for something soon, or just future proofing? I can't see where it is at the moment.

This component was part of the Design System work, so I kept the behavior for the multi-title scenario as well. The subtitle is used in the cash view to show the order total.

staskus · 2025-04-18T07:00:44Z

You can see a subtler version of the same issue when at very large dynamic sizes and constrained width, but it's acceptable for the extreme text size used. It's caused by the + button only being shown on Coupons.

@joshheald, thanks, good observations.

We could reserve some space for action buttons by keeping them invisible rather than removing them, then the amount of space for headers wouldn't change.

Either way, this header is not great for extreme dynamic type sizes. Adding a third header would be enough to break it or it would require a different layout.

If I look at native Apple apps, they do limit the dynamic type growth in quite a few places. Tabs at the bottom and top grow quite little when even the default font is much smaller than ours.

We need to do user testing, but I think large elements should grow relatively less, given they are already large.

…tabs-switch-header-designer

Hide the button with opacity rather than remove from hierarchy so the space would always be reserved for this button. It keeps the header titles size consistent when switching between the products and coupons while having large dynamic type sizes.

Constraint between original and 1.5x times the size for the best UX

joshheald · 2025-04-18T08:08:34Z

If I look at native Apple apps, they do limit the dynamic type growth in quite a few places. Tabs at the bottom and top grow quite little when even the default font is much smaller than ours.

We need to do user testing, but I think large elements should grow relatively less, given they are already large.

I think that titles/tabs which are part of a small, consistent are also less likely to be read in detail. Error message text, for example, is much more important to fully scale as it'll happen rarely and the user needs to know what's going on.

staskus added 6 commits April 16, 2025 21:17

Add multiple title support to POSPageHeaderView

395401a

- Accept multiple items with titles, subtitles, and action - Change selected item index on action

Configure accessibility for POSPageHeaderView title

d8f45c1

Add Products and Coupons to PageHeader in ItemListView

8261ae3

Create POSPageHeaderActionButton for showing quick actions

3b79e77

Add coupon creation action button to the header

2d00bd1

Hide simple products banner from coupons

e0ac679

staskus added type: task An internally driven task. feature: POS labels Apr 16, 2025

staskus added this to the 22.2 milestone Apr 16, 2025

staskus requested review from Copilot and joshheald April 16, 2025 20:13

Copilot AI reviewed Apr 16, 2025

View reviewed changes

joshheald approved these changes Apr 17, 2025

View reviewed changes

staskus added 3 commits April 18, 2025 10:38

Merge branch 'trunk' into woomob-254-woo-pos-coupons-productscoupons-…

bcf1e18

…tabs-switch-header-designer

Make POSPageHeaderActionButton scalable

84c974f

Constraint between original and 1.5x times the size for the best UX

staskus enabled auto-merge April 18, 2025 07:58

staskus merged commit 2eca173 into trunk Apr 18, 2025
13 checks passed

staskus deleted the woomob-254-woo-pos-coupons-productscoupons-tabs-switch-header-designer branch April 18, 2025 08:41

	.renderedIf(!shouldShowHeaderBanner && !shouldShowCoupons)
	.renderedIf(!(shouldShowHeaderBanner && shouldShowCoupons))

[Woo POS] Coupons: Products/Coupons Header #15512

[Woo POS] Coupons: Products/Coupons Header #15512

Uh oh!

Conversation

staskus commented Apr 16, 2025 • edited by joshheald Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Testing information

Screenshots

Header View

Hidden Simple Products Banner

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

Uh oh!

dangermattic commented Apr 16, 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!

Copilot AI Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Apr 16, 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!

joshheald Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

joshheald Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

staskus Apr 18, 2025

Choose a reason for hiding this comment

Uh oh!

joshheald Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

staskus Apr 18, 2025

Choose a reason for hiding this comment

Uh oh!

staskus commented Apr 18, 2025

Uh oh!

joshheald commented Apr 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

staskus commented Apr 16, 2025 •

edited by joshheald

Loading

dangermattic commented Apr 16, 2025 •

edited

Loading

wpmobilebot commented Apr 16, 2025 •

edited

Loading