feat: replace custom paywalls with SubscriptionStoreView
Use Apple's SubscriptionStoreView for subscription UI instead of custom pricing cards. Onboarding flow keeps feature pages but embeds PaywallView for the pricing page. Removes ~500 lines of custom pricing UI (PricingOptionCard, OnboardingPricingRow, PricingBackground, SportsIconWithGlow). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -400,119 +400,11 @@ struct StadiumMapBackground: View {
|
||||
}
|
||||
}
|
||||
|
||||
/// Premium pricing background with sports icons
|
||||
struct PricingBackground: View {
|
||||
@State private var animate = false
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Floating sports icons with glow effects
|
||||
ForEach(0..<12, id: \.self) { index in
|
||||
SportsIconWithGlow(index: index, animate: animate)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
|
||||
animate = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Individual sports icon with random glow/flash animation
|
||||
private struct SportsIconWithGlow: View {
|
||||
let index: Int
|
||||
let animate: Bool
|
||||
@State private var isGlowing = false
|
||||
@State private var glowOpacity: Double = 0
|
||||
|
||||
private let configs: [(x: CGFloat, y: CGFloat, icon: String, rotation: Double, scale: CGFloat)] = [
|
||||
(0.08, 0.1, "football.fill", -20, 0.95),
|
||||
(0.92, 0.12, "basketball.fill", 15, 0.9),
|
||||
(0.05, 0.35, "baseball.fill", 10, 0.85),
|
||||
(0.95, 0.38, "hockey.puck.fill", -12, 0.8),
|
||||
(0.1, 0.55, "soccerball", 8, 0.9),
|
||||
(0.9, 0.52, "figure.run", -8, 0.95),
|
||||
(0.06, 0.75, "sportscourt.fill", 5, 0.85),
|
||||
(0.94, 0.78, "trophy.fill", -15, 0.9),
|
||||
(0.12, 0.92, "ticket.fill", 12, 0.8),
|
||||
(0.88, 0.95, "mappin.circle.fill", -10, 0.85),
|
||||
(0.5, 0.05, "car.fill", 0, 0.8),
|
||||
(0.5, 0.98, "map.fill", 5, 0.85),
|
||||
]
|
||||
|
||||
var body: some View {
|
||||
let config = configs[index]
|
||||
|
||||
GeometryReader { geo in
|
||||
ZStack {
|
||||
// Glow circle behind icon when active
|
||||
Circle()
|
||||
.fill(Theme.warmOrange)
|
||||
.frame(width: 40 * config.scale, height: 40 * config.scale)
|
||||
.blur(radius: 12)
|
||||
.opacity(glowOpacity * 0.4)
|
||||
|
||||
Image(systemName: config.icon)
|
||||
.font(.system(size: 26 * config.scale))
|
||||
.foregroundStyle(Theme.warmOrange.opacity(0.15 + glowOpacity * 0.25))
|
||||
.rotationEffect(.degrees(config.rotation))
|
||||
}
|
||||
.position(x: geo.size.width * config.x, y: geo.size.height * config.y)
|
||||
.scaleEffect(animate ? 1.08 : 0.95)
|
||||
.scaleEffect(1 + glowOpacity * 0.15)
|
||||
.animation(
|
||||
.easeInOut(duration: 2.5 + Double(index) * 0.1)
|
||||
.repeatForever(autoreverses: true)
|
||||
.delay(Double(index) * 0.1),
|
||||
value: animate
|
||||
)
|
||||
}
|
||||
.onAppear {
|
||||
startRandomGlow()
|
||||
}
|
||||
}
|
||||
|
||||
private func startRandomGlow() {
|
||||
// Random delay before first glow (stagger the icons)
|
||||
let initialDelay = Double.random(in: 0.5...3.0)
|
||||
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + initialDelay) {
|
||||
triggerGlow()
|
||||
}
|
||||
}
|
||||
|
||||
private func triggerGlow() {
|
||||
// Glow on
|
||||
withAnimation(.easeIn(duration: 0.3)) {
|
||||
glowOpacity = 1
|
||||
}
|
||||
|
||||
// Glow off after a moment
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
|
||||
withAnimation(.easeOut(duration: 0.6)) {
|
||||
glowOpacity = 0
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule next glow with random interval
|
||||
let nextGlow = Double.random(in: 2.5...6.0)
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + nextGlow) {
|
||||
triggerGlow()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct OnboardingPaywallView: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
@Binding var isPresented: Bool
|
||||
|
||||
@State private var currentPage = 0
|
||||
@State private var selectedProduct: Product?
|
||||
@State private var isPurchasing = false
|
||||
@State private var errorMessage: String?
|
||||
|
||||
private let storeManager = StoreManager.shared
|
||||
|
||||
private let pages: [(icon: String, title: String, subtitle: String, bullets: [String], color: Color)] = [
|
||||
(
|
||||
@@ -585,10 +477,6 @@ struct OnboardingPaywallView: View {
|
||||
.padding(.bottom, Theme.Spacing.xl)
|
||||
}
|
||||
.background(Theme.backgroundGradient(colorScheme))
|
||||
.task {
|
||||
await storeManager.loadProducts()
|
||||
selectedProduct = storeManager.annualProduct ?? storeManager.monthlyProduct
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Feature Page
|
||||
@@ -668,98 +556,8 @@ struct OnboardingPaywallView: View {
|
||||
// MARK: - Pricing Page
|
||||
|
||||
private var pricingPage: some View {
|
||||
ZStack {
|
||||
// Premium background
|
||||
PricingBackground()
|
||||
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
Spacer()
|
||||
|
||||
// Header with crown icon
|
||||
VStack(spacing: Theme.Spacing.sm) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(Theme.warmOrange.opacity(0.15))
|
||||
.frame(width: 70, height: 70)
|
||||
|
||||
Image(systemName: "crown.fill")
|
||||
.font(.system(size: 30))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
}
|
||||
|
||||
Text("Choose Your Plan")
|
||||
.font(.title.bold())
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
Text("Unlock the full SportsTime experience")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
}
|
||||
|
||||
if storeManager.isLoading {
|
||||
ProgressView()
|
||||
} else {
|
||||
VStack(spacing: Theme.Spacing.md) {
|
||||
// Annual (recommended)
|
||||
if let annual = storeManager.annualProduct {
|
||||
OnboardingPricingRow(
|
||||
product: annual,
|
||||
title: "Annual",
|
||||
subtitle: "Best Value - Save 17%",
|
||||
isSelected: selectedProduct?.id == annual.id,
|
||||
isRecommended: true
|
||||
) {
|
||||
selectedProduct = annual
|
||||
}
|
||||
}
|
||||
|
||||
// Monthly
|
||||
if let monthly = storeManager.monthlyProduct {
|
||||
OnboardingPricingRow(
|
||||
product: monthly,
|
||||
title: "Monthly",
|
||||
subtitle: "Flexible billing",
|
||||
isSelected: selectedProduct?.id == monthly.id,
|
||||
isRecommended: false
|
||||
) {
|
||||
selectedProduct = monthly
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, Theme.Spacing.lg)
|
||||
}
|
||||
|
||||
if let error = errorMessage {
|
||||
Text(error)
|
||||
.font(.caption)
|
||||
.foregroundStyle(.red)
|
||||
}
|
||||
|
||||
// Features summary
|
||||
HStack(spacing: Theme.Spacing.lg) {
|
||||
featurePill(icon: "infinity", text: "Unlimited")
|
||||
featurePill(icon: "doc.fill", text: "PDF Export")
|
||||
featurePill(icon: "trophy.fill", text: "Progress")
|
||||
}
|
||||
.padding(.top, Theme.Spacing.md)
|
||||
|
||||
Spacer()
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func featurePill(icon: String, text: String) -> some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 11))
|
||||
Text(text)
|
||||
.font(.caption2)
|
||||
}
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 6)
|
||||
.background(Theme.warmOrange.opacity(0.08), in: Capsule())
|
||||
PaywallView()
|
||||
.storeButton(.hidden, for: .cancellation)
|
||||
}
|
||||
|
||||
// MARK: - Bottom Buttons
|
||||
@@ -781,193 +579,25 @@ struct OnboardingPaywallView: View {
|
||||
.foregroundStyle(.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
||||
}
|
||||
}
|
||||
|
||||
// Skip
|
||||
Button {
|
||||
markOnboardingSeen()
|
||||
isPresented = false
|
||||
} label: {
|
||||
Text("Continue with Free")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
} else {
|
||||
// Subscribe button
|
||||
Button {
|
||||
Task {
|
||||
await purchase()
|
||||
}
|
||||
} label: {
|
||||
HStack {
|
||||
if isPurchasing {
|
||||
ProgressView()
|
||||
.tint(.white)
|
||||
} else {
|
||||
Text("Subscribe")
|
||||
.fontWeight(.semibold)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(Theme.Spacing.md)
|
||||
.background(Theme.warmOrange)
|
||||
.foregroundStyle(.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
||||
}
|
||||
.disabled(selectedProduct == nil || isPurchasing)
|
||||
|
||||
// Continue free
|
||||
Button {
|
||||
markOnboardingSeen()
|
||||
isPresented = false
|
||||
} label: {
|
||||
Text("Continue with Free")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
// Continue free (always visible)
|
||||
Button {
|
||||
markOnboardingSeen()
|
||||
isPresented = false
|
||||
} label: {
|
||||
Text("Continue with Free")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Actions
|
||||
|
||||
private func purchase() async {
|
||||
guard let product = selectedProduct else { return }
|
||||
|
||||
isPurchasing = true
|
||||
errorMessage = nil
|
||||
|
||||
do {
|
||||
try await storeManager.purchase(product)
|
||||
markOnboardingSeen()
|
||||
isPresented = false
|
||||
} catch StoreError.userCancelled {
|
||||
// User cancelled
|
||||
} catch {
|
||||
errorMessage = error.localizedDescription
|
||||
}
|
||||
|
||||
isPurchasing = false
|
||||
}
|
||||
|
||||
private func markOnboardingSeen() {
|
||||
UserDefaults.standard.set(true, forKey: "hasSeenOnboardingPaywall")
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Pricing Row
|
||||
|
||||
struct OnboardingPricingRow: View {
|
||||
let product: Product
|
||||
let title: String
|
||||
let subtitle: String
|
||||
let isSelected: Bool
|
||||
let isRecommended: Bool
|
||||
let onSelect: () -> Void
|
||||
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
/// The introductory offer for this product, if available
|
||||
private var introOffer: Product.SubscriptionOffer? {
|
||||
product.subscription?.introductoryOffer
|
||||
}
|
||||
|
||||
/// Whether this product has an intro offer to display
|
||||
private var hasIntroOffer: Bool {
|
||||
introOffer != nil
|
||||
}
|
||||
|
||||
/// Format the intro offer period (e.g., "1 month", "1 year")
|
||||
private var introPeriodText: String? {
|
||||
guard let offer = introOffer else { return nil }
|
||||
let unit = offer.period.unit
|
||||
let value = offer.period.value
|
||||
|
||||
switch unit {
|
||||
case .day: return value == 1 ? "day" : "\(value) days"
|
||||
case .week: return value == 1 ? "week" : "\(value) weeks"
|
||||
case .month: return value == 1 ? "month" : "\(value) months"
|
||||
case .year: return value == 1 ? "year" : "\(value) years"
|
||||
@unknown default: return nil
|
||||
}
|
||||
}
|
||||
|
||||
/// The regular period text (e.g., "/month", "/year")
|
||||
private var regularPeriodText: String {
|
||||
guard let period = product.subscription?.subscriptionPeriod else { return "" }
|
||||
switch period.unit {
|
||||
case .month: return "/month"
|
||||
case .year: return "/year"
|
||||
case .week: return "/week"
|
||||
case .day: return "/day"
|
||||
@unknown default: return ""
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
Button(action: onSelect) {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
HStack(spacing: Theme.Spacing.xs) {
|
||||
Text(title)
|
||||
.font(.body.bold())
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
if isRecommended {
|
||||
Text("BEST")
|
||||
.font(.caption2.bold())
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Theme.warmOrange, in: Capsule())
|
||||
}
|
||||
}
|
||||
|
||||
if hasIntroOffer, let periodText = introPeriodText {
|
||||
Text("First \(periodText) at intro price")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.green)
|
||||
} else {
|
||||
Text(subtitle)
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
VStack(alignment: .trailing, spacing: 2) {
|
||||
if let offer = introOffer {
|
||||
// Show intro price prominently
|
||||
Text(offer.displayPrice)
|
||||
.font(.title3.bold())
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
// Show regular price as "then $X.XX/period"
|
||||
Text("then \(product.displayPrice)\(regularPeriodText)")
|
||||
.font(.caption2)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
} else {
|
||||
// No intro offer - show regular price
|
||||
Text(product.displayPrice)
|
||||
.font(.title3.bold())
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
}
|
||||
}
|
||||
|
||||
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
|
||||
.foregroundStyle(isSelected ? Theme.warmOrange : Theme.textMuted(colorScheme))
|
||||
}
|
||||
.padding(Theme.Spacing.lg)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
|
||||
.stroke(isSelected ? Theme.warmOrange : Theme.surfaceGlow(colorScheme), lineWidth: isSelected ? 2 : 1)
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
OnboardingPaywallView(isPresented: .constant(true))
|
||||
|
||||
Reference in New Issue
Block a user