[iPad] - Collect Payment for custom payment stuck in loading state

[jostnes]

Describe the bug When collecting a custom payment from the Payments screen, the screen is stuck in a loading state and everything else on the screen frozen except for the loading icons. I tried creating an order from the Orders screen and was able to collect payment from the order screen (the first part of the screen recording below). I also tried the same flow on an iPhone and was able to complete the order and payment.

The only error logged on XCode during the flow is: 2024-07-17 16:49:08.390729+0800 WooCommerce[697:32755] Error: string input is not a number: but I see the same error when collecting payment from the Orders screen and that flow works without issue.

To Reproduce Steps to reproduce the behavior:

1. Go to Menu > Payments > Collect Payment
2. Add a custom amount and tap on "Add Custom Amount"
3. Wait for order to recalculate and tap on "Collect Payment"
4. See that payment is stuck in a loading state

Screenshots

https://github.com/user-attachments/assets/63d885a9-4ca4-41b0-a526-fd068dcafbc4

Expected behavior Collect Payment should work and continue to the next screen.

Isolating the problem (mark completed items with an [x]):

• [x] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• [x] This bug happens with a default WordPress theme active, or Storefront.
• [x] I can reproduce this bug consistently using the steps above.

Mobile Environment Please include:

• Device: iPad Air 5th Gen
• iOS version: iPadOS 16.4.1
• WooCommerce iOS version: latest trunk, and v19.5

WordPress Environment

``` Copy and paste the system status report from **WooCommerce > System Status** in WordPress admin. ```

[dangermattic]

Thanks for reporting! 👍

[iamgabrielma]

I'm not sure if could be related (it still works on my end), but when I attempt this flow I see the following in the console:

2024-07-18 10:02:30.040774+0700 WooCommerce[53517:4790122] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x6000019d0640 h=-&- v=--& SwiftUI.UIKitNavigationBar:0x12c3f1390.minY == 0   (active, names: '|':UILayoutContainerView:0x137f6e580 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x6000019d1590 h=-&- v=--& SwiftUI.UIKitNavigationBar:0x12c3f1390.height == 56   (active)>",
    "<NSLayoutConstraint:0x6000019bb8e0 V:[SwiftUI.UIKitNavigationBar:0x12c3f1390]-(0)-[UIFocusContainerGuide:0x600000608780'UINavigationControllerContentFocusContainerGuide']   (active)>",
    "<NSLayoutConstraint:0x6000019ba580 UIFocusContainerGuide:0x600000608780'UINavigationControllerContentFocusContainerGuide'.bottom == UILayoutContainerView:0x137f6e580.bottom   (active)>",
    "<NSLayoutConstraint:0x6000019c5090 'UIView-Encapsulated-Layout-Height' UILayoutContainerView:0x137f6e580.height == 0   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000019bb8e0 V:[SwiftUI.UIKitNavigationBar:0x12c3f1390]-(0)-[UIFocusContainerGuide:0x600000608780'UINavigationControllerContentFocusContainerGuide']   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

I don't think this could cause the freeze you're seeing, but something might be off with the views/navigation when we move the merchant from the menu > payments to order creation.

I'm curious to see if could also be related to the tablet support improvements. Does this happen if you use split view in a tablet, so the WooCommerce app just show like it would on a phone? Eg:

[jostnes]

I'm curious to see if could also be related to the tablet support improvements. Does this happen if you use split view in a tablet, so the WooCommerce app just show like it would on a phone?

I just tried using split view on the iPad, and the same issue still happens. I tested a few different stores (but under the same account) in case of a store setup issue, but the behavior seems consistent across all stores.

[iamgabrielma]

Thanks! Looping @soundsokay and @bozidarsevo for some more testing here. As mentioned in P2 I suspect is because of the "simple payments to order creation" migration project (context: pdcxQM-3PY-p2#comment-3071 ), but since I cannot replicate it on my end I cannot narrow it down much further.

[bozidarsevo]

The only error logged on XCode during the flow is: 2024-07-17 16:49:08.390729+0800 WooCommerce[697:32755] Error: string input is not a number: but I see the same error when collecting payment from the Orders screen and that flow works without issue.

If we search in the project for "string input is not a number" that is part of convertToDecimal function in CurrencyFormatter. Maybe you can try putting a breakpoint there and see the stack of function calls and try to figure our what caused the issue and what value is being passed around

[bozidarsevo]

pdcxQM-3Zj-p2

[joshheald]

This appears to be related to the nested navigationDestination in InPersonPaymentsMenu.

If I move the block for the payment methods screen out of the OrderFormPresentationWrapper modifiers list, and to the overall menu modifiers, it works. The issue then is that it doesn't correctly clean up after the payment is complete.