amount and card number in signature pad

app/changelog.md

@@ -0,0 +1,7 @@
+## Change Logs For UAT
+
+### version 3.3
+* config auto update after transaction
+* signature removed on void
+* "Enter Password" color to LegacyRed
+

app/src/main/java/com/mob/utsmyanmar/ui/navigation/AppNavGraph.kt

@@ -92,6 +92,8 @@ fun AppNavGraph(
             val sharedViewModel: SharedViewModel = hiltViewModel(activity)
             SignaturePad(
                 onBack = { navController.popBackStack() },
+                amount = sharedViewModel.payDetail.value?.amount,
+                cardNumber = sharedViewModel.payDetail.value?.cardNo ?: "",
                 onConfirm = { bitmap, signatureBlob ->
                     sharedViewModel.signBitmap = bitmap
                     sharedViewModel.updateSignatureBlob(signatureBlob)

app/src/main/java/com/mob/utsmyanmar/ui/password_input/PasswordInput.kt

@@ -112,7 +112,7 @@ fun InputPassword(
                     verticalArrangement = Arrangement.Center,
                     horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    Text(text = "Enter Password", color = Color.Gray, fontSize = 18.sp)
+                    Text(text = "Enter Password", color = Color.LegacyRed, fontSize = 18.sp)
                     Spacer(Modifier.height(16.dp))
                     PasswordDots(filledCount = uiState.input.length, totalCount = PASSWORD_LENGTH)
                     Spacer(Modifier.height(8.dp))

app/src/main/java/com/mob/utsmyanmar/ui/signature_pad/SignaturePad.kt

@@ -29,6 +29,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.mob.utsmyanmar.ui.components.appbar.AppBar
 import com.mob.utsmyanmar.ui.theme.MOBPOSTheme
+import com.mob.utsmyanmar.utils.formatAmount
+import com.mob.utsmyanmar.utils.maskCardNumber
 import se.warting.signaturepad.SignaturePadAdapter
 import se.warting.signaturepad.SignaturePadView
 import java.io.ByteArrayOutputStream
@@ -38,7 +40,9 @@ import com.mob.utsmyanmar.ui.theme.Color as AppColor
 fun SignaturePad(
     modifier: Modifier = Modifier,
     onBack: () -> Unit = {},
-    onConfirm: (Bitmap?, ByteArray?) -> Unit = { _, _ -> }
+    onConfirm: (Bitmap?, ByteArray?) -> Unit = { _, _ -> },
+    amount: Long? = 0L,
+    cardNumber: String,
 ) {
     var signaturePadAdapter: SignaturePadAdapter? = null
     var selectedMode by remember { mutableStateOf(SignatureMode.Digital) }
@@ -76,6 +80,37 @@ fun SignaturePad(
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
 
+            Column(
+                modifier = Modifier.padding(0.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Text(
+                    text = "Amount",
+                    style = MaterialTheme.typography.titleSmall,
+                    color = AppColor.LegacyRed
+                )
+                Text(
+                    text = amount.formatAmount(),
+                    style = MaterialTheme.typography.bodySmall,
+                    color = AppColor.LegacyRed
+                )
+            }
+            Column(
+                modifier = Modifier.padding(0.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Text(
+                    text = "Card Number",
+                    style = MaterialTheme.typography.titleSmall,
+                    color = AppColor.LegacyRed
+                )
+                Text(
+                    text = cardNumber.maskCardNumber(),
+                    style = MaterialTheme.typography.bodySmall,
+                    color = AppColor.LegacyRed
+                )
+            }
+
 
             if (isManualMode) {
                 Card(
@@ -115,7 +150,11 @@ fun SignaturePad(
                         .fillMaxWidth()
                         .height(200.dp)
                         .background(AppColor.White)
-                        .border(width = 1.dp, color = AppColor.LegacyRed, shape = RoundedCornerShape(8.dp)),
+                        .border(
+                            width = 1.dp,
+                            color = AppColor.LegacyRed,
+                            shape = RoundedCornerShape(8.dp)
+                        ),
                 )
             }
 
@@ -234,6 +273,9 @@ private fun SignatureModeOption(
 @Composable
 fun SignaturePadPreview() {
     MOBPOSTheme {
-        SignaturePad()
+        SignaturePad(
+            amount = 1000000L,
+            cardNumber = "6244310034582136"
+        )
     }
 }

app/src/main/java/com/mob/utsmyanmar/utils/Converter.kt

@@ -0,0 +1,20 @@
+package com.mob.utsmyanmar.utils
+
+import android.annotation.SuppressLint
+
+@SuppressLint("DefaultLocale")
+fun Long?.formatAmount(): String {
+    val amount = (this ?: 0L) / 100.0
+    return String.format("%,.2f", amount)
+}
+
+fun String?.maskCardNumber(): String {
+    if (this.isNullOrEmpty()) return ""
+    val maskedPan = StringBuilder(this)
+    if (this.length > 12) {
+        maskedPan.replace(6, 12, "******")
+    } else {
+        maskedPan.append(" ")
+    }
+    return maskedPan.toString()
+}