Support condensed footer presentation in template 2

RevenueCat · Oct 19, 2023 · fbca662 · fbca662
1 parent 19ab46b
commit fbca662
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 11 deletions.
diff --git a/examples/paywall-tester/src/main/java/com/revenuecat/paywallstester/PaywallTesterApp.kt b/examples/paywall-tester/src/main/java/com/revenuecat/paywallstester/PaywallTesterApp.kt
@@ -39,6 +39,13 @@ private fun AppNavHost(
                 navigateToPaywallFooterScreen = { offering ->
                     navController.navigate(AppScreen.PaywallFooter.route.plus("/${offering?.identifier}"))
                 },
+                navigateToPaywallCondensedFooterScreen = { offering ->
+                    navController.navigate(
+                        AppScreen.PaywallFooter.route
+                            .plus("/${offering?.identifier}")
+                            .plus("?${PaywallScreenViewModel.FOOTER_CONDENSED_KEY}=true"),
+                    )
+                },
             )
         }
         composable(
@@ -48,8 +55,18 @@ private fun AppNavHost(
             PaywallScreen()
         }
         composable(
-            route = AppScreen.PaywallFooter.route.plus("/{${PaywallScreenViewModel.OFFERING_ID_KEY}}"),
-            arguments = listOf(navArgument(PaywallScreenViewModel.OFFERING_ID_KEY) { type = NavType.StringType }),
+            route = AppScreen.PaywallFooter.route
+                .plus("/{${PaywallScreenViewModel.OFFERING_ID_KEY}}")
+                .plus(
+                    "?${PaywallScreenViewModel.FOOTER_CONDENSED_KEY}={${PaywallScreenViewModel.FOOTER_CONDENSED_KEY}}",
+                ),
+            arguments = listOf(
+                navArgument(PaywallScreenViewModel.OFFERING_ID_KEY) { type = NavType.StringType },
+                navArgument(PaywallScreenViewModel.FOOTER_CONDENSED_KEY) {
+                    type = NavType.BoolType
+                    defaultValue = false
+                },
+            ),
         ) {
             PaywallFooterScreen()
         }

diff --git a/.../paywall-tester/src/main/java/com/revenuecat/paywallstester/ui/screens/main/MainScreen.kt b/.../paywall-tester/src/main/java/com/revenuecat/paywallstester/ui/screens/main/MainScreen.kt
@@ -26,19 +26,30 @@ import com.revenuecat.purchases.Offering
 fun MainScreen(
     navigateToPaywallScreen: (Offering?) -> Unit,
     navigateToPaywallFooterScreen: (Offering?) -> Unit,
+    navigateToPaywallCondensedFooterScreen: (Offering?) -> Unit,
     navController: NavHostController = rememberNavController(),
 ) {
     Scaffold(
         bottomBar = { BottomBarNavigation(navController) },
     ) {
-        MainNavHost(navController, navigateToPaywallScreen, navigateToPaywallFooterScreen, Modifier.padding(it))
+        MainNavHost(
+            navController,
+            navigateToPaywallScreen,
+            navigateToPaywallFooterScreen,
+            navigateToPaywallCondensedFooterScreen,
+            Modifier.padding(it),
+        )
     }
 }
 
 @Preview
 @Composable
 fun MainScreenPreview() {
-    MainScreen(navigateToPaywallScreen = {}, navigateToPaywallFooterScreen = {})
+    MainScreen(
+        navigateToPaywallScreen = {},
+        navigateToPaywallFooterScreen = {},
+        navigateToPaywallCondensedFooterScreen = {},
+    )
 }
 
 private val bottomNavigationItems = listOf(
@@ -52,6 +63,7 @@ private fun MainNavHost(
     navController: NavHostController,
     navigateToPaywallScreen: (Offering?) -> Unit,
     navigateToPaywallFooterScreen: (Offering?) -> Unit,
+    navigateToPaywallCondensedFooterScreen: (Offering?) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     NavHost(
@@ -69,6 +81,7 @@ private fun MainNavHost(
             OfferingsScreen(
                 tappedOnOffering = { offering -> navigateToPaywallScreen(offering) },
                 tappedOnOfferingFooter = { offering -> navigateToPaywallFooterScreen(offering) },
+                tappedOnOfferingCondensedFooter = { offering -> navigateToPaywallCondensedFooterScreen(offering) },
             )
         }
     }

diff --git a/.../src/main/java/com/revenuecat/paywallstester/ui/screens/main/offerings/OfferingsScreen.kt b/.../src/main/java/com/revenuecat/paywallstester/ui/screens/main/offerings/OfferingsScreen.kt
@@ -41,6 +41,7 @@ import kotlinx.coroutines.flow.asStateFlow
 fun OfferingsScreen(
     tappedOnOffering: (Offering) -> Unit,
     tappedOnOfferingFooter: (Offering) -> Unit,
+    tappedOnOfferingCondensedFooter: (Offering) -> Unit,
     viewModel: OfferingsViewModel = viewModel<OfferingsViewModelImpl>(),
 ) {
     when (val state = viewModel.offeringsState.collectAsState().value) {
@@ -49,6 +50,7 @@ fun OfferingsScreen(
             offeringsState = state,
             tappedOnNavigateToOffering = tappedOnOffering,
             tappedOnNavigateToOfferingFooter = tappedOnOfferingFooter,
+            tappedOnNavigateToOfferingCondensedFooter = tappedOnOfferingCondensedFooter,
         )
         OfferingsState.Loading -> LoadingOfferingsScreen()
     }
@@ -79,6 +81,7 @@ private fun OfferingsListScreen(
     offeringsState: OfferingsState.Loaded,
     tappedOnNavigateToOffering: (Offering) -> Unit,
     tappedOnNavigateToOfferingFooter: (Offering) -> Unit,
+    tappedOnNavigateToOfferingCondensedFooter: (Offering) -> Unit,
 ) {
     var dropdownExpandedOffering by remember { mutableStateOf<Offering?>(null) }
     var displayPaywallDialogOffering by remember { mutableStateOf<Offering?>(null) }
@@ -92,6 +95,7 @@ private fun OfferingsListScreen(
                         tappedOnNavigateToOffering = tappedOnNavigateToOffering,
                         tappedOnDisplayOfferingAsDialog = { displayPaywallDialogOffering = it },
                         tappedOnDisplayOfferingAsFooter = tappedOnNavigateToOfferingFooter,
+                        tappedOnDisplayOfferingAsCondensedFooter = tappedOnNavigateToOfferingCondensedFooter,
                         dismissed = { dropdownExpandedOffering = null },
                     )
                 }
@@ -136,12 +140,14 @@ private fun OfferingsListScreen(
     }
 }
 
+@Suppress("LongParameterList")
 @Composable
 private fun DisplayOfferingMenu(
     offering: Offering,
     tappedOnNavigateToOffering: (Offering) -> Unit,
     tappedOnDisplayOfferingAsDialog: (Offering) -> Unit,
     tappedOnDisplayOfferingAsFooter: (Offering) -> Unit,
+    tappedOnDisplayOfferingAsCondensedFooter: (Offering) -> Unit,
     dismissed: () -> Unit,
 ) {
     val activity = LocalContext.current as MainActivity
@@ -158,6 +164,10 @@ private fun DisplayOfferingMenu(
             text = { Text(text = "Display paywall as footer") },
             onClick = { tappedOnDisplayOfferingAsFooter(offering) },
         )
+        DropdownMenuItem(
+            text = { Text(text = "Display paywall as condensed footer") },
+            onClick = { tappedOnDisplayOfferingAsCondensedFooter(offering) },
+        )
         DropdownMenuItem(
             text = { Text(text = "Display paywall as activity") },
             onClick = { activity.launchPaywall(offering) },
@@ -171,6 +181,7 @@ fun OfferingsScreenPreview() {
     OfferingsScreen(
         tappedOnOffering = {},
         tappedOnOfferingFooter = {},
+        tappedOnOfferingCondensedFooter = {},
         viewModel = object : OfferingsViewModel() {
             private val _offeringsState = MutableStateFlow<OfferingsState>(
                 OfferingsState.Loaded(

diff --git a/...ster/src/main/java/com/revenuecat/paywallstester/ui/screens/paywall/PaywallScreenState.kt b/...ster/src/main/java/com/revenuecat/paywallstester/ui/screens/paywall/PaywallScreenState.kt
@@ -8,5 +8,6 @@ sealed class PaywallScreenState {
     data class Loaded(
         val offering: Offering,
         val dialogText: String? = null,
+        val footerCondensed: Boolean = false,
     ) : PaywallScreenState()
 }
diff --git a/.../src/main/java/com/revenuecat/paywallstester/ui/screens/paywall/PaywallScreenViewModel.kt b/.../src/main/java/com/revenuecat/paywallstester/ui/screens/paywall/PaywallScreenViewModel.kt
@@ -21,6 +21,7 @@ import kotlinx.coroutines.launch
 interface PaywallScreenViewModel : PaywallListener {
     companion object {
         const val OFFERING_ID_KEY = "offering_id"
+        const val FOOTER_CONDENSED_KEY = "footer_condensed"
     }
     val state: StateFlow<PaywallScreenState>
 
@@ -37,6 +38,7 @@ class PaywallScreenViewModelImpl(
     private val _state: MutableStateFlow<PaywallScreenState> = MutableStateFlow(PaywallScreenState.Loading)
 
     private val offeringId = savedStateHandle.get<String?>(PaywallScreenViewModel.OFFERING_ID_KEY)
+    private val footerCondensed = savedStateHandle.get<Boolean?>(PaywallScreenViewModel.FOOTER_CONDENSED_KEY)
 
     init {
         updateOffering()
@@ -123,7 +125,7 @@ class PaywallScreenViewModelImpl(
                     }
                 } else {
                     _state.update {
-                        PaywallScreenState.Loaded(offeringToLoad)
+                        PaywallScreenState.Loaded(offeringToLoad, footerCondensed = footerCondensed ?: false)
                     }
                 }
             } catch (e: PurchasesException) {

diff --git a/...c/main/java/com/revenuecat/paywallstester/ui/screens/paywallfooter/PaywallFooterScreen.kt b/...c/main/java/com/revenuecat/paywallstester/ui/screens/paywallfooter/PaywallFooterScreen.kt
@@ -44,6 +44,7 @@ fun PaywallFooterScreen(
                         .setOffering(state.offering)
                         .setListener(viewModel)
                         .build(),
+                    condensed = state.footerCondensed,
                 ) {
                     SamplePaywall(paddingValues = it)
                 }

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,21 +48,27 @@ internal fun Footer(
     templateConfiguration: TemplateConfiguration,
     viewModel: PaywallViewModel,
     childModifier: Modifier = Modifier,
+    allPlansTapped: () -> Unit = {},
 ) {
     Footer(
+        mode = templateConfiguration.mode,
         configuration = templateConfiguration.configuration,
         colors = templateConfiguration.getCurrentColors(),
         viewModel = viewModel,
         childModifier = childModifier,
+        allPlansTapped = allPlansTapped,
     )
 }
 
+@Suppress("LongParameterList")
 @Composable
 private fun Footer(
+    mode: PaywallMode,
     configuration: PaywallData.Configuration,
     colors: TemplateConfiguration.Colors,
     viewModel: PaywallViewModel,
     childModifier: Modifier = Modifier,
+    allPlansTapped: () -> Unit = {},
 ) {
     val context = LocalContext.current
 
@@ -77,6 +83,21 @@ private fun Footer(
     ) {
         val color = colors.text1
 
+        if (mode == PaywallMode.FOOTER_CONDENSED) {
+            Button(
+                color = color,
+                R.string.all_plans,
+                action = allPlansTapped,
+            )
+
+            if (configuration.displayRestorePurchases ||
+                configuration.termsOfServiceURL != null ||
+                configuration.privacyURL != null
+            ) {
+                Separator(color = color)
+            }
+        }
+
         if (configuration.displayRestorePurchases) {
             Button(
                 color = color,
@@ -191,6 +212,7 @@ private object FooterConstants {
 @Composable
 private fun FooterPreview() {
     Footer(
+        mode = PaywallMode.FULL_SCREEN,
         configuration = PaywallData.Configuration(
             packageIds = listOf(),
             termsOfServiceURL = URL("https://revenuecat.com/tos"),

diff --git a/...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template2.kt b/...enuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template2.kt
@@ -1,5 +1,8 @@
 package com.revenuecat.purchases.ui.revenuecatui.templates
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -21,6 +24,10 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -74,21 +81,27 @@ internal fun Template2(
         PaywallBackground(state.templateConfiguration)
 
         Column {
-            Template2MainContent(state, viewModel, childModifier)
+            var packageSelectorVisible by remember {
+                mutableStateOf(state.templateConfiguration.mode != PaywallMode.FOOTER_CONDENSED)
+            }
+            Template2MainContent(state, viewModel, packageSelectorVisible, childModifier)
             PurchaseButton(state, viewModel, childModifier)
             Footer(
                 templateConfiguration = state.templateConfiguration,
                 viewModel = viewModel,
                 childModifier = childModifier,
+                allPlansTapped = { packageSelectorVisible = !packageSelectorVisible },
             )
         }
     }
 }
 
+@Suppress("LongMethod")
 @Composable
 private fun ColumnScope.Template2MainContent(
     state: PaywallState.Loaded,
     viewModel: PaywallViewModel,
+    packageSelectionVisible: Boolean,
     childModifier: Modifier,
 ) {
     Column(
@@ -132,12 +145,26 @@ private fun ColumnScope.Template2MainContent(
             Spacer(Modifier.weight(1f))
         }
 
-        state.templateConfiguration.packages.all.forEach { packageInfo ->
-            SelectPackageButton(state, packageInfo, viewModel, childModifier)
-        }
+        AnimatedVisibility(
+            visible = packageSelectionVisible,
+            enter = expandVertically(expandFrom = Alignment.Bottom),
+            exit = shrinkVertically(shrinkTowards = Alignment.Bottom),
+            label = "AllPlansVisibility",
+        ) {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(
+                    UIConstant.defaultVerticalSpacing,
+                    Alignment.CenterVertically,
+                ),
+            ) {
+                state.templateConfiguration.packages.all.forEach { packageInfo ->
+                    SelectPackageButton(state, packageInfo, viewModel, childModifier)
+                }
 
-        if (state.isInFullScreenMode) {
-            Spacer(Modifier.weight(1f))
+                if (state.isInFullScreenMode) {
+                    Spacer(Modifier.weight(1f))
+                }
+            }
         }
     }
 }
@@ -247,3 +274,13 @@ private fun Template2PaywallFooterPreview() {
         viewModel = MockViewModel(mode = PaywallMode.FOOTER, offering = TestData.template2Offering),
     )
 }
+
+@Preview(showBackground = true, locale = "en-rUS")
+@Preview(showBackground = true, locale = "es-rES")
+@Composable
+private fun Template2PaywallFooterCondensedPreview() {
+    InternalPaywall(
+        options = PaywallOptions.Builder().build(),
+        viewModel = MockViewModel(mode = PaywallMode.FOOTER_CONDENSED, offering = TestData.template2Offering),
+    )
+}
diff --git a/ui/revenuecatui/src/main/res/values-es/strings.xml b/ui/revenuecatui/src/main/res/values-es/strings.xml
@@ -13,4 +13,5 @@
     <string name="monthly">Mensual</string>
     <string name="weekly">Semanalmente</string>
     <string name="lifetime">Toda la vida</string>
+    <string name="all_plans">Todas las subscripciones</string>
 </resources>
diff --git a/ui/revenuecatui/src/main/res/values/strings.xml b/ui/revenuecatui/src/main/res/values/strings.xml
@@ -13,4 +13,5 @@
     <string name="monthly">Monthly</string>
     <string name="weekly">Weekly</string>
     <string name="lifetime">Lifetime</string>
+    <string name="all_plans">All plans</string>
 </resources>