Paywalls: add support for CTA button gradients (#3121)

![Screenshot 2023-08-29 at 15 41
31](https://github.com/RevenueCat/purchases-ios/assets/685609/349d7d84-ac3b-4a81-85d8-d876d63dc4b6)

RevenueCatUI/Helpers/ColorInformation+MultiScheme.swift

@@ -42,6 +42,8 @@ extension PaywallData.Configuration.Colors {
             text2: .init(light: light.text2, dark: dark.text2),
             callToActionBackground: .init(light: light.callToActionBackground, dark: dark.callToActionBackground),
             callToActionForeground: .init(light: light.callToActionForeground, dark: dark.callToActionForeground),
+            callToActionSecondaryBackground: .init(light: light.callToActionSecondaryBackground,
+                                                   dark: dark.callToActionSecondaryBackground),
             accent1: .init(light: light.accent1, dark: dark.accent1),
             accent2: .init(light: light.accent2, dark: dark.accent2)
         )
@@ -88,6 +90,7 @@ extension PaywallData.Configuration.Colors {
     var text2Color: Color { self.text2?.underlyingColor ?? self.text1.underlyingColor }
     var callToActionBackgroundColor: Color { self.callToActionBackground.underlyingColor }
     var callToActionForegroundColor: Color { self.callToActionForeground.underlyingColor }
+    var callToActionSecondaryBackgroundColor: Color? { self.callToActionSecondaryBackground?.underlyingColor }
     var accent1Color: Color { self.accent1?.underlyingColor ?? self.callToActionForegroundColor }
     var accent2Color: Color { self.accent2?.underlyingColor ?? self.accent1Color }
 

RevenueCatUI/Views/PurchaseButton.swift

@@ -83,18 +83,37 @@ struct PurchaseButton: View {
                        ? .infinity
                         : nil
                 )
+                .padding()
                 .padding(.vertical, self.userInterfaceIdiom == .pad ? 10 : 0)
         }
         .font(self.fonts.font(for: self.mode.buttonFont).weight(.semibold))
-        .tint(self.colors.callToActionBackgroundColor)
-        .buttonBorderShape(self.mode.buttonBorderShape)
-        .controlSize(self.mode.buttonSize)
-        .buttonStyle(.borderedProminent)
+        .background(self.backgroundView)
+        .tint(.clear)
         .frame(maxWidth: .infinity)
         .dynamicTypeSize(...Constants.maximumDynamicTypeSize)
         .disabled(self.package.currentlySubscribed)
     }
 
+    @ViewBuilder
+    private var backgroundView: some View {
+        Capsule(style: .continuous)
+            .foregroundStyle(self.backgroundColor)
+    }
+
+    private var backgroundColor: some ShapeStyle {
+        let primary = self.colors.callToActionBackgroundColor
+
+        if let secondary = self.colors.callToActionSecondaryBackgroundColor {
+            return AnyShapeStyle(
+                LinearGradient(colors: [primary, secondary],
+                               startPoint: .top,
+                               endPoint: .bottom)
+            )
+        } else {
+            return AnyShapeStyle(primary)
+        }
+    }
+
 }
 
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, *)
@@ -112,24 +131,6 @@ private extension PaywallViewMode {
         }
     }
 
-    @available(tvOS, unavailable)
-    var buttonSize: ControlSize {
-        switch self {
-        case .fullScreen, .footer, .condensedFooter: return .large
-        }
-    }
-
-    var buttonBorderShape: ButtonBorderShape {
-        switch self {
-        case .fullScreen, .footer, .condensedFooter:
-            #if os(macOS) || os(tvOS)
-            return .roundedRectangle
-            #else
-            return .capsule
-            #endif
-        }
-    }
-
 }
 
 // MARK: - Previews

Sources/Paywalls/PaywallData.swift

@@ -297,6 +297,8 @@ extension PaywallData.Configuration {
         public var callToActionBackground: PaywallColor
         /// Foreground color of the main call to action button.
         public var callToActionForeground: PaywallColor
+        /// If present, the CTA will create a vertical gradient from ``callToActionBackground`` to this color.
+        public var callToActionSecondaryBackground: PaywallColor?
         /// Primary accent color.
         public var accent1: PaywallColor?
         /// Secondary accent color
@@ -309,6 +311,7 @@ extension PaywallData.Configuration {
             text2: PaywallColor? = nil,
             callToActionBackground: PaywallColor,
             callToActionForeground: PaywallColor,
+            callToActionSecondaryBackground: PaywallColor? = nil,
             accent1: PaywallColor? = nil,
             accent2: PaywallColor? = nil
         ) {
@@ -317,6 +320,7 @@ extension PaywallData.Configuration {
             self.text2 = text2
             self.callToActionBackground = callToActionBackground
             self.callToActionForeground = callToActionForeground
+            self.callToActionSecondaryBackground = callToActionSecondaryBackground
             self.accent1 = accent1
             self.accent2 = accent2
         }

Tests/APITesters/SwiftAPITester/SwiftAPITester/PaywallAPI.swift

@@ -101,6 +101,7 @@ func checkPaywallColors(_ config: PaywallData.Configuration.Colors) {
     let text2: PaywallColor? = config.text2
     let callToActionBackground: PaywallColor = config.callToActionBackground
     let callToActionForeground: PaywallColor = config.callToActionForeground
+    let callToActionSecondaryBackground: PaywallColor? = config.callToActionSecondaryBackground
     let accent1: PaywallColor? = config.accent1
     let accent2: PaywallColor? = config.accent2
 
@@ -110,6 +111,7 @@ func checkPaywallColors(_ config: PaywallData.Configuration.Colors) {
         text2: text2,
         callToActionBackground: callToActionBackground,
         callToActionForeground: callToActionForeground,
+        callToActionSecondaryBackground: callToActionSecondaryBackground,
         accent1: accent1,
         accent2: accent2
     )

Tests/UnitTests/Networking/Responses/Fixtures/PaywallData-Sample1.json

@@ -56,7 +56,8 @@
                 "call_to_action_background": "#FF00AACC",
                 "call_to_action_foreground": "#FF00AA",
                 "accent_1": "#FF0000",
-                "accent_2": "#00FF00"
+                "accent_2": "#00FF00",
+                "call_to_action_secondary_background": "#FF00BB",
             },
             "dark": {
                 "background": "#FF0000",

Tests/UnitTests/Paywalls/PaywallDataTests.swift

@@ -39,6 +39,7 @@ class PaywallDataTests: BaseHTTPResponseTest {
         expect(paywall.config.colors.light.text2?.stringRepresentation) == "#FF00AA11"
         expect(paywall.config.colors.light.callToActionBackground.stringRepresentation) == "#FF00AACC"
         expect(paywall.config.colors.light.callToActionForeground.stringRepresentation) == "#FF00AA"
+        expect(paywall.config.colors.light.callToActionSecondaryBackground?.stringRepresentation) == "#FF00BB"
         expect(paywall.config.colors.light.accent1?.stringRepresentation) == "#FF0000"
         expect(paywall.config.colors.light.accent2?.stringRepresentation) == "#00FF00"