Improve promotional offer button when pressed (#4342)

RevenueCat · Oct 7, 2024 · 7f226d6 · 7f226d6
1 parent 499ebe6
commit 7f226d6
Showing 1 changed file with 29 additions and 13 deletions.
diff --git a/RevenueCatUI/CustomerCenter/Views/PromotionalOfferView.swift b/RevenueCatUI/CustomerCenter/Views/PromotionalOfferView.swift
@@ -35,6 +35,7 @@ struct PromotionalOfferView: View {
     private var appearance: CustomerCenterConfigData.Appearance
     @Environment(\.colorScheme)
     private var colorScheme
+    @State private var isLoading: Bool = false
 
     init(promotionalOffer: PromotionalOffer,
          product: StoreProduct,
@@ -60,7 +61,9 @@ struct PromotionalOfferView: View {
 
                     Spacer()
 
-                    PromoOfferButtonView(viewModel: self.viewModel, appearance: self.appearance)
+                    PromoOfferButtonView(isLoading: $isLoading,
+                                         viewModel: self.viewModel,
+                                         appearance: self.appearance)
 
                     Button {
                         dismiss()
@@ -117,6 +120,8 @@ struct PromotionalOfferHeaderView: View {
 @available(watchOS, unavailable)
 struct PromoOfferButtonView: View {
 
+    @Binding var isLoading: Bool
+
     @Environment(\.locale)
     private var locale
 
@@ -131,24 +136,35 @@ struct PromoOfferButtonView: View {
             let mainTitle = discount.localizedPricePerPeriodByPaymentMode(.current)
             let localizedProductPricePerPeriod = product.localizedPricePerPeriod(.current)
 
-            Button(action: {
-                Task {
-                    await viewModel.purchasePromo()
+            AsyncButton {
+                withAnimation(.easeInOut(duration: 0.3)) {
+                    isLoading = true
+                }
+                await viewModel.purchasePromo()
+                withAnimation(.easeInOut(duration: 0.3)) {
+                    isLoading = false
                 }
-            }, label: {
-                VStack {
-                    Text(mainTitle)
-                        .font(.headline)
+            } label: {
+                if isLoading {
+                    TintedProgressView()
+                } else {
+                    VStack {
+                        Text(mainTitle)
+                            .font(.headline)
 
-                    let format = Localization.localizedBundle(self.locale)
-                        .localizedString(forKey: "then_price_per_period", value: "then %@", table: nil)
+                        let format = Localization.localizedBundle(self.locale)
+                            .localizedString(forKey: "then_price_per_period", value: "then %@", table: nil)
 
-                    Text(String(format: format, localizedProductPricePerPeriod))
-                        .font(.subheadline)
+                        Text(String(format: format, localizedProductPricePerPeriod))
+                            .font(.subheadline)
+                    }
                 }
-            })
+            }
             .buttonStyle(ProminentButtonStyle())
             .padding(.horizontal)
+            .disabled(isLoading)
+            .opacity(isLoading ? 0.5 : 1)
+            .animation(.easeInOut(duration: 0.3), value: isLoading)
         }
     }