PurchaseButtonComponent is now just a container/stack like ButtonComponent

RevenueCatUI/Templates/Components/Button/ButtonComponentView.swift

@@ -35,10 +35,11 @@ struct ButtonComponentView: View {
     }
 
     var body: some View {
-        AsyncButton(
-            action: { try await performAction() },
-            label: { StackComponentView(viewModel: viewModel.stackViewModel, onDismiss: self.onDismiss) }
-        )
+        AsyncButton {
+            try await performAction()
+        } label: {
+            StackComponentView(viewModel: viewModel.stackViewModel, onDismiss: self.onDismiss)
+        }
         #if canImport(SafariServices) && canImport(UIKit)
         .sheet(isPresented: .isNotNil($inAppBrowserURL)) {
             SafariView(url: inAppBrowserURL!)

RevenueCatUI/Templates/Components/Packages/PurchaseButton/PurchaseButtonComponentView.swift

@@ -46,19 +46,8 @@ struct PurchaseButtonComponentView: View {
 
             _ = try await self.purchaseHandler.purchase(package: selectedPackage)
         } label: {
-            // WIP: Need to add logic for intro offer
-            Text(viewModel.cta)
-                .font(viewModel.textStyle)
-                .fontWeight(viewModel.fontWeight)
-                .fixedSize(horizontal: false, vertical: true)
-                .multilineTextAlignment(viewModel.horizontalAlignment)
-                .foregroundStyle(viewModel.color)
-                .padding(viewModel.padding)
-                .background(viewModel.backgroundColor)
-                .shape(viewModel.clipShape)
-                .cornerBorder(border: nil,
-                              radiuses: viewModel.cornerRadiuses)
-                .padding(viewModel.margin)
+            // Not passing an onDismiss - nothing in this stack should be able to dismiss
+            StackComponentView(viewModel: viewModel.stackViewModel, onDismiss: {})
         }
     }
 
@@ -96,22 +85,29 @@ struct PurchaseButtonComponentView_Previews: PreviewProvider {
         PurchaseButtonComponentView(
             // swiftlint:disable:next force_try
             viewModel: try! .init(
+                packageValidator: PackageValidator(),
                 localizedStrings: [
                     "id_1": .string("Hello, world"),
                     "id_2": .string("Hello, world intro offer")
                 ],
                 component: .init(
-                    cta: "id_1",
-                    ctaIntroOffer: "id_2",
-                    fontWeight: .bold,
-                    color: .init(light: "#ffffff"),
-                    backgroundColor: .init(light: "#ff0000"),
-                    padding: .init(top: 10,
-                                   bottom: 10,
-                                   leading: 30,
-                                   trailing: 30),
-                    shape: .pill
-                )
+                    stack: .init(components: [
+                        // WIP: Intro offer state with "id_2",
+                        .text(.init(
+                            text: "id_1",
+                            fontWeight: .bold,
+                            color: .init(light: "#ffffff"),
+                            backgroundColor: .init(light: "#ff0000"),
+                            padding: .init(top: 10,
+                                           bottom: 10,
+                                           leading: 30,
+                                           trailing: 30)
+                        ))
+                    ])
+                ),
+                offering: Offering(identifier: "",
+                                   serverDescription: "",
+                                   availablePackages: [])
             )
         )
         .previewLayout(.sizeThatFits)
@@ -121,26 +117,37 @@ struct PurchaseButtonComponentView_Previews: PreviewProvider {
         PurchaseButtonComponentView(
             // swiftlint:disable:next force_try
             viewModel: try! .init(
+                packageValidator: PackageValidator(),
                 localizedStrings: [
                     "id_1": .string("Hello, world"),
                     "id_2": .string("Hello, world intro offer")
                 ],
                 component: .init(
-                    cta: "id_1",
-                    ctaIntroOffer: "id_2",
-                    fontWeight: .bold,
-                    color: .init(light: "#ffffff"),
-                    backgroundColor: .init(light: "#ff0000"),
-                    padding: .init(top: 10,
-                                   bottom: 10,
-                                   leading: 30,
-                                   trailing: 30),
-                    shape: .rectangle,
-                    cornerRadiuses: .init(topLeading: 8,
-                                          topTrailing: 8,
-                                          bottomLeading: 8,
-                                          bottomTrailing: 8)
-                )
+                    stack: .init(
+                        components: [
+                            // WIP: Intro offer state with "id_2",
+                            .text(.init(
+                                text: "id_1",
+                                fontWeight: .bold,
+                                color: .init(light: "#ffffff")
+                            ))
+                        ],
+                        backgroundColor: .init(light: "#ff0000"),
+                        padding: .init(top: 8,
+                                       bottom: 8,
+                                       leading: 8,
+                                       trailing: 8),
+                        cornerRadiuses: PaywallComponent.CornerRadiuses(
+                            topLeading: 8,
+                            topTrailing: 8,
+                            bottomLeading: 8,
+                            bottomTrailing: 8
+                        )
+                    )
+                ),
+                offering: Offering(identifier: "",
+                                   serverDescription: "",
+                                   availablePackages: [])
             )
         )
         .previewLayout(.sizeThatFits)

RevenueCatUI/Templates/Components/Packages/PurchaseButton/PurchaseButtonComponentViewModel.swift

@@ -23,65 +23,23 @@ class PurchaseButtonComponentViewModel {
     private let localizedStrings: PaywallComponent.LocalizationDictionary
     private let component: PaywallComponent.PurchaseButtonComponent
 
-    let cta: String
-    let ctaIntroOffer: String?
-
-    init(localizedStrings: PaywallComponent.LocalizationDictionary,
-         component: PaywallComponent.PurchaseButtonComponent) throws {
+    let stackViewModel: StackComponentViewModel
+
+    init(
+        packageValidator: PackageValidator,
+        localizedStrings: PaywallComponent.LocalizationDictionary,
+        component: PaywallComponent.PurchaseButtonComponent,
+        offering: Offering
+    ) throws {
         self.localizedStrings = localizedStrings
         self.component = component
 
-        self.cta = try localizedStrings.string(key: component.cta)
-        self.ctaIntroOffer = try component.ctaIntroOffer.flatMap {
-            try localizedStrings.string(key: $0)
-        }
-    }
-
-    var fontFamily: String? {
-        component.fontFamily
-    }
-
-    var fontWeight: Font.Weight {
-        component.fontWeight.fontWeight
-    }
-
-    var color: Color {
-        component.color.toDyanmicColor()
-    }
-
-    var textStyle: Font {
-        component.textStyle.font
-    }
-
-    var horizontalAlignment: TextAlignment {
-        component.horizontalAlignment.textAlignment
-    }
-
-    var backgroundColor: Color {
-        component.backgroundColor?.toDyanmicColor() ?? Color.clear
-    }
-
-    var padding: EdgeInsets {
-        component.padding.edgeInsets
-    }
-
-    var margin: EdgeInsets {
-        component.margin.edgeInsets
-    }
-
-    var clipShape: PaywallComponent.Shape {
-        component.shape
-    }
-
-    var cornerRadiuses: CornerBorderModifier.RaidusInfo? {
-        component.cornerRadiuses.flatMap { cornerRadiuses in
-            CornerBorderModifier.RaidusInfo(
-                topLeft: cornerRadiuses.topLeading,
-                topRight: cornerRadiuses.topTrailing,
-                bottomLeft: cornerRadiuses.bottomLeading,
-                bottomRight: cornerRadiuses.bottomLeading
-            )
-        }
+        self.stackViewModel = try StackComponentViewModel(
+            packageValidator: packageValidator,
+            component: component.stack,
+            localizedStrings: localizedStrings,
+            offering: offering
+        )
     }
 
 }

RevenueCatUI/Templates/Components/PaywallComponentViewModel.swift

@@ -82,14 +82,17 @@ extension PaywallComponent {
             return .package(viewModel)
         case .purchaseButton(let component):
             return .purchaseButton(
-                try PurchaseButtonComponentViewModel(localizedStrings: localizedStrings,
-                                                     component: component)
+                try PurchaseButtonComponentViewModel(packageValidator: packageValidator,
+                                                     localizedStrings: localizedStrings,
+                                                     component: component,
+                                                     offering: offering)
             )
         case .stickyFooter(let component):
             return .stickyFooter(
                 try StickyFooterComponentViewModel(
                     component: component,
                     stackViewModel: StackComponentViewModel(
+                        packageValidator: packageValidator,
                         component: component.stack,
                         localizedStrings: localizedStrings,
                         offering: offering

RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template1Preview.swift

@@ -93,16 +93,19 @@ private enum Template1Preview {
     )
 
     static let purchaseButton = PaywallComponent.PurchaseButtonComponent(
-        cta: "cta",
-        ctaIntroOffer: "cta_intro",
-        fontWeight: .bold,
-        color: .init(light: "#ffffff"),
-        backgroundColor: .init(light: "#e89d89"),
-        padding: .init(top: 10,
-                       bottom: 10,
-                       leading: 30,
-                       trailing: 30),
-        shape: .pill
+        stack: .init(components: [
+            // WIP: Intro offer state with "cta_intro",
+            .text(.init(
+                text: "cta",
+                fontWeight: .bold,
+                color: .init(light: "#ffffff"),
+                backgroundColor: .init(light: "#e89d89"),
+                padding: .init(top: 10,
+                               bottom: 10,
+                               leading: 30,
+                               trailing: 30)
+            ))
+        ])
     )
 
     static let contentStack = PaywallComponent.StackComponent(

RevenueCatUI/Templates/Components/TemplateComponentsViewPreviews/Template5Preview.swift

@@ -146,16 +146,25 @@ private enum Template5Preview {
     )
 
     static let purchaseButton = PaywallComponent.PurchaseButtonComponent(
-        cta: "cta",
-        ctaIntroOffer: "cta_intro",
-        fontWeight: .bold,
-        color: .init(light: "#ffffff"),
-        backgroundColor: .init(light: "#e89d89"),
-        padding: .init(top: 15,
-                       bottom: 15,
-                       leading: 50,
-                       trailing: 50),
-        shape: .pill
+        stack: .init(
+            components: [
+                // WIP: Intro offer state with "cta_intro",
+                .text(.init(
+                    text: "cta",
+                    fontWeight: .bold,
+                    color: .init(light: "#ffffff")
+                ))
+            ],
+            backgroundColor: .init(light: "#e89d89"),
+            padding: .init(top: 15,
+                           bottom: 15,
+                           leading: 50,
+                           trailing: 50),
+            cornerRadiuses: .init(topLeading: 16,
+                                  topTrailing: 16,
+                                  bottomLeading: 16,
+                                  bottomTrailing: 16)
+        )
     )
 
     static let purchaseButtonStack = PaywallComponent.StackComponent(
@@ -199,11 +208,14 @@ private enum Template5Preview {
         templateName: "components",
         assetBaseURL: URL(string: "https://assets.pawwalls.com")!,
         componentsConfigs: .init(
-            base: .init(stack: .init(
-                components: [
-                    .stack(stack)
-                ]
-            ))
+            base: .init(
+                stack: .init(
+                    components: [
+                        .stack(stack)
+                    ]
+                ),
+                stickyFooter: nil
+            )
         ),
         componentsLocalizations: ["en_US": [
             "title": .string("Ignite your cat's curiosity"),

RevenueCatUI/Templates/Components/Text/TextComponentViewModel.swift

@@ -11,7 +11,6 @@
 //
 //  Created by Josh Holtz on 6/11/24.
 
-import Foundation
 import RevenueCat
 import SwiftUI
 
@@ -64,4 +63,5 @@ class TextComponentViewModel {
     }
 
 }
+
 #endif