Merge pull request #12876 from woocommerce/issue/introduce-saved-pack…

…age-selection [Shipping Label Revamp] Introduce saved package selection
woocommerce · Nov 7, 2024 · 28229e5 · 28229e5
2 parents ea44993 + 52110f8
commit 28229e5
Show file tree

Hide file tree

Showing 6 changed files with 341 additions and 21 deletions.
diff --git a/...m/woocommerce/android/ui/orders/wooshippinglabels/packages/FetchSavedPackagesFromStore.kt b/...m/woocommerce/android/ui/orders/wooshippinglabels/packages/FetchSavedPackagesFromStore.kt
@@ -0,0 +1,41 @@
+package com.woocommerce.android.ui.orders.wooshippinglabels.packages
+
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PackageData
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PackageType
+import javax.inject.Inject
+
+class FetchSavedPackagesFromStore @Inject constructor() {
+    operator fun invoke(): List<PackageData> {
+        // This is a mocked response.
+        // When fully implemented, this will be sorted from the Shipping plugin API.
+        return listOf(
+            PackageData(
+                type = PackageType.ENVELOPE,
+                name = "Small Flat Rate Box",
+                description = "USPS Priority Mail Flat Rate Boxes",
+                length = "10",
+                width = "10",
+                height = "10",
+                isSelected = true
+            ),
+            PackageData(
+                type = PackageType.BOX,
+                name = "Small Flat Rate Box",
+                description = "Custom package",
+                length = "20",
+                width = "20",
+                height = "20",
+                isSelected = false
+            ),
+            PackageData(
+                type = PackageType.BOX,
+                name = "Small Flat Rate Box",
+                description = "DHL Express",
+                length = "30",
+                width = "30",
+                height = "30",
+                isSelected = false
+            )
+        )
+    }
+}
diff --git a/...rce/android/ui/orders/wooshippinglabels/packages/WooShippingLabelPackageCreationScreen.kt b/...rce/android/ui/orders/wooshippinglabels/packages/WooShippingLabelPackageCreationScreen.kt
@@ -6,8 +6,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Tab
@@ -23,6 +21,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PackageData
+import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PackageType
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PageTab
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PageType.CARRIER
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.WooShippingLabelPackageCreationViewModel.PageType.CUSTOM
@@ -40,7 +40,7 @@ fun WooShippingLabelPackageCreationScreen(
         tabs = viewState.value?.pageTabs.orEmpty(),
         createCustomPackageScreen = { WooShippingCustomPackageCreationScreen(viewModel) },
         createCarrierPackageScreen = { WooShippingCarrierPackageScreen() },
-        createSavedPackageScreen = { WooShippingSavedPackageScreen() }
+        createSavedPackageScreen = { WooShippingSavedPackageScreen(viewModel) }
     )
 }
 
@@ -66,9 +66,13 @@ fun WooShippingLabelPackageCreationScreen(
 
     Scaffold(
         topBar = {
-            TabRow(selectedTabIndex = tabIndex) {
+            TabRow(
+                selectedTabIndex = tabIndex,
+                backgroundColor = MaterialTheme.colors.surface,
+            ) {
                 tabs.forEachIndexed { index, pageTab ->
                     Tab(
+                        selectedContentColor = MaterialTheme.colors.onSurface,
                         text = { Text(text = pageTab.title) },
                         selected = tabIndex == index,
                         onClick = { tabIndex = index }
@@ -83,7 +87,6 @@ fun WooShippingLabelPackageCreationScreen(
                     .background(MaterialTheme.colors.surface)
                     .padding(paddingValues)
                     .fillMaxSize()
-                    .verticalScroll(rememberScrollState())
             ) { currentPageIndex ->
                 when (tabs[currentPageIndex].type) {
                     CUSTOM -> createCustomPackageScreen()
@@ -120,8 +123,43 @@ fun WooShippingLabelsPackageCreationScreenPreview() {
                     onSavePackageChanged = { }
                 )
             },
-            createCarrierPackageScreen = { },
-            createSavedPackageScreen = { }
+            createSavedPackageScreen = {
+                WooShippingSavedPackageScreen(
+                    savedPackages = listOf(
+                        PackageData(
+                            type = PackageType.ENVELOPE,
+                            name = "Small Flat Rate Box",
+                            description = "USPS Priority Mail Flat Rate Boxes",
+                            length = "10",
+                            width = "10",
+                            height = "10",
+                            isSelected = true
+                        ),
+                        PackageData(
+                            type = PackageType.BOX,
+                            name = "Small Flat Rate Box",
+                            description = "Custom package",
+                            length = "20",
+                            width = "20",
+                            height = "20",
+                            isSelected = false
+                        ),
+                        PackageData(
+                            type = PackageType.BOX,
+                            name = "Small Flat Rate Box",
+                            description = "DHL Express",
+                            length = "30",
+                            width = "30",
+                            height = "30",
+                            isSelected = false
+                        )
+                    ),
+                    isAddPackageEnabled = true,
+                    onAddPackageClick = { },
+                    onSavedPackageSelected = { _, _ -> }
+                )
+            },
+            createCarrierPackageScreen = { }
         )
     }
 }
diff --git a/.../android/ui/orders/wooshippinglabels/packages/WooShippingLabelPackageCreationViewModel.kt b/.../android/ui/orders/wooshippinglabels/packages/WooShippingLabelPackageCreationViewModel.kt
@@ -17,12 +17,13 @@ import javax.inject.Inject
 @HiltViewModel
 class WooShippingLabelPackageCreationViewModel @Inject constructor(
     savedState: SavedStateHandle,
-    private val resourceProvider: ResourceProvider
+    private val resourceProvider: ResourceProvider,
+    private val fetchSavedPackages: FetchSavedPackagesFromStore
 ) : ScopedViewModel(savedState) {
 
     private val _viewState = savedState.getStateFlow(
         scope = viewModelScope,
-        initialValue = ViewState(pageTabs, CustomPackageCreationData.EMPTY)
+        initialValue = ViewState(pageTabs)
     )
     val viewState = _viewState.asLiveData()
 
@@ -42,8 +43,30 @@ class WooShippingLabelPackageCreationViewModel @Inject constructor(
             )
         )
 
-    fun onAddPackageClick() {
-        triggerEvent(PackageSelected(_viewState.value.customPackageCreationData))
+    init {
+        _viewState.update { viewState ->
+            viewState.copy(savedPackageSelection = SavedPackageSelection(fetchSavedPackages()))
+        }
+    }
+
+    fun onSavedPackageSelected(packageData: PackageData, isSelected: Boolean) {
+        _viewState.update { viewState ->
+            viewState.savedPackageSelection.packages
+                .map { it.copy(isSelected = false) }
+                .toMutableList()
+                .apply { set(indexOf(packageData), packageData.copy(isSelected = isSelected)) }
+                .let { SavedPackageSelection(it) }
+                .let { viewState.copy(savedPackageSelection = it) }
+        }
+    }
+
+    fun onAddSavedPackageClick() {
+        _viewState.value.savedPackageSelection.packages.find { it.isSelected }
+            ?.let { triggerEvent(SavedPackageSelected(it)) }
+    }
+
+    fun onAddCustomPackageClick() {
+        triggerEvent(CustomPackageCreated(_viewState.value.customPackageCreationData))
     }
 
     fun onPackageTypeSpinnerClick() {
@@ -88,7 +111,8 @@ class WooShippingLabelPackageCreationViewModel @Inject constructor(
     @Parcelize
     data class ViewState(
         val pageTabs: List<PageTab> = emptyList(),
-        val customPackageCreationData: CustomPackageCreationData
+        val customPackageCreationData: CustomPackageCreationData = CustomPackageCreationData.EMPTY,
+        val savedPackageSelection: SavedPackageSelection = SavedPackageSelection(emptyList())
     ) : Parcelable
 
     @Parcelize
@@ -97,6 +121,29 @@ class WooShippingLabelPackageCreationViewModel @Inject constructor(
         val type: PageType
     ) : Parcelable
 
+    @Parcelize
+    data class PackageData(
+        val type: PackageType,
+        val name: String,
+        val description: String,
+        val length: String,
+        val width: String,
+        val height: String,
+        val isSelected: Boolean,
+        val dimensionUnit: String = "cm"
+    ) : Parcelable {
+        val dimensionsForDisplay: String
+            get() = "$length x $width x $height $dimensionUnit"
+    }
+
+    @Parcelize
+    data class SavedPackageSelection(
+        val packages: List<PackageData>
+    ) : Parcelable {
+        val hasSelection: Boolean
+            get() = packages.find { it.isSelected } != null
+    }
+
     @Parcelize
     data class CustomPackageCreationData(
         val type: PackageType,
@@ -130,6 +177,7 @@ class WooShippingLabelPackageCreationViewModel @Inject constructor(
         ENVELOPE(R.string.woo_shipping_labels_package_creation_envelope_type)
     }
 
-    data class PackageSelected(val packageData: CustomPackageCreationData) : MultiLiveEvent.Event()
+    data class SavedPackageSelected(val packageData: PackageData) : MultiLiveEvent.Event()
+    data class CustomPackageCreated(val packageData: CustomPackageCreationData) : MultiLiveEvent.Event()
     data class ShowPackageTypeDialog(val currentSelection: PackageType) : MultiLiveEvent.Event()
 }
diff --git a/...erce/android/ui/orders/wooshippinglabels/packages/forms/WooShippingCustomPackageScreen.kt b/...erce/android/ui/orders/wooshippinglabels/packages/forms/WooShippingCustomPackageScreen.kt
@@ -6,7 +6,9 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.Checkbox
 import androidx.compose.material.Text
@@ -37,7 +39,7 @@ fun WooShippingCustomPackageCreationScreen(viewModel: WooShippingLabelPackageCre
         packageLength = viewState?.customPackageCreationData?.length.orEmpty(),
         packageWidth = viewState?.customPackageCreationData?.width.orEmpty(),
         isAddPackageEnabled = viewState?.customPackageCreationData?.isValid ?: false,
-        onAddPackageClick = viewModel::onAddPackageClick,
+        onAddPackageClick = viewModel::onAddCustomPackageClick,
         onPackageTypeClick = viewModel::onPackageTypeSpinnerClick,
         onLengthChange = viewModel::onLengthChange,
         onWidthChange = viewModel::onWidthChange,
@@ -65,6 +67,7 @@ fun WooShippingCustomPackageCreationScreen(
         modifier = modifier
             .fillMaxSize()
             .padding(16.dp)
+            .verticalScroll(rememberScrollState())
     ) {
         Column(
             modifier = modifier.weight(1f),