[Payment Method Improvements] The Payment Details section should display two text fields

[backwardstruck]

Closes:

Closes: #11553

Description

This pull request introduces improvements to the Change Due Calculator component. The primary focus of these changes is to enhance user experience.

FYI @soundsokay I think the UI could use more work but I'm not sure how much to copy iOS versus other screens in the Android app. Open to suggestions!

The changes include:

• UI Integration of "Cash Received" and "Change Due" fields
• Mandatory Passing of orderId
• Refined Code Structure
• Unit test for the Change Due Calculator without an orderId to verify that the system appropriately blocks or redirects the user.

This update intends to align the UI components with their iOS counterparts.

Testing Instructions

0. Turn on the 'OTHER_PAYMENT_METHODS' feature flag.
1. Navigate to Change Due Calculator via Cash Payments option
2. Confirm Visibility and Correctness of New Fields:
   • "Cash Received" is displayed with a default value.
   • "Change Due" starts at $0.00

Images/GIF

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

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Flavor	Jalapeno
	Build Type	Debug
	Commit	c700fa7
	Direct Download	woocommerce-prototype-build-pr11555-c700fa7.apk

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.33%. Comparing base (dd01fde) to head (c700fa7).

Additional details and impacted files

@@            Coverage Diff            @@
##              trunk   #11555   +/-   ##
=========================================
  Coverage     40.33%   40.33%           
- Complexity     5200     5201    +1     
=========================================
  Files          1087     1087           
  Lines         63224    63224           
  Branches       8667     8666    -1     
=========================================
+ Hits          25499    25501    +2     
+ Misses        35430    35429    -1     
+ Partials       2295     2294    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[soundsokay]

the UI could use more work but I'm not sure how much to copy #11525 versus other screens in the Android app.

Recommend preferring Android platform convention over exactly matching the iOS implementation.

[JorgeMucientes]

Nothing against this approach of passing the state and any navigation callback to the Composable function. Especially because, in this case, the screen seems to be simple in terms of navigation. But in case you want to check the pattern we usually use for navigation when using composable UI you might want to check screens like StoreOnboardingFragment or GetPaidFragment. I'd say most of the screens where we use compose follow the pattern:

• Passing the viewModel to the root composable function
• Handle navigation events in the host fragment by observing events triggered from the ViewModel.

Another option is to handle navigation directly from composable code, which is something we started doing recently like in DashboardReviewsCard.

Feel free to adopt whatever you think is best for this case. Just sharing a couple of alternatives we are currently using in the codebase 🙂

[backwardstruck]

Great suggestion. I will do that. Just need to pick one to implement. Thanks for these options.

[JorgeMucientes]

Nice job @backwardstruck 🏅
I'm pre-approving the PR as I don't want to block the merging, and these changes are hidden under a feature flag. I found an issue that I think should be addressed, which is the duplicated toolbar thing. I also left a couple suggestion that you can ignore. Let me know your thoughts on it 🙂

[backwardstruck]

Nice job @backwardstruck 🏅 I'm pre-approving the PR as I don't want to block the merging, and these changes are hidden under a feature flag. I found an issue that I think should be addressed, which is the duplicated toolbar thing. I also left a couple suggestion that you can ignore. Let me know your thoughts on it 🙂

This is super helpful. Indeed I missed some things. I will address all the points in the PR which is already targeting this one: #11569