From 3a51620a7f4adf33acee297a6585a0a5beca9983 Mon Sep 17 00:00:00 2001 From: Toni Rico Date: Fri, 7 Feb 2025 13:18:24 +0100 Subject: [PATCH 1/3] [Paywalls V2] Extend paywall content below sticky footer --- .../components/LoadedPaywallComponents.kt | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt index 5f27821fbf..5c068dc7b0 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt +++ b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt @@ -3,16 +3,26 @@ package com.revenuecat.purchases.ui.revenuecatui.components import android.content.res.Configuration +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb +import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.tooling.preview.Preview import com.revenuecat.purchases.Offering import com.revenuecat.purchases.paywalls.components.StackComponent @@ -64,23 +74,29 @@ internal fun LoadedPaywallComponents( val footerComponentStyle = state.stickyFooter val background = rememberBackgroundStyle(state.background) - Column(modifier = modifier.background(background)) { - ComponentView( - style = style, - state = state, - onClick = clickHandler, - modifier = Modifier - .fillMaxWidth() - .weight(1f) - .verticalScroll(rememberScrollState()), - ) + Box(modifier = modifier.background(background)) { + var footerHeight by remember { mutableIntStateOf(0) } + Column(modifier = Modifier.verticalScroll(rememberScrollState())) { + ComponentView( + style = style, + state = state, + onClick = clickHandler, + modifier = Modifier + .fillMaxWidth(), + ) + val footerHeightDp = with(LocalDensity.current) { footerHeight.toDp() } + Spacer(modifier = Modifier.height(footerHeightDp)) + } + footerComponentStyle?.let { ComponentView( style = it, state = state, onClick = clickHandler, modifier = Modifier - .fillMaxWidth(), + .fillMaxWidth() + .align(Alignment.BottomCenter) + .onSizeChanged { size -> footerHeight = size.height }, ) } } From a50dd2d4a2f9f9cdf6d23bc6198da7ab35040989 Mon Sep 17 00:00:00 2001 From: Toni Rico Date: Fri, 7 Feb 2025 14:03:45 +0100 Subject: [PATCH 2/3] Some fixes for alignment --- .../components/LoadedPaywallComponents.kt | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt index 5c068dc7b0..83e8592674 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt +++ b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt @@ -74,15 +74,23 @@ internal fun LoadedPaywallComponents( val footerComponentStyle = state.stickyFooter val background = rememberBackgroundStyle(state.background) - Box(modifier = modifier.background(background)) { + Box( + modifier = modifier + .background(background), + ) { var footerHeight by remember { mutableIntStateOf(0) } - Column(modifier = Modifier.verticalScroll(rememberScrollState())) { + Column( + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), + ) { ComponentView( style = style, state = state, onClick = clickHandler, modifier = Modifier - .fillMaxWidth(), + .fillMaxWidth() + .weight(1f), ) val footerHeightDp = with(LocalDensity.current) { footerHeight.toDp() } Spacer(modifier = Modifier.height(footerHeightDp)) From 5cf6c41c5d95b05f22212c0ff515313ab465b0ff Mon Sep 17 00:00:00 2001 From: Toni Rico Date: Fri, 7 Feb 2025 14:18:42 +0100 Subject: [PATCH 3/3] Another attempt --- .../components/LoadedPaywallComponents.kt | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt index 83e8592674..8516c6fd3a 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt +++ b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt @@ -4,11 +4,10 @@ package com.revenuecat.purchases.ui.revenuecatui.components import android.content.res.Configuration import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.runtime.Composable @@ -79,22 +78,17 @@ internal fun LoadedPaywallComponents( .background(background), ) { var footerHeight by remember { mutableIntStateOf(0) } - Column( + val footerHeightDp = with(LocalDensity.current) { footerHeight.toDp() } + + ComponentView( + style = style, + state = state, + onClick = clickHandler, modifier = Modifier .fillMaxSize() - .verticalScroll(rememberScrollState()), - ) { - ComponentView( - style = style, - state = state, - onClick = clickHandler, - modifier = Modifier - .fillMaxWidth() - .weight(1f), - ) - val footerHeightDp = with(LocalDensity.current) { footerHeight.toDp() } - Spacer(modifier = Modifier.height(footerHeightDp)) - } + .verticalScroll(rememberScrollState()) + .padding(bottom = footerHeightDp), + ) footerComponentStyle?.let { ComponentView(