[MBL-1254] Add the confirm pledge screen and views (#1968)

* add the confirm pledge screen and views * lint and preview amount fix
kickstarter · Mar 6, 2024 · 8901ea1 · 8901ea1
1 parent 907199a
commit 8901ea1
Show file tree

Hide file tree

Showing 3 changed files with 651 additions and 85 deletions.
diff --git a/app/src/main/java/com/kickstarter/ui/activities/compose/projectpage/AddOnsScreen.kt b/app/src/main/java/com/kickstarter/ui/activities/compose/projectpage/AddOnsScreen.kt
@@ -98,13 +98,6 @@ fun AddOnsScreen(
     onItemAddedOrRemoved: (Map<Reward, Int>) -> Unit,
     onContinueClicked: () -> Unit
 ) {
-
-    var countryInput by remember {
-        mutableStateOf(initialCountryInput ?: "United States")
-    }
-    var countryListExpanded by remember {
-        mutableStateOf(false)
-    }
     val interactionSource = remember {
         MutableInteractionSource()
     }
@@ -190,81 +183,12 @@ fun AddOnsScreen(
 
                 Spacer(modifier = Modifier.height(dimensions.paddingSmall))
 
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .clickable(
-                            interactionSource = interactionSource,
-                            indication = null,
-                            onClick = { countryListExpanded = false }
-                        ),
-                ) {
-                    TextField(
-                        modifier = Modifier
-                            .height(dimensions.minButtonHeight)
-                            .width(dimensions.countryInputWidth),
-                        value = countryInput,
-                        onValueChange = {
-                            countryInput = it
-                            countryListExpanded = true
-                        },
-                        keyboardOptions = KeyboardOptions(
-                            keyboardType = KeyboardType.Text,
-                            imeAction = ImeAction.Done
-                        ),
-                        shape = shapes.medium,
-                        colors = TextFieldDefaults.textFieldColors(
-                            backgroundColor = colors.kds_white,
-                            focusedIndicatorColor = Color.Transparent,
-                            unfocusedIndicatorColor = Color.Transparent,
-                            disabledIndicatorColor = Color.Transparent
-                        ),
-                        textStyle = typography.subheadlineMedium.copy(color = colors.textAccentGreenBold),
-                    )
-
-                    AnimatedVisibility(visible = countryListExpanded) {
-                        Card(shape = shapes.medium) {
-                            LazyColumn(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .background(color = colors.kds_white)
-                            ) {
-                                if (countryInput.isNotEmpty()) {
-                                    items(
-                                        items = countryList.filter {
-                                            it.location()?.displayableName()?.lowercase()
-                                                ?.contains(countryInput.lowercase()) ?: false
-                                        }
-                                    ) {
-                                        CountryListItems(
-                                            item = it,
-                                            title = it.location()?.displayableName() ?: "",
-                                            onSelect = { country ->
-                                                countryInput =
-                                                    country.location()?.displayableName() ?: ""
-                                                countryListExpanded = false
-                                                onShippingRuleSelected(country)
-                                            }
-                                        )
-                                    }
-                                } else {
-                                    items(countryList) {
-                                        CountryListItems(
-                                            item = it,
-                                            title = it.location()?.displayableName() ?: "",
-                                            onSelect = { country ->
-                                                countryInput =
-                                                    country.location()?.displayableName() ?: ""
-                                                countryListExpanded = false
-                                                onShippingRuleSelected(country)
-                                            }
-                                        )
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
+                CountryInputWithDropdown(
+                    interactionSource = interactionSource,
+                    initialCountryInput = initialCountryInput,
+                    countryList = countryList,
+                    onShippingRuleSelected = onShippingRuleSelected
+                )
             }
 
             items(
@@ -318,3 +242,94 @@ fun CountryListItems(
         Text(text = title)
     }
 }
+
+@Composable
+fun CountryInputWithDropdown(
+    interactionSource: MutableInteractionSource,
+    initialCountryInput: String? = null,
+    countryList: List<ShippingRule>,
+    onShippingRuleSelected: (ShippingRule) -> Unit
+) {
+    var countryListExpanded by remember {
+        mutableStateOf(false)
+    }
+
+    var countryInput by remember {
+        mutableStateOf(initialCountryInput ?: "United States")
+    }
+
+    Column(
+        modifier = Modifier
+            .clickable(
+                interactionSource = interactionSource,
+                indication = null,
+                onClick = { countryListExpanded = false }
+            ),
+    ) {
+        TextField(
+            modifier = Modifier
+                .height(dimensions.minButtonHeight)
+                .width(dimensions.countryInputWidth),
+            value = countryInput,
+            onValueChange = {
+                countryInput = it
+                countryListExpanded = true
+            },
+            keyboardOptions = KeyboardOptions(
+                keyboardType = KeyboardType.Text,
+                imeAction = ImeAction.Done
+            ),
+            shape = shapes.medium,
+            colors = TextFieldDefaults.textFieldColors(
+                backgroundColor = colors.kds_white,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                disabledIndicatorColor = Color.Transparent
+            ),
+            textStyle = typography.subheadlineMedium.copy(color = colors.textAccentGreenBold),
+        )
+
+        AnimatedVisibility(visible = countryListExpanded) {
+            Card(shape = shapes.medium) {
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(color = colors.kds_white)
+                ) {
+                    if (countryInput.isNotEmpty()) {
+                        items(
+                            items = countryList.filter {
+                                it.location()?.displayableName()?.lowercase()
+                                    ?.contains(countryInput.lowercase()) ?: false
+                            }
+                        ) {
+                            CountryListItems(
+                                item = it,
+                                title = it.location()?.displayableName() ?: "",
+                                onSelect = { country ->
+                                    countryInput =
+                                        country.location()?.displayableName() ?: ""
+                                    countryListExpanded = false
+                                    onShippingRuleSelected(country)
+                                }
+                            )
+                        }
+                    } else {
+                        items(countryList) {
+                            CountryListItems(
+                                item = it,
+                                title = it.location()?.displayableName() ?: "",
+                                onSelect = { country ->
+                                    countryInput =
+                                        country.location()?.displayableName() ?: ""
+                                    countryListExpanded = false
+                                    onShippingRuleSelected(country)
+                                }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}