[Woo POS][Historical Orders] Order Details (Wireframe UI) #16072

staskus · 2025-09-02T11:10:31Z

Description

Implement order details UI according to the wireframes. Include a header section with Order ID, Date & Time, Total, Status, Payment Method, and Customer Email. Display the products section and totals section. No actions are included in this task.

Expanded POSOrderItem with additional required fields
Developed PointOfSaleOrderDetailsView with expanded header, products, and totals sections
Created PointOfSaleOrderDetailsViewHelper to consolidate formatting and calculations logic
Improved state management of selected orders
Added simple loading and empty views, they will be finalized in another task

One thing that I didn't include are product images, since they require additional logic I haven't anticipated. I'l added it into a new PR.

Steps to reproduce

Open POS -> Menu -> Orders
Confirm the loading state of a list and order details
Confirm that order details automatically appear after finishing loading
Select orders of different states - completed, failed, refunded, or partially refunded
Confirm correct status, products, product attributes, total, paid, and refund (if applicable) calculations are shown

Testing information

iPad Air 18.5 Simulator

Screenshots

Loading and navigating orders

Loading.mov

Making a new order & reopening

New.Order.mov

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

…ormatting

dangermattic · 2025-09-02T11:11:14Z

	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 23.2. 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

…details-wireframe-ui

wpmobilebot · 2025-09-02T12:32:17Z

📲 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	`pr16072-dc6e7c7`
	Version	`23.1`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`dc6e7c7`
	Installation URL	11kmuh8ju77s0

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

iamgabrielma

Works well! Looking good 🚢

iamgabrielma · 2025-09-03T02:52:11Z

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

We got new warnings here, it seems to detect that we had a trailing closure for trailingContent previously, and now is updated with a new bottomContent trailing closure, so it wants to be declared explicitly:

Backward matching of the unlabeled trailing closure is deprecated; label the argument with 'bottomContent' to suppress this warning

iamgabrielma · 2025-09-03T03:02:17Z

WooCommerce/Classes/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelper.swift

+
+    /// Calculates the products subtotal by summing line item subtotals
+    /// Follows the same pattern as OrderPaymentDetailsViewModel.subtotal
+    func productsSubtotal(for order: POSOrder) -> String {


Not necessarily as part of this PR (or project), but to avoid repetition on those across features, I wonder if would be worth to move these calculations as functions over POSOrder, rather than keep them as free functions. So rather than helper.productsSubtotal(for: posOrder) we would do posOrder.productsSubtotal() 🤔 WDYT? I'm happy to open some experimentation branch with this if makes sense.

Good idea, I'll see what could be done now 👍

I ended up following this advice. I found Order+CurrencyFormattedValues, expanded and improved it a bit (fixing some formatting inconsistencies in Woo App order details as well), and then created POSOrdersMapper to set formatted values straight on POSOrder, allowing views to use these values. It simplified the code, reused existing logic, and avoided using CurrencyFormatter (and ServiceLocator) in views.

iamgabrielma · 2025-09-03T03:17:17Z

WooCommerce/Classes/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelper.swift

+struct PointOfSaleOrderDetailsViewHelper {
+    private let currencyFormatter: CurrencyFormatter
+
+    init(currencySettings: CurrencySettings = ServiceLocator.currencySettings) {


Not sure how much this is worth the efford, but should we provide a default value for currencySettings so deep in the view or move it higher? Thinking in the context of getting rid of direct references to ServiceLocator for demodularization

Since PointOfSaleOrderDetailsView() owns PointOfSaleOrderDetailsViewHelper() perhaps is worth to inject it a bit higher. The DI chain is a bit annoying here, so perhaps could sit in PointOfSaleOrderListModel or PointOfSaleOrderListController 🤔

Yes, I agree. I dealt with it during modularization work. What I did was inject the currency settings protocol into the environment so it could be accessed within views. It may be worth bringing some of the modularization helper code to trunk, not to introduce more dependencies...

iamgabrielma · 2025-09-03T03:20:00Z

WooCommerce/Classes/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelper.swift

+    /// Formats discount total
+    /// Follows TotalsView pattern using discountTotal directly
+    func formattedDiscountTotal(for order: POSOrder) -> String? {
+        guard let discountTotal = Double(order.discountTotal), discountTotal != 0 else {


Just double checking since the original implementation checks for >0. Is !=0 what we want here? That would allow for negative discounts depending on how is used, which would be summed to the amount (amount - (-discount))

iamgabrielma · 2025-09-03T03:20:25Z

WooCommerce/Classes/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelper.swift

+
+    /// Formats tax total
+    func formattedTaxTotal(for order: POSOrder) -> String? {
+        guard let taxTotal = Double(order.totalTax), taxTotal != 0 else {


Same comment as above regarding >0 vs !=0

WooCommerce/WooCommerceTests/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelperTests.swift

iamgabrielma · 2025-09-03T03:25:57Z

WooCommerce/WooCommerceTests/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelperTests.swift

In general, if possible, I'd add when/then to all the test names in the file as well as separate the words that are not defined as variables within the test, ie: singleItem -> single_item

iamgabrielma · 2025-09-03T03:29:23Z

WooCommerce/WooCommerceTests/POS/ViewHelpers/PointOfSaleOrderDetailsViewHelperTests.swift

+        #expect(result == false)
+    }
+
+    @Test func shouldShowDiscount_positiveDiscount_returnsTrue() async throws {


Let's add a test for negative discounts as well, my understanding is that the negative discount should not be supported, as we detract it from the order amount so its always absolute, but if a negative value happens to go through we may want to handle it here as well.

iamgabrielma · 2025-09-03T03:44:32Z

WooCommerce/Classes/POS/Controllers/PointOfSaleOrderListController.swift

        ordersViewState = .loading(cachedOrders)
    }
+
+    @MainActor


This one does not require MainActor, if we want to run it in the main actor then we need to make the function and conformance async

Suggested change

@MainActor

iamgabrielma · 2025-09-03T03:52:25Z

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

 /// A header view for POS pages.
 /// Design ref: 1qcjzXitBHU7xPnpCOWnNM-fi-450_24951
-struct POSPageHeaderView<TrailingContent: View>: View {
+struct POSPageHeaderView<TrailingContent: View, BottomContent: View>: View {


…eprecated

…formatter Injecting currency formatter allows to correctly format totals in the view layer

staskus added 8 commits August 29, 2025 15:54

Expand POSOrder and POSOrderItem for details view needs

fe7dcc6

Allow setting bottom content on POSPageHeaderView

8943b05

Create PointOfSaleOrderDetailsViewHelper to handle calculations and f…

fce7b2d

…ormatting

Add PointOfSaleOrderDetailsViewHelperTests

3abcc28

Improve PointOfSaleOrderDetailsView to wireframe designs

c8dad49

Manage selected order within orders controller

1dfc8b1

Add a simple loading view for Order Details

0b94d0d

Move PointOfSaleOrderBadgeView into a separate view to reuse

f969b12

staskus added this to the 23.2 milestone Sep 2, 2025

staskus added type: task An internally driven task. feature: POS labels Sep 2, 2025

Merge branch 'trunk' into woomob-1138-woo-poshistorical-orders-order-…

eb02d0c

…details-wireframe-ui

staskus force-pushed the woomob-1138-woo-poshistorical-orders-order-details-wireframe-ui branch from 82709ef to eb02d0c Compare September 2, 2025 12:22

Remove unused code

d4012be

staskus force-pushed the woomob-1138-woo-poshistorical-orders-order-details-wireframe-ui branch from fbbef00 to d4012be Compare September 2, 2025 13:06

staskus marked this pull request as ready for review September 2, 2025 13:33

staskus requested review from iamgabrielma and toupper September 2, 2025 13:34

iamgabrielma self-assigned this Sep 3, 2025

iamgabrielma approved these changes Sep 3, 2025

View reviewed changes

staskus added 8 commits September 3, 2025 10:20

Fix warning: Backward matching of the unlabeled trailing closure is d…

4bc8c86

…eprecated

Rename OrdersViewState to POSOrdersViewState

ffdc18b

Remove PointOfSaleOrderDetailsViewHelper

a87b614

Expand Order+CurrencyFormattedValues with ability to inject currency …

45b67cd

…formatter Injecting currency formatter allows to correctly format totals in the view layer

Create POSOrderMapper to set formatted and calculated totals on POSOrder

50bf66e

Use formatted values from order in list and details view

1eec56c

Update PreviewHelpers.swift

3c3694b

Update tests

f39d665

staskus force-pushed the woomob-1138-woo-poshistorical-orders-order-details-wireframe-ui branch from 1c16229 to f39d665 Compare September 3, 2025 21:37

staskus added 5 commits September 4, 2025 10:09

Remove unused code

2663256

Create POSOrderMapperTests

4ea5462

Remove errors when fetching images

3c8b718

Update PointOfSaleOrderDetailsView.swift

ffc3a14

Remove unused code

dc6e7c7

staskus merged commit db48e93 into trunk Sep 4, 2025
14 checks passed

staskus deleted the woomob-1138-woo-poshistorical-orders-order-details-wireframe-ui branch September 4, 2025 11:23

[Woo POS][Historical Orders] Order Details (Wireframe UI) #16072

[Woo POS][Historical Orders] Order Details (Wireframe UI) #16072

Uh oh!

Conversation

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

Uh oh!

Description

Steps to reproduce

Testing information

Screenshots

Loading and navigating orders

Making a new order & reopening

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

iamgabrielma 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!

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 Sep 2, 2025 •

edited

Loading

dangermattic commented Sep 2, 2025 •

edited

Loading

wpmobilebot commented Sep 2, 2025 •

edited

Loading