refactor(blockchain_card): AND-6783 Empty card statements placeholder…

… (#4133) * Show placeholder for when there's no card statements, other small ui improvements * ktlint * replace painter with ImageResource
blockchain · Nov 21, 2022 · 0767bbd · 0767bbd
1 parent 501fb70
commit 0767bbd
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 18 deletions.
diff --git a/...src/main/java/com/blockchain/blockchaincard/ui/composables/managecard/ManageCardScreen.kt b/...src/main/java/com/blockchain/blockchaincard/ui/composables/managecard/ManageCardScreen.kt
@@ -45,6 +45,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.dimensionResource
@@ -81,6 +82,7 @@ import com.blockchain.coincore.AccountBalance
 import com.blockchain.componentlib.basic.ComposeColors
 import com.blockchain.componentlib.basic.ComposeGravities
 import com.blockchain.componentlib.basic.ComposeTypographies
+import com.blockchain.componentlib.basic.Image
 import com.blockchain.componentlib.basic.ImageResource
 import com.blockchain.componentlib.basic.SimpleText
 import com.blockchain.componentlib.button.ButtonState
@@ -109,6 +111,7 @@ import com.blockchain.componentlib.theme.GOOGLE_PAY_BUTTON_BORDER
 import com.blockchain.componentlib.theme.GOOGLE_PAY_BUTTON_DIVIDER
 import com.blockchain.componentlib.theme.Grey000
 import com.blockchain.componentlib.theme.Grey100
+import com.blockchain.componentlib.theme.Grey400
 import com.blockchain.componentlib.theme.MediumVerticalSpacer
 import com.blockchain.componentlib.theme.SmallVerticalSpacer
 import com.blockchain.componentlib.theme.SmallestVerticalSpacer
@@ -2327,27 +2330,39 @@ fun Documents(
 
         SmallestVerticalSpacer()
 
-        if (cardStatements != null) {
-            Card(
-                modifier = Modifier.fillMaxWidth(),
-                border = BorderStroke(1.dp, Grey000),
-                elevation = 0.dp,
-                shape = RoundedCornerShape(20.dp)
-            ) {
-                LazyColumn {
-                    itemsIndexed(cardStatements) { index, statement ->
-                        DefaultTableRow(
-                            primaryText = statement.date.toShortMonthYearDate(),
-                            onClick = { onViewStatement(statement) },
-                        )
+        when {
+            cardStatements == null -> {
+                CircularProgressBar()
+            }
 
-                        if (index < cardStatements.lastIndex)
-                            HorizontalDivider(modifier = Modifier.fillMaxWidth())
+            cardStatements.isEmpty() -> {
+                SmallVerticalSpacer()
+
+                NoCardStatements()
+
+                SmallVerticalSpacer()
+            }
+
+            else -> {
+                Card(
+                    modifier = Modifier.fillMaxWidth(),
+                    border = BorderStroke(1.dp, Grey000),
+                    elevation = 0.dp,
+                    shape = RoundedCornerShape(20.dp)
+                ) {
+                    LazyColumn {
+                        itemsIndexed(cardStatements) { index, statement ->
+                            DefaultTableRow(
+                                primaryText = statement.date.toShortMonthYearDate(),
+                                onClick = { onViewStatement(statement) },
+                            )
+
+                            if (index < cardStatements.lastIndex)
+                                HorizontalDivider(modifier = Modifier.fillMaxWidth())
+                        }
                     }
                 }
             }
-        } else {
-            CircularProgressBar()
         }
 
         SmallVerticalSpacer()
@@ -2359,7 +2374,7 @@ fun Documents(
             gravity = ComposeGravities.Start
         )
 
-        SmallestVerticalSpacer()
+        TinyVerticalSpacer()
 
         if (legalDocuments != null) {
             Card(
@@ -2372,6 +2387,10 @@ fun Documents(
                     itemsIndexed(legalDocuments) { index, document ->
                         DefaultTableRow(
                             primaryText = document.displayName,
+                            endImageResource = ImageResource.Local(
+                                id = R.drawable.ic_new_window,
+                                colorFilter = ColorFilter.tint(Grey400)
+                            ),
                             onClick = { onViewLegalDocument(document) },
                         )
 
@@ -2438,6 +2457,85 @@ fun PreviewDocuments() {
     )
 }
 
+@Preview(showBackground = true)
+@Composable
+fun PreviewDocumentsNoStatements() {
+    Documents(
+        cardStatements = emptyList(),
+        legalDocuments = listOf(
+            BlockchainCardLegalDocument(
+                displayName = "Terms and Conditions",
+                name = "",
+                url = "",
+                version = "",
+                acceptedVersion = null,
+                required = false,
+                seen = false,
+            ),
+            BlockchainCardLegalDocument(
+                displayName = "Privacy Policy",
+                name = "",
+                url = "",
+                version = "",
+                acceptedVersion = null,
+                required = false,
+                seen = false,
+            ),
+            BlockchainCardLegalDocument(
+                displayName = "Fees and Limits",
+                name = "",
+                url = "",
+                version = "",
+                acceptedVersion = null,
+                required = false,
+                seen = false,
+            ),
+        ),
+        onViewStatement = {},
+        onViewLegalDocument = {}
+    )
+}
+
+@Composable
+fun NoCardStatements() {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(AppTheme.dimensions.smallSpacing)
+    ) {
+        Image(
+            imageResource = ImageResource.Local(id = R.drawable.empty_statements_graphic),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        SmallVerticalSpacer()
+
+        SimpleText(
+            text = stringResource(R.string.bc_card_empty_statements_title),
+            style = ComposeTypographies.Body2,
+            color = ComposeColors.Title,
+            gravity = ComposeGravities.Centre,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        TinyVerticalSpacer()
+
+        SimpleText(
+            text = stringResource(R.string.bc_card_empty_statements_description),
+            style = ComposeTypographies.Paragraph1,
+            color = ComposeColors.Dark,
+            gravity = ComposeGravities.Centre,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewNoCardStatements() {
+    NoCardStatements()
+}
+
 @Composable
 fun TerminateCard(last4digits: String, onConfirmCloseCard: () -> Unit, onCloseBottomSheet: () -> Unit) {
     Column(

diff --git a/blockchainCard/src/main/res/drawable/empty_statements_graphic.xml b/blockchainCard/src/main/res/drawable/empty_statements_graphic.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="65dp"
+    android:height="65dp"
+    android:viewportWidth="65"
+    android:viewportHeight="65">
+  <path
+      android:pathData="M32.556,64.86C50.229,64.86 64.556,50.534 64.556,32.86C64.556,15.187 50.229,0.86 32.556,0.86C14.883,0.86 0.556,15.187 0.556,32.86C0.556,50.534 14.883,64.86 32.556,64.86Z"
+      android:fillColor="#F0F2F7"/>
+  <path
+      android:pathData="M48.556,50.638C48.022,50.638 47.667,50.46 47.311,50.105L40.733,43.527C38.067,45.66 34.511,47.083 30.778,47.083C21.889,47.083 14.778,39.972 14.778,31.083C14.778,22.194 21.889,15.083 30.778,15.083C39.667,15.083 46.778,22.194 46.778,31.083C46.778,34.816 45.533,38.371 43.222,41.038L49.8,47.616C50.511,48.327 50.511,49.394 49.8,50.105C49.444,50.46 49.089,50.638 48.556,50.638ZM30.778,18.638C23.844,18.638 18.333,24.149 18.333,31.083C18.333,38.016 23.844,43.527 30.778,43.527C34.156,43.527 37.178,42.105 39.489,39.972C39.489,39.972 39.489,39.794 39.667,39.794C39.845,39.794 39.845,39.616 39.845,39.616C41.978,37.305 43.4,34.283 43.4,30.905C43.222,24.149 37.711,18.638 30.778,18.638Z"
+      android:fillColor="#B1B8C7"/>
+  <path
+      android:pathData="M30.778,41.749C36.668,41.749 41.444,36.974 41.444,31.083C41.444,29.736 41.195,28.448 40.74,27.263C39.949,28.491 38.569,29.305 37,29.305C34.545,29.305 32.555,27.315 32.555,24.86C32.555,23.291 33.369,21.911 34.598,21.12C33.412,20.665 32.124,20.416 30.778,20.416C24.886,20.416 20.111,25.191 20.111,31.083C20.111,36.974 24.886,41.749 30.778,41.749Z"
+      android:fillColor="#B1B8C7"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/componentlib/src/main/res/drawable/ic_new_window.xml b/componentlib/src/main/res/drawable/ic_new_window.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20,10.829V17.767C20,18.991 18.991,20 17.767,20H6.233C5.009,20 4,18.991 4,17.767V6.233C4,5.009 5.009,4 6.233,4H13.171C13.06,3.687 13,3.351 13,3C13,2.649 13.06,2.313 13.171,2H6.233C3.905,2 2,3.905 2,6.233V17.767C2,20.095 3.905,22 6.233,22H17.767C20.095,22 22,20.095 22,17.767V10.829C21.687,10.94 21.351,11 21,11C20.649,11 20.313,10.94 20,10.829Z"
+      android:fillColor="#121D33"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M15,3C15,2.448 15.448,2 16,2H21C21.552,2 22,2.448 22,3V8C22,8.552 21.552,9 21,9C20.448,9 20,8.552 20,8V5.414L13.707,11.707C13.317,12.098 12.683,12.098 12.293,11.707C11.902,11.317 11.902,10.683 12.293,10.293L18.586,4H16C15.448,4 15,3.552 15,3Z"
+      android:fillColor="#121D33"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/componentlib/src/main/res/drawable/ic_new_window_filled.xml b/componentlib/src/main/res/drawable/ic_new_window_filled.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.121,13.121L18.534,9.709C19.076,10.489 19.978,11 21,11C21.351,11 21.687,10.94 22,10.829V17.767C22,20.095 20.095,22 17.767,22H6.233C3.905,22 2,20.095 2,17.767V6.233C2,3.905 3.905,2 6.233,2H13.171C13.06,2.313 13,2.649 13,3C13,4.022 13.511,4.924 14.291,5.466L10.879,8.879C9.707,10.05 9.707,11.95 10.879,13.121C12.05,14.293 13.95,14.293 15.121,13.121Z"
+      android:fillColor="#121D33"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M15,3C15,2.448 15.448,2 16,2H21C21.552,2 22,2.448 22,3V8C22,8.552 21.552,9 21,9C20.448,9 20,8.552 20,8V5.414L13.707,11.707C13.317,12.098 12.683,12.098 12.293,11.707C11.902,11.317 11.902,10.683 12.293,10.293L18.586,4H16C15.448,4 15,3.552 15,3Z"
+      android:fillColor="#121D33"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/string-resources/src/main/res/values/strings.xml b/string-resources/src/main/res/values/strings.xml
@@ -3405,6 +3405,8 @@ If you want to know more about our verification process visit our <annotation li
     <string name="blockchain_card_waitlist_announcement_title">Introducing the Blockchain.com Visa® Card</string>
     <string name="blockchain_card_waitlist_announcement_description">Spend your crypto or cash without fees. Earn 1%% back in crypto.</string>
     <string name="blockchain_card_waitlist_announcement_action">Join The Waitlist</string>
+    <string name="bc_card_empty_statements_title">Your Statements Go Here</string>
+    <string name="bc_card_empty_statements_description">Your monthly statements will show up here and be available to view and download.</string>
 
     <string name="show_trading_accounts">Show trading accounts</string>
     <string name="secured_by_bchain">Secured by Blockchain.com</string>