Skip to content

[CIAB:POS] Add team member avatar to POS bookings list #15381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kidinov merged 5 commits into from
Feb 23, 2026
+189 −32
Merged

[CIAB:POS] Add team member avatar to POS bookings list #15381

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6be178c
Add team member avatar to POS bookings list items
kidinov Feb 18, 2026
f980b8b
Merge trunk into woomob-2222-pos-bookings-team-member-name-not-shown-…
kidinov Feb 23, 2026
a7c32b9
Add tests for mapTeamMember in WooPosBookingViewStateMapper
kidinov Feb 23, 2026
235002e
Remove accidentally committed plans directory
kidinov Feb 23, 2026
a3ebc99
Fix loadBookings verify to match actual filter arguments
kidinov Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions ...rc/main/kotlin/com/woocommerce/android/ui/woopos/bookings/WooPosBookingViewStateMapper.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import com.woocommerce.android.util.toHumanReadableFormat
import com.woocommerce.android.viewmodel.ResourceProvider
import org.wordpress.android.fluxc.network.rest.wpcom.wc.bookings.BookingCustomerInfo
import org.wordpress.android.fluxc.persistence.entity.BookingEntity
import org.wordpress.android.fluxc.persistence.entity.BookingResourceEntity
import org.wordpress.android.fluxc.persistence.entity.isAttendanceStatusEditable
import org.wordpress.android.fluxc.persistence.entity.isCancellable
import java.math.BigDecimal
Expand All @@ -25,6 +26,7 @@ class WooPosBookingViewStateMapper @Inject constructor(
suspend fun mapToItemViewState(
booking: BookingEntity,
selectedBookingId: Long?,
resource: BookingResourceEntity?,
): WooPosBookingsState.BookingItemViewState {
val bookingName = booking.order.productInfo?.name ?: "#${booking.id.value}"
val customerName = buildCustomerName(booking.order.customerInfo)
Expand All @@ -46,6 +48,7 @@ class WooPosBookingViewStateMapper @Inject constructor(
paymentStatus = paymentStatus,
isCancelled = booking.status == BookingEntity.Status.Cancelled,
attendanceBadge = mapAttendanceBadge(booking.attendanceStatus),
teamMember = resource?.let { mapTeamMember(it) },
)
}

Expand Down Expand Up @@ -206,4 +209,18 @@ class WooPosBookingViewStateMapper @Inject constructor(
is BookingEntity.AttendanceStatus.Unknown -> WooPosBookingsState.AttendanceState.UNATTENDED
}
}

private fun mapTeamMember(
Copy link
Contributor

@malinajirka malinajirka Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔍 Might be worth covering with tests.

Copy link
Contributor Author

@kidinov kidinov Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a7c32b9 Done!

resource: BookingResourceEntity
): WooPosBookingsState.BookingItemViewState.TeamMember {
val initials = resource.name
.split(" ")
.filter { it.isNotBlank() }
.take(2)
.joinToString("") { it.first().uppercase() }
return WooPosBookingsState.BookingItemViewState.TeamMember(
initials = initials,
avatarUrl = resource.imageUrl,
)
}
}
121 changes: 96 additions & 25 deletions ...mmerce/src/main/kotlin/com/woocommerce/android/ui/woopos/bookings/WooPosBookingsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package com.woocommerce.android.ui.woopos.bookings

import androidx.activity.compose.BackHandler
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
Expand All @@ -16,11 +17,13 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ExperimentalMaterialApi
Expand All @@ -33,16 +36,23 @@ import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import androidx.navigation.NavBackStackEntry
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.woocommerce.android.R
import com.woocommerce.android.ui.woopos.bookings.details.WooPosBookingDetails
import com.woocommerce.android.ui.woopos.bookings.details.WooPosCancelBookingDialog
Expand Down Expand Up @@ -472,42 +482,95 @@ private fun WooPosBookingListItem(
shadowType = ShadowType.Soft,
isSelected = item.isSelected,
) {
Column(
Row(
modifier = Modifier
.fillMaxWidth()
.clickable { onBookingSelected(item.id) }
.padding(WooPosSpacing.Medium.value),
) {
WooPosText(
item.timeRange,
style = WooPosTypography.BodySmall,
color = MaterialTheme.colorScheme.onSurface,
fontWeight = FontWeight.Bold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Column(modifier = Modifier.weight(1f)) {
WooPosText(
item.timeRange,
style = WooPosTypography.BodySmall,
color = MaterialTheme.colorScheme.onSurface,
fontWeight = FontWeight.Bold,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)

Spacer(Modifier.height(WooPosSpacing.XSmall.value))
Spacer(Modifier.height(WooPosSpacing.XSmall.value))

WooPosText(
item.subtitle,
style = WooPosTypography.BodySmall,
color = WooPosTheme.colors.onSurfaceVariantHighest,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
WooPosText(
item.subtitle,
style = WooPosTypography.BodySmall,
color = WooPosTheme.colors.onSurfaceVariantHighest,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)

Spacer(Modifier.height(WooPosSpacing.Small.value))
Spacer(Modifier.height(WooPosSpacing.Small.value))

Row(
horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.XSmall.value),
) {
if (item.isCancelled) {
WooPosCancelledBadge()
Row(
horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.XSmall.value),
) {
if (item.isCancelled) {
WooPosCancelledBadge()
}
WooPosAttendanceBadge(item.attendanceBadge)
WooPosPaymentStatusBadge(item.paymentStatus)
}
WooPosAttendanceBadge(item.attendanceBadge)
WooPosPaymentStatusBadge(item.paymentStatus)
}

item.teamMember?.let { teamMember ->
WooPosTeamMemberAvatar(
teamMember = teamMember,
modifier = Modifier.padding(start = WooPosSpacing.Small.value),
)
}
}
}
}

@Composable
private fun WooPosTeamMemberAvatar(
teamMember: WooPosBookingsState.BookingItemViewState.TeamMember,
modifier: Modifier = Modifier,
) {
val avatarSize = 24.dp
var imageLoaded by remember { mutableStateOf(false) }
val borderModifier = if (imageLoaded) {
Modifier.border(1.dp, WooPosTheme.colors.outline, CircleShape)
} else {
Modifier
}
Box(
modifier = modifier
.size(avatarSize)
.then(borderModifier)
.clip(CircleShape)
.background(MaterialTheme.colorScheme.surfaceDim),
contentAlignment = Alignment.Center,
) {
if (!imageLoaded) {
WooPosText(
text = teamMember.initials,
style = WooPosTypography.Caption,
color = WooPosTheme.colors.onSurfaceVariantHighest,
maxLines = 1,
)
}
if (teamMember.avatarUrl != null) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(teamMember.avatarUrl)
.crossfade(true)
.build(),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.size(avatarSize),
onSuccess = { imageLoaded = true },
onError = { imageLoaded = false },
)
}
}
}
Expand Down Expand Up @@ -568,6 +631,10 @@ fun WooPosBookingsScreenPreview() {
paymentStatus = PaymentStatus.PAID,
isCancelled = false,
attendanceBadge = WooPosBookingsState.AttendanceState.ATTENDED,
teamMember = WooPosBookingsState.BookingItemViewState.TeamMember(
initials = "JD",
avatarUrl = null,
),
)
val item2 = WooPosBookingsState.BookingItemViewState(
id = 2,
Expand All @@ -577,6 +644,10 @@ fun WooPosBookingsScreenPreview() {
paymentStatus = PaymentStatus.UNPAID,
isCancelled = true,
attendanceBadge = WooPosBookingsState.AttendanceState.UNATTENDED,
teamMember = WooPosBookingsState.BookingItemViewState.TeamMember(
initials = "JS",
avatarUrl = null,
),
)

val details1 = sampleBookingDetails(id = 1L, number = "#014")
Expand Down
9 changes: 8 additions & 1 deletion ...ommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/bookings/WooPosBookingsState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,14 @@ sealed class WooPosBookingsState {
val paymentStatus: PaymentStatus,
val isCancelled: Boolean,
val attendanceBadge: AttendanceState = AttendanceState.UNATTENDED,
)
val teamMember: TeamMember? = null,
) {
@Immutable
data class TeamMember(
val initials: String,
val avatarUrl: String?,
)
}

@Immutable
data class Content(
Expand Down
6 changes: 3 additions & 3 deletions ...rce/src/main/kotlin/com/woocommerce/android/ui/woopos/bookings/WooPosBookingsViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@ class WooPosBookingsViewModel @Inject constructor(
}

val items = bookings.associate { booking ->
val resourceName = resourcesMap[booking.resourceId]?.name
mapper.mapToItemViewState(booking, selectedBookingId) to
mapper.mapToDetailsViewState(booking, resourceName)
val resource = resourcesMap[booking.resourceId]
mapper.mapToItemViewState(booking, selectedBookingId, resource) to
mapper.mapToDetailsViewState(booking, resource?.name)
}

val selectedDetails = selectedBookingId?.let { id ->
Expand Down
4 changes: 2 additions & 2 deletions ...est/kotlin/com/woocommerce/android/ui/woopos/bookings/WooPosBookingViewStateMapperTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ class WooPosBookingViewStateMapperTest {
whenever(paymentStatusResolver.resolve(any(), any())).thenReturn(PaymentStatus.UNPAID)

// WHEN
val result = mapper.mapToItemViewState(booking, selectedBookingId = null)
val result = mapper.mapToItemViewState(booking, selectedBookingId = null, resource = null)

// THEN
assertThat(result.id).isEqualTo(1L)
Expand All @@ -98,7 +98,7 @@ class WooPosBookingViewStateMapperTest {
whenever(paymentStatusResolver.resolve(any(), any())).thenReturn(PaymentStatus.FAILED)

// WHEN
val result = mapper.mapToItemViewState(booking, selectedBookingId = null)
val result = mapper.mapToItemViewState(booking, selectedBookingId = null, resource = null)

// THEN
assertThat(result.isCancelled).isTrue()
Expand Down