Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Paywalls] Add support for gradient backgrounds #4522

Merged
merged 8 commits into from
Nov 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions RevenueCat.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@
37E3578711F5FDD5DC6458A8 /* AttributionFetcher.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37E3521731D8DC16873F55F3 /* AttributionFetcher.swift */; };
37E35C8515C5E2D01B0AF5C1 /* Strings.swift in Sources */ = {isa = PBXBuildFile; fileRef = 37E3507939634ED5A9280544 /* Strings.swift */; };
42F1DF385E3C1F9903A07FBF /* ProductsFetcherSK1.swift in Sources */ = {isa = PBXBuildFile; fileRef = EFB3CBAA73855779FE828CE2 /* ProductsFetcherSK1.swift */; };
4D21041E2CF548790095D254 /* GradientView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D21041D2CF548790095D254 /* GradientView.swift */; };
4D2A00682CD1EED3008318CA /* PurchaseParamsTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D2A00672CD1EED2008318CA /* PurchaseParamsTests.swift */; };
4D2C7D0B2CC40A35002562BC /* PurchaseParams.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D2C7D0A2CC40A35002562BC /* PurchaseParams.swift */; };
4D322E382B7E7B170004AF53 /* PurchasesOrchestratorSK2Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D322E372B7E7B170004AF53 /* PurchasesOrchestratorSK2Tests.swift */; };
Expand All @@ -318,6 +319,7 @@
4D6ABB0C2AF13F9400BB2A08 /* StoreKit2Receipt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D6ABB0B2AF13F9400BB2A08 /* StoreKit2Receipt.swift */; };
4D6ABB0E2AF13FB100BB2A08 /* StoreEnvironment.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D6ABB0D2AF13FB100BB2A08 /* StoreEnvironment.swift */; };
4D6ABB102AF13FBD00BB2A08 /* SK2AppTransaction.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D6ABB0F2AF13FBD00BB2A08 /* SK2AppTransaction.swift */; };
4D6F4BD02CF69DE400353AF6 /* ForegroundColorScheme.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D6F4BCF2CF69DE300353AF6 /* ForegroundColorScheme.swift */; };
4D72E8622B221EA600BF9EFE /* StoreEnvironmentTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D24EF3F2B04EA6000E586D2 /* StoreEnvironmentTests.swift */; };
4D7A3E282B85729E00ABDE67 /* PurchasesOrchestratorTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D7A3E272B85729E00ABDE67 /* PurchasesOrchestratorTests.swift */; };
4DBC30962B1DFA97001D33C7 /* StoreKitVersion.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4DBC30952B1DFA97001D33C7 /* StoreKitVersion.swift */; };
Expand Down Expand Up @@ -1590,6 +1592,7 @@
37E35EEE7783629CDE41B70C /* SystemInfoTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SystemInfoTests.swift; sourceTree = "<group>"; };
37E35F783903362B65FB7AF3 /* MockProductsRequestFactory.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MockProductsRequestFactory.swift; sourceTree = "<group>"; };
37E35FDA0A44EA03EA12DAA2 /* DateFormatter+ExtensionsTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "DateFormatter+ExtensionsTests.swift"; sourceTree = "<group>"; };
4D21041D2CF548790095D254 /* GradientView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GradientView.swift; sourceTree = "<group>"; };
4D24EF3F2B04EA6000E586D2 /* StoreEnvironmentTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreEnvironmentTests.swift; sourceTree = "<group>"; };
4D2A00672CD1EED2008318CA /* PurchaseParamsTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PurchaseParamsTests.swift; sourceTree = "<group>"; };
4D2C7D0A2CC40A35002562BC /* PurchaseParams.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PurchaseParams.swift; sourceTree = "<group>"; };
Expand All @@ -1599,6 +1602,7 @@
4D6ABB0B2AF13F9400BB2A08 /* StoreKit2Receipt.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = StoreKit2Receipt.swift; sourceTree = "<group>"; };
4D6ABB0D2AF13FB100BB2A08 /* StoreEnvironment.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = StoreEnvironment.swift; sourceTree = "<group>"; };
4D6ABB0F2AF13FBD00BB2A08 /* SK2AppTransaction.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SK2AppTransaction.swift; sourceTree = "<group>"; };
4D6F4BCF2CF69DE300353AF6 /* ForegroundColorScheme.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForegroundColorScheme.swift; sourceTree = "<group>"; };
4D7A3E272B85729E00ABDE67 /* PurchasesOrchestratorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PurchasesOrchestratorTests.swift; sourceTree = "<group>"; };
4DBC30952B1DFA97001D33C7 /* StoreKitVersion.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StoreKitVersion.swift; sourceTree = "<group>"; };
4DBF1F352B4D572400D52354 /* LocalReceiptFetcher.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = LocalReceiptFetcher.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -2412,6 +2416,7 @@
children = (
2C7457872CEDF7AC004ACE52 /* BackgroundStyle.swift */,
77089F9D2CD39EC100848CD5 /* ShadowModifier.swift */,
4D6F4BCF2CF69DE300353AF6 /* ForegroundColorScheme.swift */,
2C91068D2CE2481800189565 /* SizeModifier.swift */,
2CAB87F62CAAB13200247013 /* Shape.swift */,
);
Expand Down Expand Up @@ -4410,6 +4415,7 @@
887A60562C1D037000E1A461 /* FooterView.swift */,
887A60572C1D037000E1A461 /* IconView.swift */,
887A60582C1D037000E1A461 /* IntroEligibilityStateView.swift */,
4D21041D2CF548790095D254 /* GradientView.swift */,
887A60592C1D037000E1A461 /* LoadingPaywallView.swift */,
887A605A2C1D037000E1A461 /* PackageButtonStyle.swift */,
887A605B2C1D037000E1A461 /* ProgressView.swift */,
Expand Down Expand Up @@ -6409,6 +6415,7 @@
887A60672C1D037000E1A461 /* PaywallError.swift in Sources */,
2C74574B2CEA6B80004ACE52 /* LocalizationProvider.swift in Sources */,
77BA1AB12CCBAB80009BF0EA /* RootViewModel.swift in Sources */,
4D21041E2CF548790095D254 /* GradientView.swift in Sources */,
88A543E52C37A4AF0039C6A5 /* ConsistentTierContentView.swift in Sources */,
3525D8A42C4AB3D600C21D99 /* CustomerCenterEnvironment.swift in Sources */,
35C496062C482ACC0023E924 /* PromotionalOfferData.swift in Sources */,
Expand All @@ -6429,6 +6436,7 @@
88B1BAF82C813A3C001B7EE5 /* LinkButtonComponentViewModel.swift in Sources */,
887A60BA2C1D037000E1A461 /* Template3View.swift in Sources */,
887A607D2C1D037000E1A461 /* ImageLoader.swift in Sources */,
4D6F4BD02CF69DE400353AF6 /* ForegroundColorScheme.swift in Sources */,
887A60822C1D037000E1A461 /* PreviewHelpers.swift in Sources */,
887A60B92C1D037000E1A461 /* Template2View.swift in Sources */,
3537566D2C382C2800A1B8D6 /* NoSubscriptionsView.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ struct TextComponentView: View {
.fontWeight(style.fontWeight)
.fixedSize(horizontal: false, vertical: true)
.multilineTextAlignment(style.textAlignment)
.foregroundStyle(style.color)
.foregroundColorScheme(style.color)
.padding(style.padding)
.size(style.size, alignment: style.horizontalAlignment)
.backgroundStyle(style.backgroundStyle)
Expand Down Expand Up @@ -94,6 +94,38 @@ struct TextComponentView_Previews: PreviewProvider {
.previewLayout(.sizeThatFits)
.previewDisplayName("Default")

// Default
TextComponentView(
// swiftlint:disable:next force_try
viewModel: try! .init(
localizationProvider: .init(
locale: Locale.current,
localizedStrings: [
"id_1": .string("Hello, world")
]
),
component: .init(
text: "id_1",
color: PaywallComponent.ColorScheme(
light: .linear(30, [
.init(color: "#0433FF", percent: 0),
.init(color: "#FF40FF", percent: 50),
.init(color: "#00FDFF", percent: 100)
]),
dark: .linear(30, [
.init(color: "#0433FF", percent: 0),
.init(color: "#FF40FF", percent: 50),
.init(color: "#00FDFF", percent: 100)
])
),
fontSize: .headingXXL
)
)
)
.previewRequiredEnvironmentProperties()
.previewLayout(.sizeThatFits)
.previewDisplayName("Gradient")

// Customizations
TextComponentView(
// swiftlint:disable:next force_try
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ struct TextComponentStyle {
let visible: Bool
let text: String
let fontWeight: Font.Weight
let color: Color
let color: PaywallComponent.ColorScheme
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Storing the ColorScheme instead of the dynamic color now because it can potentially be a gradient.

let fontSize: Font
let horizontalAlignment: Alignment
let textAlignment: TextAlignment
Expand All @@ -182,7 +182,7 @@ struct TextComponentStyle {
self.visible = visible
self.text = text
self.fontWeight = fontWeight.fontWeight
self.color = color.toDynamicColor()
self.color = color

// WIP: Take into account the fontFamily mapping
self.fontSize = fontSize.font
Expand Down
108 changes: 100 additions & 8 deletions RevenueCatUI/Templates/V2/ViewHelpers/BackgroundStyle.swift
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,21 @@ enum BackgroundStyle {

case color(PaywallComponent.ColorScheme)
case image(PaywallComponent.ThemeImageUrls)
case gradient
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following the spec, gradient is not a different type of background but is encoded as part of the ColorInfo struct.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad 😅 Thanks for fixing!


}

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
struct BackgroundStyleModifier: ViewModifier {

@Environment(\.colorScheme)
var colorScheme

var backgroundStyle: BackgroundStyle?

func body(content: Content) -> some View {
if let backgroundStyle {
content
.apply(backgroundStyle: backgroundStyle)
.apply(backgroundStyle: backgroundStyle, colorScheme: colorScheme)
} else {
content
}
Expand All @@ -44,10 +46,29 @@ struct BackgroundStyleModifier: ViewModifier {
fileprivate extension View {

@ViewBuilder
func apply(backgroundStyle: BackgroundStyle) -> some View {
func apply(backgroundStyle: BackgroundStyle, colorScheme: ColorScheme) -> some View {
switch backgroundStyle {
case .color(let color):
self.background(color.toDynamicColor())
switch color.effectiveColor(for: colorScheme) {
case .hex, .alias:
self.background(color.toDynamicColor())
case .linear(let degrees, _):
self.background {
GradientView(
lightGradient: color.light.toGradient(),
darkGradient: color.dark?.toGradient(),
gradientStyle: .linear(degrees)
)
}
case .radial:
self.background {
GradientView(
lightGradient: color.light.toGradient(),
darkGradient: color.dark?.toGradient(),
gradientStyle: .radial
)
}
}
case .image(let imageInfo):
self.background {
RemoteImage(
Expand All @@ -62,10 +83,6 @@ fileprivate extension View {
.ignoresSafeArea()
}
}
case .gradient:
self.background {
// WIP: Add you gradient
}
}
}

Expand Down Expand Up @@ -183,6 +200,81 @@ struct BackgrounDStyle_Previews: PreviewProvider {
.preferredColorScheme(.dark)
.previewLayout(.sizeThatFits)
.previewDisplayName("Image - Dark (should be japan cats)")

testContent
.backgroundStyle(
BackgroundStyle.color(
PaywallComponent.ColorScheme.init(
light: .linear(30, [
.init(color: "#000000", percent: 0),
.init(color: "#ffffff", percent: 100)
]),
dark: .linear(30, [
.init(color: "#ff0000", percent: 0),
.init(color: "#E58984", percent: 100)
])
)
)
)
.preferredColorScheme(.dark)
.previewLayout(.sizeThatFits)
.previewDisplayName("Linear Gradient - Dark (should be red)")

testContent
.backgroundStyle(
BackgroundStyle.color(
PaywallComponent.ColorScheme.init(
light: .linear(30, [
.init(color: "#000000", percent: 0),
.init(color: "#ffffff", percent: 100)
]),
dark: .linear(30, [
.init(color: "#00E519", percent: 0),
.init(color: "#9DEAD3", percent: 100)
])
)
)
)
.previewLayout(.sizeThatFits)
.previewDisplayName("Linear Gradient - Light (should be green")

testContent
.backgroundStyle(
BackgroundStyle.color(
PaywallComponent.ColorScheme.init(
light: .radial([
.init(color: "#000000", percent: 0),
.init(color: "#ffffff", percent: 100)
]),
dark: .radial([
.init(color: "#ff0000", percent: 0),
.init(color: "#E58984", percent: 100)
])
)
)
)
.preferredColorScheme(.dark)
.previewLayout(.sizeThatFits)
.previewDisplayName("Radial Gradient - Dark (should be red)")

testContent
.backgroundStyle(
BackgroundStyle.color(
PaywallComponent.ColorScheme.init(
light: .radial([

.init(color: "#00E519", percent: 0),
.init(color: "#9DEAD3", percent: 100)
]),
dark: .radial([
.init(color: "#000000", percent: 0),
.init(color: "#ffffff", percent: 100)
])
)
)
)
.previewLayout(.sizeThatFits)
.previewDisplayName("Radial Gradient - Light (should be green")
}
}

Expand Down
73 changes: 73 additions & 0 deletions RevenueCatUI/Templates/V2/ViewHelpers/ForegroundColorScheme.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
//
// Copyright RevenueCat Inc. All Rights Reserved.
//
// Licensed under the MIT License (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://opensource.org/licenses/MIT
//
// ForegroundColorScheme.swift
//
// Created by MarkVillacampa on 27/11/24.

import RevenueCat
import SwiftUI

#if PAYWALL_COMPONENTS

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
struct ForegroundColorSchemeModifier: ViewModifier {

@Environment(\.colorScheme)
var colorScheme

var foregroundColorScheme: PaywallComponent.ColorScheme

func body(content: Content) -> some View {
content.foregroundColorScheme(foregroundColorScheme, colorScheme: colorScheme)
}

}

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
extension View {
func foregroundColorScheme(_ colorScheme: PaywallComponent.ColorScheme) -> some View {
self.modifier(ForegroundColorSchemeModifier(foregroundColorScheme: colorScheme))
}
}

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
fileprivate extension View {
@ViewBuilder
func foregroundColorScheme(_ color: PaywallComponent.ColorScheme, colorScheme: ColorScheme) -> some View {
switch color.effectiveColor(for: colorScheme) {
case .hex, .alias:
self.foregroundColor(color.toDynamicColor())
case .linear(let degrees, _):
self.overlay {
GradientView(
lightGradient: color.light.toGradient(),
darkGradient: color.dark?.toGradient(),
gradientStyle: .linear(degrees)
)
.mask(
self
)
}
case .radial:
self.overlay {
GradientView(
lightGradient: color.light.toGradient(),
darkGradient: color.dark?.toGradient(),
gradientStyle: .radial
)
.mask(
self
)
}
}
}
}

#endif
Original file line number Diff line number Diff line change
Expand Up @@ -232,8 +232,26 @@ extension PaywallComponent.ColorInfo {
case .alias:
// WIP: Need to implement this when we actually have alias implemented
return fallback
case .linear, .radial:
return fallback
}
}

func toGradient() -> Gradient {
switch self {
case .hex, .alias:
return Gradient(colors: [.clear])
case .linear(_, let points), .radial(let points):
let stops = points.map { point in
Gradient.Stop(
color: point.color.toColor(fallback: Color.clear),
location: CGFloat(point.percent)/100
)
}
return Gradient(stops: stops)
}
}

}

extension PaywallComponent.ColorHex {
Expand Down Expand Up @@ -301,6 +319,17 @@ extension PaywallComponent.ColorScheme {
})
}

func effectiveColor(for colorScheme: ColorScheme) -> PaywallComponent.ColorInfo {
switch colorScheme {
case .light:
return light
case .dark:
return dark ?? light
@unknown default:
return light
}
}

}

#endif
Loading