Paywalls: Add API to display paywall as a composable dialog #1297

tonidero · 2023-09-28T09:46:15Z

Description

This adds a new composable PaywallDialog that can be used to display the paywall as a dialog. It also modifies paywall tester to provide options on how we want to display the paywall from the offerings tab.

codecov · 2023-09-28T10:13:23Z

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (4885224) 85.46% compared to head (84fb593) 85.46%.
Report is 18 commits behind head on paywalls.

❗ Current head 84fb593 differs from pull request most recent head fc5704f. Consider uploading reports for the commit fc5704f to get more accurate results

Additional details and impacted files

@@            Coverage Diff            @@
##           paywalls    #1297   +/-   ##
=========================================
  Coverage     85.46%   85.46%           
=========================================
  Files           190      190           
  Lines          6385     6385           
  Branches        930      930           
=========================================
  Hits           5457     5457           
  Misses          568      568           
  Partials        360      360

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

tonidero · 2023-09-28T09:47:26Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+                shouldDisplayDialog = try {
+                    // TODO-PAYWALLS: This won't receive updates in case the customer info changes and starts/stops
+                    // being eligible to display the paywall dialog. We would need to support multiple customer info
+                    // listeners to refresh this.


As mentioned, we would need to support multiple customer info listeners if we wanted to display this paywall after the fact... But I think it might be ok, at least for V1?

Yeah that's how it works in iOS. We just want to do one initial check. I'd remove the TODO, since we wouldn't want to get notified of customer info changes and hide the paywall.

tonidero · 2023-09-28T10:03:51Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+                    // TODO-PAYWALLS: This won't receive updates in case the customer info changes and starts/stops
+                    // being eligible to display the paywall dialog. We would need to support multiple customer info
+                    // listeners to refresh this.
+                    val customerInfo = Purchases.sharedInstance.awaitCustomerInfo()


I didn't fully like this here so I was thinking about moving it to the view model. But then, I didn't want to have to create the view model at this point (since we might not even display the dialog)... I thought it was ok for now to keep this. Lmk if you would prefer me to move it.

This is fine. That's exactly how PresentingPaywallModifier works.

tonidero · 2023-09-28T10:05:08Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+
+@Composable
+@ReadOnlyComposable
+private fun shouldUsePlatformDefaultWidth(): Boolean {


This basically will display a full screen dialog for phones and a normal dialog for tablets and foldables. I think it looks ok for now but we can revisit later and polish this logic.

tonidero · 2023-09-28T10:41:34Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallViewListener.kt

@@ -12,5 +12,5 @@ interface PaywallViewListener {
    fun onRestoreStarted() {}
    fun onRestoreCompleted(customerInfo: CustomerInfo) {}
    fun onRestoreError(error: PurchasesError) {}
-    fun onDismissed() {}
+    fun onCloseButtonPressed() {}


I'm changing this listener method, since the onDismissed only made sense when displaying as a dialog and the dialog options will already have a separate callback for that.
I'm making showing the close button optional (currently not implemented) and having a callback here for when it's tapped.

tonidero · 2023-09-28T10:42:26Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt

-        Template1MainContent(state)
+        Column(modifier = Modifier.weight(1f)) {
+            Template1MainContent(state)
+        }


This fixes an issue that happened in some devices, specially in landscape where the purchase button and footer weren't visible. By adding a weight to the main content, it has less priority than the button/footer so those will always show.

Would adding the weight to the outer colum work too?

No, if we apply the weight to the outer column, that means that it won't apply to the inner views. Weights work with siblings by allowing you to set a relative weight between them to use the available space. In case one or more of the siblings don't have a weight attribute, those will have priority over those that do have it, which is what I'm doing here (give priority to the button + footer over the main content to display on the screen)

tonidero · 2023-09-28T10:43:05Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template2.kt

-            Template2MainContent(state, viewModel)
-            Spacer(modifier = Modifier.weight(1f))
+            Box(
+                modifier = Modifier.weight(1f).padding(


Similar to the above, but for template 2.

tonidero · 2023-09-28T11:07:31Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/InternalPaywallView.kt

@@ -55,6 +55,9 @@ private fun getPaywallViewModel(
 ): PaywallViewModel {
    val applicationContext = LocalContext.current.applicationContext
    return viewModel<PaywallViewModelImpl>(
+        // We need to pass the key in order to create different view models for different offerings when
+        // trying to load different paywalls for the same view model store owner.
+        key = offering?.identifier,


This has an important drawback which is that, if a user displays multiple different offerings as dialogs, the viewmodels for all of them will remain in memory... I'm not sure if this is the best way to fix this, but it should work for now.

I think that makes sense. It's also probably extremely uncommon.

NachoSoto

Looks great!

NachoSoto · 2023-10-02T19:04:48Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/InternalPaywallView.kt

@@ -55,6 +55,9 @@ private fun getPaywallViewModel(
 ): PaywallViewModel {
    val applicationContext = LocalContext.current.applicationContext
    return viewModel<PaywallViewModelImpl>(
+        // We need to pass the key in order to create different view models for different offerings when
+        // trying to load different paywalls for the same view model store owner.
+        key = offering?.identifier,


I think that makes sense. It's also probably extremely uncommon.

NachoSoto · 2023-10-02T19:06:45Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+                shouldDisplayDialog = try {
+                    // TODO-PAYWALLS: This won't receive updates in case the customer info changes and starts/stops
+                    // being eligible to display the paywall dialog. We would need to support multiple customer info
+                    // listeners to refresh this.


Yeah that's how it works in iOS. We just want to do one initial check. I'd remove the TODO, since we wouldn't want to get notified of customer info changes and hide the paywall.

NachoSoto · 2023-10-02T19:08:03Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+                    // TODO-PAYWALLS: This won't receive updates in case the customer info changes and starts/stops
+                    // being eligible to display the paywall dialog. We would need to support multiple customer info
+                    // listeners to refresh this.
+                    val customerInfo = Purchases.sharedInstance.awaitCustomerInfo()


This is fine. That's exactly how PresentingPaywallModifier works.

NachoSoto · 2023-10-02T19:08:31Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+                }
+                if (shouldDisplayDialog) {
+                    Logger.d("Displaying paywall dialog according to display logic")
+                } else Logger.d("Not displaying paywall dialog according to display logic")


Nit: weird that you have {} for the if but not the else.

NachoSoto · 2023-10-02T19:08:55Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallDialog.kt

+import kotlinx.coroutines.launch
+
+@Composable
+fun PaywallDialog(


Can you add a docstring to this?

NachoSoto · 2023-10-02T19:10:08Z

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/templates/Template1.kt

-        Template1MainContent(state)
+        Column(modifier = Modifier.weight(1f)) {
+            Template1MainContent(state)
+        }


Would adding the weight to the outer colum work too?

### Description This adds a new composable `PaywallDialog` that can be used to display the paywall as a dialog. It also modifies paywall tester to provide options on how we want to display the paywall from the offerings tab.

tonidero added pr:feat A new feature pr:RevenueCatUI labels Sep 28, 2023

tonidero commented Sep 28, 2023

View reviewed changes

tonidero marked this pull request as ready for review September 28, 2023 10:43

tonidero requested a review from a team September 28, 2023 10:43

tonidero commented Sep 28, 2023

View reviewed changes

tonidero requested a review from a team September 28, 2023 11:07

tonidero added 3 commits September 29, 2023 14:54

Add API to display paywall as a composable dialog

a526b13

Fix template 1 not showing footer correctly

07d323b

Move window dependencies to toml file

84fb593

tonidero force-pushed the toniricodiez/pwl-286-api-for-easily-displaying-paywalls branch from 3736875 to 84fb593 Compare September 29, 2023 12:54

NachoSoto approved these changes Oct 2, 2023

View reviewed changes

Fixes from review

fc5704f

tonidero enabled auto-merge (squash) October 3, 2023 10:11

tonidero merged commit 13af808 into paywalls Oct 3, 2023

tonidero deleted the toniricodiez/pwl-286-api-for-easily-displaying-paywalls branch October 3, 2023 10:27

This was referenced Oct 16, 2023

[DO NOT MERGE] Release/7.1.0-beta.1 #1355

Closed

[DO NOT MERGE] Release/7.1.0-beta.2 #1373

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Paywalls: Add API to display paywall as a composable dialog #1297

Paywalls: Add API to display paywall as a composable dialog #1297

tonidero commented Sep 28, 2023

codecov bot commented Sep 28, 2023 •

edited

Loading

tonidero Sep 28, 2023

NachoSoto Oct 2, 2023

tonidero Sep 28, 2023

NachoSoto Oct 2, 2023

tonidero Sep 28, 2023

tonidero Sep 28, 2023

tonidero Sep 28, 2023

NachoSoto Oct 2, 2023

tonidero Oct 3, 2023

tonidero Sep 28, 2023

tonidero Sep 28, 2023

NachoSoto Oct 2, 2023

NachoSoto left a comment

NachoSoto Oct 2, 2023

NachoSoto Oct 2, 2023

NachoSoto Oct 2, 2023

NachoSoto Oct 2, 2023

NachoSoto Oct 2, 2023

NachoSoto Oct 2, 2023

Paywalls: Add API to display paywall as a composable dialog #1297

Paywalls: Add API to display paywall as a composable dialog #1297

Conversation

tonidero commented Sep 28, 2023

Description

codecov bot commented Sep 28, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NachoSoto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Sep 28, 2023 •

edited

Loading