Formatting the money

woocommerce · Nov 7, 2023 · dfc1eb6 · dfc1eb6
1 parent 0f6d037
commit dfc1eb6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git a/...com/woocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryScreen.kt b/...com/woocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryScreen.kt
@@ -1,20 +1,15 @@
 package com.woocommerce.android.ui.payments.hub.depositsummary
 
 import android.content.res.Configuration
-import androidx.compose.foundation.clickable
 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.material.Card
+import androidx.compose.material.Divider
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
@@ -30,12 +25,14 @@ fun PaymentsHubDepositSummaryView(
     viewModel: PaymentsHubDepositSummaryViewModel = viewModel()
 ) {
     viewModel.viewState.observeAsState().let {
-        when (val value = it.value) {
-            is PaymentsHubDepositSummaryState.Success -> PaymentsHubDepositSummaryView(value.overview)
-            null,
-            PaymentsHubDepositSummaryState.Loading,
-            is PaymentsHubDepositSummaryState.Error -> {
-                // show nothing
+        WooThemeWithBackground {
+            when (val value = it.value) {
+                is PaymentsHubDepositSummaryState.Success -> PaymentsHubDepositSummaryView(value.overview)
+                null,
+                PaymentsHubDepositSummaryState.Loading,
+                is PaymentsHubDepositSummaryState.Error -> {
+                    // show nothing
+                }
             }
         }
     }
@@ -45,15 +42,7 @@ fun PaymentsHubDepositSummaryView(
 fun PaymentsHubDepositSummaryView(
     overview: PaymentsHubDepositSummaryState.Overview
 ) {
-    var isExpanded by rememberSaveable { mutableStateOf(false) }
-    Card(
-        elevation = 4.dp,
-        modifier = Modifier
-            .fillMaxWidth()
-            .clickable {
-                isExpanded = !isExpanded
-            }
-    ) {
+    Column {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
@@ -68,7 +57,7 @@ fun PaymentsHubDepositSummaryView(
                     color = colorResource(id = R.color.color_on_surface)
                 )
                 Text(
-                    style = MaterialTheme.typography.h2,
+                    style = MaterialTheme.typography.h6,
                     fontWeight = FontWeight(700),
                     text = overview.infoPerCurrency[overview.defaultCurrency]?.availableFunds.toString(),
                     color = colorResource(id = R.color.color_on_surface)
@@ -84,18 +73,25 @@ fun PaymentsHubDepositSummaryView(
                     color = colorResource(id = R.color.color_on_surface)
                 )
                 Text(
-                    style = MaterialTheme.typography.h2,
+                    style = MaterialTheme.typography.h6,
                     fontWeight = FontWeight(700),
                     text = overview.infoPerCurrency[overview.defaultCurrency]?.pendingFunds.toString(),
                     color = colorResource(id = R.color.color_on_surface)
                 )
                 Text(
                     style = MaterialTheme.typography.caption,
-                    text = stringResource(id = R.string.card_reader_hub_deposit_summary_pending_deposits),
-                    color = colorResource(id = R.color.color_on_primary_disabled)
+                    text = stringResource(
+                        id = R.string.card_reader_hub_deposit_summary_pending_deposits,
+                        overview.infoPerCurrency[overview.defaultCurrency]?.pendingBalanceDepositsCount ?: 0
+                    ),
+                    color = colorResource(id = R.color.color_surface_variant)
                 )
             }
         }
+
+        Divider(
+            modifier = Modifier.fillMaxWidth()
+        )
     }
 }
 
@@ -109,8 +105,8 @@ fun PaymentsHubDepositSummaryViewPreview() {
                 defaultCurrency = "USD",
                 infoPerCurrency = mapOf(
                     "USD" to PaymentsHubDepositSummaryState.Info(
-                        availableFunds = 100,
-                        pendingFunds = 200,
+                        availableFunds = "100$",
+                        pendingFunds = "200$",
                         pendingBalanceDepositsCount = 1,
                         fundsAvailableInDays = PaymentsHubDepositSummaryState.Info.Interval.Days(1),
                         nextDeposit = PaymentsHubDepositSummaryState.Deposit(
@@ -125,8 +121,8 @@ fun PaymentsHubDepositSummaryViewPreview() {
                         )
                     ),
                     "EUR" to PaymentsHubDepositSummaryState.Info(
-                        availableFunds = 100,
-                        pendingFunds = 200,
+                        availableFunds = "100$",
+                        pendingFunds = "200$",
                         pendingBalanceDepositsCount = 1,
                         fundsAvailableInDays = PaymentsHubDepositSummaryState.Info.Interval.Days(1),
                         nextDeposit = PaymentsHubDepositSummaryState.Deposit(

diff --git a/.../com/woocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryState.kt b/.../com/woocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryState.kt
@@ -13,8 +13,8 @@ sealed class PaymentsHubDepositSummaryState {
     )
 
     data class Info(
-        val availableFunds: Int,
-        val pendingFunds: Int,
+        val availableFunds: String,
+        val pendingFunds: String,
         val pendingBalanceDepositsCount: Int,
         val fundsAvailableInDays: Interval,
         val nextDeposit: Deposit?,
@@ -28,7 +28,7 @@ sealed class PaymentsHubDepositSummaryState {
     }
 
     data class Deposit(
-        val amount: Int,
+        val amount: Long,
         val status: Status,
         val date: Date?,
     ) {

diff --git a/...oocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryStateMapper.kt b/...oocommerce/android/ui/payments/hub/depositsummary/PaymentsHubDepositSummaryStateMapper.kt
@@ -1,10 +1,13 @@
 package com.woocommerce.android.ui.payments.hub.depositsummary
 
+import com.woocommerce.android.util.CurrencyFormatter
 import org.wordpress.android.fluxc.model.payments.woo.WooPaymentsDepositsOverview
 import java.util.Date
 import javax.inject.Inject
 
-class PaymentsHubDepositSummaryStateMapper @Inject constructor() {
+class PaymentsHubDepositSummaryStateMapper @Inject constructor(
+    private val currencyFormatter: CurrencyFormatter,
+) {
 
     @Suppress("ReturnCount")
     fun mapDepositOverviewToViewModelOverviews(
@@ -33,8 +36,14 @@ class PaymentsHubDepositSummaryStateMapper @Inject constructor() {
             defaultCurrency = defaultCurrency,
             infoPerCurrency = currencies.associateWith { currency ->
                 PaymentsHubDepositSummaryState.Info(
-                    availableFunds = availableBalances.firstOrNull { it.currency == currency }?.amount ?: 0,
-                    pendingFunds = pendingBalances.firstOrNull { it.currency == currency }?.amount ?: 0,
+                    availableFunds = formatMoney(
+                        amount = availableBalances.firstOrNull { it.currency == currency }?.amount ?: 0,
+                        currency = currency
+                    ),
+                    pendingFunds = formatMoney(
+                        amount = pendingBalances.firstOrNull { it.currency == currency }?.amount ?: 0,
+                        currency = currency
+                    ),
                     pendingBalanceDepositsCount = pendingBalances.firstOrNull {
                         it.currency == currency
                     }?.depositsCount ?: 0,
@@ -46,11 +55,17 @@ class PaymentsHubDepositSummaryStateMapper @Inject constructor() {
         )
     }
 
-    private fun mapDeposit(it: WooPaymentsDepositsOverview.Deposit.Info) =
+    private fun formatMoney(amount: Long, currency: String) =
+        currencyFormatter.formatCurrencyGivenInTheSmallestCurrencyUnit(
+            amount = amount,
+            currencyCode = currency,
+        )
+
+    private fun mapDeposit(info: WooPaymentsDepositsOverview.Deposit.Info) =
         PaymentsHubDepositSummaryState.Deposit(
-            amount = it.amount ?: 0,
-            status = it.status.toDepositStatus(),
-            date = if (it.date != null) Date(it.date!!) else null
+            amount = info.amount ?: 0L,
+            status = info.status.toDepositStatus(),
+            date = if (info.date != null) Date(info.date!!) else null
         )
 
     // Proper implementation in the following PRs

diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/util/CurrencyFormatter.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/util/CurrencyFormatter.kt
@@ -13,6 +13,7 @@ import org.wordpress.android.fluxc.model.SiteModel
 import org.wordpress.android.fluxc.store.WooCommerceStore
 import java.math.BigDecimal
 import java.text.DecimalFormat
+import java.util.Currency
 import javax.inject.Inject
 import javax.inject.Singleton
 import kotlin.math.absoluteValue
@@ -114,6 +115,17 @@ class CurrencyFormatter @Inject constructor(
         applyDecimalFormatting: Boolean = true
     ) = formatCurrency(amount.toString(), currencyCode, applyDecimalFormatting)
 
+    fun formatCurrencyGivenInTheSmallestCurrencyUnit(
+        amount: Long,
+        currencyCode: String,
+        applyDecimalFormatting: Boolean = true
+    ): String {
+        val currencyObj = Currency.getInstance(currencyCode)
+        val smallestCurrencyUnit = BigDecimal.TEN.pow(currencyObj.defaultFractionDigits)
+        val value = BigDecimal.valueOf(amount).divide(smallestCurrencyUnit)
+        return formatCurrency(value, currencyCode, applyDecimalFormatting)
+    }
+
     /**
      * Formats a raw amount for display based on the WooCommerce site settings, rounding the values to the nearest int.
      *