Add delete dialog for cards

app/src/main/java/io/snabble/pay/app/feature/detailsaccount/ui/AccountDetails.kt

@@ -13,12 +13,15 @@ import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
+import io.snabble.pay.app.R
 import io.snabble.pay.app.domain.account.AccountCard
 import io.snabble.pay.app.domain.account.utils.GradiantGenerator
 import io.snabble.pay.app.feature.destinations.HomeScreenDestination
@@ -29,6 +32,7 @@ import io.snabble.pay.app.feature.detailsaccount.ui.widget.EditTextFieldCentered
 import io.snabble.pay.app.feature.detailsaccount.ui.widget.mandate.MandateState
 import io.snabble.pay.app.feature.newaccount.ui.NewAccountScreenNavArgs
 import io.snabble.pay.app.ui.AppBarLayout
+import io.snabble.pay.app.ui.SnabblePayDialog
 import io.snabble.pay.app.ui.theme.SnabblePayTheme
 import io.snabble.pay.app.ui.widgets.accountcard.AccountCard
 import io.snabble.pay.mandate.domain.model.Mandate
@@ -46,13 +50,27 @@ fun AccountDetails(
         mutableStateOf(accountCard.name)
     }
 
+    val showDeleteDialog = remember { mutableStateOf(false) }
+
     AppBarLayout(
         title = "",
         icon = Icons.Filled.Clear,
         onBackClick = {
             navigator?.navigate(HomeScreenDestination)
         }
     ) {
+        if (showDeleteDialog.value) {
+            SnabblePayDialog(
+                dialogTitle = stringResource(id = R.string.delete_card_title),
+                dialogText = stringResource(id = R.string.delete_card_message),
+                confirmButtonLabel = stringResource(id = R.string.delete_card_confirm),
+                onConfirm = {
+                    onDeleteAccount()
+                    showDeleteDialog.value = false
+                },
+                cancelButtonLabel = stringResource(id = R.string.delete_card_cancel)
+            ) { showDeleteDialog.value = false }
+        }
         Column(modifier = Modifier.fillMaxWidth()) {
             Spacer(modifier = Modifier.height(16.dp))
             EditTextFieldCentered(
@@ -97,7 +115,7 @@ fun AccountDetails(
                     Spacer(modifier = Modifier.weight(1f))
                     DeleteButton(
                         modifier = Modifier.fillMaxWidth(),
-                        onClick = onDeleteAccount
+                        onClick = { showDeleteDialog.value = true }
                     )
                 }
             }

app/src/main/java/io/snabble/pay/app/feature/detailsaccount/ui/AccountDetailsScreen.kt

@@ -11,6 +11,7 @@ import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
+import com.ramcosta.composedestinations.navigation.popUpTo
 import io.snabble.pay.app.R
 import io.snabble.pay.app.data.utils.ErrorResponse
 import io.snabble.pay.app.feature.destinations.HomeScreenDestination
@@ -73,7 +74,11 @@ fun AccountDetailsScreen(
             )
         }
 
-        is AccountDeleted -> navigator?.navigate(HomeScreenDestination)
+        is AccountDeleted -> navigator?.navigate(HomeScreenDestination) {
+            popUpTo(HomeScreenDestination) {
+                inclusive = true
+            }
+        }
     }
 }
 

app/src/main/java/io/snabble/pay/app/ui/SnabblePayDialog.kt

@@ -0,0 +1,143 @@
+package io.snabble.pay.app.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ButtonDefaults.buttonColors
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.OutlinedButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material.ripple.RippleTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import io.snabble.pay.app.ui.theme.SnabblePayTheme
+
+@Composable
+fun SnabblePayDialog(
+    dialogTitle: String,
+    dialogText: String,
+    confirmButtonLabel: String,
+    onConfirm: () -> Unit,
+    cancelButtonLabel: String,
+    onDismiss: () -> Unit,
+) {
+    SnabblePayTheme {
+        Dialog(onDismissRequest = onDismiss) {
+            Surface(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight(),
+                color = MaterialTheme.colorScheme.surface,
+                shape = RoundedCornerShape(size = 28.dp)
+            ) {
+                Column(
+                    modifier = Modifier.padding(all = 16.dp)
+                ) {
+                    Text(
+                        modifier = Modifier.fillMaxWidth(),
+                        text = dialogTitle,
+                        color = MaterialTheme.colorScheme.onSurface,
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.typography.titleLarge
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Text(
+                        modifier = Modifier.fillMaxWidth(),
+                        color = MaterialTheme.colorScheme.onSurface,
+                        text = dialogText,
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.typography.bodyMedium
+                    )
+                    Spacer(modifier = Modifier.height(24.dp))
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(space = 32.dp)
+                    ) {
+                        CancelButton(label = cancelButtonLabel, onClick = onDismiss)
+                        ConfirmButton(confirmButtonLabel, onConfirm)
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun RowScope.ConfirmButton(confirmButtonLabel: String, onConfirmation: () -> Unit) {
+    CompositionLocalProvider(LocalRippleTheme provides OkButtonRippleTheme) {
+        OutlinedButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(weight = 1f),
+            colors = buttonColors(
+                backgroundColor = MaterialTheme.colorScheme.tertiary,
+                contentColor = MaterialTheme.colorScheme.onTertiary,
+                disabledBackgroundColor = MaterialTheme.colorScheme.tertiary.copy(alpha = 0.12f)
+                    .compositeOver(MaterialTheme.colorScheme.surface),
+                disabledContentColor = MaterialTheme.colorScheme.tertiary
+                    .copy(alpha = ContentAlpha.disabled)
+            ),
+            shape = RoundedCornerShape(percent = 100),
+            contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
+            onClick = { onConfirmation() }
+        ) {
+            Text(
+                text = confirmButtonLabel,
+                style = MaterialTheme.typography.labelLarge
+            )
+        }
+    }
+}
+
+@Composable
+private fun RowScope.CancelButton(label: String, onClick: () -> Unit) {
+    OutlinedButton(
+        modifier = Modifier
+            .fillMaxWidth()
+            .weight(weight = 1f),
+        border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.onSurface),
+        colors = buttonColors(
+            backgroundColor = MaterialTheme.colorScheme.surface,
+            contentColor = MaterialTheme.colorScheme.onSurface,
+            disabledBackgroundColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
+                .compositeOver(MaterialTheme.colorScheme.surface),
+            disabledContentColor = MaterialTheme.colorScheme.onSurface
+                .copy(alpha = ContentAlpha.disabled)
+        ),
+        shape = RoundedCornerShape(percent = 100),
+        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp),
+        onClick = { onClick() }
+    ) {
+        Text(
+            text = label,
+            style = MaterialTheme.typography.labelLarge
+        )
+    }
+}
+
+private object OkButtonRippleTheme : RippleTheme {
+
+    @Composable override fun defaultColor() = MaterialTheme.colorScheme.onTertiary
+
+    @Composable override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
+        MaterialTheme.colorScheme.onTertiary,
+        lightTheme = !isSystemInDarkTheme()
+    )
+}

app/src/main/java/io/snabble/pay/app/ui/theme/Theme.kt

@@ -11,17 +11,25 @@ import com.google.accompanist.systemuicontroller.rememberSystemUiController
 private val darkColorScheme = darkColorScheme(
     primary = Color.White,
     secondary = Color(0x7f0077BB),
+    tertiary = Color.White,
     background = Color(0xFF1D1A22),
     onPrimary = Color(0xFF0077BB),
-    onSecondary = Color(0xFF4BB4EF)
+    onSecondary = Color(0xFF4BB4EF),
+    surface = Color.Black,
+    onSurface = Color.White,
+    onTertiary = Color.Black
 )
 
 private val lightColorScheme = lightColorScheme(
     primary = Color.White,
     secondary = Color(0x7f0077BB),
+    tertiary = Color.Black,
     background = Color(0xFFFBFBFF),
     onPrimary = Color(0xFF0077BB),
-    onSecondary = Color(0xFF0077BB)
+    onSecondary = Color(0xFF0077BB),
+    surface = Color.White,
+    onSurface = Color.Black,
+    onTertiary = Color.White
 )
 
 @Composable

app/src/main/res/drawable/ic_clear.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#000000"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />
+
+</vector>

app/src/main/res/values-de/strings.xml

@@ -24,4 +24,9 @@
     <string name="error_reason">Fehler: %s</string>
     <string name="error_message">Verursacht durch: %s</string>
     <string name="alert_message">OK</string>
+
+    <string name="delete_card_title">Karte löschen</string>
+    <string name="delete_card_message">Möchten Sie diese Karte wirklich löschen?</string>
+    <string name="delete_card_confirm">Ja</string>
+    <string name="delete_card_cancel">Abbrechen</string>
 </resources>

app/src/main/res/values/strings.xml

@@ -22,4 +22,9 @@
     <string name="error_reason">Error: %s</string>
     <string name="error_message">caused by: %s</string>
     <string name="alert_message">Got it</string>
+
+    <string name="delete_card_title">Delete card</string>
+    <string name="delete_card_message">Do you really want to delete this card?</string>
+    <string name="delete_card_confirm">Yes</string>
+    <string name="delete_card_cancel">Cancel</string>
 </resources>