setUpUpi fragments to compose screen fix (#1648)

* trnasformed setupi pin activity to compose * proper naming and snackbar instead of toast * handling setupUpiPinSuccess logic in the compose UI itself * comments removed --------- Co-authored-by: niranjannlc <[email protected]>
openMF · Jun 9, 2024 · 98e38e6 · 98e38e6
1 parent 16c3ee8
commit 98e38e6
Show file tree

Hide file tree

Showing 21 changed files with 1,245 additions and 523 deletions.
diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/ExpiryDateInput.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/ExpiryDateInput.kt
@@ -0,0 +1,116 @@
+package org.mifos.mobilewallet.mifospay.ui
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun ExpiryDateInput(
+    date: String,
+    onDateChange: (String) -> Unit,
+    onDone: () -> Unit,
+) {
+    val (a, b, c) = FocusRequester.createRefs()
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(8.dp), verticalAlignment = Alignment.Bottom
+    ) {
+        BasicTextField(modifier = Modifier
+            .focusRequester(b)
+            .focusProperties {
+                next = c
+            },
+            value = TextFieldValue(date, selection = TextRange(date.length)),
+            onValueChange = {
+                if (it.text.length == 3 && it.text[2] != '/') {
+                    val newText = it.text.substring(0, 2) + '/' + it.text.substring(2)
+                    onDateChange(newText)
+                    return@BasicTextField
+                }
+                if (it.text.length > date.length) {
+                    // If the user is typing at the third position, ensure it remains '/'
+                    if (it.text.length >= 3 && it.text[2] != '/') {
+                        val newText = it.text.substring(0, 2) + '/' + it.text.substring(3)
+                        onDateChange(newText)
+                        return@BasicTextField
+                    }
+                }
+                onDateChange(it.text)
+            },
+            keyboardActions = KeyboardActions(onDone = {
+                onDone()
+            }),
+            keyboardOptions = KeyboardOptions.Default.copy(
+                keyboardType = KeyboardType.Number, imeAction = ImeAction.Done
+            ),
+            decorationBox = {
+                Row(horizontalArrangement = Arrangement.Center) {
+                    repeat(7) { index ->
+                        FormattedDateView(
+                            index = index, text = date
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                    }
+                }
+            })
+    }
+}
+
+@Composable
+fun FormattedDateView(
+    index: Int, text: String
+) {
+    val isFocused = text.length == index
+
+    val char = when {
+        index == 2 -> "/"
+        index == text.length -> "_"
+        index > text.length -> "_"
+        else -> text[index].toString()
+    }
+    androidx.compose.material3.Text(
+        modifier = Modifier
+            .width(40.dp)
+            .wrapContentHeight(align = Alignment.CenterVertically),
+        text = char,
+        style = MaterialTheme.typography.headlineSmall,
+        color = if (isFocused) {
+            Color.DarkGray
+        } else {
+            Color.LightGray
+        },
+        textAlign = TextAlign.Center
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ExpiryDateInputPreview() {
+    ExpiryDateInput(date = "", onDateChange = {}, onDone = {})
+}
+
diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/HeadingTitile.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/HeadingTitile.kt
@@ -0,0 +1,66 @@
+package org.mifos.mobilewallet.mifospay.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.mifospay.core.designsystem.theme.MifosTheme
+
+
+@Composable
+fun VerifyStepHeader(text: String, isVerified: Boolean) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth(),
+    ) {
+        Text(
+            text = text,
+            color = Color(0xFF212121),
+            fontSize = 17.sp,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier
+                .padding(16.dp)
+                .weight(1f),
+            textAlign = TextAlign.Start,
+            style = TextStyle(fontWeight = FontWeight.Bold)
+        )
+        IconButton(
+            onClick = { },
+        ) {
+            if (isVerified)
+                Icon(
+                    imageVector = Icons.Default.Check,
+                    contentDescription = null,
+                    tint = if (isVerified) Color.Black else Color.Gray,
+                    modifier = Modifier.size(24.dp)
+                )
+        }
+    }
+}
+@Preview
+@Composable
+fun VerifyStepHeaderVerifiedPreview() {
+    MifosTheme {
+        VerifyStepHeader(text = "Debit card Details ", isVerified = true)
+    }
+}
+
+@Preview
+@Composable
+fun VerifyStepHeaderUnverifiedPreview() {
+    VerifyStepHeader(text = "Enter OTP ", isVerified = false)
+}
diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/OtpTextField.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/OtpTextField.kt
@@ -0,0 +1,125 @@
+package org.mifos.mobilewallet.mifospay.ui
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun OtpTextField(
+    modifier: Modifier = Modifier,
+    realOtp: String = "",
+    otpCount: Int = 4,
+    onOtpTextCorrectlyEntered: () -> Unit
+) {
+    var otpText by remember { mutableStateOf("") }
+    var isError by remember { mutableStateOf(false) }
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+
+        BasicTextField(modifier = modifier,
+            value = TextFieldValue(otpText, selection = TextRange(otpText.length)),
+            onValueChange = {
+                otpText = it.text
+                isError = false
+                if (otpText.length == otpCount) {
+                    if (otpText != realOtp) {
+                        isError = true
+                    } else {
+                        onOtpTextCorrectlyEntered.invoke()
+                    }
+                }
+            },
+            keyboardActions = KeyboardActions(onDone = {
+                if (otpText != realOtp) {
+                    isError = true
+                } else {
+                    onOtpTextCorrectlyEntered.invoke()
+                }
+                println("OTP: $otpText and $isError")
+            }),
+            keyboardOptions = KeyboardOptions.Default.copy(
+                keyboardType = KeyboardType.Number, imeAction = ImeAction.Done
+            ),
+            decorationBox = {
+                Row(horizontalArrangement = Arrangement.Center) {
+                    repeat(otpCount) { index ->
+                        CharView(
+                            index = index, text = otpText
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                    }
+                }
+            })
+        if (isError) {
+            // display erro message in text
+            Text(
+                text = "Invalid OTP",
+                style = MaterialTheme.typography.bodyMedium,
+                color = Color.Red,
+                textAlign = TextAlign.Center,
+                modifier = Modifier.padding(top = 8.dp)
+            )
+        }
+    }
+}
+
+@Composable
+fun CharView(
+    index: Int, text: String
+) {
+    val isFocused = text.length == index
+    val char = when {
+        index == text.length -> "_"
+        index > text.length -> "_"
+        else -> text[index].toString()
+    }
+    Text(
+        modifier = Modifier
+            .width(40.dp)
+            .wrapContentHeight(align = Alignment.CenterVertically),
+        text = char,
+        style = MaterialTheme.typography.headlineSmall,
+        color = if (isFocused) {
+            Color.DarkGray
+        } else {
+            Color.LightGray
+        },
+        textAlign = TextAlign.Center
+    )
+}
+
+@Preview
+@Composable
+fun prviewOtpTextField() {
+    OtpTextField(
+        realOtp = "1234",
+        otpCount = 4,
+        onOtpTextCorrectlyEntered = {}
+    )
+}