[MBL-1480] Add error snackbar visuals/a way to call them for PPO (#2080)

* add error snackbar visuals/a way to call them for PPO * fix tests * lint
kickstarter · Jul 24, 2024 · 435976f · 435976f
1 parent 7088247
commit 435976f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 32 deletions.
diff --git a/...va/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt b/...va/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewActivity.kt
@@ -2,15 +2,13 @@ package com.kickstarter.features.pledgedprojectsoverview.ui
 
 import android.app.Activity
 import android.content.Intent
-import android.os.Build
 import android.os.Bundle
 import androidx.activity.OnBackPressedCallback
 import androidx.activity.compose.setContent
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.SnackbarHostState
 import androidx.compose.runtime.LaunchedEffect
@@ -67,7 +65,6 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() {
 
                 val ppoUIState by viewModel.ppoUIState.collectAsStateWithLifecycle()
 
-                val darkModeEnabled = this.isDarkModeEnabled(env = env)
                 val lazyListState = rememberLazyListState()
                 val snackbarHostState = remember { SnackbarHostState() }
                 val totalAlerts = viewModel.totalAlertsState.collectAsStateWithLifecycle().value
@@ -79,17 +76,7 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() {
                 val showEmptyState = ppoCardPagingSource.loadState.refresh is LoadState.NotLoading && ppoCardPagingSource.itemCount == 0
 
                 KickstarterApp(
-                    useDarkTheme =
-                    if (darkModeEnabled) {
-                        when (theme) {
-                            AppThemes.MATCH_SYSTEM.ordinal -> isSystemInDarkTheme()
-                            AppThemes.DARK.ordinal -> true
-                            AppThemes.LIGHT.ordinal -> false
-                            else -> false
-                        }
-                    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-                        isSystemInDarkTheme()
-                    } else false
+                    useDarkTheme = isDarkModeEnabled(env = env)
                 ) {
                     PledgedProjectsOverviewScreen(
                         modifier = Modifier,
@@ -119,9 +106,9 @@ class PledgedProjectsOverviewActivity : AppCompatActivity() {
                         }
                 }
 
-                viewModel.provideSnackbarMessage {
+                viewModel.provideSnackbarMessage { stringId, type ->
                     lifecycleScope.launch {
-                        snackbarHostState.showSnackbar(getString(it))
+                        snackbarHostState.showSnackbar(message = getString(stringId), actionLabel = type)
                     }
                 }
 

diff --git a/...java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt b/...java/com/kickstarter/features/pledgedprojectsoverview/ui/PledgedProjectsOverviewScreen.kt
@@ -45,7 +45,10 @@ import com.kickstarter.features.pledgedprojectsoverview.data.PPOCard
 import com.kickstarter.features.pledgedprojectsoverview.data.PPOCardFactory
 import com.kickstarter.ui.compose.designsystem.KSAlertDialog
 import com.kickstarter.ui.compose.designsystem.KSCircularProgressIndicator
+import com.kickstarter.ui.compose.designsystem.KSErrorSnackbar
+import com.kickstarter.ui.compose.designsystem.KSHeadsupSnackbar
 import com.kickstarter.ui.compose.designsystem.KSPrimaryGreenButton
+import com.kickstarter.ui.compose.designsystem.KSSnackbarTypes
 import com.kickstarter.ui.compose.designsystem.KSTheme
 import com.kickstarter.ui.compose.designsystem.KSTheme.colors
 import com.kickstarter.ui.compose.designsystem.KSTheme.dimensions
@@ -172,7 +175,16 @@ fun PledgedProjectsOverviewScreen(
         Scaffold(
             snackbarHost = {
                 SnackbarHost(
-                    hostState = errorSnackBarHostState
+                    hostState = errorSnackBarHostState,
+                    snackbar = { data ->
+                        // Action label is typically for the action on a snackbar, but we can
+                        // leverage it and show different visuals depending on what we pass in
+                        if (data.actionLabel == KSSnackbarTypes.KS_ERROR.name) {
+                            KSErrorSnackbar(text = data.message)
+                        } else {
+                            KSHeadsupSnackbar(text = data.message)
+                        }
+                    }
                 )
             },
             modifier = modifier,

diff --git a/...ickstarter/features/pledgedprojectsoverview/viewmodel/PledgedProjectsOverviewViewModel.kt b/...ickstarter/features/pledgedprojectsoverview/viewmodel/PledgedProjectsOverviewViewModel.kt
@@ -15,6 +15,7 @@ import com.kickstarter.libs.Environment
 import com.kickstarter.models.Project
 import com.kickstarter.services.ApolloClientTypeV2
 import com.kickstarter.services.apiresponses.commentresponse.PageInfoEnvelope
+import com.kickstarter.ui.compose.designsystem.KSSnackbarTypes
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -84,7 +85,7 @@ class PledgedProjectsOverviewViewModel(environment: Environment) : ViewModel() {
 
     private val mutablePpoCards = MutableStateFlow<PagingData<PPOCard>>(PagingData.empty())
     private var mutableProjectFlow = MutableSharedFlow<Project>()
-    private var snackbarMessage: (stringID: Int) -> Unit = {}
+    private var snackbarMessage: (stringID: Int, type: String) -> Unit = { _, _ -> }
     private val apolloClient = requireNotNull(environment.apolloClientV2())
 
     private val mutableTotalAlerts = MutableStateFlow<Int>(0)
@@ -105,7 +106,7 @@ class PledgedProjectsOverviewViewModel(environment: Environment) : ViewModel() {
             )
 
     fun showSnackbarAndRefreshCardsList() {
-        snackbarMessage.invoke(R.string.address_confirmed_snackbar_text_fpo)
+        showHeadsUpSnackbar(R.string.address_confirmed_snackbar_text_fpo)
         // TODO: MBL-1556 refresh the PPO list (i.e. requery the PPO list).
     }
 
@@ -148,7 +149,7 @@ class PledgedProjectsOverviewViewModel(environment: Environment) : ViewModel() {
         }
     }
 
-    fun provideSnackbarMessage(snackBarMessage: (Int) -> Unit) {
+    fun provideSnackbarMessage(snackBarMessage: (Int, String) -> Unit) {
         this.snackbarMessage = snackBarMessage
     }
 
@@ -163,7 +164,7 @@ class PledgedProjectsOverviewViewModel(environment: Environment) : ViewModel() {
                 }.map { project ->
                     mutableProjectFlow.emit(project)
                 }.catch {
-                    snackbarMessage.invoke(R.string.Something_went_wrong_please_try_again)
+                    showErrorSnackbar(R.string.Something_went_wrong_please_try_again)
                 }.onCompletion {
                     emitCurrentState()
                 }.collect()
@@ -179,6 +180,14 @@ class PledgedProjectsOverviewViewModel(environment: Environment) : ViewModel() {
         )
     }
 
+    private fun showHeadsUpSnackbar(messageId: Int) {
+        snackbarMessage.invoke(messageId, KSSnackbarTypes.KS_HEADS_UP.name)
+    }
+
+    private fun showErrorSnackbar(messageId: Int) {
+        snackbarMessage.invoke(messageId, KSSnackbarTypes.KS_ERROR.name)
+    }
+
     class Factory(private val environment: Environment) :
         ViewModelProvider.Factory {
         override fun <T : ViewModel> create(modelClass: Class<T>): T {

diff --git a/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSAlerts.kt b/app/src/main/java/com/kickstarter/ui/compose/designsystem/KSAlerts.kt
@@ -47,13 +47,19 @@ fun SnackbarsPreview() {
     }
 }
 
+enum class KSSnackbarTypes {
+    KS_ERROR,
+    KS_HEADS_UP,
+    KS_SUCCESS
+}
+
 @Composable
 fun KSErrorSnackbar(
     text: String,
     padding: PaddingValues = PaddingValues(dimensions.none)
 ) {
     Snackbar(
-        backgroundColor = colors.kds_alert,
+        backgroundColor = colors.backgroundDangerBold,
         content = {
             KSErrorRoundedText(text = text, padding = padding)
         }
@@ -66,7 +72,7 @@ fun KSHeadsupSnackbar(
     padding: PaddingValues = PaddingValues(dimensions.none)
 ) {
     Snackbar(
-        backgroundColor = colors.kds_support_700,
+        backgroundColor = colors.backgroundActionPressed,
         content = {
             KSHeadsUpRoundedText(text = text, padding = padding)
         }
@@ -79,7 +85,7 @@ fun KSSuccessSnackbar(
     padding: PaddingValues = PaddingValues(dimensions.none)
 ) {
     Snackbar(
-        backgroundColor = colors.kds_create_300,
+        backgroundColor = colors.backgroundAccentGreenSubtle,
         content = {
             KSSuccessRoundedText(text = text, padding = padding)
         }
@@ -109,8 +115,8 @@ fun KSErrorRoundedText(
     padding: PaddingValues = PaddingValues(dimensions.paddingMedium)
 ) {
     KSRoundedPaddedText(
-        background = colors.kds_alert,
-        textColor = colors.kds_white,
+        background = colors.backgroundDangerBold,
+        textColor = colors.textInversePrimary,
         text = text,
         padding = padding
     )
@@ -122,8 +128,8 @@ fun KSHeadsUpRoundedText(
     padding: PaddingValues = PaddingValues(dimensions.paddingMedium)
 ) {
     KSRoundedPaddedText(
-        background = colors.kds_support_700,
-        textColor = colors.kds_white,
+        background = colors.backgroundActionPressed,
+        textColor = colors.textInversePrimary,
         text = text,
         padding = padding
     )
@@ -135,8 +141,8 @@ fun KSSuccessRoundedText(
     padding: PaddingValues = PaddingValues(dimensions.paddingMedium)
 ) {
     KSRoundedPaddedText(
-        background = colors.kds_create_300,
-        textColor = colors.kds_support_700,
+        background = colors.backgroundAccentGreenSubtle,
+        textColor = colors.textPrimary,
         text = text,
         padding = padding
     )

diff --git a/...tarter/features/pledgedprojectsoverview/viewmodel/PledgedProjectsOverviewViewModelTest.kt b/...tarter/features/pledgedprojectsoverview/viewmodel/PledgedProjectsOverviewViewModelTest.kt
@@ -71,7 +71,7 @@ class PledgedProjectsOverviewViewModelTest : KSRobolectricTestCase() {
                     }).build()
             ).create(PledgedProjectsOverviewViewModel::class.java)
 
-            viewModel.provideSnackbarMessage { snackbarAction = it }
+            viewModel.provideSnackbarMessage { message, _ -> snackbarAction = message }
             viewModel.onMessageCreatorClicked("test_project_slug")
 
             // Should equal error string id
@@ -85,7 +85,7 @@ class PledgedProjectsOverviewViewModelTest : KSRobolectricTestCase() {
     fun `emits snackbar when confirms address`() =
         runTest {
             var snackbarAction = 0
-            viewModel.provideSnackbarMessage { snackbarAction = it }
+            viewModel.provideSnackbarMessage { message, _ -> snackbarAction = message }
             viewModel.showSnackbarAndRefreshCardsList()
 
             // Should equal address confirmed string id