New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix several UX issues in address element #5462
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -855,14 +855,6 @@ public final class com/stripe/android/paymentsheet/addresselement/AddressLaunche | |
public synthetic fun newArray (I)[Ljava/lang/Object; | ||
} | ||
|
||
public final class com/stripe/android/paymentsheet/addresselement/AddressUtilsKt { | ||
public static final fun levenshtein (Ljava/lang/CharSequence;Ljava/lang/CharSequence;)I | ||
} | ||
|
||
public final class com/stripe/android/paymentsheet/addresselement/AutocompleteScreenKt { | ||
public static final field TEST_TAG_ATTRIBUTION_DRAWABLE Ljava/lang/String; | ||
} | ||
Comment on lines
-858
to
-864
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These two things were made public by accident, right? |
||
|
||
public final class com/stripe/android/paymentsheet/addresselement/AutocompleteViewModel_Factory : dagger/internal/Factory { | ||
public fun <init> (Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;)V | ||
public static fun create (Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;Ljavax/inject/Provider;)Lcom/stripe/android/paymentsheet/addresselement/AutocompleteViewModel_Factory; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,7 +29,9 @@ import com.google.accompanist.navigation.animation.composable | |
import com.google.accompanist.navigation.animation.AnimatedNavHost | ||
import com.google.accompanist.navigation.animation.rememberAnimatedNavController | ||
import com.stripe.android.paymentsheet.parseAppearance | ||
import com.stripe.android.utils.AnimationConstants | ||
import com.stripe.android.ui.core.PaymentsTheme | ||
import kotlinx.coroutines.flow.drop | ||
import kotlinx.coroutines.launch | ||
|
||
@OptIn(ExperimentalMaterialApi::class) | ||
|
@@ -57,22 +59,36 @@ internal class AddressElementActivity : ComponentActivity() { | |
WindowCompat.setDecorFitsSystemWindows(window, false) | ||
starterArgs.config?.appearance?.parseAppearance() | ||
|
||
starterArgs.statusBarColor?.let { | ||
window.statusBarColor = it | ||
} | ||
|
||
// set a default result in case the user closes the sheet manually | ||
setResult() | ||
|
||
setContent { | ||
val modalBottomSheetState = | ||
rememberModalBottomSheetState( | ||
ModalBottomSheetValue.Expanded | ||
) | ||
val modalBottomSheetState = rememberModalBottomSheetState( | ||
initialValue = ModalBottomSheetValue.Hidden, | ||
skipHalfExpanded = true, | ||
confirmStateChange = { | ||
val route = navController.currentDestination?.route | ||
route != AddressElementScreen.Autocomplete.route | ||
} | ||
Comment on lines
+73
to
+76
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I find that the user shouldn’t be able to exit from the sheet while in the autocomplete screen. Any concerns around this? |
||
) | ||
|
||
navController = rememberAnimatedNavController() | ||
viewModel.navigator.navigationController = navController | ||
|
||
val coroutineScope = rememberCoroutineScope() | ||
|
||
LaunchedEffect(Unit) { | ||
snapshotFlow { modalBottomSheetState.currentValue }.collect { | ||
modalBottomSheetState.show() | ||
} | ||
|
||
LaunchedEffect(Unit) { | ||
// We need to drop(1) to avoid the sheet being closed on the first composition, | ||
// given that the initial bottom sheet state is `hidden`. | ||
snapshotFlow { modalBottomSheetState.currentValue }.drop(1).collect { | ||
// finish the activity when the sheet closes. | ||
if (it == ModalBottomSheetValue.Hidden) { | ||
finish() | ||
|
@@ -125,7 +141,9 @@ internal class AddressElementActivity : ComponentActivity() { | |
} | ||
}, | ||
content = {}, | ||
modifier = Modifier.navigationBarsPadding().systemBarsPadding() | ||
modifier = Modifier | ||
.navigationBarsPadding() | ||
.systemBarsPadding() | ||
) | ||
} | ||
} | ||
|
@@ -138,4 +156,9 @@ internal class AddressElementActivity : ComponentActivity() { | |
) | ||
) | ||
} | ||
|
||
override fun finish() { | ||
super.finish() | ||
overridePendingTransition(AnimationConstants.FADE_IN, AnimationConstants.FADE_OUT) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,17 @@ | ||
package com.stripe.android.paymentsheet.addresselement | ||
|
||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.ColumnScope | ||
import androidx.compose.foundation.rememberScrollState | ||
import androidx.compose.foundation.verticalScroll | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import kotlin.math.min | ||
|
||
// https://gist.github.com/ademar111190/34d3de41308389a0d0d8 | ||
|
||
fun CharSequence.levenshtein(other: CharSequence): Int { | ||
internal fun CharSequence.levenshtein(other: CharSequence): Int { | ||
if (this == other) { return 0 } | ||
if (this.isEmpty()) { return other.length } | ||
if (other.isEmpty()) { return this.length } | ||
|
@@ -47,3 +54,18 @@ internal fun AddressDetails.editDistance(otherAddress: AddressDetails?): Int { | |
editDistance += (address?.state ?: "").levenshtein(comparedAddress?.state ?: "") | ||
return editDistance | ||
} | ||
|
||
@Composable | ||
internal fun ScrollableColumn( | ||
modifier: Modifier = Modifier, | ||
content: @Composable ColumnScope.() -> Unit | ||
) { | ||
Box( | ||
modifier = Modifier.verticalScroll(rememberScrollState()) | ||
) { | ||
Column( | ||
modifier = modifier, | ||
content = content | ||
) | ||
} | ||
} | ||
Comment on lines
+58
to
+71
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Similar to what we’re using in Link. Let me know if you prefer a different approach. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I figured we could use fade animations in all places where we were currently overriding pending transitions, as this results in a much smoother look. Any concerns about this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it change anything? This activity has no UI
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That one is indeed a bad example 🙈 There is a noticeable difference with the payment sheet though. I figured it wouldn’t hurt to apply the same everywhere to discourage using no animations.