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

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.3 MB	⬆️ 342.1 kB (3.11%)	42.0 MB	⬆️ 1.1 MB (2.76%)	N/A

Paywalls 1.0 (1)
com.revenuecat.PaywallsTester

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

Total install size change: ⬆️ 1.1 MB (2.76%)
Total download size change: ⬆️ 342.1 kB (3.11%)

Largest size changes

Item	Install Size Change
DYLD.String Table	⬆️ 146.1 kB
📝 RevenueCatUI.TabsComponentViewModel.TabsComponentViewModel	⬆️ 33.5 kB
Code Signature	⬆️ 28.1 kB
📝 RevenueCatUI.TabViewModel.TabViewModel	⬆️ 24.8 kB
RevenueCatUI.StickyFooterComponentViewModel.StickyFooterComponent...	⬇️ -15.4 kB

View Treemap

🛸 Powered by Emerge Tools

Comment trigger: Size diff threshold of 100.00kB exceeded

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

RevenueCatUI/Templates/V2/Components/Tabs/TabsComponentView.swift

+        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

RevenueCatUI/Templates/V2/Components/Tabs/TabsComponentView.swift

+            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

RevenueCatUI/Templates/V2/Components/Tabs/TabsComponentView.swift

+    @State
+    private var tierPackageContexts: [PackageContext]


Keeps a separate PackageContext stored for each tab

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

RevenueCatUI/Templates/V2/Components/Tabs/TabsComponentView.swift

+    @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) 😅

JayShortway

Very awesome! Just some questions basically.

RevenueCatUI/Templates/V2/Components/Tabs/TabControlToggleComponentView.swift

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

RevenueCatUI/Templates/V2/Components/Tabs/TabsComponentView.swift

+    @StateObject
+    private var tabControlContext: TabControlContext


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

Sources/Paywalls/Components/PaywallTabsComponent.swift

RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template5Preview.swift

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 added 9 commits January 13, 2025 07:40

Initial commit is working

12a219d

Things are working quite nicely

8163b05

This is the new way and i like it

7dbb8a0

This is feeling much better

fa0bba4

Tests yo

fa5b877

This is it

eda0881

Fixed some rebase things

a7fe77a

Fixed price to a percentage off actually shows

d5f2c64

More fixes from rebase

2a109b7

joshdholtz force-pushed the paywalls-v2/multi-tier branch from c0225db to 2a109b7 Compare January 13, 2025 13:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

joshdholtz commented Jan 11, 2025 •

edited

Loading

emerge-tools bot commented Jan 11, 2025 •

edited

Loading

joshdholtz Jan 13, 2025

joshdholtz Jan 13, 2025

joshdholtz Jan 13, 2025

joshdholtz Jan 13, 2025

JayShortway Jan 13, 2025

joshdholtz Jan 13, 2025

JayShortway left a comment

JayShortway Jan 13, 2025

		@StateObject
		private var tabControlContext: TabControlContext

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

Are you sure you want to change the base?

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

Conversation

joshdholtz commented Jan 11, 2025 • edited Loading

Motivation

Description

TabsComponent

TabControlComponent

TabControlButtonComponent

TabControlToggleComponent

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

1 build increased size

Paywalls 1.0 (1)com.revenuecat.PaywallsTester

joshdholtz Jan 13, 2025

Choose a reason for hiding this comment

joshdholtz Jan 13, 2025

Choose a reason for hiding this comment

joshdholtz Jan 13, 2025

Choose a reason for hiding this comment

joshdholtz Jan 13, 2025

Choose a reason for hiding this comment

JayShortway Jan 13, 2025

Choose a reason for hiding this comment

joshdholtz Jan 13, 2025

Choose a reason for hiding this comment

JayShortway left a comment

Choose a reason for hiding this comment

JayShortway Jan 13, 2025

Choose a reason for hiding this comment

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