[WOOMOB-1346] Booking details - payment section #14666

AdamGrzybkowski · 2025-09-30T10:04:35Z

Description

This PR adds the payment section to the BookingDetailsScreen with a working View order button and not fully implemented mark as paid/mark as refunded buttons.

There are two extra commits that move the view model callback to the view state to limit the growing number of parameters - fc1ae2f and a4e6bd3.

Steps to reproduce

Use a CIAB site.
Manually install the bookings plugin from this ZIP file: p1758531103469849/1758101141.913349-slack-C03L1NF1EA3
You'll need to enable bookings v2 on your CIAB testing site. You can do that by installing the Code Snippets plugin to your site and adding the following PHP snippet: define( 'WC_BOOKINGS_NEXT_ENABLED', true );
Create some bookings.
Open the bookings tab
Tap on any booking
Scroll down and notice the payment section (data is hardcoded for now)
Tap on View order
Confirm the order details screen was opened (the ID is hardcoded, so don't expect real data yet)

Testing information

You can verify with different font/view scaling and light/dark theme.
Tapping on the Mark as paid/Mark as refunded should also update the temp in-memory state.

The tests that have been performed

The above.

Images/gif

Screen_recording_20250930_115742.mp4

I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Copilot

Pull Request Overview

This PR adds a payment section to the booking details screen with payment information display and action buttons for marking payments as paid/refunded and viewing the associated order.

Key changes:

Added payment section UI component with payment breakdown (service, tax, discount, total)
Implemented "View order" navigation functionality
Added "Mark as paid" and "Mark as refunded" buttons with state management

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
BookingPaymentSection.kt	New composable component for displaying payment details and action buttons
BookingDetailsViewState.kt	Added payment model and callback functions for payment actions
BookingDetailsViewModel.kt	Implemented payment status update logic and callback handling
BookingDetailsScreen.kt	Integrated payment section into booking details UI
BookingDetailsFragment.kt	Added navigation to order details screen
nav_graph_bookings.xml	Added navigation action to order details
strings.xml	Added payment section related string resources
BookingDetailsViewModelTest.kt	Updated test to use new state structure

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

...merce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewState.kt

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

wpmobilebot · 2025-09-30T10:10:21Z

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

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`874459f`
	Direct Download	`woocommerce-wear-prototype-build-pr14666-874459f.apk`

AdamGrzybkowski · 2025-09-30T10:09:35Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+            if (paymentStatus == BookingPaymentStatus.PAID) {
+                WCOutlinedButton(
+                    onClick = onMarkAsRefunded,
+                    colors = ButtonDefaults.outlinedButtonColors(
+                        contentColor = MaterialTheme.colorScheme.onSurface
+                    ),
+                    text = stringResource(id = R.string.booking_payment_mark_as_refunded),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp)
+                )
+            } else {
+                WCColoredButton(
+                    onClick = onMarkAsPaid,
+                    text = stringResource(id = R.string.booking_payment_mark_as_paid),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp)
+                )
+            }
+            WCOutlinedButton(
+                onClick = onViewOrder,
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = MaterialTheme.colorScheme.onSurface
+                ),
+                text = stringResource(id = R.string.booking_payment_view_order),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp)
+            )


Those buttons are in a Column spread by 16.dp. The thing is, it appears as if there's more space because the WCButton has extra space around to ensure the min height of 48.dp.

I've looked at other screens, and this is how the buttons in a column look, so I kept it like this. If you think we should align with the design, we could:

Remove the spacedBy from the column and handle spacing between children individually.

Set the min height to 48.dp for the buttons and keep the spacedBy

The above will align with the design, but will misalign with some other places in the app with two buttons in a column.

I was in the same situation before. 😄 When adding buttons in RemoveShipmentBottomSheet, I set 8.dp between the buttons, which results in a total of 16.dp.
I don’t have a strong opinion, but my preference would be to do the same as I did in RemoveShipmentBottomSheet and keep it aligned with the design. I’ll leave the decision to you.

AdamGrzybkowski · 2025-09-30T10:10:08Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+                thickness = 0.5.dp,
+                modifier = Modifier.padding(start = 16.dp)
+            )
+            if (paymentStatus == BookingPaymentStatus.PAID) {


Not 100% this is the correct logic. Should we also show the Mark as refunded if the booking status is completed?

I asked about it in Slack (p1759326540162229-slack-C09FHQNQERG). If we don’t get a reply, we can add a TODO comment to update this logic later and merge the PR now.

wpmobilebot · 2025-09-30T10:23:41Z

📲 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
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`874459f`
	Direct Download	`woocommerce-prototype-build-pr14666-874459f.apk`

codecov-commenter · 2025-09-30T10:39:15Z

Codecov Report

❌ Patch coverage is 15.78947% with 112 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.39%. Comparing base (d666a23) to head (874459f).
⚠️ Report is 10 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...droid/ui/bookings/compose/BookingPaymentSection.kt	4.67%	102 Missing ⚠️
...oid/ui/bookings/details/BookingDetailsViewModel.kt	37.50%	10 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #14666      +/-   ##
============================================
- Coverage     38.41%   38.39%   -0.03%     
  Complexity     9823     9823              
============================================
  Files          2090     2091       +1     
  Lines        116568   116700     +132     
  Branches      15592    15611      +19     
============================================
+ Hits          44785    44803      +18     
- Misses        67625    67739     +114     
  Partials       4158     4158

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

dangermattic · 2025-10-01T10:43:17Z

	1 Warning
⚠️	This PR is assigned to the milestone 23.4. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

irfano

LGTM! I don't have any blocking feedback, so I'm approving, but please review my comments before merging. 🚀

irfano · 2025-10-01T12:54:22Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+data class BookingPaymentDetailsModel(
+    val service: String,
+    val tax: String,
+    val discount: String,
+    val total: String
+)


Suggestion: I think it would be better approach to have this BookingPaymentDetailsModel in the view state file, which in this case is BookingDetailsViewState.kt. Another suggestion is rename it to BookingPaymentDetailsUiState to better reflect its responsibility.

If we do that, we should also move all other models from other sections. I'm not saying no, but I think it would be better to be consistent and this new section follows the previous ones.

irfano · 2025-10-01T13:02:24Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            modifier = Modifier
+                .background(color = MaterialTheme.colorScheme.surfaceContainer)
+                .padding(vertical = 16.dp)


We can set 16.dp here for horizontal as well. I see that all of this Column's children have .padding(horizontal = 16.dp). So, we can set it once here instead of repeating it four times below.

We can't because the HorizontalDivider only has the startPadding.

irfano · 2025-10-01T13:20:50Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+            if (paymentStatus == BookingPaymentStatus.PAID) {
+                WCOutlinedButton(
+                    onClick = onMarkAsRefunded,
+                    colors = ButtonDefaults.outlinedButtonColors(
+                        contentColor = MaterialTheme.colorScheme.onSurface
+                    ),
+                    text = stringResource(id = R.string.booking_payment_mark_as_refunded),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp)
+                )
+            } else {
+                WCColoredButton(
+                    onClick = onMarkAsPaid,
+                    text = stringResource(id = R.string.booking_payment_mark_as_paid),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp)
+                )
+            }
+            WCOutlinedButton(
+                onClick = onViewOrder,
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = MaterialTheme.colorScheme.onSurface
+                ),
+                text = stringResource(id = R.string.booking_payment_view_order),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp)
+            )


I was in the same situation before. 😄 When adding buttons in RemoveShipmentBottomSheet, I set 8.dp between the buttons, which results in a total of 16.dp.
I don’t have a strong opinion, but my preference would be to do the same as I did in RemoveShipmentBottomSheet and keep it aligned with the design. I’ll leave the decision to you.

irfano · 2025-10-01T13:50:22Z

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt

+                thickness = 0.5.dp,
+                modifier = Modifier.padding(start = 16.dp)
+            )
+            if (paymentStatus == BookingPaymentStatus.PAID) {


I asked about it in Slack (p1759326540162229-slack-C09FHQNQERG). If we don’t get a reply, we can add a TODO comment to update this logic later and merge the PR now.

AdamGrzybkowski added this to the 23.4 milestone Sep 30, 2025

AdamGrzybkowski requested review from hichamboushaba, irfano, JorgeMucientes and Copilot September 30, 2025 10:04

AdamGrzybkowski added New Feature feature: CIAB Mobile Bookings MVP labels Sep 30, 2025

Copilot AI reviewed Sep 30, 2025

View reviewed changes

...merce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewState.kt Show resolved Hide resolved

...ommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingPaymentSection.kt Outdated Show resolved Hide resolved

AdamGrzybkowski commented Sep 30, 2025

View reviewed changes

AdamGrzybkowski added 6 commits October 1, 2025 12:32

Introduce the payment section in the booking details screen

885192d

Show different buttons states in payment status section

47d8a86

Open order from the payment section

f535694

Handle the onMarkAsPaid and onMarkAsRefunded callbacks

4407afe

Move onCancelBooking to BookingDetailsViewState

9acb842

Move onAttendanceStatusSelected to BookingDetailsViewState

2c99833

AdamGrzybkowski force-pushed the issue/WOOMOB-1346_payment_section branch from a4e6bd3 to bdcebd8 Compare October 1, 2025 10:42

Adjust code after rebasing with trunk

874459f

AdamGrzybkowski force-pushed the issue/WOOMOB-1346_payment_section branch from bdcebd8 to 874459f Compare October 1, 2025 10:43

irfano self-assigned this Oct 1, 2025

irfano approved these changes Oct 1, 2025

View reviewed changes

[WOOMOB-1346] Booking details - payment section #14666

Are you sure you want to change the base?

[WOOMOB-1346] Booking details - payment section #14666

Conversation

AdamGrzybkowski commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

wpmobilebot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AdamGrzybkowski Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dangermattic commented Oct 1, 2025

Uh oh!

irfano left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AdamGrzybkowski commented Sep 30, 2025 •

edited

Loading

wpmobilebot commented Sep 30, 2025 •

edited

Loading

AdamGrzybkowski Sep 30, 2025 •

edited

Loading

wpmobilebot commented Sep 30, 2025 •

edited

Loading

codecov-commenter commented Sep 30, 2025 •

edited

Loading