feature(bank-sdk): Skonto. Handle UI on small devices

PP-641
gini · Nov 27, 2024 · 712b2f7 · 712b2f7
1 parent d945049
commit 712b2f7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 38 deletions.
diff --git a/...a/net/gini/android/bank/sdk/capture/digitalinvoice/skonto/DigitalInvoiceSkontoFragment.kt b/...a/net/gini/android/bank/sdk/capture/digitalinvoice/skonto/DigitalInvoiceSkontoFragment.kt
@@ -1,8 +1,7 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
+@file:OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3Api::class)
 
 package net.gini.android.bank.sdk.capture.digitalinvoice.skonto
 
-import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.icu.util.Calendar
 import android.os.Bundle
 import android.view.LayoutInflater
@@ -61,7 +60,6 @@ import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.window.Dialog
@@ -94,6 +92,8 @@ import net.gini.android.capture.ui.components.textinput.GiniTextInput
 import net.gini.android.capture.ui.components.textinput.amount.GiniAmountTextInput
 import net.gini.android.capture.ui.components.topbar.GiniTopBar
 import net.gini.android.capture.ui.components.topbar.GiniTopBarColors
+import net.gini.android.capture.ui.compose.GiniScreenPreviewSizes
+import net.gini.android.capture.ui.compose.GiniScreenPreviewUiModes
 import net.gini.android.capture.ui.theme.GiniTheme
 import net.gini.android.capture.ui.theme.modifier.tabletMaxWidth
 import net.gini.android.capture.view.InjectedViewAdapterInstance
@@ -534,6 +534,7 @@ private fun SkontoSection(
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Text(
+                    modifier = Modifier.weight(1f, fill = false),
                     text = stringResource(id = R.string.gbs_skonto_section_discount_title),
                     style = GiniTheme.typography.subtitle1,
                     color = colors.titleTextColor,
@@ -840,21 +841,16 @@ private fun InfoDialog(
 }
 
 @Composable
-@Preview
+@GiniScreenPreviewUiModes
+@GiniScreenPreviewSizes
 private fun ScreenReadyStatePreviewLight() {
     ScreenReadyStatePreview()
 }
 
-@Composable
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-private fun ScreenReadyStatePreviewDark() {
-    ScreenReadyStatePreview()
-}
-
 @Composable
 private fun ScreenReadyStatePreview() {
     GiniTheme {
-        var state by remember { mutableStateOf(previewState) }
+        val state by remember { mutableStateOf(previewState) }
 
         ScreenReadyState(
             state = state,

diff --git a/bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoScreenContent.kt b/bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoScreenContent.kt
@@ -1,8 +1,11 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
+@file:OptIn(
+    ExperimentalMaterial3Api::class,
+    ExperimentalMaterial3Api::class,
+    ExperimentalMaterial3Api::class
+)
 
 package net.gini.android.bank.sdk.capture.skonto
 
-import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.icu.util.Calendar
 import android.widget.FrameLayout
 import androidx.activity.compose.BackHandler
@@ -18,10 +21,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-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.requiredWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
@@ -55,7 +58,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.window.Dialog
@@ -84,6 +86,8 @@ import net.gini.android.capture.ui.components.textinput.GiniTextInput
 import net.gini.android.capture.ui.components.textinput.amount.GiniAmountTextInput
 import net.gini.android.capture.ui.components.topbar.GiniTopBar
 import net.gini.android.capture.ui.components.topbar.GiniTopBarColors
+import net.gini.android.capture.ui.compose.GiniScreenPreviewSizes
+import net.gini.android.capture.ui.compose.GiniScreenPreviewUiModes
 import net.gini.android.capture.ui.theme.GiniTheme
 import net.gini.android.capture.ui.theme.modifier.tabletMaxWidth
 import net.gini.android.capture.ui.theme.typography.bold
@@ -487,28 +491,35 @@ private fun SkontoSection(
         ) {
             Row(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.Start,
+                horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                Text(
-                    text = stringResource(id = R.string.gbs_skonto_section_discount_title),
-                    style = GiniTheme.typography.subtitle1,
-                    color = colors.titleTextColor,
-                )
-                Box {
-                    androidx.compose.animation.AnimatedVisibility(visible = isActive) {
+                Row(
+                    modifier = Modifier.weight(1f, fill = false),
+                    horizontalArrangement = Arrangement.End,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        modifier = Modifier.weight(0.1f, fill = false),
+                        text = stringResource(id = R.string.gbs_skonto_section_discount_title),
+                        style = GiniTheme.typography.subtitle1,
+                        color = colors.titleTextColor,
+                    )
+
+                    AnimatedVisibility(
+                        modifier = Modifier.requiredWidth(IntrinsicSize.Max),
+                        visible = isActive
+                    ) {
                         Text(
                             text = stringResource(id = R.string.gbs_skonto_section_discount_hint_label_enabled),
                             style = GiniTheme.typography.subtitle2,
                             color = colors.enabledHintTextColor,
+                            softWrap = false,
                         )
                     }
                 }
-
-                Spacer(Modifier.weight(1f))
-
-
                 GiniSwitch(
+                    modifier = Modifier.padding(start = 8.dp),
                     checked = isActive,
                     onCheckedChange = onActiveChange,
                 )
@@ -774,14 +785,17 @@ private fun WithoutSkontoSection(
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Text(
+                    modifier = Modifier.weight(0.1f, fill = false),
                     text = stringResource(id = R.string.gbs_skonto_section_without_discount_title),
                     style = GiniTheme.typography.subtitle1,
                     color = colors.titleTextColor,
                 )
-                AnimatedVisibility(visible = isActive) {
+                AnimatedVisibility(
+                    modifier = Modifier.requiredWidth(IntrinsicSize.Max),
+                    visible = isActive
+                ) {
                     Text(
                         text = stringResource(id = R.string.gbs_skonto_section_discount_hint_label_enabled),
-                        modifier = Modifier.weight(0.1f),
                         style = GiniTheme.typography.subtitle2,
                         color = colors.enabledHintTextColor,
                     )
@@ -973,17 +987,12 @@ private fun FooterSection(
 }
 
 @Composable
-@Preview
+@GiniScreenPreviewUiModes
+@GiniScreenPreviewSizes
 private fun ScreenReadyStatePreviewLight() {
     ScreenReadyStatePreview()
 }
 
-@Composable
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-private fun ScreenReadyStatePreviewDark() {
-    ScreenReadyStatePreview()
-}
-
 @Composable
 private fun ScreenReadyStatePreview() {
     GiniTheme {
@@ -1027,7 +1036,7 @@ private fun previewState() = SkontoScreenState.Ready(
     edgeCase = SkontoEdgeCase.PayByCashOnly,
     edgeCaseInfoDialogVisible = false,
     savedAmount = Amount.parse("3:EUR"),
-    transactionDialogVisible = true,
+    transactionDialogVisible = false,
     skontoAmountValidationError = null,
     fullAmountValidationError = null,
 )
diff --git a/capture-sdk/sdk/src/main/java/net/gini/android/capture/ui/compose/GiniPreview.kt b/capture-sdk/sdk/src/main/java/net/gini/android/capture/ui/compose/GiniPreview.kt
@@ -0,0 +1,44 @@
+package net.gini.android.capture.ui.compose
+
+import android.content.res.Configuration
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    name = "Font Scale 200%",
+    group = "FontScale",
+    fontScale = 2f,
+    showBackground = true,
+)
+@Preview(
+    name = "Font Scale 100%",
+    group = "FontScale",
+    fontScale = 1f,
+    showBackground = true,
+)
+/**
+ * This annotation is used to preview the screen in different sizes (100% and 200% font scale)
+ * It can be combined with [GiniScreenPreviewUiModes]
+ *
+ * @see GiniScreenPreviewUiModes
+ */
+annotation class GiniScreenPreviewSizes
+
+@Preview(
+    name = "Dark",
+    group = "UiMode",
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    showBackground = true,
+)
+@Preview(
+    name = "Light",
+    group = "UiMode",
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    showBackground = true,
+)
+/**
+ * This annotation is used to preview the screen in different UI modes (Light and Dark)
+ * It can be combined with [GiniScreenPreviewSizes]
+ *
+ * @see GiniScreenPreviewSizes
+ */
+annotation class GiniScreenPreviewUiModes
diff --git a/config/detekt/detekt.yml b/config/detekt/detekt.yml
@@ -744,7 +744,7 @@ style:
   UnusedPrivateMember:
     active: true
     allowedNames: ''
-    ignoreAnnotated: [ 'Preview' ]
+    ignoreAnnotated: [ '*Preview*' ]
   UnusedPrivateProperty:
     active: true
     allowedNames: '_|ignored|expected|serialVersionUID'