[Paywalls V2] Add visible property to all components (and overrides to ones that were missing)

RevenueCatUI/Templates/V2/Components/Icon/IconComponentView.swift

@@ -45,20 +45,22 @@ struct IconComponentView: View {
                 package: self.packageContext.package
             )
         ) { style in
-            RemoteImage(
-                url: style.url
-            ) { (image, size) in
-                self.renderImage(image, size, with: style)
+            if style.visible {
+                RemoteImage(
+                    url: style.url
+                ) { (image, size) in
+                    self.renderImage(image, size, with: style)
+                }
+                .padding(style.padding)
+                .shape(border: style.iconBackgroundBorder,
+                       shape: style.iconBackgroundShape,
+                       background: style.iconBackgroundStyle,
+                       uiConfigProvider: self.viewModel.uiConfigProvider)
+                .shadow(shadow: style.iconBackgroundShadow,
+                        shape: style.iconBackgroundShape?.toInsettableShape())
+                .padding(style.margin)
+                .size(style.size)
             }
-            .padding(style.padding)
-            .shape(border: style.iconBackgroundBorder,
-                   shape: style.iconBackgroundShape,
-                   background: style.iconBackgroundStyle,
-                   uiConfigProvider: self.viewModel.uiConfigProvider)
-            .shadow(shadow: style.iconBackgroundShadow,
-                    shape: style.iconBackgroundShape?.toInsettableShape())
-            .padding(style.margin)
-            .size(style.size)
         }
     }
 

RevenueCatUI/Templates/V2/Components/Icon/IconComponentViewModel.swift

@@ -45,7 +45,7 @@ class IconComponentViewModel {
         state: ComponentViewState,
         condition: ScreenCondition,
         isEligibleForIntroOffer: Bool,
-        apply: @escaping (IconComponentStyle) -> some View
+        @ViewBuilder apply: @escaping (IconComponentStyle) -> some View
     ) -> some View {
         let partial = PresentedIconPartial.buildPartial(
             state: state,
@@ -55,7 +55,7 @@ class IconComponentViewModel {
         )
 
         let style = IconComponentStyle(
-            visible: partial?.visible ?? true,
+            visible: partial?.visible ?? self.component.visible ?? true,
             baseUrl: partial?.baseUrl ?? self.component.baseUrl,
             formats: partial?.formats ?? self.component.formats,
             size: partial?.size ?? self.component.size,
@@ -169,30 +169,4 @@ private extension PaywallComponent.IconBackgroundShape {
 
 }
 
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Border {
-
-    func border(uiConfigProvider: UIConfigProvider) -> ShapeModifier.BorderInfo? {
-        return ShapeModifier.BorderInfo(
-            color: self.color.asDisplayable(uiConfigProvider: uiConfigProvider).toDynamicColor(),
-            width: self.width
-        )
-    }
-
-}
-
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Shadow {
-
-    func shadow(uiConfigProvider: UIConfigProvider) -> ShadowModifier.ShadowInfo? {
-        return ShadowModifier.ShadowInfo(
-            color: self.color.asDisplayable(uiConfigProvider: uiConfigProvider).toDynamicColor(),
-            radius: self.radius,
-            x: self.x,
-            y: self.y
-        )
-    }
-
-}
-
 #endif

RevenueCatUI/Templates/V2/Components/Image/ImageComponentView.swift

@@ -45,21 +45,23 @@ struct ImageComponentView: View {
                 package: self.packageContext.package
             )
         ) { style in
-            RemoteImage(
-                url: style.url,
-                lowResUrl: style.lowResUrl,
-                darkUrl: style.darkUrl,
-                darkLowResUrl: style.darkLowResUrl
-            ) { (image, size) in
-                self.renderImage(image, size, with: style)
+            if style.visible {
+                RemoteImage(
+                    url: style.url,
+                    lowResUrl: style.lowResUrl,
+                    darkUrl: style.darkUrl,
+                    darkLowResUrl: style.darkLowResUrl
+                ) { (image, size) in
+                    self.renderImage(image, size, with: style)
+                }
+                .size(style.size)
+                .clipped()
+                .shape(border: nil,
+                       shape: style.shape)
+                .padding(style.padding)
+                // WIP: Add border still
+                .padding(style.margin)
             }
-            .size(style.size)
-            .clipped()
-            .shape(border: nil,
-                   shape: style.shape)
-            .padding(style.padding)
-            // WIP: Add border still
-            .padding(style.margin)
         }
     }
 

RevenueCatUI/Templates/V2/Components/Image/ImageComponentViewModel.swift

@@ -52,7 +52,7 @@ class ImageComponentViewModel {
         state: ComponentViewState,
         condition: ScreenCondition,
         isEligibleForIntroOffer: Bool,
-        apply: @escaping (ImageComponentStyle) -> some View
+        @ViewBuilder apply: @escaping (ImageComponentStyle) -> some View
     ) -> some View {
         let localizedPartial = LocalizedImagePartial.buildPartial(
             state: state,
@@ -63,7 +63,7 @@ class ImageComponentViewModel {
         let partial = localizedPartial?.partial
 
         let style = ImageComponentStyle(
-            visible: partial?.visible ?? true,
+            visible: partial?.visible ?? self.component.visible ?? true,
             source: localizedPartial?.imageInfo ?? self.imageInfo,
             size: partial?.size ?? self.component.size,
             fitMode: partial?.fitMode ?? self.component.fitMode,

RevenueCatUI/Templates/V2/Components/Stack/StackComponentView.swift

@@ -57,7 +57,9 @@ struct StackComponentView: View {
                 package: self.packageContext.package
             )
         ) { style in
-            self.make(style: style)
+            if style.visible {
+                self.make(style: style)
+            }
         }
     }
 

RevenueCatUI/Templates/V2/Components/Stack/StackComponentViewModel.swift

@@ -50,7 +50,7 @@ class StackComponentViewModel {
         state: ComponentViewState,
         condition: ScreenCondition,
         isEligibleForIntroOffer: Bool,
-        apply: @escaping (StackComponentStyle) -> some View
+        @ViewBuilder apply: @escaping (StackComponentStyle) -> some View
     ) -> some View {
         let partial = PresentedStackPartial.buildPartial(
             state: state,
@@ -62,7 +62,7 @@ class StackComponentViewModel {
         let style = StackComponentStyle(
             uiConfigProvider: self.uiConfigProvider,
             badgeViewModels: self.badgeViewModels,
-            visible: partial?.visible ?? true,
+            visible: partial?.visible ?? self.component.visible ?? true,
             dimension: partial?.dimension ?? self.component.dimension,
             size: partial?.size ?? self.component.size,
             spacing: partial?.spacing ?? self.component.spacing,
@@ -92,6 +92,7 @@ extension PresentedStackPartial: PresentedPartial {
         let dimension = other?.dimension ?? base?.dimension
         let size = other?.size ?? base?.size
         let spacing = other?.spacing ?? base?.spacing
+        let background = other?.background ?? base?.background
         let backgroundColor = other?.backgroundColor ?? base?.backgroundColor
         let padding = other?.padding ?? base?.padding
         let margin = other?.margin ?? base?.margin
@@ -105,6 +106,7 @@ extension PresentedStackPartial: PresentedPartial {
             size: size,
             spacing: spacing,
             backgroundColor: backgroundColor,
+            background: background,
             padding: padding,
             margin: margin,
             shape: shape,
@@ -197,72 +199,4 @@ struct StackComponentStyle {
 
 }
 
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Shape {
-
-    var shape: ShapeModifier.Shape {
-        switch self {
-        case .rectangle(let cornerRadiuses):
-            let corners = cornerRadiuses.flatMap { cornerRadiuses in
-                ShapeModifier.RadiusInfo(
-                    topLeft: cornerRadiuses.topLeading ?? 0,
-                    topRight: cornerRadiuses.topTrailing ?? 0,
-                    bottomLeft: cornerRadiuses.bottomLeading ?? 0,
-                    bottomRight: cornerRadiuses.bottomTrailing ?? 0
-                )
-            }
-            return .rectangle(corners)
-        case .pill:
-            return .pill
-        }
-    }
-
-}
-
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Border {
-
-    func border(uiConfigProvider: UIConfigProvider) -> ShapeModifier.BorderInfo? {
-        return ShapeModifier.BorderInfo(
-            color: self.color.asDisplayable(uiConfigProvider: uiConfigProvider).toDynamicColor(),
-            width: self.width
-        )
-    }
-
-}
-
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Shadow {
-
-    func shadow(uiConfigProvider: UIConfigProvider) -> ShadowModifier.ShadowInfo? {
-        return ShadowModifier.ShadowInfo(
-            color: self.color.asDisplayable(uiConfigProvider: uiConfigProvider).toDynamicColor(),
-            radius: self.radius,
-            x: self.x,
-            y: self.y
-        )
-    }
-
-}
-
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
-private extension PaywallComponent.Badge {
-
-    func badge(stackShape: ShapeModifier.Shape?,
-               stackBorder: ShapeModifier.BorderInfo?,
-               badgeViewModels: [PaywallComponentViewModel],
-               uiConfigProvider: UIConfigProvider) -> BadgeModifier.BadgeInfo? {
-        BadgeModifier.BadgeInfo(
-            style: self.style,
-            alignment: self.alignment,
-            stack: self.stack,
-            badgeViewModels: badgeViewModels,
-            stackShape: stackShape,
-            stackBorder: stackBorder,
-            uiConfigProvider: uiConfigProvider
-        )
-    }
-
-}
-
 #endif

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

@@ -112,18 +112,28 @@ struct LoadedTabsComponentView: View {
     }
 
     var body: some View {
-        LoadedTabComponentView(
-            stackViewModel: self.activeTabViewModel.stackViewModel,
-            onChange: { context in
-                self.packageContext.update(
-                    package: context.package,
-                    variableContext: context.variableContext
+        self.viewModel.styles(
+            state: self.componentViewState,
+            condition: self.screenCondition,
+            isEligibleForIntroOffer: self.introOfferEligibilityContext.isEligible(
+                package: self.packageContext.package
+            )
+        ) { style in
+            if style.visible {
+                LoadedTabComponentView(
+                    stackViewModel: self.activeTabViewModel.stackViewModel,
+                    onChange: { context in
+                        self.packageContext.update(
+                            package: context.package,
+                            variableContext: context.variableContext
+                        )
+                    },
+                    onDismiss: self.onDismiss
                 )
-            },
-            onDismiss: self.onDismiss
-        )
-        .environmentObject(self.tabControlContext)
-        .environmentObject(self.tierPackageContexts[self.tabControlContext.selectedIndex])
+                .environmentObject(self.tabControlContext)
+                .environmentObject(self.tierPackageContexts[self.tabControlContext.selectedIndex])
+            }
+        }
     }
 
 }