[WOOMOB-1342] Booking details header/list item component #14649

AdamGrzybkowski · 2025-09-23T08:07:41Z

Description

This PR creates the top/header Composable component for the Booking details screen. It's also the same component that can be reused on the Booking list screen.

I will leave some extra comments below.

Steps to reproduce

Log in
Go to Settings -> Developer Options
Tap "Show booking details"
Verify the UI matches the designs

Testing information

Test with different font/display scaling and dark/light mode.

The tests that have been performed

The above

Images/gif

Light	Dark

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.

wpmobilebot · 2025-09-23T08:12:58Z

📲 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	`0695ecc`
	Direct Download	`woocommerce-wear-prototype-build-pr14649-0695ecc.apk`

AdamGrzybkowski · 2025-09-23T08:09:10Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/AttendanceStatusTag.kt

+) {
+    WCTag(
+        text = state.text(),
+        backgroundColor = colorResource(R.color.tagView_bg),


This color doesn't match the designs, but it's the one used for the same components in the app. I would assume the consistency is more important here, but let me know if I should change it.

Yes, good call! I would do the same.

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/AttendanceStatusTag.kt

AdamGrzybkowski · 2025-09-23T08:12:07Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

+        FlowRow(
+            modifier = Modifier.padding(top = 2.dp),
+        ) {


FlowRow because it's hard to predict the length of those two fields: booking name and the staff name. Each one could be quite long, so it's highly likely to exceed one line.

Alternatively, we could use the auto-size feature to decrease font size to fit in one line, not sure what the preference is. Any thoughts?

I’m not a fan of auto-size, as it causes inconsistent UI. I think FlowRow is a good solution.

AdamGrzybkowski · 2025-09-23T08:13:21Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/PaymentStatusTag.kt

+enum class BookingPaymentStatus {
+    UNPAID, PENDING_CONFIRMATION, CONFIRMED, PAID, CANCELLED, COMPLETE
+}


These are taken from this post pe5sF9-4Bq-p2. I believe, this is not a final list of possible states.

AdamGrzybkowski · 2025-09-23T08:14:47Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/PaymentStatusTag.kt

+) {
+    WCTag(
+        text = state.text(),
+        backgroundColor = colorResource(R.color.tagView_bg),


This should change depending on the state, but not all the states are defined yet.

Copilot

Pull Request Overview

This PR introduces a reusable booking details header/list item component for the WooCommerce Android app. It implements the UI components needed to display booking information including date, service name, staff, and status indicators.

Creates new Compose components for booking summary display with attendance and payment status tags
Adds string resources for booking payment and attendance statuses
Updates booking details screen to use the new summary component

Reviewed Changes

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

Show a summary per file

File	Description
strings.xml	Adds localized strings for booking payment and attendance status values
BookingDetailsViewState.kt	Adds booking summary data model with hardcoded placeholder data
BookingDetailsViewModel.kt	Minor formatting fix to trailing comma
BookingDetailsScreen.kt	Integrates new BookingSummary component into the details screen UI
PaymentStatusTag.kt	New component for displaying booking payment status with enum and styling
BookingSummary.kt	Main reusable component that displays booking date, service info, and status tags
AttendanceStatusTag.kt	New component for displaying booking attendance status with enum and styling

_{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

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

wpmobilebot · 2025-09-23T08:25:46Z

📲 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	`0695ecc`
	Direct Download	`woocommerce-prototype-build-pr14649-0695ecc.apk`

codecov-commenter · 2025-09-23T08:33:26Z

Codecov Report

❌ Patch coverage is 10.79137% with 124 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.49%. Comparing base (f2e35a9) to head (0695ecc).
⚠️ Report is 10 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...erce/android/ui/bookings/compose/BookingSummary.kt	9.09%	60 Missing ⚠️
...ce/android/ui/bookings/compose/PaymentStatusTag.kt	2.94%	33 Missing ⚠️
...android/ui/bookings/compose/AttendanceStatusTag.kt	3.12%	31 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #14649      +/-   ##
============================================
- Coverage     38.52%   38.49%   -0.04%     
- Complexity     9781     9783       +2     
============================================
  Files          2068     2071       +3     
  Lines        115548   115686     +138     
  Branches      15393    15434      +41     
============================================
+ Hits          44516    44531      +15     
- Misses        66896    67020     +124     
+ Partials       4136     4135       -1

☔ 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.

irfano

Good job! It looks great across various accessibility settings. I’ve added a few comments and would like to hear your thoughts on them before approving.

irfano · 2025-09-23T09:49:59Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/AttendanceStatusTag.kt

+) {
+    WCTag(
+        text = state.text(),
+        backgroundColor = colorResource(R.color.tagView_bg),


Yes, good call! I would do the same.

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/AttendanceStatusTag.kt

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

irfano · 2025-09-23T10:48:06Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

+        FlowRow(
+            modifier = Modifier.padding(top = 2.dp),
+        ) {


I’m not a fan of auto-size, as it causes inconsistent UI. I think FlowRow is a good solution.

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/PaymentStatusTag.kt

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

AdamGrzybkowski · 2025-09-23T12:28:47Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt

+        Text(
+            text = model.date,
+            color = MaterialTheme.colorScheme.onSurface,
+            style = MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Medium),
+        )


FYI: I've left a comment in Figma to ask about the styles. The ones in the design don't match the typography defined in the app, so it's a bit tricky to make it exactly the same without overriding individual values.

irfano

LGTM! 👍🏻 I’m approving, but not merging since you mentioned you’re still waiting on design feedback.

Create BookingSummary composable

24a5fd1

AdamGrzybkowski added this to the 23.4 milestone Sep 23, 2025

AdamGrzybkowski requested review from hichamboushaba, irfano and JorgeMucientes September 23, 2025 08:07

AdamGrzybkowski added the feature: CIAB Mobile Bookings MVP label Sep 23, 2025

AdamGrzybkowski commented Sep 23, 2025

View reviewed changes

AdamGrzybkowski requested a review from Copilot September 23, 2025 08:15

Copilot AI reviewed Sep 23, 2025

View reviewed changes

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

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingSummary.kt Show resolved Hide resolved

irfano self-assigned this Sep 23, 2025

irfano reviewed Sep 23, 2025

View reviewed changes

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

AdamGrzybkowski commented Sep 23, 2025

View reviewed changes

Rename BookingSummary.staff to customerName

0695ecc

AdamGrzybkowski requested a review from irfano September 23, 2025 13:16

irfano approved these changes Sep 23, 2025

View reviewed changes

[WOOMOB-1342] Booking details header/list item component #14649

Are you sure you want to change the base?

[WOOMOB-1342] Booking details header/list item component #14649

Uh oh!

Conversation

AdamGrzybkowski commented Sep 23, 2025

Description

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

Uh oh!

wpmobilebot commented Sep 23, 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!

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!

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 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

irfano left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

irfano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wpmobilebot commented Sep 23, 2025 •

edited

Loading

wpmobilebot commented Sep 23, 2025 •

edited

Loading

codecov-commenter commented Sep 23, 2025 •

edited

Loading