Skip to content

[Bookings] Update empty list states #15049

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

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
+32 −22
Open

[Bookings] Update empty list states #15049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d63f0c4
Update `areFiltersActive` logic in `BookingListViewState`
irfano Dec 2, 2025
1abd4d1
Update bookings search "no results" message
irfano Dec 2, 2025
5b16e30
Update booking list empty state
irfano Dec 2, 2025
95e9355
Fix active filter state on booking list screen
irfano Dec 2, 2025
fa0cc3d
Update empty filtered booking list view
irfano Dec 2, 2025
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
46 changes: 28 additions & 18 deletions WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.woocommerce.android.R
Expand All @@ -66,7 +65,6 @@ import com.woocommerce.android.ui.bookings.details.AttendanceUpdateStatus
import com.woocommerce.android.ui.compose.component.InfiniteListHandler
import com.woocommerce.android.ui.compose.component.Toolbar
import com.woocommerce.android.ui.compose.component.WCColoredButton
import com.woocommerce.android.ui.compose.component.WCOutlinedButton
import com.woocommerce.android.ui.compose.component.WCPrimaryTabRow
import com.woocommerce.android.ui.compose.component.WCPullToRefreshBox
import com.woocommerce.android.ui.compose.component.WCSearchField
Expand All @@ -93,8 +91,7 @@ fun BookingListScreen(state: BookingListViewState) {
actions = {
SearchSection(
searchState = state.searchState,
areFiltersActive = state.controlsState.areFiltersActive ||
state.tabState.selectedTab != BookingListTab.All
areFiltersActive = state.controlsState.areFiltersActive
)
}
)
Expand Down Expand Up @@ -360,13 +357,13 @@ private fun EmptyView(
if (state.searchState.query?.isNotEmpty() == true) {
EmptySearchResultsView(
areFiltersActive = state.controlsState.areFiltersActive,
onClearFiltersClick = state.controlsState.onClearFiltersClick,
modifier = innerEmptyViewModifier
)
} else {
EmptyListView(
selectedTab = state.tabState.selectedTab,
areFiltersActive = state.controlsState.areFiltersActive,
onChangeFiltersClick = state.controlsState.onFilterClick,
onClearFiltersClick = state.controlsState.onClearFiltersClick,
modifier = innerEmptyViewModifier
)
Expand All @@ -378,7 +375,6 @@ private fun EmptyView(
private fun EmptyListView(
selectedTab: BookingListTab,
areFiltersActive: Boolean,
onChangeFiltersClick: () -> Unit,
onClearFiltersClick: () -> Unit,
modifier: Modifier
) {
Expand All @@ -388,9 +384,11 @@ private fun EmptyListView(
modifier = modifier
) {
Image(
painter = painterResource(R.drawable.img_calendar_grey),
painter = painterResource(
if (areFiltersActive) R.drawable.img_empty_search else R.drawable.img_calendar_grey
),
contentDescription = null,
modifier = Modifier.size(64.dp)
modifier = Modifier.size(80.dp)
)

Spacer(modifier = Modifier.height(24.dp))
Expand All @@ -417,7 +415,7 @@ private fun EmptyListView(
BookingListTab.Upcoming -> stringResource(R.string.bookings_empty_state_description_upcoming_v2)
else -> {
if (areFiltersActive) {
stringResource(R.string.bookings_empty_state_description_with_filters)
stringResource(R.string.bookings_filtered_empty_state_description)
} else {
stringResource(R.string.bookings_empty_state_description_all)
}
Expand All @@ -431,12 +429,6 @@ private fun EmptyListView(
if (areFiltersActive) {
Spacer(Modifier.height(24.dp))
WCColoredButton(
text = stringResource(R.string.bookings_empty_state_change_filters_button),
onClick = onChangeFiltersClick,
modifier = Modifier.fillMaxWidth()
)
Spacer(Modifier.height(8.dp))
WCOutlinedButton(
text = stringResource(R.string.bookings_empty_state_clear_filters_button),
onClick = onClearFiltersClick,
modifier = Modifier.fillMaxWidth()
Expand All @@ -448,6 +440,7 @@ private fun EmptyListView(
@Composable
private fun EmptySearchResultsView(
areFiltersActive: Boolean,
onClearFiltersClick: () -> Unit,
modifier: Modifier
) {
Column(
Expand All @@ -462,6 +455,14 @@ private fun EmptySearchResultsView(

Spacer(modifier = Modifier.height(24.dp))

Text(
text = stringResource(R.string.bookings_empty_state_title_default),
style = MaterialTheme.typography.titleLarge,
textAlign = TextAlign.Center
)

Spacer(modifier = Modifier.height(8.dp))

Text(
text = stringResource(
id = if (areFiltersActive) {
Expand All @@ -470,10 +471,19 @@ private fun EmptySearchResultsView(
R.string.bookings_search_no_results_without_filters
}
),
style = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Normal,
textAlign = TextAlign.Center
style = MaterialTheme.typography.titleMedium,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onSurfaceVariant
)

if (areFiltersActive) {
Spacer(Modifier.height(24.dp))
WCColoredButton(
text = stringResource(R.string.bookings_empty_state_clear_filters_button),
onClick = onClearFiltersClick,
modifier = Modifier.fillMaxWidth()
)
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ data class BookingListControlsState(
val onClearFiltersClick: () -> Unit
) {
val areFiltersActive: Boolean
get() = enabledFiltersCount > 0
get() = enabledFiltersCount > 0 && isFilterButtonVisible
}

data class BookingListItem(
Expand Down
6 changes: 3 additions & 3 deletions WooCommerce/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4210,9 +4210,9 @@
<string name="bookings_empty_state_description_all">Bookings will appear here once customers start scheduling your services or registering for events.</string>
<string name="bookings_empty_state_description_today_v2">Any bookings scheduled for today will appear here.</string>
<string name="bookings_empty_state_description_upcoming_v2">New bookings will appear here as customers schedule your services or register for events.</string>
<string name="bookings_search_no_results_without_filters">We couldn’t find any bookings with that name — try adjusting your search term to see more results.</string>
<string name="bookings_search_no_results_with_filters">We couldn’t find any bookings with that name — try adjusting your search term or your filters to see more results.</string>
<string name="bookings_empty_state_description_with_filters">No bookings match your filters. Try adjusting them to see more results.</string>
<string name="bookings_search_no_results_without_filters">Try adjusting your search term to see more results.</string>
<string name="bookings_search_no_results_with_filters">Try adjusting your search term or filters to see more results.</string>
<string name="bookings_filtered_empty_state_description">Try adjusting or clearing your filters to see more results.</string>
<string name="bookings_empty_state_change_filters_button">Change filters</string>
<string name="bookings_empty_state_clear_filters_button">Clear filters</string>
<string name="bookings_filters_default_title">Filters</string>
Expand Down
Loading