[Customer Center] Improving customer center buttons

RevenueCatUI/CustomerCenter/ManageSubscriptionsButtonStyle.swift → RevenueCatUI/CustomerCenter/ButtonStyles.swift

@@ -7,7 +7,7 @@
 //
 //      https://opensource.org/licenses/MIT
 //
-//  ManageSubscriptionsButtonStyle.swift
+//  ButtonStyles.swift
 //
 //
 //  Created by Cesar de la Vega on 28/5/24.
@@ -25,7 +25,7 @@ import SwiftUI
 @available(macOS, unavailable)
 @available(tvOS, unavailable)
 @available(watchOS, unavailable)
-struct ManageSubscriptionsButtonStyle: PrimitiveButtonStyle {
+struct ProminentButtonStyle: PrimitiveButtonStyle {
 
     @Environment(\.appearance) private var appearance: CustomerCenterConfigData.Appearance
     @Environment(\.colorScheme) private var colorScheme
@@ -37,24 +37,56 @@ struct ManageSubscriptionsButtonStyle: PrimitiveButtonStyle {
         Button(action: { configuration.trigger() }, label: {
             configuration.label.frame(maxWidth: .infinity)
         })
+        .font(.body.weight(.medium))
         .buttonStyle(.borderedProminent)
         .controlSize(.large)
+        .buttonBorderShape(.roundedRectangle(radius: 16))
         .applyIf(background != nil, apply: { $0.tint(background) })
         .applyIf(textColor != nil, apply: { $0.foregroundColor(textColor) })
     }
 
 }
 
+@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
+@available(macOS, unavailable)
+@available(tvOS, unavailable)
+@available(watchOS, unavailable)
+struct SubtleButtonStyle: PrimitiveButtonStyle {
+
+    @Environment(\.appearance) private var appearance: CustomerCenterConfigData.Appearance
+    @Environment(\.colorScheme) private var colorScheme
+
+    func makeBody(configuration: PrimitiveButtonStyleConfiguration) -> some View {
+        let background = color(from: appearance.buttonBackgroundColor, for: colorScheme)
+
+        Button(action: { configuration.trigger() }, label: {
+            configuration.label.frame(maxWidth: .infinity)
+        })
+        .font(.body.weight(.medium))
+        .controlSize(.large)
+        .padding(.vertical)
+        .applyIf(background != nil, apply: { $0.foregroundColor(background) })
+    }
+
+}
+
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
 @available(macOS, unavailable)
 @available(tvOS, unavailable)
 @available(watchOS, unavailable)
 struct ManageSubscriptionsButtonStyle_Previews: PreviewProvider {
 
     static var previews: some View {
-        Button("Didn't receive purchase") {}
-            .buttonStyle(ManageSubscriptionsButtonStyle())
-            .environment(\.appearance, CustomerCenterConfigTestData.standardAppearance)
+        VStack(spacing: 16.0) {
+            Button("Didn't receive purchase") {}
+                .buttonStyle(ProminentButtonStyle())
+                .environment(\.appearance, CustomerCenterConfigTestData.standardAppearance)
+
+            Button("Cancel") {}
+                .buttonStyle(SubtleButtonStyle())
+                .environment(\.appearance, CustomerCenterConfigTestData.standardAppearance)
+
+        }.padding()
     }
 
 }

RevenueCatUI/CustomerCenter/Views/FeedbackSurveyView.swift

@@ -94,7 +94,7 @@ struct FeedbackSurveyButtonsView: View {
                         Text(option.title)
                     }
                 })
-                .buttonStyle(ManageSubscriptionsButtonStyle())
+                .buttonStyle(ProminentButtonStyle())
                 .disabled(self.loadingState != nil)
             }
         }

RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift

@@ -26,6 +26,9 @@ import SwiftUI
 @available(watchOS, unavailable)
 struct ManageSubscriptionsView: View {
 
+    @Environment(\.dismiss)
+    var dismiss
+
     @Environment(\.appearance)
     private var appearance: CustomerCenterConfigData.Appearance
     @Environment(\.localization)
@@ -107,6 +110,16 @@ struct ManageSubscriptionsView: View {
         .task {
             await loadInformationIfNeeded()
         }
+        .toolbar {
+            ToolbarItem(placement: .topBarLeading) {
+                Button(role: .cancel) {
+                    dismiss()
+                } label: {
+                    Text(localization.commonLocalizedString(for: .dismiss))
+                }
+
+            }
+        }
         .navigationTitle(self.viewModel.screen.title)
         .navigationBarTitleDisplayMode(.inline)
     }
@@ -319,7 +332,7 @@ struct ManageSubscriptionButton: View {
                 Text(path.title)
             }
         })
-        .buttonStyle(ManageSubscriptionsButtonStyle())
+        .buttonStyle(ProminentButtonStyle())
         .disabled(self.viewModel.loadingPath != nil)
         .restorePurchasesAlert(isPresented: self.$viewModel.showRestoreAlert)
         .sheet(item: self.$viewModel.promotionalOfferData,
@@ -337,13 +350,11 @@ struct ManageSubscriptionButton: View {
 }
 
 #if DEBUG
-
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
 @available(macOS, unavailable)
 @available(tvOS, unavailable)
 @available(watchOS, unavailable)
 struct ManageSubscriptionsView_Previews: PreviewProvider {
-
     static var previews: some View {
         let viewModelMonthlyRenewing = ManageSubscriptionsViewModel(
             screen: CustomerCenterConfigTestData.customerCenterData.screens[.management]!,
@@ -354,12 +365,10 @@ struct ManageSubscriptionsView_Previews: PreviewProvider {
             .previewDisplayName("Monthly renewing")
             .environment(\.localization, CustomerCenterConfigTestData.customerCenterData.localization)
             .environment(\.appearance, CustomerCenterConfigTestData.customerCenterData.appearance)
-
         let viewModelYearlyExpiring = ManageSubscriptionsViewModel(
             screen: CustomerCenterConfigTestData.customerCenterData.screens[.management]!,
             subscriptionInformation: CustomerCenterConfigTestData.subscriptionInformationYearlyExpiring,
             customerCenterActionHandler: nil)
-
         ManageSubscriptionsView(viewModel: viewModelYearlyExpiring)
             .previewDisplayName("Yearly expiring")
             .environment(\.localization, CustomerCenterConfigTestData.customerCenterData.localization)
@@ -373,7 +382,6 @@ struct ManageSubscriptionsView_Previews: PreviewProvider {
 @available(tvOS, unavailable)
 @available(watchOS, unavailable)
 struct SubscriptionDetailsView_Previews: PreviewProvider {
-
     static var previews: some View {
         SubscriptionDetailsView(
             subscriptionInformation: CustomerCenterConfigTestData.subscriptionInformationMonthlyRenewing,
@@ -382,7 +390,6 @@ struct SubscriptionDetailsView_Previews: PreviewProvider {
         )
         .previewDisplayName("Subscription Details - Monthly")
         .padding()
-
     }
 }
 #endif

RevenueCatUI/CustomerCenter/Views/NoSubscriptionsView.swift

@@ -70,12 +70,13 @@ struct NoSubscriptionsView: View {
                     showRestoreAlert = true
                 }
                 .restorePurchasesAlert(isPresented: $showRestoreAlert)
-                .buttonStyle(ManageSubscriptionsButtonStyle())
+                .buttonStyle(ProminentButtonStyle())
 
-                Button(localization.commonLocalizedString(for: .cancel)) {
+                Button(localization.commonLocalizedString(for: .dismiss)) {
                     dismiss()
                 }
-                .padding(.vertical)
+                .buttonStyle(SubtleButtonStyle())
+
             }
             .padding(.horizontal)
             .applyIf(textColor != nil, apply: { $0.foregroundColor(textColor) })

RevenueCatUI/CustomerCenter/Views/PromotionalOfferView.swift

@@ -144,7 +144,7 @@ struct PromoOfferButtonView: View {
                         .font(.subheadline)
                 }
             })
-            .buttonStyle(ManageSubscriptionsButtonStyle())
+            .buttonStyle(ProminentButtonStyle())
             .padding(.horizontal)
         }
     }

RevenueCatUI/CustomerCenter/Views/WrongPlatformView.swift

@@ -30,6 +30,11 @@ struct WrongPlatformView: View {
     @State
     private var store: Store?
 
+    @Environment(\.dismiss)
+    var dismiss
+
+    @Environment(\.localization)
+    private var localization: CustomerCenterConfigData.Localization
     @Environment(\.appearance)
     private var appearance: CustomerCenterConfigData.Appearance
     @Environment(\.colorScheme)
@@ -58,6 +63,15 @@ struct WrongPlatformView: View {
                     systemImage: "exclamationmark.triangle.fill"
                 )
 
+                Spacer()
+
+                Button {
+                    dismiss()
+                } label: {
+                    Text(localization.commonLocalizedString(for: .dismiss))
+                }
+                .buttonStyle(SubtleButtonStyle())
+
             }
             .applyIf(textColor != nil, apply: { $0.foregroundColor(textColor) })
         }