Shipping Labels: Update tabs for shipments with purchased labels #15463

itsmeichigo · 2025-04-01T06:39:56Z

Description

This PR implements a few changes to support showing existing shipments on the split shipments screen:

Updated the order details screen to display the Create shipping label button even when a label is created. This is a temporary solution until [Order Details] Show create shipping label button if label not purchased for all items #15375 is done. This change is also hidden under the feature flag to ensure that the behavior of the legacy flow stays the same.
Updated the shipping label creation form to only load shipment configs and show the split shipments entry point if there are more than 1 item in the order.
Updated the split shipments screen to display existing shipments in the loaded configs.
Updated the shipment tabs when a shipment's label has already been purchased.
Disabled removing purchased shipments.
Updated the logic of merging all unfulfilled shipments to exclude purchased ones.

Note: the design found for the purchased shipment shows the checkbox disabled, but I think hiding the checkbox is simpler so I'm keeping that behavior.

Steps to reproduce

Testing the Create shipping label button on the order details screen

Log in to a test store with Woo Shipping set up.
On the web, open a complete order with more than 1 physical product with different quantities - split shipments and purchase the label for one of the shipments.
Open the same order on the app and confirm that the Create shipping label button is available.
Switch to a different store with only the legacy WCShip plugin set up.
Open an order with a purchased shipping label and confirm that the Create shipping label button is unavailable.

Testing the split shipments entry point

Log in to a test store with Woo Shipping set up.
On the app, open a complete order with more than 1 physical product with different quantities.
Select Create shipping label and confirm that the Split shipment entry point is displayed.
Navigate back to the order list and select an order with only 1 physical product with 1 item.
Select Create shipping label and confirm that the Split shipment entry point is not present.

Testing existing shipments

Log in to a test store with Woo Shipping set up.
On the web, open a complete order with more than 1 physical product with different quantities - split shipments and purchase the label for one of the shipments.
Open the same order on the app and select Create shipping label > Split shipments.
Confirm that the correct shipments are displayed.
Confirm that the shipment with the purchased label is displayed with a check icon on the tab bar, and the items are not selectable.
Tap the ellipsis button on the tab bar and confirm that the purchased shipment is not enabled as an option to remove.
Select to remove any other shipments and confirm in the bottom sheet that the option to merge into the purchased shipment is disabled.
Tap the ellipsis button again and select Merge all unfulfilled.
Confirm that only unfulfilled shipments are merged.

Testing information

Tested and confirmed the above test cases in simulator iPhone 16 Pro iOS 18.2.

Screenshots

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-04-01.at.18.13.15.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.

wpmobilebot · 2025-04-01T06:49:54Z

📲 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	`29125`
	Version	`PR #15463`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`8a33bbb`
	Installation URL	0vjnpdmo6gv5o

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

…s (temporary solution)

…hipment

…ring

itsmeichigo · 2025-04-02T03:42:59Z

Networking/Networking/Model/ShippingLabel/ShippingLabelPurchase.swift

+        let shipmentID = container.failsafeDecodeIfPresent(targetType: String.self,
+                                                           forKey: .shipmentID,
+                                                           alternativeTypes: [.integer(transform: { String($0) })])


While testing again I saw that the shipment ID was somehow returned as a number today. This is a workaround to transform the number to our expected string type.

selanthiraiyan

The code looks great and the given test cases all passed.

For an order with products with more than one quantities (with sub items), I noticed that after the shipments are saved from mobile the web isn't able to properly parse the saved information. i.e. The split shipments interface in web isn't working properly after the shipment is split from the mobile app.

SplitShipmentsInWeb.mov

This could be either an issue with how we save the shipments or how the web parses the shipments info. I think we should log a separate issue for this and investigate it.

I have logged an issue here. #15469

selanthiraiyan · 2025-04-02T04:24:44Z

...Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsDetailView.swift

+                        if viewModel.currentShipment.isPurchased {
+                            VStack {
+                                Text(Localization.PurchasedShipment.title)
+                                    .bold()
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+                                Text(Localization.PurchasedShipment.subtitle)
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+                            }
+                            .multilineTextAlignment(.leading)
+                            .foregroundStyle(Layout.green)
+                            .padding(Layout.contentPadding)
+                            .background(
+                                Layout.greenBackground
+                                    .clipShape(RoundedRectangle(cornerRadius: Layout.cornerRadius))
+                            )
+                        }


super-nit: Consider moving this into a computed property to keep the main body less crowded. Perhaps named as shipmentPurchasedMessageView.

Done in 4e310d2.

selanthiraiyan · 2025-04-02T04:33:05Z

...ls/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsViewModel.swift

+            let totalOrderItems = order.items.map(\.quantity).reduce(0, +)
+            if totalOrderItems > 1 {
+                // Only fetch shipments info if there are more than one order items.
+                group.addTask {
+                    await self.loadShipmentsInfo()
+                }


Suggestion: We could move this totalOrderItems check logic into loadShipmentsInfo to keep the shipments-related logic inside one method.

I plan to remove this check when working on #15309, so I'll keep this for now.

selanthiraiyan · 2025-04-02T04:40:10Z

... Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsViewModel.swift

+            let purchasedIcon = UIImage(systemName: "checkmark.circle.fill")?.withRenderingMode(.alwaysTemplate)
+            return TopTabItem(name: String.localizedStringWithFormat(Localization.shipmentFormat, index + 1),
+                              icon: item.isPurchased ? purchasedIcon : nil,
+                              content: { EmptyView() })


nit: We could initialise the icon outside of the map to avoid creating the image for every shipment.

Suggested change

let purchasedIcon = UIImage(systemName: "checkmark.circle.fill")?.withRenderingMode(.alwaysTemplate)

return TopTabItem(name: String.localizedStringWithFormat(Localization.shipmentFormat, index + 1),

icon: item.isPurchased ? purchasedIcon : nil,

content: { EmptyView() })

let purchasedIcon = UIImage(systemName: "checkmark.circle.fill")?.withRenderingMode(.alwaysTemplate)

return shipments.enumerated().map { (index, item) in

TopTabItem(name: String.localizedStringWithFormat(Localization.shipmentFormat, index + 1),

icon: item.isPurchased ? purchasedIcon : nil,

content: { EmptyView() })

}

Done in 8a33bbb.

itsmeichigo · 2025-04-02T05:33:26Z

Thank you @selanthiraiyan for the review!

For an order with products with more than one quantities (with sub items), I noticed that after the shipments are saved from mobile the web isn't able to properly parse the saved information. i.e. The split shipments interface in web isn't working properly after the shipment is split from the mobile app.

Good catch!

I have addressed the suggestions in subsequent commits, enabling auto-merge for now.

itsmeichigo added 4 commits April 1, 2025 12:13

Add options to customize tab icons

9860bf0

Add icon for purchased shipments

080c197

Add text for purchased shipment

8644a3e

Add isSelectable to CollapsibleShipmentItemCardViewModel initializer

e3319ce

itsmeichigo added type: task An internally driven task. feature: shipping labels Related to creating, ordering, or printing shipping labels. labels Apr 1, 2025

itsmeichigo added this to the 22.1 milestone Apr 1, 2025

itsmeichigo added 8 commits April 1, 2025 16:39

Enable shipping label creation button for orders with purchased label…

4984dd9

…s (temporary solution)

Create shipments based on configs

63676f3

Skip fetching configs if order has only one item

7fbb6b0

Add test for splitting shipments entry point

fab877b

Add tests for shipment creation

473bb13

Disable the option to remove and merge purchased shipments

c6f9bab

Update logic for merging unfulfilled shipments

9111c85

Add test for merging unfulfilled shipments when there's a purchased s…

5905ccd

…hipment

itsmeichigo marked this pull request as ready for review April 1, 2025 11:22

itsmeichigo requested a review from selanthiraiyan April 1, 2025 11:22

selanthiraiyan self-assigned this Apr 2, 2025

Add workaround when shipment ID is returned as a number instead of st…

12f71aa

…ring

itsmeichigo commented Apr 2, 2025

View reviewed changes

selanthiraiyan approved these changes Apr 2, 2025

View reviewed changes

itsmeichigo added 2 commits April 2, 2025 12:23

Move fulfilled message to a separate view

4e310d2

Move purchased icon to a constant

8a33bbb

itsmeichigo enabled auto-merge April 2, 2025 05:33

itsmeichigo merged commit d8480d5 into trunk Apr 2, 2025
13 checks passed

itsmeichigo deleted the task/15440-purchased-shipment branch April 2, 2025 05:50

itsmeichigo mentioned this pull request Apr 2, 2025

Shipping Labels: Inject shipments to split shipment view #15475

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Shipping Labels: Update tabs for shipments with purchased labels #15463

Shipping Labels: Update tabs for shipments with purchased labels #15463

Uh oh!

itsmeichigo commented Apr 1, 2025 •

edited by selanthiraiyan

Loading

Uh oh!

wpmobilebot commented Apr 1, 2025 •

edited

Loading

Uh oh!

itsmeichigo Apr 2, 2025

Uh oh!

selanthiraiyan left a comment

Uh oh!

selanthiraiyan Apr 2, 2025

Uh oh!

itsmeichigo Apr 2, 2025

Uh oh!

selanthiraiyan Apr 2, 2025

Uh oh!

itsmeichigo Apr 2, 2025

Uh oh!

selanthiraiyan Apr 2, 2025

Uh oh!

itsmeichigo Apr 2, 2025

Uh oh!

itsmeichigo commented Apr 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Shipping Labels: Update tabs for shipments with purchased labels #15463

Shipping Labels: Update tabs for shipments with purchased labels #15463

Uh oh!

Conversation

itsmeichigo commented Apr 1, 2025 • edited by selanthiraiyan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Testing the Create shipping label button on the order details screen

Testing the split shipments entry point

Testing existing shipments

Testing information

Screenshots

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

Uh oh!

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

Uh oh!

Uh oh!

itsmeichigo Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

selanthiraiyan left a comment

Choose a reason for hiding this comment

Uh oh!

selanthiraiyan Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

selanthiraiyan Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

selanthiraiyan Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

itsmeichigo Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

itsmeichigo commented Apr 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

itsmeichigo commented Apr 1, 2025 •

edited by selanthiraiyan

Loading

wpmobilebot commented Apr 1, 2025 •

edited

Loading