Fix cut-off payment methods carousel in payment sheet

paymentsheet/src/androidTest/java/com/stripe/android/paymentsheet/screenshot/PaymentMethodsUIScreenshot.kt

@@ -0,0 +1,66 @@
+package com.stripe.android.paymentsheet.screenshot
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Surface
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.unit.dp
+import com.karumi.shot.ScreenshotTest
+import com.stripe.android.paymentsheet.PaymentMethodsUI
+import com.stripe.android.paymentsheet.utils.MockPaymentMethodsFactory
+import com.stripe.android.ui.core.PaymentsTheme
+import com.stripe.android.ui.core.PaymentsThemeDefaults
+import org.junit.Rule
+import org.junit.Test
+
+class PaymentMethodsUIScreenshot : ScreenshotTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun testPaymentMethodsCarouselWithInitialScrollState() {
+        val colors = PaymentsThemeDefaults.colorsLight
+        val paymentMethods = MockPaymentMethodsFactory.create()
+
+        composeTestRule.setContent {
+            PaymentsTheme(colors = PaymentsThemeDefaults.colorsLight) {
+                Surface(
+                    color = colors.materialColors.surface,
+                    modifier = Modifier.padding(vertical = 16.dp)
+                ) {
+                    PaymentMethodsUI(
+                        paymentMethods = paymentMethods,
+                        selectedIndex = 0,
+                        isEnabled = true,
+                        onItemSelectedListener = {}
+                    )
+                }
+            }
+        }
+        compareScreenshot(composeTestRule)
+    }
+
+    @Test
+    fun testPaymentMethodsCarouselScrolledToTheEnd() {
+        val colors = PaymentsThemeDefaults.colorsLight
+        val paymentMethods = MockPaymentMethodsFactory.create()
+
+        composeTestRule.setContent {
+            PaymentsTheme(colors = PaymentsThemeDefaults.colorsLight) {
+                Surface(
+                    color = colors.materialColors.surface,
+                    modifier = Modifier.padding(vertical = 16.dp)
+                ) {
+                    PaymentMethodsUI(
+                        paymentMethods = paymentMethods,
+                        selectedIndex = 3,
+                        isEnabled = true,
+                        onItemSelectedListener = {}
+                    )
+                }
+            }
+        }
+        compareScreenshot(composeTestRule)
+    }
+}

paymentsheet/src/androidTest/java/com/stripe/android/paymentsheet/utils/MockPaymentMethodsFactory.kt

@@ -0,0 +1,56 @@
+package com.stripe.android.paymentsheet.utils
+
+import com.stripe.android.paymentsheet.forms.PaymentMethodRequirements
+import com.stripe.android.ui.core.R
+import com.stripe.android.ui.core.elements.LayoutSpec
+import com.stripe.android.ui.core.forms.resources.LpmRepository
+
+object MockPaymentMethodsFactory {
+
+    fun create(): List<LpmRepository.SupportedPaymentMethod> {
+        return listOf(
+            mockPaymentMethod(
+                code = "card",
+                displayNameResource = R.string.stripe_paymentsheet_payment_method_card,
+                iconResource = R.drawable.stripe_ic_paymentsheet_pm_card,
+                tintIconOnSelection = true
+            ),
+            mockPaymentMethod(
+                code = "klarna",
+                displayNameResource = R.string.stripe_paymentsheet_payment_method_klarna,
+                iconResource = R.drawable.stripe_ic_paymentsheet_pm_klarna
+            ),
+            mockPaymentMethod(
+                code = "affirm",
+                displayNameResource = R.string.stripe_paymentsheet_payment_method_affirm,
+                iconResource = R.drawable.stripe_ic_paymentsheet_pm_affirm
+            ),
+            mockPaymentMethod(
+                code = "paypal",
+                displayNameResource = R.string.stripe_paymentsheet_payment_method_paypal,
+                iconResource = R.drawable.stripe_ic_paymentsheet_pm_paypal
+            )
+        )
+    }
+
+    private fun mockPaymentMethod(
+        code: String,
+        displayNameResource: Int,
+        iconResource: Int,
+        tintIconOnSelection: Boolean = false
+    ): LpmRepository.SupportedPaymentMethod {
+        return LpmRepository.SupportedPaymentMethod(
+            code,
+            requiresMandate = false,
+            displayNameResource = displayNameResource,
+            iconResource = iconResource,
+            tintIconOnSelection = tintIconOnSelection,
+            requirement = PaymentMethodRequirements(
+                piRequirements = emptySet(),
+                siRequirements = emptySet(),
+                confirmPMFromCustomer = true
+            ),
+            formSpec = LayoutSpec(items = emptyList())
+        )
+    }
+}

paymentsheet/src/main/java/com/stripe/android/paymentsheet/PaymentMethodsUI.kt

@@ -4,6 +4,7 @@ import androidx.annotation.VisibleForTesting
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -14,7 +15,6 @@ import androidx.compose.foundation.selection.selectable
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.ColorFilter
@@ -26,8 +26,8 @@ import androidx.compose.ui.unit.dp
 import com.stripe.android.paymentsheet.ui.LpmSelectorText
 import com.stripe.android.ui.core.MeasureComposableWidth
 import com.stripe.android.ui.core.PaymentsTheme
-import com.stripe.android.ui.core.forms.resources.LpmRepository.SupportedPaymentMethod
 import com.stripe.android.ui.core.elements.SectionCard
+import com.stripe.android.ui.core.forms.resources.LpmRepository.SupportedPaymentMethod
 import com.stripe.android.ui.core.paymentsColors
 
 internal const val ADD_PM_DEFAULT_PADDING = 12.0f
@@ -44,20 +44,12 @@ internal fun PaymentMethodsUI(
     isEnabled: Boolean,
     onItemSelectedListener: (SupportedPaymentMethod) -> Unit
 ) {
-    val scope = rememberCoroutineScope()
     val state = rememberLazyListState()
 
     LaunchedEffect(selectedIndex) {
         state.scrollToItem(selectedIndex, 0)
     }
 
-    LaunchedEffect(isEnabled) {
-        if (isEnabled) {
-            state.reenableScrolling(scope)
-        } else {
-            state.disableScrolling(scope)
-        }
-    }
     PaymentsTheme {
         BoxWithConstraints(
             modifier = Modifier
@@ -68,12 +60,11 @@ internal fun PaymentMethodsUI(
                 paymentMethods.size
             )
 
-            // TODO: userScrollEnabled will be available in compose version 1.2.0-alpha01+
             LazyRow(
                 state = state,
-                modifier = Modifier
-                    .padding(start = PM_LIST_PADDING.dp)
-                    .testTag(TEST_TAG_LIST)
+                contentPadding = PaddingValues(horizontal = PM_LIST_PADDING.dp),
+                userScrollEnabled = isEnabled,
+                modifier = Modifier.testTag(TEST_TAG_LIST)
             ) {
                 itemsIndexed(items = paymentMethods, itemContent = { index, item ->
                     PaymentMethodUI(