[Paywalls V2] Add `Badge`'s `nested` style layout #2041

tonidero · 2025-01-09T17:31:43Z

Description

Followup to #2009 and #2039.

This adds support for nested style badges.

As discussed over Slack, the nested badges won't move the content of the stack, and just be placed on top.

tonidero

I will really like to test this again once the option is in the dashboard. For now, on the previews, this seems to be working.

tonidero · 2025-01-09T17:32:57Z

...uecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/ktx/Alignment.kt

@@ -73,3 +73,31 @@ internal fun TwoDimensionalAlignment.toHorizontalAlignmentOrNull(): Alignment.Ho
        TwoDimensionalAlignment.BOTTOM_LEADING -> Alignment.Start
        TwoDimensionalAlignment.BOTTOM_TRAILING -> Alignment.End
    }
+
+@JvmSynthetic
+internal fun TwoDimensionalAlignment.toVerticalAlignment(): Alignment.Vertical =


This is very similar to toVerticalAlignmentOrNull but I needed one that assumed a vertical alignment for the "center" types. Same for the horizontal version.

tonidero · 2025-01-09T17:33:57Z

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

-            -> cornerRadiuses.copy(topLeading = 0.0, topTrailing = 0.0)
+        val filteredCornerRadiuses = when (alignment.toVerticalAlignment()) {
+            Alignment.Top -> cornerRadiuses.copy(bottomLeading = 0.0, bottomTrailing = 0.0)
+            Alignment.Bottom -> cornerRadiuses.copy(topLeading = 0.0, topTrailing = 0.0)


These are just some cleanup from just using the respective alignment type.

emerge-tools · 2025-01-09T17:44:50Z

📸 Snapshot Test

6 added, 167 unchanged

Name	Added	Removed	Modified	Renamed	Unchanged	Errored	Approval
TestPurchasesUIAndroidCompatibility com.revenuecat.testpurchasesuiandroidcompatibility	6	0	0	0	167	5	✅ Approved

🛸 Powered by Emerge Tools

codecov · 2025-01-10T10:38:25Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.51%. Comparing base (ddffe82) to head (30b25e5).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2041   +/-   ##
=======================================
  Coverage   81.51%   81.51%           
=======================================
  Files         265      265           
  Lines        8652     8652           
  Branches     1229     1229           
=======================================
  Hits         7053     7053           
  Misses       1098     1098           
  Partials      501      501

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

JayShortway

Very nice! Just 1 comment on structure.

JayShortway · 2025-01-14T13:40:55Z

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

+        Box(modifier = modifier.then(commonModifier)) {
+            stack(Modifier)
+            StackComponentView(
+                nestedBadge.stackStyle,
+                state,
+                {},
+                modifier = Modifier
+                    .align(nestedBadge.alignment.toAlignment()),
+            )
+        }


Could we move this to the StackComponentView at the top, inside the when checking the Badge.Style?

Badge.Style.Nested -> { Box(modifier = modifier) { MainStackComponent(stackState, state, clickHandler, modifier) StackComponentView( badge.stackStyle, state, {}, modifier = Modifier .align(badge.alignment.toAlignment()), ) } }

That way we don't need to add a nestedBadge parameter to the MainStackComponent. That parameter is slightly confusing imo, as it doesn't follow the implementation pattern of the other badges.

Right the main reason for doing it this way is that we have to apply the commonModifier to the parent Box, not the MainStackComponent in this scenario... I agree it's a bit confusing... I'm trying to think of alternatives

Wdyt of this approach @JayShortway ?

Thanks for explaining!

I think I prefer the nestedBadge parameter approach then. 😳 Having 2 modifier parameters is more confusing imo. Sorry for the back and forth! 🙏

Np! I was also back and forth on this 😅 Will revert that 👍

JayShortway · 2025-01-14T13:57:57Z

Seems that the stack's border is drawn on top of the badge, which is different from leading/trailing edge-to-edge badges. Is that intentional? Just wanted to double check.

tonidero · 2025-01-14T14:01:52Z

Seems that the stack's border is drawn on top of the badge, which is different from leading/trailing edge-to-edge badges. Is that intentional?

Yeah, with nested, it should be "inside" the stack itself, vs the edge-to-edge style which is considered "outside" the badge. If the backend gives us any margin, it would be added within the main stack.

This reverts commit c24ba2b.

@vegaro

**This is an automatic release.** ## RevenueCat SDK ### ✨ New Features * Add `subscriptionsByProductIdentifier` to `CustomerInfo` (#2052) via Cesar de la Vega (@vegaro) ### 🐞 Bugfixes * Fix `OwnershipType` enum serialization (#2061) via Cesar de la Vega (@vegaro) ## RevenueCatUI SDK ### 🐞 Bugfixes * Allow repurchasing custom packages (#2044) via Toni Rico (@tonidero) ### 🔄 Other Changes * [Paywalls V2] Do not attempt to purchase if currently subscribed (#2062) via JayShortway (@JayShortway) * [Trusted Entitlements] Enable `Trusted Entitlements` by default (#2050) via Toni Rico (@tonidero) * [Trusted Entitlements] Do not clear CustomerInfo upon enabling Trusted Entitlements (#2049) via Toni Rico (@tonidero) * [Paywalls V2] Removes `MaskShape.Pill` in favor of `MaskShape.Circle`. (#2063) via JayShortway (@JayShortway) * [Paywalls V2] Font sizes are integers now. (#2059) via JayShortway (@JayShortway) * [Paywalls V2] Handles intro offer eligibility overrides (#2058) via JayShortway (@JayShortway) * [Paywalls V2] Implements `Convex` and `Concave` image masks (#2055) via JayShortway (@JayShortway) * [Paywalls V2] Add new `ImageComponent` properties (#2056) via Toni Rico (@tonidero) * [Paywalls V2] Add `Badge`'s `nested` style layout (#2041) via Toni Rico (@tonidero) * [Paywalls V2] Add `Badge`'s `edgeToEdge` `Top`/`Bottom` alignment style layout (#2039) via Toni Rico (@tonidero) * [Paywalls V2] Various `PaywallViewModel` fixes and tests (#2051) via JayShortway (@JayShortway) * [Paywalls V2] Fixes minimum spacing when distribution is `SPACE_BETWEEN`, `SPACE_AROUND` or `SPACE_EVENLY` (#2053) via JayShortway (@JayShortway) * [Paywalls V2] Correctly determines when to show or hide decimals for prices (#2048) via JayShortway (@JayShortway) * [Paywalls V2] `TextComponentView` uses the correct `Package` for variable values (#2042) via JayShortway (@JayShortway) * [Paywalls V2] Adds Custom Tabs to support in-app browser URL destinations (#2035) via JayShortway (@JayShortway) * Update `agp` to 8.8.0 (#2045) via Toni Rico (@tonidero) * [Paywalls V2] Add `Badge`'s `overlay` style layout (#2009) via Toni Rico (@tonidero) * [Paywalls V2] Implements all button actions (#2034) via JayShortway (@JayShortway) * Convert error message property into computed property (#2038) via Toni Rico (@tonidero) Co-authored-by: revenuecat-ops <ops@revenuecat.com>

tonidero added pr:RevenueCatUI pr:other feat:PaywallV2 labels Jan 9, 2025

tonidero commented Jan 9, 2025

View reviewed changes

tonidero force-pushed the add-badge-layout-2 branch from 8d7f0cf to a9bc463 Compare January 10, 2025 10:11

tonidero force-pushed the add-badge-layout-3 branch from 030f0e7 to ac24767 Compare January 10, 2025 10:12

tonidero force-pushed the add-badge-layout-3 branch from ac24767 to 78493cd Compare January 14, 2025 11:40

tonidero marked this pull request as ready for review January 14, 2025 12:30

tonidero requested review from JayShortway and a team January 14, 2025 12:30

tonidero force-pushed the add-badge-layout-3 branch from 78493cd to 4d91ce9 Compare January 14, 2025 12:43

JayShortway approved these changes Jan 14, 2025

View reviewed changes

Base automatically changed from add-badge-layout-2 to main January 14, 2025 14:56

tonidero added 2 commits January 14, 2025 15:57

[Paywalls V2] Add Badge's nested style layout

2898e8b

Refactor

c24ba2b

tonidero force-pushed the add-badge-layout-3 branch from 1409d50 to c24ba2b Compare January 14, 2025 14:58

Revert "Refactor"

30b25e5

This reverts commit c24ba2b.

tonidero enabled auto-merge (squash) January 15, 2025 09:27

JayShortway approved these changes Jan 15, 2025

View reviewed changes

tonidero merged commit d3766ec into main Jan 15, 2025
10 checks passed

tonidero deleted the add-badge-layout-3 branch January 15, 2025 09:40

This was referenced Jan 15, 2025

[AUTOMATIC] Release/8.11.0 #2060

Closed

[AUTOMATIC] Release/8.11.0 #2065

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Paywalls V2] Add `Badge`'s `nested` style layout #2041

[Paywalls V2] Add `Badge`'s `nested` style layout #2041

tonidero commented Jan 9, 2025 •

edited

Loading

tonidero left a comment

tonidero Jan 9, 2025

tonidero Jan 9, 2025

emerge-tools bot commented Jan 9, 2025 •

edited

Loading

codecov bot commented Jan 10, 2025 •

edited

Loading

JayShortway left a comment

JayShortway Jan 14, 2025

tonidero Jan 14, 2025

tonidero Jan 14, 2025 •

edited

Loading

JayShortway Jan 15, 2025

tonidero Jan 15, 2025

JayShortway commented Jan 14, 2025

tonidero commented Jan 14, 2025

[Paywalls V2] Add Badge's nested style layout #2041

[Paywalls V2] Add Badge's nested style layout #2041

Conversation

tonidero commented Jan 9, 2025 • edited Loading

Description

tonidero left a comment

Choose a reason for hiding this comment

tonidero Jan 9, 2025

Choose a reason for hiding this comment

tonidero Jan 9, 2025

Choose a reason for hiding this comment

emerge-tools bot commented Jan 9, 2025 • edited Loading

📸 Snapshot Test

6 added, 167 unchanged

codecov bot commented Jan 10, 2025 • edited Loading

Codecov Report

JayShortway left a comment

Choose a reason for hiding this comment

JayShortway Jan 14, 2025

Choose a reason for hiding this comment

tonidero Jan 14, 2025

Choose a reason for hiding this comment

tonidero Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

JayShortway Jan 15, 2025

Choose a reason for hiding this comment

tonidero Jan 15, 2025

Choose a reason for hiding this comment

JayShortway commented Jan 14, 2025

tonidero commented Jan 14, 2025

[Paywalls V2] Add `Badge`'s `nested` style layout #2041

[Paywalls V2] Add `Badge`'s `nested` style layout #2041

tonidero commented Jan 9, 2025 •

edited

Loading

emerge-tools bot commented Jan 9, 2025 •

edited

Loading

codecov bot commented Jan 10, 2025 •

edited

Loading

tonidero Jan 14, 2025 •

edited

Loading