[Shipping Labels] Split shipment initial UI

[selanthiraiyan]

Part of: #15305

Description

Adds the initial UI for the split shipments screen.

Design

Internal - bsLNrhmi2xQZB4C0TzjmHB-fi-942_43007

Changes

• New selectable row and card SwiftUI views to have selectable and collapsible shipment items views.
• Lists the shipment items from the order in to a collapsible list.
• Unit tests.

The changes in this PR focus only on the UI. The selection logic will be added/altered in future PRs.

Steps to reproduce

1. Log in to a test store with the Woo Shipping plugin set up.
2. Create an order with multiple products and different quantities for each product.
3. Enter a valid shipping address for the order.
4. Open the order detail page.
5. Tap "Create shipping label".
6. Tap "Split shipments".
7. Validate that the screen matches the given design.
8. Select, expand and collapse the shipment items. It should look as per the design. Internal - bsLNrhmi2xQZB4C0TzjmHB-fi-942_43007

Testing information

Validated that the expansion, collapse, and selection steps look as per the design.

Screenshots

Screenshots

Light	Dark

Screen recording

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-23.at.16.14.05.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 by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS
	Build Number	pr15397-2c64d09
	Version	22.0
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	2c64d09
	App Center Build	WooCommerce - Prototype Builds #13383

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

[itsmeichigo]

I tested on simulator iPhone 16 Pro iOS 18.2 and confirmed that the UI looks good in general. I left some nit-picking in the comments, but I'm approving the PR to avoid blocking development.

[itsmeichigo]

Nit: It looks to me that the badge is missing a white border around it when the label is longer.

[selanthiraiyan]

Good catch. I see that this applies to the order creation screen as well. I logged an issue to keep track. #15402

[itsmeichigo]

I think this can be quickly fixed by adding stroke to the background view of the BadgeView with style roundedRectangle. But fixing it in a separate PR sounds good to me too.

[selanthiraiyan]

Thanks for the review and helpful suggestions, @itsmeichigo!

• I have pushed some changes to address your comments.
• I logged [Products] Thumbnail image is blurry in some screens #15401 and [Products] Quantity badge count is missing a white border around it when the label is longer #15402 to keep track of the issues that apply to the order creation screen as well.

Please take another look at the PR when you can. Thanks! 🙇

[itsmeichigo]

Thanks for the updates! The changes look good to me 👍

I left a comment in a previous thread about fixing the missing border for the badge, but it's ok to fix it later too.

I also found that Split shipment button is also available in an existing label, which I missed in a previous PR. Please feel free to fix it in a subsequent PR.

[selanthiraiyan]

I left a comment in a previous thread about fixing the missing border for the badge, but it's ok to fix it later too.

Thanks for the solution! Considering that this needs to be fixed on other screens with the badge as well, I will fix this in a separate PR.

I also found that Split shipment button is also available in an existing label, which I missed in a previous PR. Please feel free to fix it in a subsequent PR.

Good catch. Logged a subtask in #15305