Show Welcome Tutorial on first launch (#27)

bitwarden · Apr 15, 2024 · 12e5314 · 12e5314
1 parent b6a165a
commit 12e5314
Show file tree

Hide file tree

Showing 21 changed files with 766 additions and 33 deletions.
diff --git a/...lin/com/x8bit/bitwarden/authenticator/data/platform/datasource/disk/SettingsDiskSource.kt b/...lin/com/x8bit/bitwarden/authenticator/data/platform/datasource/disk/SettingsDiskSource.kt
@@ -34,6 +34,16 @@ interface SettingsDiskSource {
      */
     val isIconLoadingDisabledFlow: Flow<Boolean?>
 
+    /**
+     * Tracks whether user has seen the Welcome tutorial.
+     */
+    var hasSeenWelcomeTutorial: Boolean
+
+    /**
+     * Emits update that track [hasSeenWelcomeTutorial]
+     */
+    val hasSeenWelcomeTutorialFlow: Flow<Boolean>
+
     /**
      * Stores the threshold at which users are alerted that an items validity period is nearing
      * expiration.

diff --git a/...com/x8bit/bitwarden/authenticator/data/platform/datasource/disk/SettingsDiskSourceImpl.kt b/...com/x8bit/bitwarden/authenticator/data/platform/datasource/disk/SettingsDiskSourceImpl.kt
@@ -15,6 +15,7 @@ private const val SCREEN_CAPTURE_ALLOW_KEY = "$BASE_KEY:screenCaptureAllowed"
 private const val ACCOUNT_BIOMETRIC_INTEGRITY_VALID_KEY = "$BASE_KEY:accountBiometricIntegrityValid"
 private const val ALERT_THRESHOLD_SECONDS_KEY = "$BASE_KEY:alertThresholdSeconds"
 private const val DISABLE_ICON_LOADING_KEY = "$BASE_KEY:disableFavicon"
+private const val FIRST_LAUNCH_KEY = "$BASE_KEY:hasSeenWelcomeTutorial"
 
 /**
  * Primary implementation of [SettingsDiskSource].
@@ -47,6 +48,9 @@ class SettingsDiskSourceImpl(
             )
         }
 
+    private val mutableFirstLaunchFlow =
+        bufferedMutableSharedFlow<Boolean>()
+
     override var appTheme: AppTheme
         get() = getString(key = APP_THEME_KEY)
             ?.let { storedValue ->
@@ -76,6 +80,16 @@ class SettingsDiskSourceImpl(
         get() = mutableIsIconLoadingDisabledFlow
             .onSubscription { emit(getBoolean(DISABLE_ICON_LOADING_KEY)) }
 
+    override var hasSeenWelcomeTutorial: Boolean
+        get() = getBoolean(key = FIRST_LAUNCH_KEY) ?: false
+        set(value) {
+            putBoolean(key = FIRST_LAUNCH_KEY, value)
+            mutableFirstLaunchFlow.tryEmit(hasSeenWelcomeTutorial)
+        }
+
+    override val hasSeenWelcomeTutorialFlow: Flow<Boolean>
+        get() = mutableFirstLaunchFlow.onSubscription { emit(hasSeenWelcomeTutorial) }
+
     override fun storeAlertThresholdSeconds(thresholdSeconds: Int) {
         putInt(
             ALERT_THRESHOLD_SECONDS_KEY,

diff --git a/...n/kotlin/com/x8bit/bitwarden/authenticator/data/platform/repository/SettingsRepository.kt b/...n/kotlin/com/x8bit/bitwarden/authenticator/data/platform/repository/SettingsRepository.kt
@@ -44,4 +44,14 @@ interface SettingsRepository {
      * Emits updates that track the [isIconLoadingDisabled] value.
      */
     val isIconLoadingDisabledFlow: Flow<Boolean>
+
+    /**
+     * Whether the user has seen the Welcome tutorial.
+     */
+    var hasSeenWelcomeTutorial: Boolean
+
+    /**
+     * Tracks whether the user has seen the Welcome tutorial.
+     */
+    val hasSeenWelcomeTutorialFlow: StateFlow<Boolean>
 }
diff --git a/...tlin/com/x8bit/bitwarden/authenticator/data/platform/repository/SettingsRepositoryImpl.kt b/...tlin/com/x8bit/bitwarden/authenticator/data/platform/repository/SettingsRepositoryImpl.kt
@@ -66,4 +66,18 @@ class SettingsRepositoryImpl(
                     .isIconLoadingDisabled
                     ?: false,
             )
+    override var hasSeenWelcomeTutorial: Boolean
+        get() = settingsDiskSource.hasSeenWelcomeTutorial
+        set(value) {
+            settingsDiskSource.hasSeenWelcomeTutorial = value
+        }
+
+    override val hasSeenWelcomeTutorialFlow: StateFlow<Boolean>
+        get() = settingsDiskSource
+            .hasSeenWelcomeTutorialFlow
+            .stateIn(
+                scope = unconfinedScope,
+                started = SharingStarted.Eagerly,
+                initialValue = hasSeenWelcomeTutorial,
+            )
 }
diff --git a/...bitwarden/authenticator/ui/authenticator/feature/authenticator/AuthenticatorNavigation.kt b/...bitwarden/authenticator/ui/authenticator/feature/authenticator/AuthenticatorNavigation.kt
@@ -1,22 +1,17 @@
 package com.x8bit.bitwarden.authenticator.ui.authenticator.feature.authenticator
 
-import android.widget.Toast
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
 import androidx.navigation.navigation
-import com.x8bit.bitwarden.authenticator.R
-import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.edititem.editItemDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.edititem.navigateToEditItem
-import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.itemlisting.itemListingDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.itemlisting.itemListingGraph
-import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.manualcodeentry.manualCodeEntryDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.manualcodeentry.navigateToManualCodeEntryScreen
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.navbar.AUTHENTICATOR_NAV_BAR_ROUTE
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.navbar.authenticatorNavBarDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.qrcodescan.navigateToQrCodeScanScreen
-import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.qrcodescan.qrCodeScanDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.search.navigateToSearch
+import com.x8bit.bitwarden.authenticator.ui.platform.feature.tutorial.navigateToTutorial
 
 const val AUTHENTICATOR_GRAPH_ROUTE = "authenticator_graph"
 
@@ -42,6 +37,7 @@ fun NavGraphBuilder.authenticatorGraph(
             onNavigateToQrCodeScanner = { navController.navigateToQrCodeScanScreen() },
             onNavigateToManualKeyEntry = { navController.navigateToManualCodeEntryScreen() },
             onNavigateToEditItem = { navController.navigateToEditItem(itemId = it) },
+            onNavigateToTutorial = { navController.navigateToTutorial() },
         )
         itemListingGraph(
             navController = navController,
@@ -56,7 +52,8 @@ fun NavGraphBuilder.authenticatorGraph(
             },
             navigateToEditItem = {
                 navController.navigateToEditItem(itemId = it)
-            }
+            },
+            navigateToTutorial = { navController.navigateToTutorial() },
         )
     }
 }
diff --git a/...itwarden/authenticator/ui/authenticator/feature/itemlisting/ItemListingGraphNavigation.kt b/...itwarden/authenticator/ui/authenticator/feature/itemlisting/ItemListingGraphNavigation.kt
@@ -10,7 +10,6 @@ import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.manualcodeentr
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.qrcodescan.navigateToQrCodeScanScreen
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.qrcodescan.qrCodeScanDestination
 import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.search.itemSearchDestination
-import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.search.navigateToSearch
 import com.x8bit.bitwarden.authenticator.ui.platform.feature.settings.settingsGraph
 
 const val ITEM_LISTING_GRAPH_ROUTE = "item_listing_graph"
@@ -24,6 +23,7 @@ fun NavGraphBuilder.itemListingGraph(
     navigateToQrCodeScanner: () -> Unit,
     navigateToManualKeyEntry: () -> Unit,
     navigateToEditItem: (String) -> Unit,
+    navigateToTutorial: () -> Unit,
 ) {
     navigation(
         route = ITEM_LISTING_GRAPH_ROUTE,
@@ -60,7 +60,10 @@ fun NavGraphBuilder.itemListingGraph(
                 navController.navigateToQrCodeScanScreen()
             }
         )
-        settingsGraph(navController)
+        settingsGraph(
+            navController = navController,
+            onNavigateToTutorial = navigateToTutorial
+        )
     }
 }
 

diff --git a/.../bitwarden/authenticator/ui/authenticator/feature/navbar/AuthenticatorNavBarNavigation.kt b/.../bitwarden/authenticator/ui/authenticator/feature/navbar/AuthenticatorNavBarNavigation.kt
@@ -13,6 +13,7 @@ fun NavGraphBuilder.authenticatorNavBarDestination(
     onNavigateToQrCodeScanner: () -> Unit,
     onNavigateToManualKeyEntry: () -> Unit,
     onNavigateToEditItem: (itemId: String) -> Unit,
+    onNavigateToTutorial: () -> Unit,
 ) {
     composableWithStayTransitions(
         route = AUTHENTICATOR_NAV_BAR_ROUTE,
@@ -22,6 +23,7 @@ fun NavGraphBuilder.authenticatorNavBarDestination(
             onNavigateToManualKeyEntry = onNavigateToManualKeyEntry,
             onNavigateToEditItem = onNavigateToEditItem,
             onNavigateToSearch = onNavigateToSearch,
+            onNavigateToTutorial = onNavigateToTutorial,
         )
     }
 }
diff --git a/...8bit/bitwarden/authenticator/ui/authenticator/feature/navbar/AuthenticatorNavBarScreen.kt b/...8bit/bitwarden/authenticator/ui/authenticator/feature/navbar/AuthenticatorNavBarScreen.kt
@@ -71,6 +71,7 @@ fun AuthenticatorNavBarScreen(
     onNavigateToQrCodeScanner: () -> Unit,
     onNavigateToManualKeyEntry: () -> Unit,
     onNavigateToEditItem: (itemId: String) -> Unit,
+    onNavigateToTutorial: () -> Unit,
 ) {
     EventsEffect(viewModel = viewModel) { event ->
         navController.apply {
@@ -108,6 +109,7 @@ fun AuthenticatorNavBarScreen(
         navigateToQrCodeScanner = onNavigateToQrCodeScanner,
         navigateToManualKeyEntry = onNavigateToManualKeyEntry,
         navigateToEditItem = onNavigateToEditItem,
+        navigateToTutorial = onNavigateToTutorial,
     )
 }
 
@@ -121,6 +123,7 @@ private fun AuthenticatorNavBarScaffold(
     navigateToQrCodeScanner: () -> Unit,
     navigateToManualKeyEntry: () -> Unit,
     navigateToEditItem: (itemId: String) -> Unit,
+    navigateToTutorial: () -> Unit,
 ) {
     BitwardenScaffold(
         contentWindowInsets = ScaffoldDefaults.contentWindowInsets.exclude(WindowInsets.statusBars),
@@ -166,6 +169,7 @@ private fun AuthenticatorNavBarScaffold(
                 navigateToQrCodeScanner = navigateToQrCodeScanner,
                 navigateToManualKeyEntry = navigateToManualKeyEntry,
                 navigateToEditItem = navigateToEditItem,
+                navigateToTutorial = navigateToTutorial,
             )
         }
     }

diff --git a/...ain/kotlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/rootnav/RootNavScreen.kt b/...ain/kotlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/rootnav/RootNavScreen.kt
@@ -19,6 +19,9 @@ import com.x8bit.bitwarden.authenticator.ui.authenticator.feature.authenticator.
 import com.x8bit.bitwarden.authenticator.ui.platform.feature.splash.SPLASH_ROUTE
 import com.x8bit.bitwarden.authenticator.ui.platform.feature.splash.navigateToSplash
 import com.x8bit.bitwarden.authenticator.ui.platform.feature.splash.splashDestination
+import com.x8bit.bitwarden.authenticator.ui.platform.feature.tutorial.TUTORIAL_ROUTE
+import com.x8bit.bitwarden.authenticator.ui.platform.feature.tutorial.navigateToTutorial
+import com.x8bit.bitwarden.authenticator.ui.platform.feature.tutorial.tutorialDestination
 import com.x8bit.bitwarden.authenticator.ui.platform.theme.NonNullEnterTransitionProvider
 import com.x8bit.bitwarden.authenticator.ui.platform.theme.NonNullExitTransitionProvider
 import com.x8bit.bitwarden.authenticator.ui.platform.theme.RootTransitionProviders
@@ -62,12 +65,16 @@ fun RootNavScreen(
         popExitTransition = { toExitTransition()(this) },
     ) {
         splashDestination()
+        tutorialDestination(
+            onTutorialFinished = { navController.navigateToAuthenticatorGraph() }
+        )
         authenticatorGraph(navController)
     }
 
     val targetRoute = when (state) {
         RootNavState.ItemListing -> AUTHENTICATOR_GRAPH_ROUTE
         RootNavState.Splash -> SPLASH_ROUTE
+        RootNavState.Tutorial -> TUTORIAL_ROUTE
     }
 
     val currentRoute = navController.currentDestination?.rootLevelRoute()
@@ -94,8 +101,9 @@ fun RootNavScreen(
 
     LaunchedEffect(state) {
         when (state) {
-            RootNavState.ItemListing -> navController.navigateToAuthenticatorGraph(rootNavOptions)
             RootNavState.Splash -> navController.navigateToSplash(rootNavOptions)
+            RootNavState.Tutorial -> navController.navigateToTutorial(rootNavOptions)
+            RootNavState.ItemListing -> navController.navigateToAuthenticatorGraph(rootNavOptions)
         }
     }
 }

diff --git a/.../kotlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/rootnav/RootNavViewModel.kt b/.../kotlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/rootnav/RootNavViewModel.kt
@@ -3,9 +3,12 @@ package com.x8bit.bitwarden.authenticator.ui.platform.feature.rootnav
 import android.os.Parcelable
 import androidx.lifecycle.viewModelScope
 import com.x8bit.bitwarden.authenticator.data.auth.repository.AuthRepository
+import com.x8bit.bitwarden.authenticator.data.platform.repository.SettingsRepository
 import com.x8bit.bitwarden.authenticator.ui.platform.base.BaseViewModel
 import dagger.hilt.android.lifecycle.HiltViewModel
-import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import kotlinx.parcelize.Parcelize
@@ -14,30 +17,42 @@ import javax.inject.Inject
 @HiltViewModel
 class RootNavViewModel @Inject constructor(
     private val authRepository: AuthRepository,
+    private val settingsRepository: SettingsRepository,
 ) : BaseViewModel<RootNavState, Unit, RootNavAction>(
     initialState = RootNavState.Splash
 ) {
 
     init {
         viewModelScope.launch {
-            delay(250)
-            trySendAction(RootNavAction.Internal.StateUpdate)
+            settingsRepository.hasSeenWelcomeTutorialFlow
+                .map { RootNavAction.Internal.HasSeenWelcomeTutorialChange(it) }
+                .onEach(::sendAction)
+                .launchIn(viewModelScope)
         }
     }
 
     override fun handleAction(action: RootNavAction) {
         when (action) {
-            RootNavAction.BackStackUpdate -> handleBackStackUpdate()
-            RootNavAction.Internal.StateUpdate -> handleStateUpdate()
+            RootNavAction.BackStackUpdate -> {
+                handleBackStackUpdate()
+            }
+
+            is RootNavAction.Internal.HasSeenWelcomeTutorialChange -> {
+                handleHasSeenWelcomeTutorialChange(action.hasSeenWelcomeGuide)
+            }
         }
     }
 
     private fun handleBackStackUpdate() {
         authRepository.updateLastActiveTime()
     }
 
-    private fun handleStateUpdate() {
-        mutableStateFlow.update { RootNavState.ItemListing }
+    private fun handleHasSeenWelcomeTutorialChange(hasSeenWelcomeGuide: Boolean) {
+        if (hasSeenWelcomeGuide) {
+            mutableStateFlow.update { RootNavState.ItemListing }
+        } else {
+            mutableStateFlow.update { RootNavState.Tutorial }
+        }
     }
 }
 
@@ -52,6 +67,12 @@ sealed class RootNavState : Parcelable {
     @Parcelize
     data object Splash : RootNavState()
 
+    /**
+     * App should display the Tutorial nav graph.
+     */
+    @Parcelize
+    data object Tutorial : RootNavState()
+
     /**
      * App should display the Account List nav graph.
      */
@@ -68,7 +89,14 @@ sealed class RootNavAction {
      */
     data object BackStackUpdate : RootNavAction()
 
+    /**
+     * Models actions the [RootNavViewModel] itself may send.
+     */
     sealed class Internal : RootNavAction() {
-        data object StateUpdate : Internal()
+
+        /**
+         * Indicates an update in the welcome guide being seen has been received.
+         */
+        data class HasSeenWelcomeTutorialChange(val hasSeenWelcomeGuide: Boolean) : Internal()
     }
 }
diff --git a/...tlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/settings/SettingsNavigation.kt b/...tlin/com/x8bit/bitwarden/authenticator/ui/platform/feature/settings/SettingsNavigation.kt
@@ -14,17 +14,20 @@ private const val SETTINGS_ROUTE = "settings"
  */
 fun NavGraphBuilder.settingsGraph(
     navController: NavController,
+    onNavigateToTutorial: () -> Unit,
 ) {
-   navigation(
-       startDestination = SETTINGS_ROUTE,
-       route = SETTINGS_GRAPH_ROUTE
-   )  {
-       composableWithRootPushTransitions(
-           route = SETTINGS_ROUTE
-       ) {
-           SettingsScreen()
-       }
-   }
+    navigation(
+        startDestination = SETTINGS_ROUTE,
+        route = SETTINGS_GRAPH_ROUTE
+    ) {
+        composableWithRootPushTransitions(
+            route = SETTINGS_ROUTE
+        ) {
+            SettingsScreen(
+                onNavigateToTutorial = onNavigateToTutorial,
+            )
+        }
+    }
 }
 
 /**