feature(bank-sdk): Transaction List. Capture Flow UI Implementation

PP-768

bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/transactionlist/ui/dialog/attachdoc/AttachDocumentToTransactionDialog.kt

@@ -0,0 +1,154 @@
+package net.gini.android.bank.sdk.transactionlist.ui.dialog.attachdoc
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+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.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import net.gini.android.bank.sdk.R
+import net.gini.android.bank.sdk.transactionlist.ui.dialog.attachdoc.colors.AttachDocumentToTransactionDialogColors
+import net.gini.android.capture.ui.components.checkbox.GiniCheckbox
+import net.gini.android.capture.ui.theme.GiniTheme
+
+@Composable
+fun AttachDocumentToTransactionDialog(
+    modifier: Modifier = Modifier,
+    onDismiss: () -> Unit,
+    onConfirm: (alwaysAttach: Boolean) -> Unit,
+    colors: AttachDocumentToTransactionDialogColors = AttachDocumentToTransactionDialogColors.colors()
+) {
+
+    var alwaysAttachChecked by remember { mutableStateOf(false) }
+
+    Dialog(
+        onDismissRequest = onDismiss
+    ) {
+        Card(
+            modifier = modifier.fillMaxWidth(),
+            colors = CardDefaults.cardColors(
+                containerColor = colors.containerColor,
+                contentColor = colors.contentColor
+            ),
+        ) {
+            Column(
+                modifier = Modifier.padding(16.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp)
+            ) {
+                Icon(
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                    painter = painterResource(id = R.drawable.gbs_note_stack),
+                    contentDescription = null,
+                    tint = colors.headerIconColor,
+                )
+                Text(
+                    text = stringResource(id = R.string.gbs_tl_attach_document_dialog_title),
+                    style = GiniTheme.typography.headline5, // TODO
+                    color = colors.titleColor,
+                    textAlign = TextAlign.Center,
+                )
+                Column {
+                    Text(
+                        text = stringResource(id = R.string.gbs_tl_attach_document_dialog_content),
+                        style = GiniTheme.typography.body1, // TODO
+                        color = colors.contentColor,
+                    )
+                    AlwaysAttachCheckableText(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        checked = alwaysAttachChecked,
+                        onCheckedChange = { alwaysAttachChecked = !alwaysAttachChecked },
+                        colors = colors.checkableContentColors
+                    )
+                }
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.End,
+                ) {
+                    TextButton(
+                        onClick = { onDismiss() }) {
+                        Text(
+                            text = stringResource(id = R.string.gbs_tl_attach_document_dialog_cancel_button_text),
+                            style = GiniTheme.typography.body1
+                        )
+                    }
+                    TextButton(
+                        onClick = {
+                            onConfirm(alwaysAttachChecked)
+                        }) {
+                        Text(
+                            text = stringResource(id = R.string.gbs_tl_attach_document_dialog_confirm_button_text),
+                            style = GiniTheme.typography.body1
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun AlwaysAttachCheckableText(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    colors: AttachDocumentToTransactionDialogColors.CheckableContentColors =
+        AttachDocumentToTransactionDialogColors.CheckableContentColors.colors()
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        GiniCheckbox(
+            checked = checked,
+            onCheckedChange = onCheckedChange,
+            colors = colors.checkboxColor
+        )
+        Text(
+            modifier = Modifier.padding(start = 16.dp),
+            text = "Immer anhängen und nicht erneut fragen",
+            style = GiniTheme.typography.body1,
+            color = colors.textColor
+        )
+    }
+}
+
+@Preview
+@Composable
+fun AttachDocumentToTransactionDialogPreview() {
+    GiniTheme {
+        AttachDocumentToTransactionDialog(
+            onDismiss = {},
+            onConfirm = {}
+        )
+    }
+}
+
+@Preview(uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun AttachDocumentToTransactionDialogPreviewDark() {
+    GiniTheme {
+        AttachDocumentToTransactionDialog(
+            onDismiss = {},
+            onConfirm = {}
+        )
+    }
+}

bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/transactionlist/ui/dialog/attachdoc/colors/AttachDocumentToTransactionDialogColors.kt

@@ -0,0 +1,55 @@
+package net.gini.android.bank.sdk.transactionlist.ui.dialog.attachdoc.colors
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+import net.gini.android.capture.ui.components.checkbox.GiniCheckboxColors
+import net.gini.android.capture.ui.theme.GiniTheme
+
+@Immutable
+data class AttachDocumentToTransactionDialogColors(
+    val containerColor: Color,
+    val headerIconColor: Color,
+    val titleColor: Color,
+    val contentColor: Color,
+    val buttonTextColor: Color,
+    val checkableContentColors: CheckableContentColors,
+) {
+
+    @Immutable
+    data class CheckableContentColors(
+        val checkboxColor: GiniCheckboxColors,
+        val textColor: Color,
+    ) {
+        companion object {
+            @Composable
+            fun colors(
+                checkboxColor: GiniCheckboxColors = GiniCheckboxColors.colors(),
+                textColor: Color = GiniTheme.colorScheme.dialogs.text,
+            ) = CheckableContentColors(
+                checkboxColor = checkboxColor,
+                textColor = textColor,
+            )
+        }
+    }
+
+    companion object {
+
+        @Composable
+        fun colors(
+            containerColor: Color = GiniTheme.colorScheme.dialogs.container,
+            headerIconColor: Color = GiniTheme.colorScheme.dialogs.text,
+            titleColor: Color = GiniTheme.colorScheme.dialogs.text,
+            contentColor: Color = GiniTheme.colorScheme.dialogs.text,
+            buttonTextColor: Color = GiniTheme.colorScheme.dialogs.labelText,
+            checkableContentColors: CheckableContentColors = CheckableContentColors.colors(),
+        ) = AttachDocumentToTransactionDialogColors(
+            containerColor = containerColor,
+            headerIconColor = headerIconColor,
+            titleColor = titleColor,
+            contentColor = contentColor,
+            buttonTextColor = buttonTextColor,
+            checkableContentColors = checkableContentColors,
+        )
+    }
+}

bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/transactionlist/ui/extractions/ExtractionResultDocumentsSection.kt

@@ -0,0 +1,140 @@
+package net.gini.android.bank.sdk.transactionlist.ui.extractions
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import net.gini.android.bank.sdk.R
+import net.gini.android.bank.sdk.transactionlist.ui.extractions.colors.ExtractionResultDocumentsSectionColors
+import net.gini.android.capture.ui.theme.GiniTheme
+
+private val imageExtensions = listOf(".jpg", ".jpeg", ".png", ".gif")
+
+@Composable
+fun ExtractionResultDocumentSection(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit = {},
+) {
+    Card(
+        modifier = modifier,
+        shape = RectangleShape
+    ) {
+        Column {
+            Text(
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                text = stringResource(id = R.string.gbs_tl_extraction_result_documents_section_title),
+                style = GiniTheme.typography.subtitle2,
+            )
+            Column(
+                modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 4.dp),
+            ) {
+                content()
+            }
+        }
+    }
+}
+
+@Composable
+fun ExtractionResultDocumentSection(
+    modifier: Modifier = Modifier,
+) {
+    val dummyDocuments = listOf("IMG_20240807_075215616516515645664333.jpg", "Rechnung-223.pdf")
+
+    ExtractionResultDocumentSection(
+        modifier = modifier,
+        content = {
+            dummyDocuments.forEach {
+                Document(documentName = it)
+            }
+        }
+    )
+}
+
+@Composable
+private fun Document(
+    documentName: String,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        DocumentImage(
+            imageUrl = null,
+            documentName = documentName,
+        )
+        Text(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            text = documentName,
+            style = GiniTheme.typography.subtitle1,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+        )
+    }
+}
+
+@Composable
+private fun DocumentImage(
+    imageUrl: String?,
+    documentName: String,
+    modifier: Modifier = Modifier,
+    colorScheme: ExtractionResultDocumentsSectionColors.DocumentItemColors.IconPlaceholderColors =
+        ExtractionResultDocumentsSectionColors.DocumentItemColors.IconPlaceholderColors.colors(),
+) {
+    if (imageUrl != null) {
+        // TODO
+    } else {
+        val iconResId = if (imageExtensions.find { documentName.endsWith(it, true) } != null) {
+            R.drawable.gbs_tl_document_placeholder_image
+        } else {
+            R.drawable.gbs_tl_document_placeholder_file
+        }
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = modifier
+                .padding(8.dp)
+                .background(colorScheme.iconBackgroundColor, shape = RoundedCornerShape(4.dp))
+        ) {
+            Icon(
+                modifier = Modifier
+                    .size(40.dp)
+                    .padding(8.dp),
+                painter = painterResource(id = iconResId),
+                contentDescription = null,
+                tint = colorScheme.iconTint,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ExtractionResultDocumentsSectionPreview() {
+    GiniTheme {
+        ExtractionResultDocumentSection()
+    }
+}
+
+@Preview(uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun ExtractionResultDocumentsSectionPreviewDark() {
+    GiniTheme {
+        ExtractionResultDocumentSection()
+    }
+}