[Paywalls] Tabs (multi-tier / toggle) component by joshdholtz · Pull Request #4648 · RevenueCat/purchases-ios

joshdholtz · 2025-01-11T16:48:57Z

Motivation

Allow a multi-tier paywall with tabs and toggle

Description

4 new components
- tabs
- tabs_control
- tabs_control_button
- tabs_control_toggle
ViewModelFactory
- Creates a new PackageCollector when digging the tabs stack
- Collects all the packages and then passes them into the TabViewModel
- Merges the found packages back into the rest of the factory so the paywall knows about all the packages

`TabsComponent`

{
    "type": "tabs",
    "control": {
        "type": "buttons", // or "toggle"
        "stack": {
            "components": [
                {
                    "type": "tab_control_button" ,
                    "stack": { /* standard stack */ }
                },
                {
                    "type": "tab_control_button" ,
                    "stack": { /* standard stack */ }
                }
            ]
        },
    },
    "tabs": [
        {
            "type": "tab",
            "stack": {
                "type": "stack",
                "components": [
                    // This is all that is needed for `tab_control`
                    // The `control` property from above gets injected here in the view
                    { "type": "tab_control" },

                    { "type": "text", /* other props */ },
                    { "type": "text", /* other props */ },
                    { "type": "package" , /* other props */},
                    { "type": "package", /* other props */ }
                ]
            }
        },
        { /* another tab */ }
    ]
}

`TabControlComponent`

{
    "type": "tab_control"
}

`TabControlButtonComponent`

{
    "type": "tab_control_button" ,
    "stack": { /* standard stack */ }
}

`TabControlToggleComponent`

{
    "type": "tab_control_toggle" ,
    "default_value": false,
    "thumb_color_on": { /* color */ },
    "thumb_color_off": { /* color */ },
    "track_color_on": { /* color */ },
    "track_color_off": { /* color */ }
}

emerge-tools · 2025-01-11T16:56:18Z

1 build increased size

Name	Version	Download	Change	Install	Change	Approval
⚠️ Paywalls com.revenuecat.PaywallsTester	1.0 (1)	11.5 MB	⬆️ 352.7 kB (3.18%)	42.5 MB	⬆️ 1.2 MB (2.85%)	N/A

Paywalls 1.0 (1)
com.revenuecat.PaywallsTester

⚖️ Compare build
📦 Install build
⏱️ Analyze build performance

Total install size change: ⬆️ 1.2 MB (2.85%)
Total download size change: ⬆️ 352.7 kB (3.18%)

Largest size changes

Item	Install Size Change
DYLD.String Table	⬆️ 176.1 kB
📝 RevenueCatUI.TabsComponentViewModel.TabsComponentViewModel	⬆️ 33.8 kB
Code Signature	⬆️ 29.3 kB
📝 RevenueCatUI.TabViewModel.TabViewModel	⬆️ 25.7 kB
RevenueCatUI.StickyFooterComponentViewModel.StickyFooterComponent...	⬇️ -15.9 kB

View Treemap

🛸 Powered by Emerge Tools

Comment trigger: Size diff threshold of 100.00kB exceeded

joshdholtz · 2025-01-13T11:13:38Z

+        LoadedTabsComponentView(
+            viewModel: self.viewModel,
+            parentPackageContext: self.packageContext,
+            onDismiss: self.onDismiss
+        )


Environment variables cannot be referenced in initializers so... I created LoadedTabsComponentView so that it would be passed self.packageContext since we need a the list of packages for creating a context for each tab/tier

joshdholtz · 2025-01-13T11:14:22Z

+            onChange: { context in
+                self.packageContext.update(
+                    package: context.package,
+                    variableContext: context.variableContext
+                )
+            },


Each tab will call back to the entire tabs when one of its package contexts is updated (so that the whole paywall knows which new package was selected)

joshdholtz · 2025-01-13T11:15:56Z

+    @State
+    private var tierPackageContexts: [PackageContext]


Keeps a separate PackageContext stored for each tab

joshdholtz · 2025-01-13T11:17:27Z

+    @StateObject
+    private var tabControlContext: TabControlContext


This stores the shared state of the tab control (buttons of toggle)

Each tab will use this when it comes across the TabControlComponent in its stack so it knows what to render and what the active tab state is

Does this happen recursively? What if the TabControlComponent is not a direct child of TabComponent?

Great question! The TabControlComponent could be in stack of stack of stack of stack and it will still find it since .environmentObjects get passed to the whole stack. So it it just needs to be within the tab somewhere

But the other way around... we will need to validate (on the backend) that TabControlComponent is always within a TabComponent somewhere (can't be outside) 😅

Thanks! Happy that that's supported! 😄

JayShortway

Very awesome! Just some questions basically.

JayShortway · 2025-01-13T12:33:30Z

+    @StateObject
+    private var tabControlContext: TabControlContext


Does this happen recursively? What if the TabControlComponent is not a direct child of TabComponent?

joshdholtz added pr:RevenueCatUI pr:other feat:PaywallV2 labels Jan 11, 2025

joshdholtz changed the base branch from main to paywalls-v2/fix-stack-infinity January 11, 2025 16:49

joshdholtz commented Jan 13, 2025

View reviewed changes

joshdholtz requested review from a team January 13, 2025 11:17

joshdholtz marked this pull request as ready for review January 13, 2025 11:18

Base automatically changed from paywalls-v2/fix-stack-infinity to main January 13, 2025 11:33

joshdholtz force-pushed the paywalls-v2/multi-tier branch 2 times, most recently from ec9c328 to d5bb741 Compare January 13, 2025 12:33

JayShortway approved these changes Jan 13, 2025

View reviewed changes

joshdholtz force-pushed the paywalls-v2/multi-tier branch 3 times, most recently from 9dd6452 to f889fc8 Compare January 13, 2025 22:27

joshdholtz added 11 commits January 13, 2025 19:54

Initial commit is working

5c0b683

Things are working quite nicely

b53b725

This is the new way and i like it

26bd7c9

This is feeling much better

aa4d6e1

Tests yo

e057529

This is it

7390ab9

Fixed some rebase things

a0d5b30

Fixed price to a percentage off actually shows

470c31a

More fixes from rebase

24605d7

Fixes after rebase

d81eed3

Rerun emerge stuff

000e34d

joshdholtz force-pushed the paywalls-v2/multi-tier branch from 38b2d1e to 000e34d Compare January 14, 2025 01:55

joshdholtz merged commit 6687bea into main Jan 14, 2025

joshdholtz deleted the paywalls-v2/multi-tier branch January 14, 2025 02:11

This was referenced Jan 15, 2025

[AUTOMATIC] Release/5.15.0 #4673

Closed

[AUTOMATIC] Release/5.15.0 #4676

Closed

[AUTOMATIC] Release/5.15.0 #4689

Closed

[AUTOMATIC] Release/5.15.0 #4692

Merged

This was referenced Jan 30, 2025

[Paywalls V2] Adds deserialization of TabsComponent RevenueCat/purchases-android#2101

Merged

[Paywalls V2] Adds TabsComponentStyle RevenueCat/purchases-android#2113

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Paywalls] Tabs (multi-tier / toggle) component#4648

[Paywalls] Tabs (multi-tier / toggle) component#4648
joshdholtz merged 11 commits into
mainfrom
paywalls-v2/multi-tier

joshdholtz commented Jan 11, 2025 •

edited

Loading

Uh oh!

emerge-tools Bot commented Jan 11, 2025 •

edited

Loading

Uh oh!

joshdholtz Jan 13, 2025

Uh oh!

joshdholtz Jan 13, 2025

Uh oh!

joshdholtz Jan 13, 2025

Uh oh!

joshdholtz Jan 13, 2025

Uh oh!

JayShortway Jan 13, 2025

Uh oh!

joshdholtz Jan 13, 2025

Uh oh!

JayShortway Jan 14, 2025

Uh oh!

JayShortway left a comment

Uh oh!

Uh oh!

JayShortway Jan 13, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@StateObject
		private var tabControlContext: TabControlContext

Uh oh!

Conversation

joshdholtz commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Description

TabsComponent

TabControlComponent

TabControlButtonComponent

TabControlToggleComponent

Uh oh!

emerge-tools Bot commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1 build increased size

Paywalls 1.0 (1)com.revenuecat.PaywallsTester

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JayShortway left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

joshdholtz commented Jan 11, 2025 •

edited

Loading

`TabsComponent`

`TabControlComponent`

`TabControlButtonComponent`

`TabControlToggleComponent`

emerge-tools Bot commented Jan 11, 2025 •

edited

Loading

Paywalls 1.0 (1)
com.revenuecat.PaywallsTester