Paywalls: using new color information in template (#2823)

RevenueCat · Aug 7, 2023 · 53cded2 · 53cded2
1 parent 26879b7
commit 53cded2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 10 deletions.
diff --git a/RevenueCatUI/Helpers/ColorInformation+MultiScheme.swift b/RevenueCatUI/Helpers/ColorInformation+MultiScheme.swift
@@ -44,3 +44,20 @@ extension PaywallData.Configuration.ColorInformation {
 }
 
 #endif
+
+#if canImport(SwiftUI)
+
+import SwiftUI
+
+// Helpful acessors
+@available(iOS 13.0, tvOS 13.0, macOS 10.15, watchOS 6.2, *)
+extension PaywallData.Configuration.Colors {
+
+    var backgroundColor: Color { self.background.underlyingColor }
+    var foregroundColor: Color { self.foreground.underlyingColor }
+    var callToActionBackgroundColor: Color { self.callToActionBackground.underlyingColor }
+    var callToActionForegroundColor: Color { self.callToActionForeground.underlyingColor }
+
+}
+
+#endif
diff --git a/RevenueCatUI/Templates/Example1Template.swift b/RevenueCatUI/Templates/Example1Template.swift
@@ -15,7 +15,8 @@ struct Example1Template: TemplateViewType {
     init(
         packages: [Package],
         localization: PaywallData.LocalizedConfiguration,
-        paywall: PaywallData
+        paywall: PaywallData,
+        colors: PaywallData.Configuration.Colors
     ) {
         // Fix-me: move this logic out to be used by all templates
         if packages.isEmpty {
@@ -29,7 +30,8 @@ struct Example1Template: TemplateViewType {
                     package: package,
                     localization: localization.processVariables(with: package),
                     configuration: paywall.config,
-                    headerImageURL: paywall.headerImageURL
+                    headerImageURL: paywall.headerImageURL,
+                    colors: colors
                 ))
             } else {
                 self.data = .failure(.couldNotFindAnyPackages(expectedTypes: allPackages))
@@ -128,9 +130,11 @@ private struct Example1TemplateContent: View {
 
                 self.button
             }
+            .foregroundColor(self.data.colors.foregroundColor)
             .multilineTextAlignment(.center)
             .padding(.horizontal)
         }
+        .background(self.data.colors.backgroundColor)
     }
 
     private var offerDetails: some View {
@@ -186,11 +190,12 @@ private struct Example1TemplateContent: View {
             }
         } label: {
             self.ctaText
+                .foregroundColor(self.data.colors.callToActionForegroundColor)
                 .frame(maxWidth: .infinity)
         }
         .font(.title2)
         .fontWeight(.semibold)
-        .tint(Color.green.gradient.opacity(0.8))
+        .tint(self.data.colors.callToActionBackgroundColor.gradient)
         .buttonStyle(.borderedProminent)
         #if !os(macOS)
         .buttonBorderShape(.capsule)
@@ -212,6 +217,7 @@ private extension Example1TemplateContent {
         let localization: ProcessedLocalizedConfiguration
         let configuration: PaywallData.Configuration
         let headerImageURL: URL
+        let colors: PaywallData.Configuration.Colors
     }
 
     enum Error: Swift.Error {

diff --git a/RevenueCatUI/Templates/TemplateViewType.swift b/RevenueCatUI/Templates/TemplateViewType.swift
@@ -7,7 +7,8 @@ protocol TemplateViewType: SwiftUI.View {
     init(
         packages: [Package],
         localization: PaywallData.LocalizedConfiguration,
-        paywall: PaywallData
+        paywall: PaywallData,
+        colors: PaywallData.Configuration.Colors
     )
 
 }
@@ -17,12 +18,15 @@ extension PaywallData {
 
     @ViewBuilder
     func createView(for offering: Offering) -> some View {
+        let colors = self.config.colors.multiScheme
+
         switch self.template {
         case .example1:
             Example1Template(
                 packages: offering.availablePackages,
                 localization: self.localizedConfiguration,
-                paywall: self
+                paywall: self,
+                colors: colors
             )
         }
     }

diff --git a/RevenueCatUI/TestData.swift b/RevenueCatUI/TestData.swift
@@ -67,7 +67,7 @@ internal enum TestData {
         config: .init(
             packages: [.monthly],
             headerImageName: Self.paywallHeaderImageName,
-            colors: .init(light: Self.lightColors)
+            colors: .init(light: Self.lightColors, dark: Self.darkColors)
         ),
         localization: Self.localization,
         assetBaseURL: Self.paywallAssetBaseURL
@@ -77,7 +77,7 @@ internal enum TestData {
         config: .init(
             packages: [.annual],
             headerImageName: Self.paywallHeaderImageName,
-            colors: .init(light: Self.lightColors)
+            colors: .init(light: Self.lightColors, dark: Self.darkColors)
         ),
         localization: Self.localization,
         assetBaseURL: Self.paywallAssetBaseURL
@@ -100,10 +100,16 @@ internal enum TestData {
     )
 
     static let lightColors: PaywallData.Configuration.Colors = .init(
+        background: "#FFFFFF",
+        foreground: "#000000",
+        callToActionBackground: "#5CD27A",
+        callToActionForeground: "#FFFFFF"
+    )
+    static let darkColors: PaywallData.Configuration.Colors = .init(
         background: "#000000",
-        foreground: "#FF0000",
-        callToActionBackground: "#FF0AB1",
-        callToActionForeground: "#FF0000"
+        foreground: "#FFFFFF",
+        callToActionBackground: "#ACD27A",
+        callToActionForeground: "#000000"
     )
 
     static let customerInfo: CustomerInfo = {

diff --git a/Tests/RevenueCatUITests/PaywallViewTests.swift b/Tests/RevenueCatUITests/PaywallViewTests.swift
@@ -62,6 +62,19 @@ class PaywallViewTests: TestCase {
         view.snapshot(size: Self.size)
     }
 
+    func testDarkMode() {
+        let offering = TestData.offeringWithIntroOffer
+
+        let view = PaywallView(offering: offering,
+                               paywall: offering.paywallWithLocalImage,
+                               introEligibility: Self.ineligibleChecker,
+                               purchaseHandler: Self.purchaseHandler)
+
+        view
+            .environment(\.colorScheme, .dark)
+            .snapshot(size: Self.size)
+    }
+
     private static let eligibleChecker: TrialOrIntroEligibilityChecker = .producing(eligibility: .eligible)
     private static let ineligibleChecker: TrialOrIntroEligibilityChecker = .producing(eligibility: .ineligible)
     private static let purchaseHandler: PurchaseHandler = .mock()

diff --git a/Tests/RevenueCatUITests/__Snapshots__/PaywallViewTests/iOS16-testDarkMode.1.png b/Tests/RevenueCatUITests/__Snapshots__/PaywallViewTests/iOS16-testDarkMode.1.png