[Customer Center] Improving customer center buttons (#4165)

RevenueCat · Aug 14, 2024 · 76cbce1 · 76cbce1
1 parent 045c236
commit 76cbce1
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 26 deletions.
diff --git a/...nter/ManageSubscriptionsButtonStyle.swift → ...ueCatUI/CustomerCenter/ButtonStyles.swift b/...nter/ManageSubscriptionsButtonStyle.swift → ...ueCatUI/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.
@@ -21,11 +21,11 @@ import SwiftUI
 
 #if os(iOS)
 
-@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
+@available(iOS 15.0, *)
 @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,63 @@ 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(iOS 15.0, *)
 @available(macOS, unavailable)
 @available(tvOS, unavailable)
 @available(watchOS, unavailable)
-struct ManageSubscriptionsButtonStyle_Previews: PreviewProvider {
+struct DismissCircleButton: View {
+
+    @Environment(\.localization) private var localization
+
+    var action: () -> Void
+
+    var body: some View {
+        Button {
+            action()
+        } label: {
+            Circle()
+                .fill(Color(uiColor: .secondarySystemFill))
+                .frame(width: 28, height: 28)
+                .overlay(
+                    Image(systemName: "xmark")
+                        .font(.system(size: 14, weight: .bold))
+                        .foregroundStyle(.secondary)
+                        .imageScale(.medium)
+                )
+            }
+        .buttonStyle(.plain)
+        .accessibilityLabel(Text(localization.commonLocalizedString(for: .dismiss)))
+    }
+
+}
+
+@available(iOS 15.0, *)
+@available(macOS, unavailable)
+@available(tvOS, unavailable)
+@available(watchOS, unavailable)
+struct ButtonStyles_Previews: PreviewProvider {
 
     static var previews: some View {
-        Button("Didn't receive purchase") {}
-            .buttonStyle(ManageSubscriptionsButtonStyle())
+        VStack(spacing: 16.0) {
+            Button("Didn't receive purchase") {}
+                .buttonStyle(ProminentButtonStyle())
+
+            DismissCircleButton {
+
+            }
+        }.padding()
             .environment(\.appearance, CustomerCenterConfigTestData.standardAppearance)
+            .environment(\.localization, CustomerCenterConfigTestData.customerCenterData.localization)
     }
 
 }

diff --git a/RevenueCatUI/CustomerCenter/Views/FeedbackSurveyView.swift b/RevenueCatUI/CustomerCenter/Views/FeedbackSurveyView.swift
@@ -94,7 +94,7 @@ struct FeedbackSurveyButtonsView: View {
                         Text(option.title)
                     }
                 })
-                .buttonStyle(ManageSubscriptionsButtonStyle())
+                .buttonStyle(ProminentButtonStyle())
                 .disabled(self.loadingState != nil)
             }
         }

diff --git a/RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift b/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)
@@ -104,12 +107,20 @@ struct ManageSubscriptionsView: View {
                 .frame(maxWidth: 400)
             }
         }
+        .toolbar {
+            ToolbarItem(placement: .topBarTrailing) {
+                DismissCircleButton {
+                    dismiss()
+                }
+            }
+        }
         .task {
             await loadInformationIfNeeded()
         }
         .navigationTitle(self.viewModel.screen.title)
         .navigationBarTitleDisplayMode(.inline)
     }
+
 }
 
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
@@ -214,7 +225,6 @@ struct SubscriptionDetailsView: View {
                 }
 
                 if let nextRenewal =  subscriptionInformation.expirationDateString {
-
                     let expirationString = subscriptionInformation.active ? (
                         subscriptionInformation.willRenew ?
                             localization.commonLocalizedString(for: .nextBillingDate) :
@@ -252,14 +262,12 @@ struct SubscriptionDetailsView: View {
                     }
                 }
             }
-
         }
         .padding(24.0)
         .background(Color(UIColor.tertiarySystemBackground))
         .cornerRadius(20)
         .shadow(color: .black.opacity(0.1), radius: 10, x: 0.0, y: 10)
-        .padding(.top)
-        .padding(.bottom)
+        .padding([.top, .bottom])
         .padding(.bottom)
     }
 
@@ -319,7 +327,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,
@@ -334,10 +342,10 @@ struct ManageSubscriptionButton: View {
                                  promoOfferDetails: promotionalOfferData.promoOfferDetails)
         })
     }
+
 }
 
 #if DEBUG
-
 @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
 @available(macOS, unavailable)
 @available(tvOS, unavailable)
@@ -359,7 +367,6 @@ struct ManageSubscriptionsView_Previews: PreviewProvider {
             screen: CustomerCenterConfigTestData.customerCenterData.screens[.management]!,
             subscriptionInformation: CustomerCenterConfigTestData.subscriptionInformationYearlyExpiring,
             customerCenterActionHandler: nil)
-
         ManageSubscriptionsView(viewModel: viewModelYearlyExpiring)
             .previewDisplayName("Yearly expiring")
             .environment(\.localization, CustomerCenterConfigTestData.customerCenterData.localization)
@@ -382,8 +389,8 @@ struct SubscriptionDetailsView_Previews: PreviewProvider {
         )
         .previewDisplayName("Subscription Details - Monthly")
         .padding()
-
     }
+
 }
 #endif
 

diff --git a/RevenueCatUI/CustomerCenter/Views/NoSubscriptionsView.swift b/RevenueCatUI/CustomerCenter/Views/NoSubscriptionsView.swift
@@ -46,7 +46,8 @@ struct NoSubscriptionsView: View {
         self.configuration = configuration
     }
 
-    var body: some View {
+    @ViewBuilder
+    var content: some View {
         let background = Color.from(colorInformation: appearance.backgroundColor, for: colorScheme)
         let textColor = Color.from(colorInformation: appearance.textColor, for: colorScheme)
 
@@ -70,17 +71,31 @@ struct NoSubscriptionsView: View {
                     showRestoreAlert = true
                 }
                 .restorePurchasesAlert(isPresented: $showRestoreAlert)
-                .buttonStyle(ManageSubscriptionsButtonStyle())
-
-                Button(localization.commonLocalizedString(for: .cancel)) {
-                    dismiss()
-                }
-                .padding(.vertical)
+                .buttonStyle(ProminentButtonStyle())
             }
             .padding(.horizontal)
             .applyIf(textColor != nil, apply: { $0.foregroundColor(textColor) })
         }
+        .toolbar {
+            ToolbarItem(placement: .topBarTrailing) {
+                DismissCircleButton {
+                    dismiss()
+                }
+            }
+        }
+
+    }
 
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            NavigationStack {
+                content
+            }
+        } else {
+            NavigationView {
+                content
+            }
+        }
     }
 
 }

diff --git a/RevenueCatUI/CustomerCenter/Views/PromotionalOfferView.swift b/RevenueCatUI/CustomerCenter/Views/PromotionalOfferView.swift
@@ -144,7 +144,7 @@ struct PromoOfferButtonView: View {
                         .font(.subheadline)
                 }
             })
-            .buttonStyle(ManageSubscriptionsButtonStyle())
+            .buttonStyle(ProminentButtonStyle())
             .padding(.horizontal)
         }
     }

diff --git a/RevenueCatUI/CustomerCenter/Views/WrongPlatformView.swift b/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)
@@ -42,7 +47,8 @@ struct WrongPlatformView: View {
         self._store = State(initialValue: store)
     }
 
-    var body: some View {
+    @ViewBuilder
+    var content: some View {
         ZStack {
             if let background = Color.from(colorInformation: appearance.backgroundColor, for: colorScheme) {
                 background.edgesIgnoringSafeArea(.all)
@@ -57,10 +63,17 @@ struct WrongPlatformView: View {
                     description: platformInstructions.1,
                     systemImage: "exclamationmark.triangle.fill"
                 )
-
             }
+            .padding(.horizontal)
             .applyIf(textColor != nil, apply: { $0.foregroundColor(textColor) })
         }
+        .toolbar {
+            ToolbarItem(placement: .topBarTrailing) {
+                DismissCircleButton {
+                    dismiss()
+                }
+            }
+        }
         .task {
             if store == nil {
                 if let customerInfo = try? await Purchases.shared.customerInfo(),
@@ -71,6 +84,18 @@ struct WrongPlatformView: View {
         }
     }
 
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            NavigationStack {
+                content
+            }
+        } else {
+            NavigationView {
+                content
+            }
+        }
+    }
+
     private func humanReadablePlatformName(store: Store) -> String {
         switch store {
         case .appStore, .macAppStore: