Update outdated image properties

RevenueCat · Jan 13, 2025 · 162df23 · 162df23
1 parent b3e2f26
commit 162df23
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 29 deletions.
diff --git a/RevenueCatUI/Templates/V2/Components/Image/ImageComponentView.swift b/RevenueCatUI/Templates/V2/Components/Image/ImageComponentView.swift
@@ -85,13 +85,15 @@ struct ImageComponentView: View {
             // WIP: Fix this later when accessibility info is available
             .accessibilityHidden(true)
             // WIP: Need to replace this gradient with the better one
-            .overlay(
-                LinearGradient(
-                    gradient: Gradient(colors: style.gradientColors),
-                    startPoint: .top,
-                    endPoint: .bottom
+            .applyIfLet(style.colorOverlay, apply: { view, colorOverlay in
+                view.overlay(
+                    Color.clear
+                        .backgroundStyle(
+                            .color(colorOverlay),
+                            uiConfigProvider: viewModel.uiConfigProvider
+                        )
                 )
-            )
+            })
             // WIP: this needs more shapes and borders
             // WIP: this might also need dropshadow
             .shape(border: nil,
@@ -187,9 +189,10 @@ struct ImageComponentView_Previews: PreviewProvider {
                             )
                         ),
                         fitMode: .fill,
-                        gradientColors: [
-                            "#ffffff00", "#ffffff00", "#ffffffff"
-                        ]
+                        colorOverlay: .init(light: .linear(0, [
+                            .init(color: "#ffffff", percent: 0),
+                            .init(color: "#ffffff00", percent: 40)
+                        ]))
                     )
                 )
             )

diff --git a/RevenueCatUI/Templates/V2/Components/Image/ImageComponentViewModel.swift b/RevenueCatUI/Templates/V2/Components/Image/ImageComponentViewModel.swift
@@ -24,7 +24,7 @@ class ImageComponentViewModel {
     private var introOfferEligibilityContext: IntroOfferEligibilityContext
 
     private let localizationProvider: LocalizationProvider
-    private let uiConfigProvider: UIConfigProvider
+    let uiConfigProvider: UIConfigProvider
     private let component: PaywallComponent.ImageComponent
 
     private let imageInfo: PaywallComponent.ThemeImageUrls
@@ -71,7 +71,11 @@ class ImageComponentViewModel {
             size: partial?.size ?? self.component.size,
             fitMode: partial?.fitMode ?? self.component.fitMode,
             maskShape: partial?.maskShape ?? self.component.maskShape,
-            gradientColors: partial?.gradientColors ?? self.component.gradientColors
+            colorOverlay: partial?.colorOverlay ?? self.component.colorOverlay,
+            padding: partial?.padding ?? self.component.padding,
+            margin: partial?.margin ?? self.component.margin,
+            border: partial?.border ?? self.component.border,
+            shadow: partial?.shadow ?? self.component.shadow
         )
 
         apply(style)
@@ -97,7 +101,11 @@ struct LocalizedImagePartial: PresentedPartial {
                 overrideSourceLid: otherPartial?.overrideSourceLid ?? basePartial?.overrideSourceLid,
                 fitMode: otherPartial?.fitMode ?? basePartial?.fitMode,
                 maskShape: otherPartial?.maskShape ?? basePartial?.maskShape,
-                gradientColors: otherPartial?.gradientColors ?? basePartial?.gradientColors
+                colorOverlay: otherPartial?.colorOverlay ?? basePartial?.colorOverlay,
+                padding: otherPartial?.padding ?? basePartial?.padding,
+                margin: otherPartial?.margin ?? basePartial?.margin,
+                border: otherPartial?.border ?? basePartial?.border,
+                shadow: otherPartial?.shadow ?? basePartial?.shadow
             )
         )
     }
@@ -134,7 +142,11 @@ struct ImageComponentStyle {
     let darkLowResUrl: URL?
     let size: PaywallComponent.Size
     let shape: ShapeModifier.Shape?
-    let gradientColors: [Color]
+    let colorOverlay: PaywallComponent.ColorScheme?
+    let padding: PaywallComponent.Padding?
+    let margin: PaywallComponent.Padding?
+    let border: PaywallComponent.Border?
+    let shadow: PaywallComponent.Shadow?
     let contentMode: ContentMode
 
     init(
@@ -143,7 +155,11 @@ struct ImageComponentStyle {
         size: PaywallComponent.Size,
         fitMode: PaywallComponent.FitMode,
         maskShape: PaywallComponent.MaskShape? = nil,
-        gradientColors: [PaywallComponent.ColorHex]? = nil
+        colorOverlay: PaywallComponent.ColorScheme? = nil,
+        padding: PaywallComponent.Padding? = nil,
+        margin: PaywallComponent.Padding? = nil,
+        border: PaywallComponent.Border? = nil,
+        shadow: PaywallComponent.Shadow? = nil
     ) {
         self.visible = visible
         self.widthLight = source.light.width
@@ -156,7 +172,11 @@ struct ImageComponentStyle {
         self.darkLowResUrl = source.dark?.heicLowRes
         self.size = size
         self.shape = maskShape?.shape
-        self.gradientColors = gradientColors?.compactMap { $0.toColor(fallback: Color.clear) } ?? []
+        self.colorOverlay = colorOverlay
+        self.padding = padding
+        self.margin = margin
+        self.border = border
+        self.shadow = shadow
         self.contentMode = fitMode.contentMode
     }
 

diff --git a/RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template1Preview.swift b/RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template1Preview.swift
@@ -34,7 +34,10 @@ private enum Template1Preview {
             )
         ),
         fitMode: .fit,
-        gradientColors: ["#ffffff00", "#ffffff00", "#ffffffff"]
+        colorOverlay: .init(light: .linear(0, [
+            .init(color: "#ffffff", percent: 0),
+            .init(color: "#ffffff00", percent: 40)
+        ]))
     )
 
     static let title = PaywallComponent.TextComponent(

diff --git a/RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template5Preview.swift b/RevenueCatUI/Templates/V2/Previews/TemplateComponentsViewPreviews/Template5Preview.swift
@@ -40,8 +40,10 @@ private enum Template5Preview {
             )
         ),
         fitMode: .fill,
-        maxHeight: 200,
-        gradientColors: ["#ffffff00", "#ffffff00", "#ffffffff"]
+        colorOverlay: .init(light: .linear(0, [
+            .init(color: "#ffffff", percent: 0),
+            .init(color: "#ffffff00", percent: 40)
+        ]))
     )
 
     static let title = PaywallComponent.TextComponent(

diff --git a/Sources/Paywalls/Components/PaywallImageComponent.swift b/Sources/Paywalls/Components/PaywallImageComponent.swift
@@ -10,17 +10,6 @@ import Foundation
 
 #if PAYWALL_COMPONENTS
 
-//source: ImageScheme | None = None
-//override_source_lid: LocalizationId | None = None
-//color_overlay: ColorSchemes | None = None
-//fit_mode: FitMode | None = None
-//mask_shape: MaskShape | None = None
-//size: Size | None = None
-//padding: Spacing | None = None
-//margin: Spacing | None = None
-//border: Border | None = None
-//shadow: Shadow | None = None
-
 public extension PaywallComponent {
 
     struct ImageComponent: PaywallComponentBase {