Modal date picker added on add contact info screen, working..

app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddContactInfoScreen.kt

@@ -1,8 +1,9 @@
 package com.fastest.pass.home.presentation.ui.components
 
-import android.util.Log
+import android.widget.Toast
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -20,16 +21,20 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDefaults
+import androidx.compose.material3.DatePickerDialog
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.rememberDatePickerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -39,6 +44,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.SoftwareKeyboardController
@@ -48,8 +54,11 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import com.fastest.pass.R
+import java.text.SimpleDateFormat
+import java.util.Date
 import java.util.Locale
 import java.util.TimeZone
+import java.util.logging.SimpleFormatter
 
 @Composable
 fun AddContactInfoScreen() {
@@ -116,8 +125,8 @@ fun AddContactInfoScreen() {
         Spacer(modifier = Modifier.height(20.dp))
         DropDownFieldACIFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.gender, gender)
 
-//        Spacer(modifier = Modifier.height(20.dp))
-//        DatePickerACIFS(labelText = R.string.birthday)
+        Spacer(modifier = Modifier.height(20.dp))
+        DatePickerACIFS(labelText = R.string.birthday)
     }
 }
 
@@ -293,6 +302,7 @@ fun ColumnScope.DropDownFieldACIFS(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ColumnScope.DatePickerACIFS(
     labelText: Int
@@ -307,13 +317,11 @@ fun ColumnScope.DatePickerACIFS(
     ) {
         TextField(
             value = selectedDate,
-            onValueChange = {
-                selectedDate = it
-            },
+            onValueChange = {},
             textStyle = MaterialTheme.typography.displayMedium.copy(
-                color = colorResource(id = R.color.blue_login)
+                color = colorResource(id = R.color.blue_text)
             ),
-            readOnly = false,
+            readOnly = true,
             label = { Text(
                 stringResource(id = labelText),
                 style = MaterialTheme.typography.titleSmall.copy(
@@ -337,9 +345,14 @@ fun ColumnScope.DatePickerACIFS(
                     color = colorResource(id = R.color.gray_border_textfield),
                     shape = RoundedCornerShape(16.dp)
                 )
-                .background(color = colorResource(id = R.color.transparent)),
+                .background(color = colorResource(id = R.color.transparent))
+                .clickable {
+                    showDatePicker = true
+                },
             shape = RoundedCornerShape(16.dp),
+            enabled = false,
             colors = TextFieldDefaults.colors(
+                disabledContainerColor = colorResource(id = R.color.transparent),
                 focusedLabelColor = colorResource(id = R.color.gray_splash),
                 unfocusedContainerColor = colorResource(id = R.color.transparent),
                 focusedContainerColor = colorResource(id = R.color.transparent),
@@ -352,7 +365,41 @@ fun ColumnScope.DatePickerACIFS(
                 keyboardType = KeyboardType.Password
             )
         )
+
+        if (showDatePicker) {
+            val datePickerState = rememberDatePickerState()
+
+            DatePickerDialog(
+                onDismissRequest = {
+                    showDatePicker = false
+                },
+                confirmButton = {
+                    TextButton(onClick = {
+                        val selectedMillis = datePickerState.selectedDateMillis
+                        if (selectedMillis != null) {
+                            val formattedDate = convertMillisToFormattedDate(selectedMillis)
+                            selectedDate = formattedDate
+                            showDatePicker = false
+                        }
+
+                    }) {
+                        Text(text = "OK")
+                    }
+                },
+                dismissButton = {
+                    TextButton(onClick = { showDatePicker = false }) {
+                        Text(text = "Cancel")
+                    }
+                },
+                colors = DatePickerDefaults.colors(
+                    containerColor = colorResource(id = R.color.white)
+                )
+            ) {
+                DatePicker(state = datePickerState)
+            }
+        }
     }
+
 }
 
 fun getAllCountriesList() : List<String> {
@@ -376,4 +423,10 @@ fun getTimeZonesWithOffsets() : List<String> {
         val timeZoneNames = timeZoneIds.joinToString(", ") { it.substringAfterLast('/') }
         "$offset $timeZoneNames"
     }.sorted()
-}
+}
+
+fun convertMillisToFormattedDate(millis: Long) : String {
+    val date = Date(millis)
+    val formatter = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault())
+    return formatter.format(date)
+}

app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddPaymentCardFormScreen.kt

@@ -3,6 +3,8 @@ package com.fastest.pass.home.presentation.ui.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
@@ -49,33 +51,45 @@ fun AddPaymentCardFormScreen() {
     val keyboardController = LocalSoftwareKeyboardController.current
     val focusManager = LocalFocusManager.current
 
-    Column(
+    Box(
         modifier = Modifier
             .fillMaxSize()
             .padding(horizontal = 30.dp)
-            .padding(bottom = 15.dp)
-            .background(Color.Transparent)
-            .verticalScroll(rememberScrollState())
+            .padding(bottom = 20.dp)
+            .background(Color.Transparent),
     ) {
-        Spacer(modifier = Modifier.height(20.dp))
-        NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.title)
-        Spacer(modifier = Modifier.height(20.dp))
-        NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.name_on_card)
-        Spacer(modifier = Modifier.height(20.dp))
-        NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.type)
-        Spacer(modifier = Modifier.height(20.dp))
-        NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.number, placeholder = "1234 1234 1234 1234")
-        Spacer(modifier = Modifier.height(20.dp))
-        NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.security_code, placeholder = "CVV")
-        Spacer(modifier = Modifier.height(20.dp))
-        NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.start_date, placeholder = "MM/YYYY")
-        Spacer(modifier = Modifier.height(20.dp))
-        NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.expiration_date, placeholder = "MM/YYYY")
-        Spacer(modifier = Modifier.height(20.dp))
-        NotesTextFieldAPCFS(keyboardController, focusManager)
-        Spacer(modifier = Modifier.height(25.dp))
         SaveButtonAPCFS(buttonText = R.string.save)
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 0.dp)
+                .padding(bottom = 80.dp)
+                .background(Color.Transparent)
+                .verticalScroll(rememberScrollState())
+        ) {
+            Spacer(modifier = Modifier.height(20.dp))
+            NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.title)
+            Spacer(modifier = Modifier.height(20.dp))
+            NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.name_on_card)
+            Spacer(modifier = Modifier.height(20.dp))
+            NameTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.type)
+            Spacer(modifier = Modifier.height(20.dp))
+            NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.number, placeholder = "1234 1234 1234 1234")
+            Spacer(modifier = Modifier.height(20.dp))
+            NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.security_code, placeholder = "CVV")
+            Spacer(modifier = Modifier.height(20.dp))
+            NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.start_date, placeholder = "MM/YYYY")
+            Spacer(modifier = Modifier.height(20.dp))
+            NumberTextFieldAPCFS(keyboardController = keyboardController, focusManager = focusManager, labelText = R.string.expiration_date, placeholder = "MM/YYYY")
+            Spacer(modifier = Modifier.height(20.dp))
+            NotesTextFieldAPCFS(keyboardController, focusManager)
+//        Spacer(modifier = Modifier.height(25.dp))
+//        SaveButtonAPCFS(buttonText = R.string.save)
+        }
     }
+
+
 }
 
 @Composable
@@ -291,12 +305,13 @@ fun ColumnScope.NotesTextFieldAPCFS(
 }
 
 @Composable
-fun ColumnScope.SaveButtonAPCFS(buttonText: Int) {
+fun BoxScope.SaveButtonAPCFS(buttonText: Int) {
     Button(
         modifier = Modifier
             .background(colorResource(id = R.color.transparent))
             .fillMaxWidth()
             .height(60.dp)
+            .align(Alignment.BottomCenter)
             .clickable() { },
         onClick = {},
         shape = RoundedCornerShape(15.dp),