SDK-2372 Update B2B UI component ordering

source/sdk/src/main/java/com/stytch/sdk/ui/b2b/data/ProductComponent.kt

@@ -8,4 +8,13 @@ internal enum class ProductComponent {
     PasswordsEmailForm,
     PasswordEMLCombined,
     Divider,
+    ;
+
+    internal fun isInputComponent(): Boolean =
+        this == EmailForm ||
+            this == EmailDiscoveryForm ||
+            this == PasswordsEmailForm ||
+            this == PasswordEMLCombined
+
+    internal fun isButtonComponent(): Boolean = this == OAuthButtons || this == SSOButtons
 }

source/sdk/src/main/java/com/stytch/sdk/ui/b2b/data/StytchB2BProductConfig.kt

@@ -3,7 +3,6 @@ package com.stytch.sdk.ui.b2b.data
 import android.os.Parcelable
 import androidx.annotation.Keep
 import com.squareup.moshi.JsonClass
-import com.stytch.sdk.b2b.network.models.InternalOrganizationData
 import com.stytch.sdk.b2b.network.models.MfaMethod
 import com.stytch.sdk.common.network.models.Locale
 import com.stytch.sdk.ui.shared.data.SessionOptions
@@ -38,82 +37,3 @@ public data class StytchB2BProductConfig
             ),
         val locale: Locale? = Locale.EN,
     ) : Parcelable
-
-/*
-  Here we are generating the ordering and which components will be displayed.
-  We use the Component enum this because there is some complex logic here, and
-  we want to be able to unit test.
-
-  Rules we want to follow when generating the components:
-  1. If we're displaying both an email-based method (email magic links and/or email OTPs) and passwords,
-  we need to display them together as a single wrapped component. The index of this wrapped component is
-  equivalent to the first index of either email-based method or passwords in the config products list.
-  2. If we have both buttons and input, we want to display a divider between the last 2 elements.
-  3. Some components have both a discovery and a non-discovery version. We want to display the correct version
-  based on the flow type (found in state).
-  4. We want to display the components in the order that they are listed in the config.
-
-  This function should be considered the source of truth for which components to render
-  and what order to render them in as of 6/21/23.
-*/
-internal fun List<StytchB2BProduct>.generateProductComponentsOrdering(
-    authFlowType: AuthFlowType,
-    organization: InternalOrganizationData?,
-): List<ProductComponent> {
-    val containsEmail = contains(StytchB2BProduct.EMAIL_MAGIC_LINKS) || contains(StytchB2BProduct.EMAIL_OTP)
-    val displayEmlAndPasswordsTogether = containsEmail && contains(StytchB2BProduct.PASSWORDS)
-    val components =
-        mapNotNull { product ->
-            when (product) {
-                StytchB2BProduct.EMAIL_MAGIC_LINKS,
-                StytchB2BProduct.EMAIL_OTP,
-                -> {
-                    if (displayEmlAndPasswordsTogether) {
-                        ProductComponent.PasswordEMLCombined
-                    } else {
-                        if (authFlowType == AuthFlowType.ORGANIZATION) {
-                            ProductComponent.EmailForm
-                        } else {
-                            ProductComponent.EmailDiscoveryForm
-                        }
-                    }
-                }
-
-                StytchB2BProduct.OAUTH -> {
-                    ProductComponent.OAuthButtons
-                }
-
-                StytchB2BProduct.SSO -> {
-                    // We only need to render a component if we have a valid SSO connection
-                    organization?.let { org ->
-                        val isSSOValid = !org.ssoActiveConnections.isNullOrEmpty()
-                        if (authFlowType == AuthFlowType.ORGANIZATION && isSSOValid) {
-                            ProductComponent.SSOButtons
-                        } else {
-                            null
-                        }
-                    }
-                }
-
-                StytchB2BProduct.PASSWORDS -> {
-                    if (displayEmlAndPasswordsTogether) {
-                        ProductComponent.PasswordEMLCombined
-                    } else {
-                        ProductComponent.PasswordsEmailForm
-                    }
-                }
-            }
-        }
-            // ensure we have only one of each component
-            .toSet()
-            // but we want a list we can modify
-            .toMutableList()
-
-    val hasButtons = components.any { it in setOf(ProductComponent.OAuthButtons, ProductComponent.SSOButtons) }
-    val hasInput = any { it in setOf(StytchB2BProduct.EMAIL_MAGIC_LINKS, StytchB2BProduct.PASSWORDS) }
-    val showDivider = hasButtons && hasInput
-    if (components.isNotEmpty() && showDivider) {
-        components.add(components.size - 1, ProductComponent.Divider)
-    }
-    return components.toList()
-}

source/sdk/src/main/java/com/stytch/sdk/ui/b2b/extensions/GenerateProductComponentsOrdering.kt

@@ -0,0 +1,111 @@
+package com.stytch.sdk.ui.b2b.extensions
+
+import com.stytch.sdk.b2b.network.models.InternalOrganizationData
+import com.stytch.sdk.ui.b2b.data.AuthFlowType
+import com.stytch.sdk.ui.b2b.data.ProductComponent
+import com.stytch.sdk.ui.b2b.data.StytchB2BProduct
+
+/*
+    Here we are generating the ordering and which components will be displayed.
+    We use the ProductComponent enum because there is some complex logic here, and
+    we want to be able to unit test.
+
+    Rules we want to follow when generating the components:
+    1. If we're displaying both email magic links or email otp and passwords, we need to display them together
+       as a single wrapped component. The index of this wrapped component is equivalent to the first index of
+       either email magic links, email otp, or passwords in the config products list.
+    2. If multiple "button types" are present, keep them together
+    3. If both buttons and inputs are present, display a divider above and below the input component.
+       Do not add a divider above if the input is the first component or below if it is the last.
+    4. Overall, we want to display the components in the order that they are listed in the config, aside from the
+       operations described above
+*/
+internal fun List<StytchB2BProduct>.generateProductComponentsOrdering(
+    authFlowType: AuthFlowType,
+    organization: InternalOrganizationData?,
+): List<ProductComponent> = mapProductsToComponents(authFlowType, organization).keepButtonsTogether().addDividers()
+
+private fun List<StytchB2BProduct>.mapProductsToComponents(
+    authFlowType: AuthFlowType,
+    organization: InternalOrganizationData?,
+): MutableList<ProductComponent> {
+    val containsEmail = contains(StytchB2BProduct.EMAIL_MAGIC_LINKS) || contains(StytchB2BProduct.EMAIL_OTP)
+    val displayEmlAndPasswordsTogether = containsEmail && contains(StytchB2BProduct.PASSWORDS)
+    return mapNotNull { product ->
+        when (product) {
+            StytchB2BProduct.EMAIL_MAGIC_LINKS,
+            StytchB2BProduct.EMAIL_OTP,
+            -> {
+                if (displayEmlAndPasswordsTogether) {
+                    ProductComponent.PasswordEMLCombined
+                } else {
+                    if (authFlowType == AuthFlowType.ORGANIZATION) {
+                        ProductComponent.EmailForm
+                    } else {
+                        ProductComponent.EmailDiscoveryForm
+                    }
+                }
+            }
+
+            StytchB2BProduct.OAUTH -> {
+                ProductComponent.OAuthButtons
+            }
+
+            StytchB2BProduct.SSO -> {
+                // We only need to render a component if we have a valid SSO connection
+                organization?.let { org ->
+                    val isSSOValid = !org.ssoActiveConnections.isNullOrEmpty()
+                    if (authFlowType == AuthFlowType.ORGANIZATION && isSSOValid) {
+                        ProductComponent.SSOButtons
+                    } else {
+                        null
+                    }
+                }
+            }
+
+            StytchB2BProduct.PASSWORDS -> {
+                if (displayEmlAndPasswordsTogether) {
+                    ProductComponent.PasswordEMLCombined
+                } else {
+                    ProductComponent.PasswordsEmailForm
+                }
+            }
+        }
+    }
+        // ensure we only have one of each product component type
+        .toSet()
+        // make it a mutable list, for the next round of processing
+        .toMutableList()
+}
+
+private fun MutableList<ProductComponent>.keepButtonsTogether(): MutableList<ProductComponent> {
+    val buttonTypes = filter { it.isButtonComponent() }
+    if (buttonTypes.isNotEmpty()) {
+        // get the index of the first button type
+        val firstButtonTypeIndex = indexOf(buttonTypes[0])
+        // remove all button types
+        removeAll(buttonTypes)
+        // re-add button types at the first button type index
+        addAll(firstButtonTypeIndex, buttonTypes)
+    }
+    return this
+}
+
+private fun MutableList<ProductComponent>.addDividers(): MutableList<ProductComponent> {
+    val output: MutableList<ProductComponent> = mutableListOf()
+    forEachIndexed { index, component ->
+        val componentAndDividers = mutableListOf(component)
+        if (component.isInputComponent()) {
+            if (index > 0) {
+                // add a divider before the component
+                componentAndDividers.add(0, ProductComponent.Divider)
+            }
+            if (index < this.size - 1) {
+                // add a divider after the component
+                componentAndDividers.add(ProductComponent.Divider)
+            }
+        }
+        output.addAll(componentAndDividers)
+    }
+    return output
+}

source/sdk/src/main/java/com/stytch/sdk/ui/b2b/screens/MainScreen.kt

@@ -40,7 +40,7 @@ import com.stytch.sdk.ui.b2b.data.SetLoading
 import com.stytch.sdk.ui.b2b.data.SetNextRoute
 import com.stytch.sdk.ui.b2b.data.StytchB2BProduct
 import com.stytch.sdk.ui.b2b.data.StytchB2BProductConfig
-import com.stytch.sdk.ui.b2b.data.generateProductComponentsOrdering
+import com.stytch.sdk.ui.b2b.extensions.generateProductComponentsOrdering
 import com.stytch.sdk.ui.b2b.navigation.Routes
 import com.stytch.sdk.ui.b2b.usecases.UseEffectiveAuthConfig
 import com.stytch.sdk.ui.b2b.usecases.UseEmailOTPDiscoverySend