feat(bank-sdk): Skonto screen. Bottom bar redesign

PP-648
gini · Jul 22, 2024 · 4007aea · 4007aea
1 parent 87bfb0d
commit 4007aea
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 20 deletions.
diff --git a/bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragment.kt b/bank-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragment.kt
@@ -91,6 +91,7 @@ import net.gini.android.capture.ui.components.textinput.amount.GiniAmountTextInp
 import net.gini.android.capture.ui.components.topbar.GiniTopBar
 import net.gini.android.capture.ui.components.topbar.GiniTopBarColors
 import net.gini.android.capture.ui.theme.GiniTheme
+import net.gini.android.capture.ui.theme.typography.bold
 import net.gini.android.capture.view.InjectedViewAdapterInstance
 import java.math.BigDecimal
 import java.math.RoundingMode
@@ -255,7 +256,8 @@ private fun ScreenReadyState(
                 onHelpClicked = onHelpClicked,
                 customBottomNavBarAdapter = customBottomNavBarAdapter,
                 onProceedClicked = onProceedClicked,
-                isSkontoSectionActive = state.isSkontoSectionActive
+                isSkontoSectionActive = state.isSkontoSectionActive,
+                savedAmount = state.savedAmount
             )
         }) {
         Column(
@@ -752,6 +754,7 @@ private fun WithoutSkontoSection(
 @Composable
 private fun FooterSection(
     totalAmount: SkontoData.Amount,
+    savedAmount: SkontoData.Amount,
     discountValue: BigDecimal,
     colors: SkontoFooterSectionColors,
     isBottomNavigationBarEnabled: Boolean,
@@ -765,11 +768,18 @@ private fun FooterSection(
     val animatedTotalAmount by animateFloatAsState(
         targetValue = totalAmount.amount.toFloat(), label = "totalAmount"
     )
+    val animatedSavedAmount by animateFloatAsState(
+        targetValue = savedAmount.amount.toFloat(), label = "savedAmount"
+    )
     val animatedDiscountAmount by animateFloatAsState(
         targetValue = discountValue.toFloat(), label = "discountAmount"
     )
     val totalPriceText =
         "${currencyFormatterWithoutSymbol().format(animatedTotalAmount)} ${totalAmount.currencyCode}"
+
+    val savedAmountText =
+        "${currencyFormatterWithoutSymbol().format(animatedSavedAmount)} ${savedAmount.currencyCode}"
+
     val discountLabelText = stringResource(
         id = R.string.gbs_skonto_section_footer_label_discount,
         animatedDiscountAmount.formatAsDiscountPercentage()
@@ -801,24 +811,16 @@ private fun FooterSection(
                 Column(
                     modifier = Modifier.padding(start = 20.dp, end = 20.dp, top = 20.dp)
                 ) {
-                    Text(
-                        text = stringResource(id = R.string.gbs_skonto_section_footer_title),
-                        style = GiniTheme.typography.body1,
-                        color = colors.titleTextColor,
-                    )
-                    Row(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(top = 4.dp),
-                        horizontalArrangement = Arrangement.Start,
-                        verticalAlignment = Alignment.CenterVertically,
-                    ) {
+                    Row {
                         Text(
-                            text = totalPriceText,
-                            style = GiniTheme.typography.headline5,
-                            color = colors.amountTextColor,
+                            modifier = Modifier.weight(0.1f),
+                            text = stringResource(id = R.string.gbs_skonto_section_footer_title),
+                            style = GiniTheme.typography.body1,
+                            color = colors.titleTextColor,
                         )
-                        AnimatedVisibility(visible = isSkontoSectionActive) {
+                        AnimatedVisibility(
+                            visible = isSkontoSectionActive
+                        ) {
                             Box(
                                 modifier = Modifier
                                     .height(IntrinsicSize.Min)
@@ -837,6 +839,31 @@ private fun FooterSection(
                             }
                         }
                     }
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 4.dp),
+                        horizontalArrangement = Arrangement.Start,
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        Text(
+                            text = totalPriceText,
+                            style = GiniTheme.typography.headline5.bold(),
+                            color = colors.amountTextColor,
+                        )
+                    }
+                    AnimatedVisibility(
+                        visible = isSkontoSectionActive
+                    ) {
+                        Text(
+                            text = stringResource(
+                                id = R.string.gbs_skonto_section_footer_label_save,
+                                savedAmountText
+                            ),
+                            style = GiniTheme.typography.caption1,
+                            color = colors.savedAmountTextColor,
+                        )
+                    }
                 }
                 val buttonPaddingHorizontal = if (isBottomNavigationBarEnabled) 0.dp else 20.dp
                 Row(
@@ -923,4 +950,5 @@ private val previewState = SkontoFragmentContract.State.Ready(
     skontoEdgeCase = SkontoFragmentContract.SkontoEdgeCase.PayByCashOnly,
     edgeCaseInfoDialogVisible = false,
     skontoAmountValidation = SkontoFragmentContract.State.Ready.SkontoAmountValidation.Invalid.SkontoAmountGreaterOfFullAmount,
+    savedAmount = SkontoData.Amount(BigDecimal("3"), "EUR")
 )
diff --git a/...-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragmentContract.kt b/...-sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragmentContract.kt
@@ -16,6 +16,7 @@ internal object SkontoFragmentContract {
             val discountDueDate: LocalDate,
             val fullAmount: SkontoData.Amount,
             val totalAmount: SkontoData.Amount,
+            val savedAmount: SkontoData.Amount,
             val paymentMethod: SkontoData.SkontoPaymentMethod,
             val skontoEdgeCase: SkontoEdgeCase?,
             val edgeCaseInfoDialogVisible: Boolean,

diff --git a/...sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragmentViewModel.kt b/...sdk/sdk/src/main/java/net/gini/android/bank/sdk/capture/skonto/SkontoFragmentViewModel.kt
@@ -34,6 +34,9 @@ internal class SkontoFragmentViewModel(
         val totalAmount =
             if (isSkontoSectionActive) data.skontoAmountToPay else data.fullAmountToPay
 
+        val savedAmountValue = calculateSavedAmount(data.skontoAmountToPay.amount, data.fullAmountToPay.amount)
+        val savedAmount = SkontoData.Amount(savedAmountValue, data.fullAmountToPay.currencyCode)
+
         return SkontoFragmentContract.State.Ready(
             isSkontoSectionActive = true,
             paymentInDays = data.skontoRemainingDays,
@@ -48,7 +51,8 @@ internal class SkontoFragmentViewModel(
             skontoAmountValidation = validateSkontoAmount(
                 skontoAmount = data.skontoAmountToPay,
                 fullAmount = data.fullAmountToPay
-            )
+            ),
+            savedAmount = savedAmount
         )
     }
 
@@ -80,12 +84,16 @@ internal class SkontoFragmentViewModel(
         val newSkontoAmount = currentState.skontoAmount.copy(amount = newValue)
         val newTotalAmount = currentState.totalAmount.copy(amount = totalAmount)
 
+        val savedAmountValue = calculateSavedAmount(newSkontoAmount.amount, currentState.fullAmount.amount)
+        val savedAmount = SkontoData.Amount(savedAmountValue, currentState.fullAmount.currencyCode)
+
         stateFlow.emit(
             currentState.copy(
                 skontoAmount = newSkontoAmount,
                 discountAmount = discount,
                 totalAmount = newTotalAmount,
-                skontoAmountValidation = validateSkontoAmount(newSkontoAmount, currentState.fullAmount)
+                skontoAmountValidation = validateSkontoAmount(newSkontoAmount, currentState.fullAmount),
+                savedAmount = savedAmount,
             )
         )
     }
@@ -118,11 +126,15 @@ internal class SkontoFragmentViewModel(
             )
         )
 
+        val savedAmountValue = calculateSavedAmount(skontoAmount, newValue)
+        val savedAmount = SkontoData.Amount(savedAmountValue, currentState.fullAmount.currencyCode)
+
         stateFlow.emit(
             currentState.copy(
                 skontoAmount = currentState.skontoAmount.copy(amount = skontoAmount),
                 fullAmount = currentState.fullAmount.copy(amount = newValue),
-                totalAmount = currentState.totalAmount.copy(amount = totalAmount)
+                totalAmount = currentState.totalAmount.copy(amount = totalAmount),
+                savedAmount = savedAmount,
             )
         )
     }
@@ -152,6 +164,9 @@ internal class SkontoFragmentViewModel(
             .multiply(BigDecimal("100"))
     }
 
+    private fun calculateSavedAmount(skontoAmount: BigDecimal, fullAmount: BigDecimal) =
+        fullAmount.minus(skontoAmount).abs()
+
     private fun validateSkontoAmount(
         skontoAmount: SkontoData.Amount,
         fullAmount: SkontoData.Amount

diff --git a/...java/net/gini/android/bank/sdk/capture/skonto/colors/section/SkontoFooterSectionColors.kt b/...java/net/gini/android/bank/sdk/capture/skonto/colors/section/SkontoFooterSectionColors.kt
@@ -11,6 +11,7 @@ data class SkontoFooterSectionColors(
     val cardBackgroundColor: Color,
     val titleTextColor: Color,
     val amountTextColor: Color,
+    val savedAmountTextColor: Color,
     val discountLabelColorScheme: DiscountLabelColorScheme,
     val continueButtonColors: GiniButtonColors,
 ) {
@@ -22,6 +23,7 @@ data class SkontoFooterSectionColors(
             cardBackgroundColor: Color = GiniTheme.colorScheme.card.container,
             titleTextColor: Color = GiniTheme.colorScheme.text.primary,
             amountTextColor: Color = GiniTheme.colorScheme.text.primary,
+            savedAmountTextColor: Color = GiniTheme.colorScheme.text.success,
             discountLabelColorScheme: DiscountLabelColorScheme = DiscountLabelColorScheme.colors(),
             continueButtonColors: GiniButtonColors = GiniButtonColors.colors(),
         ) = SkontoFooterSectionColors(
@@ -30,6 +32,7 @@ data class SkontoFooterSectionColors(
             amountTextColor = amountTextColor,
             discountLabelColorScheme = discountLabelColorScheme,
             continueButtonColors = continueButtonColors,
+            savedAmountTextColor = savedAmountTextColor,
         )
     }
 

diff --git a/bank-sdk/sdk/src/main/res/values-en/strings.xml b/bank-sdk/sdk/src/main/res/values-en/strings.xml
@@ -64,6 +64,7 @@
     <!--   region Footer -->
     <string name="gbs_skonto_section_footer_title">Total</string>
     <string name="gbs_skonto_section_footer_label_discount">%1$s Skonto discount</string>
+    <string name="gbs_skonto_section_footer_label_save">Save %1$s</string>
     <string name="gbs_skonto_section_footer_continue_button_text">Continue to pay</string>
     <!--   endregion -->
     <!--   region InfoDialog -->

diff --git a/bank-sdk/sdk/src/main/res/values/strings.xml b/bank-sdk/sdk/src/main/res/values/strings.xml
@@ -64,6 +64,7 @@
     <!--   region Footer -->
     <string name="gbs_skonto_section_footer_title">Gesamtpreis</string>
     <string name="gbs_skonto_section_footer_label_discount">%1$s Skonto</string>
+    <string name="gbs_skonto_section_footer_label_save">%1$s sparen</string>
     <string name="gbs_skonto_section_footer_continue_button_text">Zahlung fortsetzen</string>
     <!--   endregion -->
     <!--   region InfoDialog -->

diff --git a/capture-sdk/sdk/src/main/java/net/gini/android/capture/ui/theme/typography/GiniTypography.kt b/capture-sdk/sdk/src/main/java/net/gini/android/capture/ui/theme/typography/GiniTypography.kt
@@ -3,6 +3,7 @@ package net.gini.android.capture.ui.theme.typography
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import net.gini.android.capture.R
 
 
@@ -23,6 +24,7 @@ data class GiniTypography(
     val overline: TextStyle = TextStyle.Default,
 )
 
+fun TextStyle.bold() = this.copy(fontWeight = FontWeight.Bold)
 
 @Composable
 fun extractGiniTypography() = GiniTypography(