Shipping Labels: Show existing payment methods for selection

[itsmeichigo]

Closes WOOMOB-434

Description

This PR adds UI updates to show existing payment methods for a store in the shipping label purchase flow. Button actions will be handle in subsequent PRs.

Testing steps

1. Log in to a test store set up with the WooShipping plugin.
2. Navigate to the Orders tab and select a paid order with physical products and unfulfilled shipments.
3. If your store already has no payment methods set up, put a breakpoint in Proxyman for responses of API request path path=/wcshipping/v1/account/setting. When this breakpoint stops, add the payment methods to the response.
4. Select Create Shipping Label > Expand Shipment details bottom sheet > Select payment method.
5. Confirm that:

• The presented sheet contains all existing credit/debit cards added to the test store.
• The currently selected payment method is pre-selected.
• The email receipt toggle state matches the current settings.
• The Use this card button is only enabled either when a new payment method is selected or when the email receipt toggle is switched.
• The sheet still looks good if there are no existing payment methods.

Testing information

Tested and confirmed using simulator iPhone 16 iOS 18.4 in light & dark modes with different font sizes. Both portrait and landscape modes look good.

Screenshots

---

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

[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	30205
	Version	PR #15679
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	5651dfe
	Installation URL	4laedk8q8hj40

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

[itsmeichigo]

This view is inconsistent in the design. I'm using the style used in both the design for existing payment methods and the one for shop managers.

[RafaelKayumov]

LGTM. Tested - works as described. Left a couple of questions.

Another question. Tested the edge case with many payment methods. In case if the selected method has a distant position in a long list, it won't be visible right after presenting the bottom sheet. Should we address that and always show the selected method on top of the list despite its original position? Or may me scroll to the selected method on pre-selection?

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-03.at.13.00.03.mp4

[RafaelKayumov]

This view is inconsistent in the design. I'm using the style used in both the design for existing payment methods and the one for shop managers.

Were you mentioning the inconsistency in note appearance between empty / non empty states in designs?
NIT: The note in the design contains a user first name + last name and the @ username wrapped in angle brackets.

[RafaelKayumov]

NIT: the note and padding look a bit different for empty state comparing to design:

[itsmeichigo]

Were you mentioning the inconsistency in note appearance between empty / non empty states in designs?

Yes, I mean details like the (i) icon and the text color. I decided to use unify the styles for simplicity.

NIT: The note in the design contains a user first name + last name and the @ username wrapped in angle brackets.

NIT: the note and padding look a bit different for empty state comparing to design:

I'll update these as part of #15705

[itsmeichigo]

Another question. Tested the edge case with many payment methods. In case if the selected method has a distant position in a long list, it won't be visible right after presenting the bottom sheet. Should we address that and always show the selected method on top of the list despite its original position? Or may me scroll to the selected method on pre-selection?

Good idea. I added the sorting for the list in #15705. Since this PR is the base of 2 other PRs, I'll merge this for now.