Updated the design of the "Print Receipt"-screen

PayEx · Oct 16, 2024 · 997d051 · 997d051
1 parent 3af4427
commit 997d051
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 27 deletions.
diff --git a/app/src/main/java/com/pax/ecr/app/NexoMessages.kt b/app/src/main/java/com/pax/ecr/app/NexoMessages.kt
@@ -124,13 +124,13 @@ data class CardholderReceipt(
 ) {
     fun toReceiptData(items: Map<String, Int> = emptyMap()): String {
         return """
-                                                            <OutputText StartRow="1">Customer Receipt</OutputText>
-                                                            <OutputText StartRow="2">Check out the integration guide for examples</OutputText>
-                                                            <OutputText StartRow="4">${Cardholder.Mandatory.Outcome.AuthorisationResponder} ${Cardholder.Mandatory.Outcome.DebitStatus} ${Cardholder.Mandatory.Outcome.ApprovalCode} ${Cardholder.Mandatory.Outcome.AuthorisationResponseCode}</OutputText>
-                                                            <OutputText StartRow="5">${Cardholder.Mandatory.TimeStamp.TimeOfPayment} ${Cardholder.Mandatory.TimeStamp.DateOfPayment}
-                                                            
-                                                            </OutputText>
-                                                            ${if (items.isNotEmpty()) {
+                                                                        <OutputText StartRow="1">Customer Receipt</OutputText>
+                                                                        <OutputText StartRow="2">Check out the integration guide for examples</OutputText>
+                                                                        <OutputText StartRow="4">${Cardholder.Mandatory.Outcome.AuthorisationResponder} ${Cardholder.Mandatory.Outcome.DebitStatus} ${Cardholder.Mandatory.Outcome.ApprovalCode} ${Cardholder.Mandatory.Outcome.AuthorisationResponseCode}</OutputText>
+                                                                        <OutputText StartRow="5">${Cardholder.Mandatory.TimeStamp.TimeOfPayment} ${Cardholder.Mandatory.TimeStamp.DateOfPayment}
+                                                                        
+                                                                        </OutputText>
+                                                                        ${if (items.isNotEmpty()) {
             items.keys.mapIndexed {
                     index,
                     key,
@@ -140,18 +140,18 @@ data class CardholderReceipt(
         } else {
             ""
         }}
-                                <OutputText StartRow="${items.size + 7}">
-                                
-                                
-                                </OutputText>
-                                                            <OutputText StartRow="${items.size + 8}">${Cardholder.Mandatory.Payment.PaymentAmount} ${Cardholder.Mandatory.Payment.Currency}
-                                                                
-                                                                
-                                                                
-                                                                
-                                                                
-                                                                      
-                                                            </OutputText>
+                                            <OutputText StartRow="${items.size + 7}">
+                                            
+                                            
+                                            </OutputText>
+                                                                        <OutputText StartRow="${items.size + 8}">${Cardholder.Mandatory.Payment.PaymentAmount} ${Cardholder.Mandatory.Payment.Currency}
+                                                                            
+                                                                            
+                                                                            
+                                                                            
+                                                                            
+                                                                                  
+                                                                        </OutputText>
             """.trimIndent()
     }
 }

diff --git a/app/src/main/java/com/pax/ecr/app/ui/screen/PrintReceiptScreen.kt b/app/src/main/java/com/pax/ecr/app/ui/screen/PrintReceiptScreen.kt
@@ -1,10 +1,13 @@
 package com.pax.ecr.app.ui.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
@@ -13,6 +16,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
@@ -26,39 +31,58 @@ fun PrintReceiptScreen(
         modifier =
             modifier
                 .fillMaxSize()
+                .background(Color(0xFF2C2C2C))
                 .padding(16.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
         Text(
             text = "Transaction Complete",
-            style = MaterialTheme.typography.titleLarge,
-            fontSize = 24.sp,
+            style =
+                MaterialTheme.typography.headlineSmall.copy(
+                    fontWeight = FontWeight.Bold,
+                    color = Color.White,
+                ),
             modifier = Modifier.padding(bottom = 32.dp),
         )
-
         Button(
             onClick = { onPrintReceipt() },
+            colors =
+                ButtonDefaults.buttonColors(
+                    containerColor = Color(0xFFEE7600),
+                    contentColor = Color.White,
+                ),
+            shape = RoundedCornerShape(12.dp),
             modifier =
                 Modifier
                     .fillMaxWidth()
+                    .height(80.dp)
                     .padding(bottom = 16.dp),
         ) {
-            Text(text = "Print receipt")
+            Text(text = "Print Receipt", fontSize = 20.sp)
         }
-
         Button(
             onClick = { onContinue() },
             colors =
                 ButtonDefaults.buttonColors(
                     containerColor = Color.Black,
                     contentColor = Color.White,
                 ),
+            shape = RoundedCornerShape(12.dp),
             modifier =
-                Modifier
-                    .fillMaxWidth(),
+                Modifier.fillMaxWidth()
+                    .height(65.dp),
         ) {
-            Text(text = "Continue")
+            Text(text = "Continue", fontSize = 20.sp)
         }
     }
 }
+
+@Preview(showBackground = true)
+@Composable
+private fun PrintReceiptScreenPreview() {
+    PrintReceiptScreen(
+        onPrintReceipt = { },
+        onContinue = { },
+    )
+}