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
@@ -1,146 +0,0 @@
|
|||||||
{
|
|
||||||
"identifier" : "D8F3A2B1-4E5C-6D7F-8A9B-0C1D2E3F4A5B",
|
|
||||||
"nonRenewingSubscriptions" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"products" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"settings" : {
|
|
||||||
"_applicationInternalID" : "6741234567",
|
|
||||||
"_developerTeamID" : "V3PF3M6B6U",
|
|
||||||
"_failTransactionsEnabled" : false,
|
|
||||||
"_locale" : "en_US",
|
|
||||||
"_storefront" : "USA",
|
|
||||||
"_storeKitErrors" : [
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Load Products"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Purchase"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Verification"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "App Store Sync"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Subscription Status"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "App Transaction"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Manage Subscriptions Sheet"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Refund Request Sheet"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"current" : null,
|
|
||||||
"enabled" : false,
|
|
||||||
"name" : "Offer Code Redeem Sheet"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"subscriptionGroups" : [
|
|
||||||
{
|
|
||||||
"id" : "21514523",
|
|
||||||
"localizations" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"name" : "SportsTime Pro",
|
|
||||||
"subscriptions" : [
|
|
||||||
{
|
|
||||||
"adHocOffers" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"codeOffers" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"displayPrice" : "2.99",
|
|
||||||
"familyShareable" : false,
|
|
||||||
"groupNumber" : 1,
|
|
||||||
"internalID" : "6741234568",
|
|
||||||
"introductoryOffer" : {
|
|
||||||
"displayPrice" : "0.99",
|
|
||||||
"internalID" : "6741234569",
|
|
||||||
"numberOfPeriods" : 1,
|
|
||||||
"paymentMode" : "payAsYouGo",
|
|
||||||
"subscriptionPeriod" : "P1M"
|
|
||||||
},
|
|
||||||
"localizations" : [
|
|
||||||
{
|
|
||||||
"description" : "Unlimited trips, PDF export, and progress tracking",
|
|
||||||
"displayName" : "Monthly",
|
|
||||||
"locale" : "en_US"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"productID" : "com.88oakapps.SportsTime.pro.monthly",
|
|
||||||
"recurringSubscriptionPeriod" : "P1M",
|
|
||||||
"referenceName" : "Pro Monthly",
|
|
||||||
"subscriptionGroupID" : "21514523",
|
|
||||||
"type" : "RecurringSubscription",
|
|
||||||
"winbackOffers" : [
|
|
||||||
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"adHocOffers" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"codeOffers" : [
|
|
||||||
|
|
||||||
],
|
|
||||||
"displayPrice" : "29.99",
|
|
||||||
"familyShareable" : false,
|
|
||||||
"groupNumber" : 1,
|
|
||||||
"internalID" : "6741234570",
|
|
||||||
"introductoryOffer" : {
|
|
||||||
"displayPrice" : "19.99",
|
|
||||||
"internalID" : "6741234571",
|
|
||||||
"numberOfPeriods" : 1,
|
|
||||||
"paymentMode" : "payAsYouGo",
|
|
||||||
"subscriptionPeriod" : "P1Y"
|
|
||||||
},
|
|
||||||
"localizations" : [
|
|
||||||
{
|
|
||||||
"description" : "Unlimited trips, PDF export, and progress tracking - Best Value!",
|
|
||||||
"displayName" : "Annual",
|
|
||||||
"locale" : "en_US"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"productID" : "com.88oakapps.SportsTime.pro.annual2",
|
|
||||||
"recurringSubscriptionPeriod" : "P1Y",
|
|
||||||
"referenceName" : "Pro Annual",
|
|
||||||
"subscriptionGroupID" : "21514523",
|
|
||||||
"type" : "RecurringSubscription",
|
|
||||||
"winbackOffers" : [
|
|
||||||
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"version" : {
|
|
||||||
"major" : 4,
|
|
||||||
"minor" : 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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 {
|
struct OnboardingPaywallView: View {
|
||||||
@Environment(\.colorScheme) private var colorScheme
|
@Environment(\.colorScheme) private var colorScheme
|
||||||
@Binding var isPresented: Bool
|
@Binding var isPresented: Bool
|
||||||
|
|
||||||
@State private var currentPage = 0
|
@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)] = [
|
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)
|
.padding(.bottom, Theme.Spacing.xl)
|
||||||
}
|
}
|
||||||
.background(Theme.backgroundGradient(colorScheme))
|
.background(Theme.backgroundGradient(colorScheme))
|
||||||
.task {
|
|
||||||
await storeManager.loadProducts()
|
|
||||||
selectedProduct = storeManager.annualProduct ?? storeManager.monthlyProduct
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - Feature Page
|
// MARK: - Feature Page
|
||||||
@@ -668,98 +556,8 @@ struct OnboardingPaywallView: View {
|
|||||||
// MARK: - Pricing Page
|
// MARK: - Pricing Page
|
||||||
|
|
||||||
private var pricingPage: some View {
|
private var pricingPage: some View {
|
||||||
ZStack {
|
PaywallView()
|
||||||
// Premium background
|
.storeButton(.hidden, for: .cancellation)
|
||||||
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())
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - Bottom Buttons
|
// MARK: - Bottom Buttons
|
||||||
@@ -781,193 +579,25 @@ struct OnboardingPaywallView: View {
|
|||||||
.foregroundStyle(.white)
|
.foregroundStyle(.white)
|
||||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Skip
|
// Continue free (always visible)
|
||||||
Button {
|
Button {
|
||||||
markOnboardingSeen()
|
markOnboardingSeen()
|
||||||
isPresented = false
|
isPresented = false
|
||||||
} label: {
|
} label: {
|
||||||
Text("Continue with Free")
|
Text("Continue with Free")
|
||||||
.font(.subheadline)
|
.font(.subheadline)
|
||||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
.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))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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() {
|
private func markOnboardingSeen() {
|
||||||
UserDefaults.standard.set(true, forKey: "hasSeenOnboardingPaywall")
|
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 {
|
#Preview {
|
||||||
OnboardingPaywallView(isPresented: .constant(true))
|
OnboardingPaywallView(isPresented: .constant(true))
|
||||||
|
|||||||
@@ -2,307 +2,66 @@
|
|||||||
// PaywallView.swift
|
// PaywallView.swift
|
||||||
// SportsTime
|
// SportsTime
|
||||||
//
|
//
|
||||||
// Full-screen paywall for Pro subscription.
|
// Full-screen paywall for Pro subscription using SubscriptionStoreView.
|
||||||
//
|
//
|
||||||
|
|
||||||
import SwiftUI
|
import SwiftUI
|
||||||
import StoreKit
|
import StoreKit
|
||||||
|
|
||||||
struct PaywallView: View {
|
struct PaywallView: View {
|
||||||
@Environment(\.colorScheme) private var colorScheme
|
|
||||||
@Environment(\.dismiss) private var dismiss
|
@Environment(\.dismiss) private var dismiss
|
||||||
|
@Environment(\.colorScheme) private var colorScheme
|
||||||
@State private var selectedProduct: Product?
|
|
||||||
@State private var isPurchasing = false
|
|
||||||
@State private var errorMessage: String?
|
|
||||||
|
|
||||||
private let storeManager = StoreManager.shared
|
private let storeManager = StoreManager.shared
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
NavigationStack {
|
SubscriptionStoreView(subscriptions: storeManager.products.filter { $0.subscription != nil }) {
|
||||||
ScrollView {
|
VStack(spacing: Theme.Spacing.md) {
|
||||||
VStack(spacing: Theme.Spacing.xl) {
|
Image(systemName: "star.circle.fill")
|
||||||
// Hero
|
.font(.system(size: 60))
|
||||||
heroSection
|
.foregroundStyle(Theme.warmOrange)
|
||||||
|
|
||||||
// Features
|
Text("Upgrade to Pro")
|
||||||
featuresSection
|
.font(.largeTitle.bold())
|
||||||
|
|
||||||
// Pricing
|
|
||||||
pricingSection
|
|
||||||
|
|
||||||
// Error message
|
|
||||||
if let error = errorMessage {
|
|
||||||
Text(error)
|
|
||||||
.font(.subheadline)
|
|
||||||
.foregroundStyle(.red)
|
|
||||||
.multilineTextAlignment(.center)
|
|
||||||
.padding(.horizontal)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Subscribe button
|
|
||||||
subscribeButton
|
|
||||||
|
|
||||||
// Restore purchases
|
|
||||||
restoreButton
|
|
||||||
|
|
||||||
// Legal
|
|
||||||
legalSection
|
|
||||||
}
|
|
||||||
.padding(Theme.Spacing.lg)
|
|
||||||
}
|
|
||||||
.themedBackground()
|
|
||||||
.navigationBarTitleDisplayMode(.inline)
|
|
||||||
.toolbar {
|
|
||||||
ToolbarItem(placement: .cancellationAction) {
|
|
||||||
Button {
|
|
||||||
dismiss()
|
|
||||||
} label: {
|
|
||||||
Image(systemName: "xmark.circle.fill")
|
|
||||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.task {
|
|
||||||
await storeManager.loadProducts()
|
|
||||||
// Default to annual
|
|
||||||
selectedProduct = storeManager.annualProduct ?? storeManager.monthlyProduct
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Hero Section
|
|
||||||
|
|
||||||
private var heroSection: some View {
|
|
||||||
VStack(spacing: Theme.Spacing.md) {
|
|
||||||
Image(systemName: "star.circle.fill")
|
|
||||||
.font(.system(size: 60))
|
|
||||||
.foregroundStyle(Theme.warmOrange)
|
|
||||||
|
|
||||||
Text("Upgrade to Pro")
|
|
||||||
.font(.largeTitle.bold())
|
|
||||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
||||||
|
|
||||||
Text("Unlock the full SportsTime experience")
|
|
||||||
.font(.body)
|
|
||||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
|
||||||
.multilineTextAlignment(.center)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Features Section
|
|
||||||
|
|
||||||
private var featuresSection: some View {
|
|
||||||
VStack(spacing: Theme.Spacing.md) {
|
|
||||||
ForEach(ProFeature.allCases) { feature in
|
|
||||||
HStack(spacing: Theme.Spacing.md) {
|
|
||||||
ZStack {
|
|
||||||
Circle()
|
|
||||||
.fill(Theme.warmOrange.opacity(0.15))
|
|
||||||
.frame(width: 44, height: 44)
|
|
||||||
|
|
||||||
Image(systemName: feature.icon)
|
|
||||||
.foregroundStyle(Theme.warmOrange)
|
|
||||||
}
|
|
||||||
|
|
||||||
VStack(alignment: .leading, spacing: 4) {
|
|
||||||
Text(feature.displayName)
|
|
||||||
.font(.body)
|
|
||||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
|
||||||
|
|
||||||
Text(feature.description)
|
|
||||||
.font(.subheadline)
|
|
||||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
|
||||||
}
|
|
||||||
|
|
||||||
Spacer()
|
|
||||||
|
|
||||||
Image(systemName: "checkmark.circle.fill")
|
|
||||||
.foregroundStyle(.green)
|
|
||||||
}
|
|
||||||
.padding(Theme.Spacing.md)
|
|
||||||
.background(Theme.cardBackground(colorScheme))
|
|
||||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Pricing Section
|
|
||||||
|
|
||||||
private var pricingSection: some View {
|
|
||||||
VStack(spacing: Theme.Spacing.md) {
|
|
||||||
if storeManager.isLoading {
|
|
||||||
ProgressView()
|
|
||||||
.padding()
|
|
||||||
} else {
|
|
||||||
HStack(spacing: Theme.Spacing.md) {
|
|
||||||
// Monthly option
|
|
||||||
if let monthly = storeManager.monthlyProduct {
|
|
||||||
PricingOptionCard(
|
|
||||||
product: monthly,
|
|
||||||
title: "Monthly",
|
|
||||||
isSelected: selectedProduct?.id == monthly.id,
|
|
||||||
savingsText: nil
|
|
||||||
) {
|
|
||||||
selectedProduct = monthly
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Annual option
|
|
||||||
if let annual = storeManager.annualProduct {
|
|
||||||
PricingOptionCard(
|
|
||||||
product: annual,
|
|
||||||
title: "Annual",
|
|
||||||
isSelected: selectedProduct?.id == annual.id,
|
|
||||||
savingsText: "Save 17%"
|
|
||||||
) {
|
|
||||||
selectedProduct = annual
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Subscribe Button
|
|
||||||
|
|
||||||
private var subscribeButton: some View {
|
|
||||||
Button {
|
|
||||||
Task {
|
|
||||||
await purchase()
|
|
||||||
}
|
|
||||||
} label: {
|
|
||||||
HStack {
|
|
||||||
if isPurchasing {
|
|
||||||
ProgressView()
|
|
||||||
.tint(.white)
|
|
||||||
} else {
|
|
||||||
Text("Subscribe Now")
|
|
||||||
.fontWeight(.semibold)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.frame(maxWidth: .infinity)
|
|
||||||
.padding(Theme.Spacing.md)
|
|
||||||
.background(Theme.warmOrange)
|
|
||||||
.foregroundStyle(.white)
|
|
||||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
|
||||||
}
|
|
||||||
.disabled(selectedProduct == nil || isPurchasing)
|
|
||||||
.opacity(selectedProduct == nil ? 0.5 : 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Restore Button
|
|
||||||
|
|
||||||
private var restoreButton: some View {
|
|
||||||
Button {
|
|
||||||
Task {
|
|
||||||
await storeManager.restorePurchases()
|
|
||||||
if storeManager.isPro {
|
|
||||||
dismiss()
|
|
||||||
} else {
|
|
||||||
errorMessage = "No active subscription found."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} label: {
|
|
||||||
Text("Restore Purchases")
|
|
||||||
.font(.subheadline)
|
|
||||||
.foregroundStyle(Theme.warmOrange)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Legal Section
|
|
||||||
|
|
||||||
private var legalSection: some View {
|
|
||||||
VStack(spacing: Theme.Spacing.xs) {
|
|
||||||
Text("Subscriptions automatically renew unless cancelled at least 24 hours before the end of the current period.")
|
|
||||||
.font(.caption)
|
|
||||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
|
||||||
.multilineTextAlignment(.center)
|
|
||||||
|
|
||||||
HStack(spacing: Theme.Spacing.md) {
|
|
||||||
Link("Terms", destination: URL(string: "https://88oakapps.com/terms")!)
|
|
||||||
Link("Privacy", destination: URL(string: "https://88oakapps.com/privacy")!)
|
|
||||||
}
|
|
||||||
.font(.caption)
|
|
||||||
.foregroundStyle(Theme.warmOrange)
|
|
||||||
}
|
|
||||||
.padding(.top, Theme.Spacing.md)
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Actions
|
|
||||||
|
|
||||||
private func purchase() async {
|
|
||||||
guard let product = selectedProduct else { return }
|
|
||||||
|
|
||||||
isPurchasing = true
|
|
||||||
errorMessage = nil
|
|
||||||
|
|
||||||
do {
|
|
||||||
try await storeManager.purchase(product)
|
|
||||||
dismiss()
|
|
||||||
} catch StoreError.userCancelled {
|
|
||||||
// User cancelled, no error message
|
|
||||||
} catch {
|
|
||||||
errorMessage = error.localizedDescription
|
|
||||||
}
|
|
||||||
|
|
||||||
isPurchasing = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Pricing Option Card
|
|
||||||
|
|
||||||
struct PricingOptionCard: View {
|
|
||||||
let product: Product
|
|
||||||
let title: String
|
|
||||||
let isSelected: Bool
|
|
||||||
let savingsText: String?
|
|
||||||
let onSelect: () -> Void
|
|
||||||
|
|
||||||
@Environment(\.colorScheme) private var colorScheme
|
|
||||||
|
|
||||||
var body: some View {
|
|
||||||
Button(action: onSelect) {
|
|
||||||
VStack(spacing: Theme.Spacing.sm) {
|
|
||||||
if let savings = savingsText {
|
|
||||||
Text(savings)
|
|
||||||
.font(.caption.bold())
|
|
||||||
.foregroundStyle(.white)
|
|
||||||
.padding(.horizontal, 8)
|
|
||||||
.padding(.vertical, 4)
|
|
||||||
.background(Theme.warmOrange, in: Capsule())
|
|
||||||
}
|
|
||||||
|
|
||||||
Text(title)
|
|
||||||
.font(.subheadline)
|
|
||||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
|
||||||
|
|
||||||
Text(product.displayPrice)
|
|
||||||
.font(.title2.bold())
|
|
||||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||||
|
|
||||||
Text(pricePerMonth)
|
Text("Unlock the full SportsTime experience")
|
||||||
.font(.caption)
|
.font(.body)
|
||||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||||
|
|
||||||
|
HStack(spacing: Theme.Spacing.lg) {
|
||||||
|
featurePill(icon: "infinity", text: "Unlimited Trips")
|
||||||
|
featurePill(icon: "doc.fill", text: "PDF Export")
|
||||||
|
featurePill(icon: "trophy.fill", text: "Progress")
|
||||||
|
}
|
||||||
|
.padding(.top, Theme.Spacing.sm)
|
||||||
}
|
}
|
||||||
.frame(maxWidth: .infinity)
|
|
||||||
.padding(Theme.Spacing.lg)
|
.padding(Theme.Spacing.lg)
|
||||||
.background(Theme.cardBackground(colorScheme))
|
}
|
||||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
.storeButton(.visible, for: .restorePurchases)
|
||||||
.overlay {
|
.subscriptionStoreControlStyle(.prominentPicker)
|
||||||
RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
|
.subscriptionStoreButtonLabel(.displayName.multiline)
|
||||||
.stroke(isSelected ? Theme.warmOrange : Theme.surfaceGlow(colorScheme), lineWidth: isSelected ? 2 : 1)
|
.onInAppPurchaseCompletion { _, result in
|
||||||
|
if case .success(.success) = result {
|
||||||
|
dismiss()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buttonStyle(.plain)
|
.task {
|
||||||
|
await storeManager.loadProducts()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private var pricePerMonth: String {
|
private func featurePill(icon: String, text: String) -> some View {
|
||||||
if product.id.contains("annual") {
|
HStack(spacing: 4) {
|
||||||
let monthly = product.price / 12
|
Image(systemName: icon)
|
||||||
return "\(monthly.formatted(.currency(code: product.priceFormatStyle.currencyCode)))/mo"
|
.font(.system(size: 11))
|
||||||
|
Text(text)
|
||||||
|
.font(.caption2)
|
||||||
}
|
}
|
||||||
return "per month"
|
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||||
|
.padding(.horizontal, 10)
|
||||||
|
.padding(.vertical, 6)
|
||||||
|
.background(Theme.warmOrange.opacity(0.08), in: Capsule())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user