[Paywalls V2] Adds edge-to-edge support #2137

JayShortway · 2025-02-11T13:25:59Z

Description

This is the Android equivalent of this iOS PR: RevenueCat/purchases-ios#4744.

It follows these rules:

For bottom system bars padding:
- Has a sticky footer? Apply to the sticky footer.
- No sticky footer? Apply to the root.
For top system bars padding:
- Has a hero image? Apply to the hero image's parent, and ignore this padding for the hero image itself.
- No hero image? Apply to the root.

To see a paywall edge-to-edge in PaywallsTester, click "Display paywall as view in an activity" on the bottom-right tab.

Here as well, it would be nice to improve this in a future iteration to gather this info in the StyleFactory directly.

# Conflicts: # ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/stack/StackComponentView.kt

codecov · 2025-02-11T13:57:12Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.87%. Comparing base (9f3bc1e) to head (b715a65).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2137   +/-   ##
=======================================
  Coverage   80.87%   80.87%           
=======================================
  Files         275      275           
  Lines        9293     9293           
  Branches     1296     1296           
=======================================
  Hits         7516     7516           
  Misses       1233     1233           
  Partials      544      544

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

tonidero

Code looks good to me! It would be great to be able to test it more easily though... Since previews would be trickier, maybe we can make it easier to test with paywall tester?

tonidero · 2025-02-11T14:49:53Z

...ui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/OfferingToStateMapper.kt

+): T {
+    return when (val transformed = transform(this)) {
+        is StackComponentStyle -> transformed.copy(
+            children = transformed.children.map { it.map(transform) },


Hmm considering this will be recursive, what do you think of calling this method deepMap or deepTransform?

Yea good idea to make it more explicit! I went with recursiveMap. Let me know if you hate it!

tonidero · 2025-02-11T14:55:11Z

...main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/stack/StackComponentState.kt

@@ -97,6 +97,12 @@ internal class StackComponentState(
    @get:JvmSynthetic
    val children = style.children

+    @get:JvmSynthetic
+    val applyTopWindowInsets = style.applyTopWindowInsets


Wdyt of adding an option to paywall tester to display the paywall as an edge to edge paywall? That way we would be able to more easily test this scenario. Right now I think it would be tricky to test... I'm imagining another button when launching the paywall here:

Maybe that's tricky and better to do in a separate PR though...

Ugh, I could have mentioned this in the PR description.. but "Display paywall as view in an activity" shows it as edge to edge!

# Conflicts: # ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/OfferingToStateMapper.kt # ui/revenuecatui/src/test/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallComponentDataValidationTests.kt

@greenietea

**This is an automatic release.** ## RevenueCat SDK ### 🐞 Bugfixes * fix: Add prepaid as a period type (#2141) via Greenie (@greenietea) ## RevenueCatUI SDK ### Paywalls v2 #### ✨ New Features * [Paywalls V2] Adds support for Paywalls V2! (#2127) via JayShortway (@JayShortway) ### Customer Center #### ✨ New Features * Adds support for `CustomerCenter` (#2156) via Cesar de la Vega (@vegaro) ### 🔄 Other Changes * [Paywalls V2] Deprecate PaywallFooter in favor of OriginalTemplatePaywallFooter (#2111) via Toni Rico (@tonidero) * feat: Filter CANCEL from help path if lifetime (#2140) via Facundo Menzella (@facumenzella) * fix: Localize Restore Purchases Dialog (#2139) via Facundo Menzella (@facumenzella) * fix: Hide contact support if there's no email (#2135) via Facundo Menzella (@facumenzella) * feat: Track IMPRESSION and SURVER_OPTION_CHOSEN for CustomerCenter (#2124) via Facundo Menzella (@facumenzella) * fix: Use TextButton instead of outline for Promotionals (#2138) via Facundo Menzella (@facumenzella) * Rename carousel slide to page (#2144) via Josh Holtz (@joshdholtz) * [Paywalls V2] Make border draw on top of the image overlay (#2165) via Toni Rico (@tonidero) * [Paywalls V2] Gradients Reloaded: Makes linear gradients match CSS even more closely (#2166) via JayShortway (@JayShortway) * [Paywalls V2] Fix wrong spacers in Stack when some children are Fill (#2164) via Toni Rico (@tonidero) * chore: Unify Json encoding with JsonHelper (#2160) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fixes the top system bar padding being applied to all children in a vertical container (#2162) via JayShortway (@JayShortway) * [Paywalls V2] Refactor to use a single ImageLoader singleton in RevenueCatUI (#2161) via Toni Rico (@tonidero) * [Paywalls V2] Apply stack margins to overlay badges (#2158) via Toni Rico (@tonidero) * [Paywalls V2] Disables the click handler for the selected package (#2159) via JayShortway (@JayShortway) * [Paywalls V2] Change stack distribution system to use spacers instead of custom arrangements (#2154) via Toni Rico (@tonidero) * [Paywalls V2] Fixes empty stacks not showing up. (#2157) via JayShortway (@JayShortway) * Explicitly sets the `defaults` flavor as the default. (#2155) via JayShortway (@JayShortway) * Updates on no active purchases screen (#2150) via Cesar de la Vega (@vegaro) * [Paywalls V2] Fix issue with sizing of stacks with nested badges (#2152) via Toni Rico (@tonidero) * [Paywalls V2] Fix issue with shadows overlapping long edgeToEdge badges (#2149) via Toni Rico (@tonidero) * [Paywalls V2] Adjusts the convex/concave offset to 10% of the image height (#2151) via JayShortway (@JayShortway) * [Paywalls V2] Fixes variables for multi month periods (#2148) via JayShortway (@JayShortway) * [Paywalls V2] Correctly handles variables for lifetime products (#2145) via JayShortway (@JayShortway) * [Paywalls V2] Add shadows to badge previews (#2147) via Toni Rico (@tonidero) * [Paywalls V2] Predownload paywall low res images (#2143) via Toni Rico (@tonidero) * [Paywalls V2] Makes linear gradients consistent with CSS (#2142) via JayShortway (@JayShortway) * [Paywalls V2] Adds edge-to-edge support (#2137) via JayShortway (@JayShortway) * [Paywalls V2] Make root stack component use all the available space by default (#2136) via Toni Rico (@tonidero) * [Paywalls V2] Avoids a crash if a package is missing (#2130) via JayShortway (@JayShortway) * [Paywalls V2] Fix stack clipping issues (#2126) via Toni Rico (@tonidero) * fix: Address typo and wrong doc for CustomerCenter events (#2133) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fix merge conflict (#2134) via Toni Rico (@tonidero) * [Paywalls V2] Actually ignores the font provider for V2. (#2129) via JayShortway (@JayShortway) * Rename `PromotionalOfferView` to `PromotionalOfferScreen` (#2132) via Cesar de la Vega (@vegaro) * [Paywalls V2] Support background images in StackComponent, CarouselComponent, TabsComponent (#2131) via Toni Rico (@tonidero) * [Paywalls V2] Support scroll orientation in StackComponent (#2108) via Toni Rico (@tonidero) * [Paywalls V2] Correctly selects packages on tabs (#2122) via JayShortway (@JayShortway) * Revamp UI in Customer Center (#2123) via Cesar de la Vega (@vegaro) * [Paywalls V2] Remove cursive as a generic font (#2118) via Josh Holtz (@joshdholtz) * Publishes PaywallsTester to Internal testing track on every commit to `main` (#2100) via JayShortway (@JayShortway) * Fixes `X` in promo offer not dismissing the promo (#2110) via Cesar de la Vega (@vegaro) * [Paywalls V2] Published version of PaywallTester now uses the Paywalls V2 Alpha RC project (#2093) via JayShortway (@JayShortway) * [Paywalls V2] New overrides structure (#2120) via Toni Rico (@tonidero) * [Paywalls V2] Adds `TabsComponent` samples and tests (#2115) via JayShortway (@JayShortway) * Ignores `RestorePurchasesDialog` previews using `IgnoreEmergeSnapshot` (#2116) via Cesar de la Vega (@vegaro) * [Paywalls V2] Adds `TabsComponentView` (#2114) via JayShortway (@JayShortway) * Fixes "View field header collides with a variable" data binding error in PurchaseTester (#2119) via JayShortway (@JayShortway) * feat: Add support for tracking customer center events (#2117) via Facundo Menzella (@facumenzella) * [Paywalls V2] Adds `TabsComponentStyle` (#2113) via JayShortway (@JayShortway) * [Paywalls V2] Adds deserialization of `TabsComponent` (#2101) via JayShortway (@JayShortway) * [Paywalls V2] Implements Variables V2 (#2099) via JayShortway (@JayShortway) * refactor: Introduce EventsManager to track events for different features (#2096) via Facundo Menzella (@facumenzella) * Rename to Web Billing (#2094) via Antonio Borrero Granell (@antoniobg) * [Paywalls V2] Fixes shadows drawing behind transparent components (#2112) via JayShortway (@JayShortway) * Fix title not being reset after closing Feedback Survey (#2109) via Cesar de la Vega (@vegaro) * Support for opening custom urls in Customer Center (#2107) via Cesar de la Vega (@vegaro) * Prices in accept promotional offer button (#2104) via Cesar de la Vega (@vegaro) * Customer Center use remote appearance config (#2102) via Cesar de la Vega (@vegaro) * [Paywalls V2] Use original paywall fallback when trying to use Footer modes in a Components paywall (#2106) via Toni Rico (@tonidero) * [Paywalls V2] Add more `ImageComponentView` preview tests (#2103) via Toni Rico (@tonidero) * [Paywalls V2] Add CarouselComponent page indicator animation (#2105) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponentView` (#2095) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponent` infrastructure (#2092) via Toni Rico (@tonidero) * [Paywalls V2] Adds new price calculations needed for Variables V2 (#2098) via JayShortway (@JayShortway) * [Paywalls V2] Preparation for Variables V2 (#2097) via JayShortway (@JayShortway) * Promotional offers (#2011) via Cesar de la Vega (@vegaro) * [Paywalls V2] No longer provides the entire `UiConfig` to `StyleFactory` (#2091) via JayShortway (@JayShortway) * [Paywalls V2] Adds support for custom fonts (#2090) via JayShortway (@JayShortway) * feat: Add basic customer center events (#2075) via Facundo Menzella (@facumenzella) * Add support to manage non-Google purchases in Customer Center (#2067) via Cesar de la Vega (@vegaro) * [Paywalls V2] Add `TimelineComponentView` (#2083) via Toni Rico (@tonidero) * [Paywalls V2] Process `TimelineComponent` overrides and state (#2082) via Toni Rico (@tonidero) * [Paywalls V2] Cleans up after implementing color aliases (#2087) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for backgrounds (#2086) via JayShortway (@JayShortway) * `PaywallTesterApp` is no longer wrapped in a `Surface` (#2089) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for shadows (#2085) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for borders (#2084) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `TextComponent` (#2080) via JayShortway (@JayShortway) * [Paywalls V2] Add `TimelineComponent` network parsing (#2047) via Toni Rico (@tonidero) * [Paywalls V2] Implements color aliases for `ImageComponent` (#2079) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `IconComponent` (#2078) via JayShortway (@JayShortway) * Build `SubscriptionDetailsView` using `CustomerInfo` (#2057) via Cesar de la Vega (@vegaro) * Some Material 3 updates to the `ManageSubscriptionsView` (#2072) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `StackComponent` (#2076) via JayShortway (@JayShortway) * Fixes compilation of `IconComponentView`. (#2073) via JayShortway (@JayShortway) * [Paywalls V2] Make `edgeToEdge` top/bottom badge extend to entire stack background (#2070) via Toni Rico (@tonidero) * [Paywalls V2] Parses `UiConfig` (#2068) via JayShortway (@JayShortway) * [Paywalls V2] Add `IconComponent` (#2071) via Toni Rico (@tonidero) * [Paywalls V2] Badge: Handle main stack border width correctly in overlay and nested badge styles (#2069) via Toni Rico (@tonidero) * [Paywalls V2] Add `edgeToEdge` badge trailing/leading style layout (#2054) via Toni Rico (@tonidero) * [Paywalls V2] Adds support for fallback components (#2064) via JayShortway (@JayShortway) --------- Co-authored-by: revenuecat-ops <ops@revenuecat.com> Co-authored-by: Toni Rico <toni.rico.diez@revenuecat.com> Co-authored-by: Toni Rico <antonio.rico.diez@revenuecat.com> Co-authored-by: Cesar de la Vega <cesarvegaro@gmail.com>

JayShortway added 12 commits February 10, 2025 13:52

Actually ignores the font provider for V2.

98cdee3

Handles bottom system bar insets.

0639cd7

Handles bottom system bar insets.

a3a6135

Makes a bunch of ComponentStyles data classes.

49e94b2

Adds extra properties to ImageComponentStyle and StackComponentStyle.

76167b0

Handles top system bar padding.

890adad

Handles bottom system bar padding in the StackComponentStyle.

bed252c

Fixes top window insets not applying properly.

3a5c8d6

A bit of cleanup.

f7648fd

Applies the top window inset to the root if there's no hero image.

a6cb196

Adds tests.

421193d

Merge branch 'main' into pw2-edge-to-edge

b21274c

# Conflicts: # ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/stack/StackComponentView.kt

JayShortway added pr:RevenueCatUI pr:other feat:PaywallV2 labels Feb 11, 2025

JayShortway requested review from a team February 11, 2025 13:25

JayShortway self-assigned this Feb 11, 2025

tonidero approved these changes Feb 11, 2025

View reviewed changes

JayShortway added 2 commits February 11, 2025 17:17

Merge branch 'main' into pw2-edge-to-edge

dca194f

# Conflicts: # ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/OfferingToStateMapper.kt # ui/revenuecatui/src/test/kotlin/com/revenuecat/purchases/ui/revenuecatui/PaywallComponentDataValidationTests.kt

Renames map to recursiveMap.

b715a65

JayShortway enabled auto-merge (squash) February 11, 2025 16:20

JayShortway merged commit 0010d7b into main Feb 11, 2025
10 checks passed

JayShortway deleted the pw2-edge-to-edge branch February 11, 2025 16:53

This was referenced Feb 12, 2025

[AUTOMATIC] Release/8.12.0 #2153

Closed

[AUTOMATIC] Release/8.12.0 #2167

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Paywalls V2] Adds edge-to-edge support #2137

[Paywalls V2] Adds edge-to-edge support #2137

JayShortway commented Feb 11, 2025 •

edited

Loading

codecov bot commented Feb 11, 2025 •

edited

Loading

tonidero left a comment

tonidero Feb 11, 2025

JayShortway Feb 11, 2025

tonidero Feb 11, 2025

JayShortway Feb 11, 2025

[Paywalls V2] Adds edge-to-edge support #2137

[Paywalls V2] Adds edge-to-edge support #2137

Conversation

JayShortway commented Feb 11, 2025 • edited Loading

Description

codecov bot commented Feb 11, 2025 • edited Loading

Codecov Report

tonidero left a comment

Choose a reason for hiding this comment

tonidero Feb 11, 2025

Choose a reason for hiding this comment

JayShortway Feb 11, 2025

Choose a reason for hiding this comment

tonidero Feb 11, 2025

Choose a reason for hiding this comment

JayShortway Feb 11, 2025

Choose a reason for hiding this comment

JayShortway commented Feb 11, 2025 •

edited

Loading

codecov bot commented Feb 11, 2025 •

edited

Loading