Added a integer spin box that allows too choose quantity of a product… (

#507)

* Added a integer spin box that allows too choose quantity of a product added to cart - range from 1 to 10, like on the otel demo astronomy shop website.

* Made quantity selector button narrower (I kept it on the left, maybe it should be in the center?), split up QuantityChooser into a few composables.

demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/products/ProductDetails.kt

@@ -16,6 +16,10 @@ import androidx.compose.ui.unit.sp
 import io.opentelemetry.android.demo.clients.ImageLoader
 import io.opentelemetry.android.demo.gothamFont
 import io.opentelemetry.android.demo.model.Product
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.ui.Alignment
 
 @Composable
 fun ProductDetails(product:Product){
@@ -61,6 +65,8 @@ fun ProductDetails(product:Product){
             textAlign = TextAlign.Center
         )
         Spacer(modifier = Modifier.height(32.dp))
+        QuantityChooser()
+        Spacer(modifier = Modifier.height(16.dp))
         Button(
             onClick = { /* TODO: Handle add to cart */ },
             modifier = Modifier
@@ -71,3 +77,101 @@ fun ProductDetails(product:Product){
         }
     }
 }
+
+@Composable
+fun QuantityChooser() {
+    var quantity by remember { mutableIntStateOf(1) }
+    var expanded by remember { mutableStateOf(false) }
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .padding(vertical = 8.dp)
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+    ) {
+        Text(
+            text = "Quantity",
+            fontFamily = gothamFont,
+            fontSize = 18.sp,
+            modifier = Modifier.padding(end = 16.dp)
+        )
+        Box(
+            modifier = Modifier.weight(1f)
+        ) {
+            QuantityButton(quantity = quantity, onClick = { expanded = true })
+            QuantityDropdown(
+                expanded = expanded,
+                onDismissRequest = { expanded = false },
+                selectedQuantity = quantity,
+                onQuantitySelected = { selectedQuantity ->
+                    quantity = selectedQuantity
+                    expanded = false
+                }
+            )
+        }
+    }
+}
+
+@Composable
+fun QuantityButton(quantity: Int, onClick: () -> Unit) {
+    OutlinedButton(
+        onClick = onClick,
+        modifier = Modifier
+            .width(120.dp)
+            .height(48.dp)
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = quantity.toString(),
+                fontSize = 18.sp,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+            Icon(
+                imageVector = Icons.Filled.ArrowDropDown,
+                contentDescription = "Dropdown Icon",
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+        }
+    }
+}
+
+@Composable
+fun QuantityDropdown(
+    expanded: Boolean,
+    onDismissRequest: () -> Unit,
+    selectedQuantity: Int,
+    onQuantitySelected: (Int) -> Unit
+) {
+    DropdownMenu(
+        expanded = expanded,
+        onDismissRequest = onDismissRequest
+    ) {
+        for (i in 1..10) {
+            DropdownMenuItem(
+                text = {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        if (i == selectedQuantity) {
+                            Icon(
+                                imageVector = Icons.Filled.Check,
+                                contentDescription = "Selected",
+                                tint = Color.Black,
+                                modifier = Modifier.size(18.dp)
+                            )
+                            Spacer(modifier = Modifier.width(8.dp))
+                        }
+                        Text(
+                            text = i.toString(),
+                        )
+                    }
+                },
+                onClick = { onQuantitySelected(i) }
+            )
+        }
+    }
+}