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	29239
	Version	PR #15483
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	bb09982
	Installation URL	408ej5h8pq80g

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.