fix(ad-hoc): Dynamic action container background (#262)

processout · Feb 10, 2025 · 0cdd928 · 0cdd928
1 parent d3b723f
commit 0cdd928
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 138 deletions.
diff --git a/ui-core/build.gradle b/ui-core/build.gradle
@@ -85,6 +85,9 @@ dependencies {
     api platform("androidx.compose:compose-bom:$androidxComposeBOMVersion")
     api "androidx.compose.material3:material3"
     api "androidx.lifecycle:lifecycle-runtime-compose:$androidxLifecycleVersion"
+
+    api "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+
     api "androidx.compose.ui:ui-tooling-preview"
     debugApi "androidx.compose.ui:ui-tooling"
 }
diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POActionsContainer.kt
@@ -43,41 +43,45 @@ fun POActionsContainer(
         enter = fadeIn(animationSpec = tween(durationMillis = animationDurationMillis)),
         exit = fadeOut(animationSpec = tween(durationMillis = animationDurationMillis)),
     ) {
-        Column(modifier = modifier) {
-            HorizontalDivider(thickness = 1.dp, color = containerStyle.dividerColor)
-            val padding = ProcessOutTheme.spacing.extraLarge
-            val spacing = ProcessOutTheme.spacing.small
-            when (containerStyle.axis) {
-                POAxis.Vertical -> Column(
-                    modifier = Modifier
-                        .background(color = containerStyle.backgroundColor)
-                        .padding(padding),
-                    verticalArrangement = Arrangement.spacedBy(spacing)
-                ) {
-                    Actions(
-                        actions = currentActions,
-                        onClick = onClick,
-                        onConfirmationRequested = onConfirmationRequested,
-                        primaryActionStyle = containerStyle.primary,
-                        secondaryActionStyle = containerStyle.secondary,
-                        confirmationDialogStyle = confirmationDialogStyle
-                    )
-                }
-                POAxis.Horizontal -> Row(
-                    modifier = Modifier
-                        .background(color = containerStyle.backgroundColor)
-                        .padding(padding),
-                    horizontalArrangement = Arrangement.spacedBy(spacing)
-                ) {
-                    Actions(
-                        actions = currentActions,
-                        onClick = onClick,
-                        onConfirmationRequested = onConfirmationRequested,
-                        primaryActionStyle = containerStyle.primary,
-                        secondaryActionStyle = containerStyle.secondary,
-                        confirmationDialogStyle = confirmationDialogStyle,
-                        modifier = Modifier.weight(1f)
-                    )
+        PODynamicFooter(
+            spacerBackgroundColor = containerStyle.backgroundColor
+        ) {
+            Column(modifier = modifier) {
+                HorizontalDivider(thickness = 1.dp, color = containerStyle.dividerColor)
+                val padding = ProcessOutTheme.spacing.extraLarge
+                val spacing = ProcessOutTheme.spacing.small
+                when (containerStyle.axis) {
+                    POAxis.Vertical -> Column(
+                        modifier = Modifier
+                            .background(color = containerStyle.backgroundColor)
+                            .padding(padding),
+                        verticalArrangement = Arrangement.spacedBy(spacing)
+                    ) {
+                        Actions(
+                            actions = currentActions,
+                            onClick = onClick,
+                            onConfirmationRequested = onConfirmationRequested,
+                            primaryActionStyle = containerStyle.primary,
+                            secondaryActionStyle = containerStyle.secondary,
+                            confirmationDialogStyle = confirmationDialogStyle
+                        )
+                    }
+                    POAxis.Horizontal -> Row(
+                        modifier = Modifier
+                            .background(color = containerStyle.backgroundColor)
+                            .padding(padding),
+                        horizontalArrangement = Arrangement.spacedBy(spacing)
+                    ) {
+                        Actions(
+                            actions = currentActions,
+                            onClick = onClick,
+                            onConfirmationRequested = onConfirmationRequested,
+                            primaryActionStyle = containerStyle.primary,
+                            secondaryActionStyle = containerStyle.secondary,
+                            confirmationDialogStyle = confirmationDialogStyle,
+                            modifier = Modifier.weight(1f)
+                        )
+                    }
                 }
             }
         }

diff --git a/.../sdk/ui/shared/component/DynamicFooter.kt → .../sdk/ui/core/component/PODynamicFooter.kt b/.../sdk/ui/shared/component/DynamicFooter.kt → .../sdk/ui/core/component/PODynamicFooter.kt
@@ -1,16 +1,23 @@
-package com.processout.sdk.ui.shared.component
+package com.processout.sdk.ui.core.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
+import com.processout.sdk.ui.core.component.POIme.isImeVisibleAsState
 
+/** @suppress */
+@ProcessOutInternalApi
 @Composable
-internal fun DynamicFooter(
+fun PODynamicFooter(
     modifier: Modifier = Modifier,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    spacerBackgroundColor: Color = Color.Transparent,
     content: @Composable ColumnScope.() -> Unit
 ) {
     Column(
@@ -23,10 +30,13 @@ internal fun DynamicFooter(
         val imePaddingValues = WindowInsets.ime.asPaddingValues()
         val navigationBarPaddingValues = WindowInsets.navigationBars.asPaddingValues()
         Spacer(
-            Modifier.requiredHeight(
-                if (isImeVisible) imePaddingValues.calculateBottomPadding()
-                else navigationBarPaddingValues.calculateBottomPadding()
-            )
+            Modifier
+                .fillMaxWidth()
+                .requiredHeight(
+                    if (isImeVisible) imePaddingValues.calculateBottomPadding()
+                    else navigationBarPaddingValues.calculateBottomPadding()
+                )
+                .background(spacerBackgroundColor)
         )
     }
 }
diff --git a/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POIme.kt b/ui-core/src/main/kotlin/com/processout/sdk/ui/core/component/POIme.kt
@@ -0,0 +1,42 @@
+package com.processout.sdk.ui.core.component
+
+import android.view.ViewTreeObserver
+import androidx.compose.runtime.*
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import com.processout.sdk.ui.core.annotation.ProcessOutInternalApi
+
+/** @suppress */
+@ProcessOutInternalApi
+object POIme {
+
+    @Composable
+    fun isImeVisibleAsState(): State<Boolean> {
+        val isImeVisible = remember {
+            mutableStateOf(
+                value = false,
+                policy = neverEqualPolicy()
+            )
+        }
+        val view = LocalView.current.rootView
+        val viewTreeObserver = view.viewTreeObserver
+        DisposableEffect(viewTreeObserver) {
+            val listener = ViewTreeObserver.OnGlobalLayoutListener {
+                isImeVisible.value = ViewCompat.getRootWindowInsets(view)
+                    ?.isVisible(WindowInsetsCompat.Type.ime()) ?: false
+            }
+            viewTreeObserver.addOnGlobalLayoutListener(listener)
+            onDispose {
+                viewTreeObserver.removeOnGlobalLayoutListener(listener)
+            }
+        }
+        return isImeVisible
+    }
+
+    @Composable
+    fun imeHeight(): Int =
+        ViewCompat.getRootWindowInsets(LocalView.current.rootView)
+            ?.getInsets(WindowInsetsCompat.Type.ime())
+            ?.bottom ?: 0
+}
diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/tokenization/CardTokenizationScreen.kt
@@ -36,7 +36,6 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
-import com.processout.sdk.ui.shared.component.DynamicFooter
 import com.processout.sdk.ui.shared.component.rememberLifecycleEvent
 import com.processout.sdk.ui.shared.extension.dpToPx
 import com.processout.sdk.ui.shared.state.FieldState
@@ -70,17 +69,15 @@ internal fun CardTokenizationScreen(
             )
         },
         bottomBar = {
-            DynamicFooter {
-                Actions(
-                    primary = state.primaryAction,
-                    secondary = state.secondaryAction,
-                    onEvent = onEvent,
-                    style = style.actionsContainer,
-                    modifier = Modifier.onGloballyPositioned {
-                        bottomBarHeight = it.size.height
-                    }
-                )
-            }
+            Actions(
+                primary = state.primaryAction,
+                secondary = state.secondaryAction,
+                onEvent = onEvent,
+                style = style.actionsContainer,
+                modifier = Modifier.onGloballyPositioned {
+                    bottomBarHeight = it.size.height
+                }
+            )
         }
     ) { scaffoldPadding ->
         Column(

diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/card/update/CardUpdateScreen.kt
@@ -30,7 +30,6 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme.colors
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
-import com.processout.sdk.ui.shared.component.DynamicFooter
 import com.processout.sdk.ui.shared.component.rememberLifecycleEvent
 import com.processout.sdk.ui.shared.extension.dpToPx
 import com.processout.sdk.ui.shared.state.FieldState
@@ -64,17 +63,15 @@ internal fun CardUpdateScreen(
             )
         },
         bottomBar = {
-            DynamicFooter {
-                Actions(
-                    primary = state.primaryAction,
-                    secondary = state.secondaryAction,
-                    onEvent = onEvent,
-                    style = style.actionsContainer,
-                    modifier = Modifier.onGloballyPositioned {
-                        bottomBarHeight = it.size.height
-                    }
-                )
-            }
+            Actions(
+                primary = state.primaryAction,
+                secondary = state.secondaryAction,
+                onEvent = onEvent,
+                style = style.actionsContainer,
+                modifier = Modifier.onGloballyPositioned {
+                    bottomBarHeight = it.size.height
+                }
+            )
         }
     ) { scaffoldPadding ->
         Column(

diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/checkout/screen/DynamicCheckoutScreen.kt b/ui/src/main/kotlin/com/processout/sdk/ui/checkout/screen/DynamicCheckoutScreen.kt
@@ -71,9 +71,8 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme.dimensions
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.shapes
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
 import com.processout.sdk.ui.core.theme.ProcessOutTheme.typography
-import com.processout.sdk.ui.shared.component.DynamicFooter
+import com.processout.sdk.ui.shared.component.AndroidTextView
 import com.processout.sdk.ui.shared.component.GooglePayButton
-import com.processout.sdk.ui.shared.component.TextAndroidView
 import com.processout.sdk.ui.shared.extension.*
 import com.processout.sdk.ui.shared.state.FieldState
 
@@ -96,14 +95,12 @@ internal fun DynamicCheckoutScreen(
                 successColor = style.paymentSuccess.backgroundColor
             ),
             bottomBar = {
-                DynamicFooter {
-                    Actions(
-                        state = state,
-                        onEvent = onEvent,
-                        containerStyle = style.actionsContainer,
-                        dialogStyle = style.dialog
-                    )
-                }
+                Actions(
+                    state = state,
+                    onEvent = onEvent,
+                    containerStyle = style.actionsContainer,
+                    dialogStyle = style.dialog
+                )
             }
         ) { scaffoldPadding ->
             AnimatedContent(
@@ -677,7 +674,7 @@ internal object DynamicCheckoutScreen {
         val radioGroup: PORadioGroup.Style,
         val checkbox: POCheckbox.Style,
         val dropdownMenu: PODropdownField.MenuStyle,
-        val bodyText: TextAndroidView.Style,
+        val bodyText: AndroidTextView.Style,
         val errorText: POText.Style,
         val messageBox: POMessageBox.Style,
         val dialog: PODialog.Style,
@@ -740,11 +737,11 @@ internal object DynamicCheckoutScreen {
         } ?: PODropdownField.defaultMenu,
         bodyText = custom?.bodyText?.let { style ->
             val controlsTintColor = custom.controlsTintColorResId?.let { colorResource(id = it) }
-            TextAndroidView.custom(
+            AndroidTextView.custom(
                 style = style,
                 controlsTintColor = controlsTintColor ?: colors.text.primary
             )
-        } ?: TextAndroidView.default,
+        } ?: AndroidTextView.default,
         errorText = custom?.errorText?.let {
             POText.custom(style = it)
         } ?: POText.errorLabel,

diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/checkout/screen/NativeAlternativePayment.kt b/ui/src/main/kotlin/com/processout/sdk/ui/checkout/screen/NativeAlternativePayment.kt
@@ -41,7 +41,7 @@ import com.processout.sdk.ui.core.theme.ProcessOutTheme.spacing
 import com.processout.sdk.ui.napm.NativeAlternativePaymentViewModelState
 import com.processout.sdk.ui.napm.NativeAlternativePaymentViewModelState.*
 import com.processout.sdk.ui.napm.NativeAlternativePaymentViewModelState.Field.*
-import com.processout.sdk.ui.shared.component.TextAndroidView
+import com.processout.sdk.ui.shared.component.AndroidTextView
 import com.processout.sdk.ui.shared.component.rememberLifecycleEvent
 import com.processout.sdk.ui.shared.extension.conditional
 import com.processout.sdk.ui.shared.state.FieldState
@@ -349,7 +349,7 @@ private fun Capture(
             if (state.withProgressIndicator) {
                 AnimatedProgressIndicator(style.progressIndicatorColor)
             }
-            TextAndroidView(
+            AndroidTextView(
                 text = state.message,
                 style = style.bodyText,
                 modifier = Modifier.fillMaxWidth(),

diff --git a/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentBottomSheet.kt b/ui/src/main/kotlin/com/processout/sdk/ui/napm/NativeAlternativePaymentBottomSheet.kt
@@ -18,6 +18,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.processout.sdk.api.dispatcher.PODefaultEventDispatchers
 import com.processout.sdk.core.*
 import com.processout.sdk.ui.base.BaseBottomSheetDialogFragment
+import com.processout.sdk.ui.core.component.POIme.isImeVisibleAsState
 import com.processout.sdk.ui.core.theme.ProcessOutTheme
 import com.processout.sdk.ui.napm.NativeAlternativePaymentActivityContract.Companion.EXTRA_CONFIGURATION
 import com.processout.sdk.ui.napm.NativeAlternativePaymentActivityContract.Companion.EXTRA_RESULT
@@ -29,7 +30,6 @@ import com.processout.sdk.ui.napm.NativeAlternativePaymentScreen.AnimationDurati
 import com.processout.sdk.ui.napm.NativeAlternativePaymentSideEffect.PermissionRequest
 import com.processout.sdk.ui.napm.NativeAlternativePaymentViewModelState.Capture
 import com.processout.sdk.ui.napm.PONativeAlternativePaymentConfiguration.Button
-import com.processout.sdk.ui.shared.component.isImeVisibleAsState
 import com.processout.sdk.ui.shared.component.screenModeAsState
 import com.processout.sdk.ui.shared.extension.collectImmediately
 import com.processout.sdk.ui.shared.extension.dpToPx