Shipping Labels: Support adding new payment method on web view

[itsmeichigo]

Closes WOOMOB-433
Also closes WOOMOB-493

Description

This PR adds a new web view to support adding new payment methods for the shipping label purchase flow.

Tracking for the states of the payment step has also been added following the tracking plan in pe5sF9-4hO-p2.

Tesing steps

Since adding test payment methods is not available on mobile web view (see pfOicC-4C-p2#comment-580), it's more straightforward to test with real payment methods for this PR. You can do this by setting up a test site with Jurassic Ninja and install the Woo Shipping plugin without setting up the testing environment for the plugin. Ensure to connect the site's Jetpack with your WPCom account to enable adding payment methods later. Remove any existing payment methods before testing.

1. Log in as the owner of your test store.
2. Navigate to the Orders tab and select a paid order with physical products and unfulfilled shipments.
3. Select Create Shipping Label > expand the Shipment Details bottom sheet > Add payment method. Confirm that wcs_payment_step is tracked in Xcode console with state: started.
4. Select New credit or debit card and confirm that wcs_payment_step is tracked with state: add_payment_method_button_tapped. Confirm that a web view is presented for adding a new payment method.
5. Enter details for a real credit/debit card. You can use a Ramp card for this, which will be set as a payment method for your WPCom account.
6. After submitting the details, the web view should be dismissed and the shipping label account settings should be reloaded. If the reload succeeds, confirm that wcs_payment_step is tracked with state: state: payment_method_added. If this is the first payment method added, confirm that the payment methods sheet is dismissed automatically and the new card is displayed in the Shipment Details sheet.
7. Open the payment method screen again to add another payment method.
8. Tap New credit or debit card and confirm that wcs_payment_step is tracked with state: add_payment_method_button_tapped. The same web view for adding payment method should be displayed.
9. Add details for another card and submit. The web view should be dismissed after submitting, and the payment method list should be reloaded with the new card. Confirm that wcs_payment_step is tracked with state: state: payment_method_added.
10. Select the new payment method and confirm the selection. Verify that wcs_payment_step is tracked with state: payment_method_selected.
11. Confirm that the payment method screen is dismissed and the Shipment details sheet is updated with the new payment method.

Testing error reloading payment methods:

1. In Proxyman, put a breakpoint for the response of the GET wcshipping/v1/account/settings endpoint.
2. Repeat steps 1-4 in the previous test case.
3. Tap the Back button on the web view.
4. Confirm that the web view is dismissed and account settings are reloaded. Mock a failure for the request with Proxyman.
5. Confirm that an alert is displayed with a button to retry reloading account settings.

Testing information

Tested and confirmed all the above tests with simulator iPhone 16 iOS 18.4.

Screenshots

Presenting web view:

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-04.at.15.50.44.mp4

First payment method added:

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-04.at.16.00.49.mp4

Non-first payment method added:

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-04.at.16.20.14.mp4

Error reloading payment methods:

---

• 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	30255
	Version	PR #15700
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	fd4243c
	Installation URL	45dl9t6qekbvg

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

[mokagio]

@itsmeichigo sorry for the delay you are experiencing in this PR...

I pushed #15702 with my progress in fixing the Sourcery configuration. From one of the commits:

WooFoundation

When updating WooFoundation to be a Swift package, see #15651, I neglected updating the Codegen/Sourcery configuration.

In the migration from framework to package, we lost the Xcode project file. Sourcery provides a package configuration option, but I was not able to make it work.

The only option I could find was to list sources.

The side effect of this change has been that the generated file lost the module name.

Networking

It seems that after migrating the Networking project to synchronized folders, #15653, Sourcery could no longer access the sources.

The only fix I could find was to move from passing a project to passing a straight sources array.

Here, too, the side effect has been that the generated file lost the module name.

Unfortunately, the missing module is resulting in name clashes. I found a way to avoid some, but it results in a different issue.

🙄

I might need to rethink the whole fakes and copiable implementation to cope with this.

In the meantime, I'm afraid my best suggestion to unblock this is to manually edit the Sourcery files based on what it's been generated in #15702

diff --git a/Fakes/Fakes/Networking.generated.swift b/Fakes/Fakes/Networking.generated.swift
index c225813701..a530f67b8c 100644
--- a/Fakes/Fakes/Networking.generated.swift
+++ b/Fakes/Fakes/Networking.generated.swift
@@ -1871,7 +1871,8 @@ extension Networking.ShippingLabelAccountSettings {
             selectedPaymentMethodID: .fake(),
             isEmailReceiptsEnabled: .fake(),
             paperSize: .fake(),
-            lastSelectedPackageID: .fake()
+            lastSelectedPackageID: .fake(),
+            addPaymentMethodURL: .fake()
         )
     }
 }

[itsmeichigo]

Thank you @mokagio for the suggestion! I'll follow that solution to unblock this PR 🙇

[mokagio]

As CI reports, we are now failing with

❌ /opt/ci/builds/builder/automattic/woocommerce-ios/Yosemite/YosemiteTests/Stores/ShippingLabelStoreTests.swift:1023:84:
missing argument for parameter 'addPaymentMethodURL' in call
 
 | lastSelectedPackageID: "small_flat_box")

[mokagio]

@itsmeichigo given I couldn't sort out Sourcery yesterday, the least I could do was getting the build to green today. Hope this help as a temporary workaround...

[RafaelKayumov]

LGTM. Works as described.

🔵 Tracked wcs_payment_step, properties: [is_wpcom_store: false, blog_id: -1, plan: , site_url: {…}, was_ecommerce_trial: false, state: started, store_id: {…}]
🔵 Tracked wcs_payment_step, properties: [was_ecommerce_trial: false, state: add_payment_method_button_tapped, plan: , blog_id: -1, site_url: {…}, store_id: {…}, is_wpcom_store: false]
🔵 Tracked wcs_payment_step, properties: [state: payment_method_added, was_ecommerce_trial: false, is_wpcom_store: false, site_url: {…}, blog_id: -1, store_id: {…}, plan: ]
🔵 Tracked wcs_payment_step, properties: [blog_id: -1, is_wpcom_store: false, site_url: {…}, state: started, was_ecommerce_trial: false, plan: , store_id: {…}]

After re opening web view to add another card:
🔵 Tracked wcs_payment_step, properties: [store_id: {…}, plan: , state: add_payment_method_button_tapped, site_url: {…}, was_ecommerce_trial: false, is_wpcom_store: false, blog_id: -1]

After adding another card
🔵 Tracked wcs_payment_step, properties: [was_ecommerce_trial: false, store_id: {…}, site_url: {…}, is_wpcom_store: false, state: payment_method_added, blog_id: -1, plan: ]

After selecting the second card as a payment method
🔵 Tracked wcs_payment_step, properties: [store_id: {…}, state: payment_method_selected, blog_id: -1, site_url: {…}, is_wpcom_store: false, plan: , was_ecommerce_trial: false]