From 74d40fa45b5e3bc4275a6bf14dbc2a6df69d6a91 Mon Sep 17 00:00:00 2001 From: Toni Rico Date: Thu, 19 Oct 2023 12:06:43 +0200 Subject: [PATCH] Support footer in template 1 --- .../ui/revenuecatui/composables/Footer.kt | 6 +- .../ui/revenuecatui/templates/Template1.kt | 95 +++++++++++-------- 2 files changed, 61 insertions(+), 40 deletions(-) diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt index 25bab92e19..863ef87691 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt +++ b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt @@ -48,7 +48,7 @@ internal fun Footer( templateConfiguration: TemplateConfiguration, viewModel: PaywallViewModel, childModifier: Modifier = Modifier, - allPlansTapped: () -> Unit = {}, + allPlansTapped: (() -> Unit)? = null, ) { Footer( mode = templateConfiguration.mode, @@ -68,7 +68,7 @@ private fun Footer( colors: TemplateConfiguration.Colors, viewModel: PaywallViewModel, childModifier: Modifier = Modifier, - allPlansTapped: () -> Unit = {}, + allPlansTapped: (() -> Unit)? = null, ) { val context = LocalContext.current @@ -83,7 +83,7 @@ private fun Footer( ) { val color = colors.text1 - if (mode == PaywallMode.FOOTER_CONDENSED) { + if (mode == PaywallMode.FOOTER_CONDENSED && allPlansTapped != null) { Button( color = color, R.string.all_plans, diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt index 7fc8c62f34..4ef74b2e64 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt +++ b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt @@ -35,6 +35,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.LayoutDirection import com.revenuecat.purchases.ui.revenuecatui.InternalPaywall +import com.revenuecat.purchases.ui.revenuecatui.PaywallMode import com.revenuecat.purchases.ui.revenuecatui.PaywallOptions import com.revenuecat.purchases.ui.revenuecatui.UIConstant import com.revenuecat.purchases.ui.revenuecatui.composables.Footer @@ -45,6 +46,7 @@ import com.revenuecat.purchases.ui.revenuecatui.composables.RemoteImage import com.revenuecat.purchases.ui.revenuecatui.data.PaywallState import com.revenuecat.purchases.ui.revenuecatui.data.PaywallViewModel import com.revenuecat.purchases.ui.revenuecatui.data.currentColors +import com.revenuecat.purchases.ui.revenuecatui.data.isInFullScreenMode import com.revenuecat.purchases.ui.revenuecatui.data.selectedLocalization import com.revenuecat.purchases.ui.revenuecatui.data.testdata.MockViewModel import com.revenuecat.purchases.ui.revenuecatui.data.testdata.TestData @@ -53,12 +55,10 @@ import com.revenuecat.purchases.ui.revenuecatui.extensions.introEligibility @Composable internal fun Template1(state: PaywallState.Loaded, viewModel: PaywallViewModel) { Column( - modifier = Modifier.fillMaxSize(), + modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, ) { - Column(modifier = Modifier.weight(1f)) { - Template1MainContent(state) - } + Template1MainContent(state) PurchaseButton(state, viewModel) Footer(templateConfiguration = state.templateConfiguration, viewModel = viewModel) } @@ -70,52 +70,55 @@ private fun ColumnScope.Template1MainContent(state: PaywallState.Loaded) { val localizedConfig = state.selectedLocalization val colors = state.currentColors - Column( - modifier = Modifier - .fillMaxWidth() - .verticalScroll(rememberScrollState()) - .fillMaxHeight(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy(UIConstant.defaultVerticalSpacing, Alignment.CenterVertically), - ) { - HeaderImage(state.templateConfiguration.images.headerUri) - - Spacer(modifier = Modifier.weight(1f)) - - Markdown( - text = localizedConfig.title, - style = MaterialTheme.typography.displaySmall, - fontWeight = FontWeight.Black, - textAlign = TextAlign.Center, - color = colors.text1, - modifier = Modifier - .padding( - horizontal = UIConstant.defaultHorizontalPadding, - vertical = UIConstant.defaultVerticalSpacing, - ), - ) - - Box( + if (state.isInFullScreenMode) { + Column( modifier = Modifier - .padding(horizontal = UIConstant.defaultHorizontalPadding), + .fillMaxWidth() + .verticalScroll(rememberScrollState()) + .fillMaxHeight() + .weight(1f), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, ) { + HeaderImage(state.templateConfiguration.images.headerUri) + + Spacer(modifier = Modifier.weight(1f)) + Markdown( - text = localizedConfig.subtitle ?: "", - style = MaterialTheme.typography.bodyLarge, - fontWeight = FontWeight.Normal, + text = localizedConfig.title, + style = MaterialTheme.typography.displaySmall, + fontWeight = FontWeight.Black, textAlign = TextAlign.Center, + color = colors.text1, modifier = Modifier .padding( horizontal = UIConstant.defaultHorizontalPadding, vertical = UIConstant.defaultVerticalSpacing, ), - color = colors.text1, ) + + Box( + modifier = Modifier + .padding(horizontal = UIConstant.defaultHorizontalPadding), + ) { + Markdown( + text = localizedConfig.subtitle ?: "", + style = MaterialTheme.typography.bodyLarge, + fontWeight = FontWeight.Normal, + textAlign = TextAlign.Center, + modifier = Modifier + .padding( + horizontal = UIConstant.defaultHorizontalPadding, + vertical = UIConstant.defaultVerticalSpacing, + ), + color = colors.text1, + ) + } + + Spacer(modifier = Modifier.weight(2f)) } } - Spacer(modifier = Modifier.weight(1f)) - Column( modifier = Modifier .padding(bottom = UIConstant.defaultVerticalSpacing) @@ -196,6 +199,24 @@ internal fun Template1PaywallPreview() { ) } +@Preview(showBackground = true) +@Composable +internal fun Template1FooterPaywallPreview() { + InternalPaywall( + options = PaywallOptions.Builder().build(), + viewModel = MockViewModel(mode = PaywallMode.FOOTER, offering = TestData.template1Offering), + ) +} + +@Preview(showBackground = true) +@Composable +internal fun Template1CondensedFooterPaywallPreview() { + InternalPaywall( + options = PaywallOptions.Builder().build(), + viewModel = MockViewModel(mode = PaywallMode.FOOTER_CONDENSED, offering = TestData.template1Offering), + ) +} + @Preview(heightDp = 700, widthDp = 400) @Composable internal fun CircleMaskPreview() {