Paywalls: Support footer in template 1 (#1366)

### Description Template 1 did not support footer presentation.
RevenueCat · Oct 19, 2023 · 355f6d4 · 355f6d4
1 parent 5466268
commit 355f6d4
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 40 deletions.
diff --git a/...venuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/Footer.kt b/...venuecatui/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,
                 childModifier = childModifier,

diff --git a/...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt b/...enuecatui/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() {