Shipping Labels: Show tabs in creation form

[itsmeichigo]

Closes: #15309

Description

This PR updates the logic on the shipping labels creation form to support showing shipments in tabs. Changes include:

• Extract the main form from the creation form to a separate view to retain the states of selected packages and customs forms.
• Add a new tab bar on the top for shipments.
• Update shipments to reflect changes from the split shipment screen.

Notes:

• Due to the required refactoring and updates to unit tests, the size of this PR is quite large (half of the changes are unit tests).
• If you purchase a label for one shipment, opening the creation form again by tapping Create Shipping Label will not display the purchased label. This should be done in a separate task [Split shipments] Display all purchased labels for different shipments #15487.
• Customs form is not yet updated to support split shipments - I've logged a separate task in [Split shipment] Update customs form to include only shipment items #15485.
• There might be regression issues due to the size of this PR. If the issues are outstanding, we can log separate issues to fix later.

Steps to reproduce

• Log in to a test store with WooShipping set up.
• Open a completed order with more than one physical item of different quantities.
• Tap Create shipping label > Split shipments > move items into separate shipments, and tap Done.
• Confirm that the creation form is displayed with separate tabs.
• Select packages and rates for the tabs and confirm that the states are separated.
• Confirm that the Purchase button state is available only when all data is input.
• Tap Purchase and confirm that the view state is correct for both successful and failed cases.
• Navigate back and tap View purchased shipping label. Confirm that the form displays the purchased label correctly.

Testing information

Confirm the test cases above with simulator iPhone 16 Pro iOS 18.2.

Screenshots

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

[dangermattic]

	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

[wpmobilebot]

📲 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	29395
	Version	PR #15483
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	629f331
	Installation URL	0kpehl66sqsmo

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

[wpmobilebot]

Version 22.1 has now entered code-freeze, so the milestone of this PR has been updated to 22.2.

[irfano]

Great effort here! Thanks a lot for driving this feature ahead of Android, @itsmeichigo .
I reviewed the code but didn't find any specific feedback to share. (Excuse my iOS skills!) Below are my notes from testing:

• When I entered the split shipments screen, only the “Select All” option and a disabled “Done” button were visible. I couldn’t navigate back, but I managed to do so using the ESC key on my keyboard. I haven't seen the "Done" button in a disabled state in the Figma designs, so I believe it should always be enabled.

• As you can see in the screenshots below, the bottom sheets display the total number of products, while the shipment cost section displays the cost of the selected shipment. I think the other part of the bottom sheet should also reflect information specific to the selected shipment.

• We should disable modifying the purchased shipment.

• I opened the split shipment screen, switched tabs, and navigated back using the ESC key. After that, I encountered the inconsistency shown below.

[JorgeMucientes]

Thank you for reviewing this @irfano, I've added @toupper as a reviewer to see if he can lend a hand checking the iOS code 🙏🏼

[toupper]

Thanks for the ping @JorgeMucientes! I checked the code and it looks good to me, so I will approve it, but it would idea to check @irfano feedback above 👍

[toupper]

LGTM!

[irfano]

Addition to my previous feedback:

If there are three or more shipments, and one is removed, we need to know which shipment to send the items to. (pe5pgL-5H3-p2)

• According to the comment above, we should show the “Remove shipment” bottom sheet only if there are three or more shipments. Currently, we are showing it even when there are only two shipments.

• When creating a new shipment by selecting all items, it results in an issue. See the screenshot below:

To address this issue, we should hide the “New Shipment” button.

[itsmeichigo]

Thank you @toupper for checking the code! And thank you @irfano for doing the manual tests and sharing great feedback 🙇

When I entered the split shipments screen, only the “Select All” option and a disabled “Done” button were visible. I couldn’t navigate back, but I managed to do so using the ESC key on my keyboard. I haven't seen the "Done" button in a disabled state in the Figma designs, so I believe it should always be enabled.

Previously, we enabled the Done button, but this would trigger a remote update for the shipments. We decided to only enable it when there are actual changes, but we're still waiting for design input on how to replace the Select All button with Cancel to enable dismissal (more on the thread here p1743465824357759-slack-C03L1NF1EA3). For now, I'll wait for Wagner's response before updating the buttons in a separate PR.

As you can see in the screenshots below, the bottom sheets display the total number of products, while the shipment cost section displays the cost of the selected shipment. I think the other part of the bottom sheet should also reflect information specific to the selected shipment.

I was confused about this when working on this PR too. I checked with the web and saw that on the side bar, the order items are not changed when switching between shipments. I suppose they consider this panel the details of the order instead of shipments. What do you think about this?

We should disable modifying the purchased shipment.

If you mean the shipment tab doesn't show the purchased label, that's a known issue as stated in the PR description and should be handled separately for #15487.

I opened the split shipment screen, switched tabs, and navigated back using the ESC key. After that, I encountered the inconsistency shown below.

Navigating back using ESC key is a hack on the simulator, and I don't think there's an equivalent to that on a physical device. I'll note down this issue to check after updating the buttons on the splitting shipments screen as mentioned above.

For the rest of the issues, they were not changed in this PR, so I'll create a separate issue for updates on the split shipment screen.

Please feel free to leave any additional comments about my response here. For now, I'll merge this PR and will add improvements in subsequent PRs.

[irfano]

I was confused about this when working on this PR too. I checked with the web and saw that on the side bar, the order items are not changed when switching between shipments. I suppose they consider this panel the details of the order instead of shipments. What do you think about this?

Hmm, okay. I checked the web version too. When switching shipments, the "Order details" always show general order information, while the “Shipment details” section updates according to the selected shipment. That matches the behavior in this PR, so let’s keep it as is. I take back my earlier feedback.

If you mean the shipment tab doesn't show the purchased label, that's a known issue as stated in the PR description and should be handled separately for #15487.

I’m not sure if it’s related, but this is what I meant: On this screen, Shipment 1 is already purchased, but I can still move an item from Shipment 2 to Shipment 1, which shouldn’t be allowed.

[itsmeichigo]

I’m not sure if it’s related, but this is what I meant: On this screen, Shipment 1 is already purchased, but I can still move an item from Shipment 2 to Shipment 1, which shouldn’t be allowed.

Good catch! I'll log a separate issue for this.