[connect] Use AndroidX Navigation in Example app #9767

lng-stripe · 2024-12-09T16:39:22Z

Summary

Main changes:

Refactor navigation around settings to use the AndroidX Navigation library. Settings is no longer a bottom sheet modal, but a destination on the nav graph. Appearance settings is still a modal to demonstrate real-time updates to the embedded component (otherwise the WebView is reloaded when we nav back)
Adds dependency on androidx.hilt:hilt-navigation-compose

See inline comments for more.

Motivation

https://jira.corp.stripe.com/browse/MXMOBILE-2512

This is in preparation for adding Account Onboarding component settings, which we want to navigate to from the Settings screen.

Testing

Added tests
Modified tests
Manually verified

Screenshots

In addition to showing the happy path, the demo below also shows error state and app restoration.

Screen.Recording.2024-12-09.at.11.35.36.AM-compressed.mov

github-actions · 2024-12-09T16:39:36Z

Risky Change

This is considered a risky change because it adjusts the sample app build.gradle, please review carefully.
We've seen issues in the past which resulted in failed builds for merchants. Please make sure the build.gradle change is intended.

By adding the label accept-risky-change to this PR, I acknowledge that I'm changing an example app and have verified that the SDK remains in a shippable state.

github-actions · 2024-12-09T16:45:17Z

Diffuse output:

OLD: paymentsheet-example-release-master.apk (signature: V1, V2)
NEW: paymentsheet-example-release-pr.apk (signature: V1, V2)

          │          compressed          │        uncompressed        
          ├───────────┬───────────┬──────┼──────────┬──────────┬──────
 APK      │ old       │ new       │ diff │ old      │ new      │ diff 
──────────┼───────────┼───────────┼──────┼──────────┼──────────┼──────
      dex │   3.9 MiB │   3.9 MiB │  0 B │  8.6 MiB │  8.6 MiB │  0 B 
     arsc │   2.3 MiB │   2.3 MiB │  0 B │  2.3 MiB │  2.3 MiB │  0 B 
 manifest │     5 KiB │     5 KiB │  0 B │ 24.9 KiB │ 24.9 KiB │  0 B 
      res │ 908.2 KiB │ 908.2 KiB │  0 B │  1.4 MiB │  1.4 MiB │  0 B 
   native │   2.6 MiB │   2.6 MiB │  0 B │    6 MiB │    6 MiB │  0 B 
    asset │   1.6 MiB │   1.6 MiB │  0 B │  1.6 MiB │  1.6 MiB │  0 B 
    other │   1.4 MiB │   1.4 MiB │ -5 B │  1.6 MiB │  1.6 MiB │  0 B 
──────────┼───────────┼───────────┼──────┼──────────┼──────────┼──────
    total │  12.7 MiB │  12.7 MiB │ -5 B │ 21.6 MiB │ 21.6 MiB │  0 B 

 DEX     │ old   │ new   │ diff      
─────────┼───────┼───────┼───────────
   files │     1 │     1 │ 0         
 strings │ 40570 │ 40570 │ 0 (+0 -0) 
   types │ 14002 │ 14002 │ 0 (+0 -0) 
 classes │ 11679 │ 11679 │ 0 (+0 -0) 
 methods │ 59604 │ 59604 │ 0 (+0 -0) 
  fields │ 39798 │ 39798 │ 0 (+0 -0) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  243 │  243 │  0   
 entries │ 6209 │ 6209 │  0

APK

   compressed    │   uncompressed   │                                           
──────────┬──────┼───────────┬──────┤                                           
 size     │ diff │ size      │ diff │ path                                      
──────────┼──────┼───────────┼──────┼───────────────────────────────────────────
 53.4 KiB │ -5 B │ 118.5 KiB │  0 B │ ∆ META-INF/CERT.SF                        
    272 B │ +2 B │     120 B │  0 B │ ∆ META-INF/version-control-info.textproto 
  1.2 KiB │ -2 B │   1.2 KiB │  0 B │ ∆ META-INF/CERT.RSA                       
──────────┼──────┼───────────┼──────┼───────────────────────────────────────────
 54.9 KiB │ -5 B │ 119.9 KiB │  0 B │ (total)

lng-stripe · 2024-12-09T16:47:41Z

connect-example/src/main/java/com/stripe/android/connect/example/MainActivity.kt


-    private enum class SheetType {
-        SETTINGS,
-        APPEARANCE,
-    }
+@Suppress("ConstPropertyName")
+private object MainDestination {
+    const val ComponentPicker = "ComponentPicker"


👀 Ignoring lint and sticking with PascalCase so minimize thrash when we can use the type-safe DSL.

lng-stripe · 2024-12-09T16:48:06Z

connect-example/src/main/java/com/stripe/android/connect/example/MainActivity.kt

 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {

-    private val viewModel: EmbeddedComponentLoaderViewModel by viewModels()


👀 removed in favor of hiltViewModel() -- see below

lng-stripe · 2024-12-09T16:48:24Z

connect-example/src/main/java/com/stripe/android/connect/example/core/NavigationExtensions.kt

+ * Safer [NavHostController.navigateUp] that prevents navigating past the previous screen,
+ * typically due to accidental double-clicks.
+ */
+fun NavHostController.safeNavigateUp() {


Nice extension!

lng-stripe · 2024-12-09T16:48:35Z

...ect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceView.kt

@@ -38,7 +35,7 @@ fun AppearanceView(
        navigationIcon = {
            IconButton(onClick = onDismiss) {
                Icon(
-                    imageVector = Icons.AutoMirrored.Default.ArrowBack,
+                    imageVector = Icons.Default.Close,


👀 More standard to use X for a modal

Makes sense. In that case can we change SettingsView to match?

Maybe, but SettingsView isn't a modal, which can/should be a back arrow

Hmmm, I see what you're saying. I'm fine keeping it as-is then

lng-stripe · 2024-12-09T16:52:59Z

connect-example/src/main/java/com/stripe/android/connect/example/ui/common/Buttons.kt

@@ -20,14 +20,13 @@ fun BackIconButton(onClick: () -> Unit) {
 }

 @Composable
-fun MoreIconButton(
+fun CustomizeAppearanceIconButton(


lng-stripe · 2024-12-09T16:54:03Z

connect-example/src/main/java/com/stripe/android/connect/example/MainActivity.kt

-    @Suppress("LongMethod")
-    @OptIn(ExperimentalMaterialApi::class)
-    @Composable
-    private fun ComponentPickerContent() {


👀 extracted to its own file

simond-stripe · 2024-12-09T17:18:49Z

connect-example/build.gradle

@@ -29,6 +29,7 @@ dependencies {
    implementation libs.androidx.browser
    implementation libs.androidx.fragment
    implementation libs.androidx.fragmentCompose
+    implementation libs.androidx.hiltNavigationCompose


~~You'll need to run ./gradlew connectexample:apiDump~~

Oops not that command the one you ran 🤦

simond-stripe

Looks great! We should have the SettingsView match the AppearanceView though and also use an 'x' in place of a back arrow

simond-stripe · 2024-12-11T17:33:51Z

connect-example/src/main/java/com/stripe/android/connect/example/core/NavigationExtensions.kt

+ * Safer [NavHostController.navigateUp] that prevents navigating past the previous screen,
+ * typically due to accidental double-clicks.
+ */
+fun NavHostController.safeNavigateUp() {


Nice extension!

simond-stripe · 2024-12-11T17:35:36Z

...ect-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceView.kt

@@ -38,7 +35,7 @@ fun AppearanceView(
        navigationIcon = {
            IconButton(onClick = onDismiss) {
                Icon(
-                    imageVector = Icons.AutoMirrored.Default.ArrowBack,
+                    imageVector = Icons.Default.Close,


Makes sense. In that case can we change SettingsView to match?

simond-stripe · 2024-12-11T17:36:57Z

connect-example/src/main/res/drawable/ic_material_palette.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"


Nice! Where did you find this?

official page: https://fonts.google.com/icons

simond-stripe · 2024-12-11T17:38:18Z

...src/main/java/com/stripe/android/connect/example/ui/componentpicker/ComponentPickerScreen.kt

+
+@OptIn(PrivateBetaConnectSDK::class, ExperimentalMaterialApi::class)
+@Composable
+fun ComponentPickerContent(


Nice refactor!

amk-stripe

gradle file changes LGTM

lng-stripe commented Dec 9, 2024

View reviewed changes

lng-stripe assigned simond-stripe Dec 9, 2024

lng-stripe marked this pull request as ready for review December 9, 2024 16:56

lng-stripe requested review from a team as code owners December 9, 2024 16:56

lng-stripe added the accept-risky-change accept-risky-change label Dec 9, 2024

simond-stripe reviewed Dec 9, 2024

View reviewed changes

lng-stripe added 3 commits December 9, 2024 12:56

refactor using androidx navigation compose

da0f185

use bottom sheet in MainActivity; safe nav up

bf12db9

ruby scripts/dependencies/update_transitive_dependencies.rb

79af50d

lng-stripe force-pushed the lng/connect-navigation-compose branch from ca5ff6f to 79af50d Compare December 9, 2024 17:56

lng-stripe requested a review from simond-stripe December 9, 2024 18:41

simond-stripe approved these changes Dec 11, 2024

View reviewed changes

lng-stripe enabled auto-merge (squash) December 11, 2024 17:44

lng-stripe assigned amk-stripe Dec 11, 2024

amk-stripe approved these changes Dec 11, 2024

View reviewed changes

lng-stripe merged commit 5d21a09 into master Dec 11, 2024
18 checks passed

lng-stripe deleted the lng/connect-navigation-compose branch December 11, 2024 19:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[connect] Use AndroidX Navigation in Example app #9767

[connect] Use AndroidX Navigation in Example app #9767

lng-stripe commented Dec 9, 2024 •

edited

Loading

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 9, 2024 •

edited

Loading

lng-stripe Dec 9, 2024

lng-stripe Dec 9, 2024

lng-stripe Dec 9, 2024

simond-stripe Dec 11, 2024

lng-stripe Dec 9, 2024

simond-stripe Dec 11, 2024

lng-stripe Dec 11, 2024

simond-stripe Dec 11, 2024

lng-stripe Dec 9, 2024

lng-stripe Dec 9, 2024

simond-stripe Dec 9, 2024 •

edited

Loading

simond-stripe Dec 9, 2024

simond-stripe left a comment

simond-stripe Dec 11, 2024

simond-stripe Dec 11, 2024

simond-stripe Dec 11, 2024

lng-stripe Dec 11, 2024

simond-stripe Dec 11, 2024

amk-stripe left a comment

		@@ -0,0 +1,9 @@
		<vector xmlns:android="http://schemas.android.com/apk/res/android"

[connect] Use AndroidX Navigation in Example app #9767

[connect] Use AndroidX Navigation in Example app #9767

Conversation

lng-stripe commented Dec 9, 2024 • edited Loading

Summary

Motivation

Testing

Screenshots

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simond-stripe Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simond-stripe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amk-stripe left a comment

Choose a reason for hiding this comment

lng-stripe commented Dec 9, 2024 •

edited

Loading

github-actions bot commented Dec 9, 2024 •

edited

Loading

simond-stripe Dec 9, 2024 •

edited

Loading