v6 - Payment method list - brand icons

core/src/main/java/com/adyen/checkout/core/common/internal/ui/CheckoutNetworkLogo.kt

@@ -10,6 +10,7 @@ package com.adyen.checkout.core.common.internal.ui
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.RestrictTo
+import androidx.compose.foundation.background
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -28,6 +29,7 @@ import com.adyen.checkout.test.R
 import com.adyen.checkout.ui.internal.image.ImageLoader
 import com.adyen.checkout.ui.internal.image.LogoSize
 import com.adyen.checkout.ui.internal.image.NetworkImage
+import com.adyen.checkout.ui.internal.theme.CheckoutThemeProvider
 import com.adyen.checkout.ui.internal.theme.Dimensions
 
 /**
@@ -76,6 +78,7 @@ fun CheckoutNetworkLogo(
                     alpha = 0.04f,
                 ),
             )
+            .background(CheckoutThemeProvider.colors.background)
             .clip(RoundedCornerShape(Dimensions.CornerRadius)),
         contentDescription = contentDescription,
         imageLoader = imageLoader,

drop-in/src/main/java/com/adyen/checkout/dropin/internal/ui/PaymentMethodListScreen.kt

@@ -30,6 +30,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.SavedStateHandle
@@ -39,16 +41,20 @@ import com.adyen.checkout.core.common.internal.helper.CheckoutCompositionLocalPr
 import com.adyen.checkout.core.common.internal.ui.CheckoutNetworkLogo
 import com.adyen.checkout.core.common.localization.CheckoutLocalizationKey
 import com.adyen.checkout.core.common.localization.internal.helper.resolveString
+import com.adyen.checkout.dropin.R
 import com.adyen.checkout.dropin.internal.helper.SavedStateBackStackPersister
 import com.adyen.checkout.dropin.internal.ui.PaymentMethodListViewState.PaymentMethodItem
 import com.adyen.checkout.ui.internal.element.ListItem
 import com.adyen.checkout.ui.internal.text.Body
 import com.adyen.checkout.ui.internal.text.BodyEmphasized
+import com.adyen.checkout.ui.internal.text.SubHeadline
 import com.adyen.checkout.ui.internal.text.SubHeadlineEmphasized
 import com.adyen.checkout.ui.internal.theme.CheckoutThemeProvider
 import com.adyen.checkout.ui.internal.theme.Dimensions
 import java.util.Locale
 
+private const val AMOUNT_VISIBLE_BRANDS = 3
+
 @Composable
 internal fun PaymentMethodListScreen(
     navigator: DropInNavigator,
@@ -194,7 +200,9 @@ private fun PaymentMethodItemList(
     paymentMethodItems: List<PaymentMethodItem>,
     onItemClick: (PaymentMethodItem) -> Unit,
 ) {
-    Column {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(Dimensions.Spacing.Small),
+    ) {
         paymentMethodItems.forEach { item ->
             ListItem(
                 leadingIcon = {
@@ -205,13 +213,46 @@ private fun PaymentMethodItemList(
                 },
                 title = item.title,
                 subtitle = item.subtitle,
+                trailingContent = {
+                    PaymentMethodItemTrailingContent(item)
+                },
                 onClick = { onItemClick(item) },
                 modifier = Modifier.padding(horizontal = Dimensions.Spacing.ExtraSmall),
             )
         }
     }
 }
 
+@Composable
+private fun PaymentMethodItemTrailingContent(item: PaymentMethodItem) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(Dimensions.Spacing.ExtraSmall),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        if (!item.brands.isNullOrEmpty()) {
+            item.brands.take(AMOUNT_VISIBLE_BRANDS).forEach { brand ->
+                CheckoutNetworkLogo(
+                    txVariant = brand,
+                    modifier = Modifier.size(Dimensions.LogoSize.small),
+                )
+            }
+
+            if (item.brands.size > AMOUNT_VISIBLE_BRANDS) {
+                SubHeadline(text = "+", color = CheckoutThemeProvider.colors.textSecondary)
+            }
+
+            Spacer(Modifier.size(Dimensions.Spacing.ExtraSmall))
+        }
+
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_chevron_right),
+            contentDescription = null,
+            tint = CheckoutThemeProvider.colors.textOnDisabled,
+        )
+    }
+}
+
+@Suppress("LongMethod")
 @Preview(showBackground = true)
 @Composable
 private fun PaymentMethodListContentPreview() {
@@ -240,6 +281,7 @@ private fun PaymentMethodListContentPreview() {
                 id = "scheme",
                 icon = "card",
                 title = "Cards",
+                brands = listOf("mc", "visa", "maestro", "diner", "amex"),
             ),
             PaymentMethodItem(
                 id = "klarna",

drop-in/src/main/java/com/adyen/checkout/dropin/internal/ui/PaymentMethodListViewModel.kt

@@ -16,13 +16,15 @@ import com.adyen.checkout.core.common.localization.CheckoutLocalizationKey
 import com.adyen.checkout.core.components.data.model.format
 import com.adyen.checkout.core.components.data.model.paymentmethod.CardPaymentMethod
 import com.adyen.checkout.core.components.data.model.paymentmethod.GiftCardPaymentMethod
+import com.adyen.checkout.core.components.data.model.paymentmethod.PayByBankUSPaymentMethod
 import com.adyen.checkout.core.components.data.model.paymentmethod.PaymentMethod
 import com.adyen.checkout.core.components.data.model.paymentmethod.StoredPaymentMethod
 import com.adyen.checkout.dropin.internal.data.PaymentMethodRepository
 import com.adyen.checkout.dropin.internal.helper.PaymentMethodSupportCheck
 import com.adyen.checkout.dropin.internal.helper.StoredPaymentMethodFormatter
 import com.adyen.checkout.dropin.internal.ui.PaymentMethodListViewState.PaymentMethodItem
 import com.adyen.checkout.dropin.internal.ui.PaymentMethodListViewState.PaymentMethodListSection
+import com.adyen.checkout.paybybankus.internal.ui.model.PayByBankUSBrandLogo
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.map
@@ -95,10 +97,17 @@ internal class PaymentMethodListViewModel(
             else -> type
         }
 
+        val brands = when (this) {
+            is CardPaymentMethod -> brands
+            is PayByBankUSPaymentMethod -> PayByBankUSBrandLogo.entries.map { it.path }
+            else -> null
+        }
+
         return PaymentMethodItem(
             id = type,
             icon = icon,
             title = name,
+            brands = brands,
         )
     }
 

drop-in/src/main/java/com/adyen/checkout/dropin/internal/ui/PaymentMethodListViewState.kt

@@ -26,5 +26,6 @@ internal data class PaymentMethodListViewState(
         val icon: String,
         val title: String,
         val subtitle: String? = null,
+        val brands: List<String>? = null,
     )
 }

drop-in/src/main/res/drawable/ic_chevron_right.xml

@@ -0,0 +1,9 @@
+<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="M7.586,19L14.586,12L7.586,5L9,3.586L17.414,12L9,20.414L7.586,19Z"
+      android:fillColor="#8D95A3"/>
+</vector>