[WOOMOB-1028][Woo POS][Settings] Add Help section with product info dialog

WooCommerce/src/main/kotlin/com/woocommerce/android/AppUrls.kt

@@ -136,8 +136,4 @@ object AppUrls {
 
     const val BLAZE_CAMPAIGN_CREATION_SURVEY_URL_I1 =
         "https://wordpressdotcom.survey.fm/blaze-on-woo-mobile-survey-sept-2024-i1"
-
-    // POS
-    const val WOO_POS_DOCUMENTATION_URL =
-        "https://woocommerce.com/document/woo-mobile-app-point-of-sale-mode/"
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/data/WooPosAppUrls.kt

@@ -1,3 +1,4 @@
 package com.woocommerce.android.ui.woopos.common.data
 
 const val WOO_POS_BARCODE_DOC_URL = "https://woocommerce.com/document/barcode-and-qr-code-scanner/"
+const val WOO_POS_DOCUMENTATION_URL = "https://woocommerce.com/document/woo-mobile-app-point-of-sale-mode/"

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/toolbar/WooPosToolbarViewModel.kt

@@ -9,13 +9,13 @@ import androidx.compose.material.icons.filled.SearchOff
 import androidx.compose.material.icons.filled.Settings
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import com.woocommerce.android.AppUrls.WOO_POS_DOCUMENTATION_URL
 import com.woocommerce.android.R
 import com.woocommerce.android.cardreader.connection.CardReaderStatus
 import com.woocommerce.android.cardreader.connection.CardReaderStatus.Connected
 import com.woocommerce.android.cardreader.connection.CardReaderStatus.Connecting
 import com.woocommerce.android.cardreader.connection.CardReaderStatus.NotConnected
 import com.woocommerce.android.ui.woopos.cardreader.WooPosCardReaderFacade
+import com.woocommerce.android.ui.woopos.common.data.WOO_POS_DOCUMENTATION_URL
 import com.woocommerce.android.ui.woopos.featureflags.WooPosPosSettingsEnabled
 import com.woocommerce.android.ui.woopos.home.ChildToParentEvent
 import com.woocommerce.android.ui.woopos.home.WooPosChildrenToParentEventSender

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/WooPosSettingsScreen.kt

@@ -22,6 +22,8 @@ import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosText
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
+import com.woocommerce.android.ui.woopos.home.WooPosHomeState
+import com.woocommerce.android.ui.woopos.home.WooPosProductInfoDialog
 import com.woocommerce.android.ui.woopos.root.navigation.WooPosNavigationEvent
 import com.woocommerce.android.ui.woopos.settings.categories.WooPosSettingsCategoriesPaneScreen
 import com.woocommerce.android.ui.woopos.settings.details.WooPosSettingsDetailPaneScreen
@@ -31,7 +33,7 @@ fun WooPosSettingsScreen(
     onNavigationEvent: (WooPosNavigationEvent) -> Unit,
 ) {
     val containerViewModel: WooPosSettingsViewModel = hiltViewModel()
-    val navigationState by containerViewModel.navigationState.collectAsState()
+    val state by containerViewModel.state.collectAsState()
 
     BackHandler { onNavigationEvent(WooPosNavigationEvent.GoBack) }
 
@@ -48,21 +50,31 @@ fun WooPosSettingsScreen(
             )
 
             WooPosSettingsCategoriesPaneScreen(
-                selectedCategory = navigationState.selectedCategory,
+                selectedCategory = state.selectedCategory,
                 onCategorySelected = containerViewModel::onCategorySelected,
                 modifier = Modifier.fillMaxSize()
             )
         }
 
         WooPosSettingsDetailPaneScreen(
-            state = navigationState,
+            state = state,
             onNavigate = containerViewModel::navigateToDetail,
             onBack = containerViewModel::navigateBack,
+            onShowProductInfoDialog = containerViewModel::showProductInfoDialog,
             modifier = Modifier
                 .weight(0.7f)
                 .background(MaterialTheme.colorScheme.surfaceContainerLow)
         )
     }
+
+    val dialogState = state.dialogState
+    if (dialogState is WooPosHomeState.DialogState.ProductsInfoDialog) {
+        WooPosProductInfoDialog(
+            state = dialogState,
+            isVisible = true,
+            onDismissRequest = { containerViewModel.hideDialog() }
+        )
+    }
 }
 
 @Composable

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/WooPosSettingsState.kt

@@ -2,11 +2,13 @@ package com.woocommerce.android.ui.woopos.settings
 
 import androidx.annotation.StringRes
 import com.woocommerce.android.R
+import com.woocommerce.android.ui.woopos.home.WooPosHomeState
 import com.woocommerce.android.ui.woopos.settings.categories.WooPosSettingsCategory
 
 data class WooPosSettingsState(
     val selectedCategory: WooPosSettingsCategory = WooPosSettingsCategory.HARDWARE,
-    val currentDestination: WooPosSettingsDetailDestination = selectedCategory.rootDestination
+    val currentDestination: WooPosSettingsDetailDestination = selectedCategory.rootDestination,
+    val dialogState: WooPosHomeState.DialogState = WooPosHomeState.DialogState.Hidden
 ) {
     val canGoBack: Boolean
         get() = currentDestination.parentDestination != null
@@ -45,4 +47,12 @@ sealed class WooPosSettingsDetailDestination {
             override val childDestinations: List<WooPosSettingsDetailDestination> = emptyList()
         }
     }
+
+    sealed class Help : WooPosSettingsDetailDestination() {
+        data object Overview : Help() {
+            override val titleRes: Int = R.string.woopos_get_support_title
+            override val parentDestination: WooPosSettingsDetailDestination? = null
+            override val childDestinations: List<WooPosSettingsDetailDestination> = emptyList()
+        }
+    }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/WooPosSettingsViewModel.kt

@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.woopos.settings
 
 import androidx.lifecycle.ViewModel
+import com.woocommerce.android.ui.woopos.home.WooPosHomeState
 import com.woocommerce.android.ui.woopos.settings.categories.WooPosSettingsCategory
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -11,11 +12,11 @@ import javax.inject.Inject
 
 @HiltViewModel
 class WooPosSettingsViewModel @Inject constructor() : ViewModel() {
-    private val _navigationState = MutableStateFlow(WooPosSettingsState())
-    val navigationState: StateFlow<WooPosSettingsState> = _navigationState.asStateFlow()
+    private val _state = MutableStateFlow(WooPosSettingsState())
+    val state: StateFlow<WooPosSettingsState> = _state.asStateFlow()
 
     fun onCategorySelected(category: WooPosSettingsCategory) {
-        _navigationState.update { currentState ->
+        _state.update { currentState ->
             currentState.copy(
                 selectedCategory = category,
                 currentDestination = category.rootDestination
@@ -24,13 +25,13 @@ class WooPosSettingsViewModel @Inject constructor() : ViewModel() {
     }
 
     fun navigateToDetail(destination: WooPosSettingsDetailDestination) {
-        _navigationState.update { currentState ->
+        _state.update { currentState ->
             currentState.copy(currentDestination = destination)
         }
     }
 
     fun navigateBack() {
-        _navigationState.update { currentState ->
+        _state.update { currentState ->
             val parentDestination = currentState.currentDestination.parentDestination
             if (parentDestination != null) {
                 currentState.copy(currentDestination = parentDestination)
@@ -39,4 +40,16 @@ class WooPosSettingsViewModel @Inject constructor() : ViewModel() {
             }
         }
     }
+
+    fun showProductInfoDialog() {
+        _state.update { currentState ->
+            currentState.copy(dialogState = WooPosHomeState.DialogState.ProductsInfoDialog)
+        }
+    }
+
+    fun hideDialog() {
+        _state.update { currentState ->
+            currentState.copy(dialogState = WooPosHomeState.DialogState.Hidden)
+        }
+    }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/categories/WooPosSettingsCategoriesPaneScreen.kt

@@ -36,22 +36,40 @@ fun WooPosSettingsCategoriesPaneScreen(
     viewModel: WooPosSettingsCategoriesViewModel = hiltViewModel()
 ) {
     val state by viewModel.state.collectAsState()
+    val scrollableCategories = state.categories.filter { it != WooPosSettingsCategory.HELP }
+    val helpCategory = WooPosSettingsCategory.HELP
 
     Column(
-        modifier = modifier
-            .fillMaxSize()
-            .verticalScroll(rememberScrollState())
+        modifier = modifier.fillMaxSize()
     ) {
-        state.categories.forEach { item ->
-            CategoryItem(
-                item = item,
-                isSelected = item == selectedCategory,
-                onClick = {
-                    onCategorySelected(item)
-                },
-                modifier = Modifier.padding(horizontal = WooPosSpacing.Medium.value)
-            )
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .verticalScroll(rememberScrollState())
+        ) {
+            scrollableCategories.forEach { item ->
+                CategoryItem(
+                    item = item,
+                    isSelected = item == selectedCategory,
+                    onClick = {
+                        onCategorySelected(item)
+                    },
+                    modifier = Modifier.padding(horizontal = WooPosSpacing.Medium.value)
+                )
+            }
         }
+
+        CategoryItem(
+            item = helpCategory,
+            isSelected = helpCategory == selectedCategory,
+            onClick = {
+                onCategorySelected(helpCategory)
+            },
+            modifier = Modifier.padding(
+                horizontal = WooPosSpacing.Medium.value,
+                vertical = WooPosSpacing.Medium.value
+            )
+        )
     }
 }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/categories/WooPosSettingsCategoriesState.kt

@@ -2,6 +2,7 @@ package com.woocommerce.android.ui.woopos.settings.categories
 
 import androidx.annotation.StringRes
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Help
 import androidx.compose.material.icons.filled.Hardware
 import androidx.compose.material.icons.filled.Store
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -25,6 +26,12 @@ enum class WooPosSettingsCategory(
         R.string.woopos_settings_store_category_subtitle,
         Icons.Default.Store,
         WooPosSettingsDetailDestination.Store.Overview
+    ),
+    HELP(
+        R.string.woopos_get_support_title,
+        R.string.woopos_settings_help_category_subtitle,
+        Icons.AutoMirrored.Filled.Help,
+        WooPosSettingsDetailDestination.Help.Overview
     )
 }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/details/WooPosSettingsDetailPaneScreen.kt

@@ -24,12 +24,14 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTyp
 import com.woocommerce.android.ui.woopos.settings.WooPosSettingsDetailDestination
 import com.woocommerce.android.ui.woopos.settings.WooPosSettingsState
 import com.woocommerce.android.ui.woopos.settings.details.hardware.WooPosHardwareSettingsScreen
+import com.woocommerce.android.ui.woopos.settings.details.help.WooPosHelpDetailScreen
 
 @Composable
 fun WooPosSettingsDetailPaneScreen(
     state: WooPosSettingsState,
     onNavigate: (WooPosSettingsDetailDestination) -> Unit,
     onBack: () -> Unit,
+    onShowProductInfoDialog: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     val currentDestination = state.currentDestination
@@ -88,6 +90,10 @@ fun WooPosSettingsDetailPaneScreen(
                 is WooPosSettingsDetailDestination.Store.Overview -> {
                     StoreDetailScreen()
                 }
+
+                is WooPosSettingsDetailDestination.Help.Overview -> {
+                    WooPosHelpDetailScreen(onShowProductInfoDialog = onShowProductInfoDialog)
+                }
             }
         }
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/details/WooPosSettingsDetailsMenuItem.kt

@@ -0,0 +1,68 @@
+package com.woocommerce.android.ui.woopos.settings.details
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosText
+import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
+import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
+
+@Composable
+fun WooPosSettingsDetailsMenuItem(
+    icon: ImageVector,
+    title: String,
+    subtitle: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = ripple()
+            ) { onClick() }
+            .padding(WooPosSpacing.Medium.value),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Start
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.size(28.dp)
+        )
+
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(start = WooPosSpacing.Medium.value)
+        ) {
+            WooPosText(
+                text = title,
+                style = WooPosTypography.BodyLarge,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+            WooPosText(
+                text = subtitle,
+                style = WooPosTypography.BodySmall,
+                color = MaterialTheme.colorScheme.outline,
+                modifier = Modifier.padding(top = WooPosSpacing.XSmall.value)
+            )
+        }
+    }
+}