feat(store): add In-App Purchase system with Pro subscription
Implement freemium model with StoreKit 2: - StoreManager singleton for purchase/restore/entitlements - ProFeature enum defining gated features - PaywallView and OnboardingPaywallView for upsell UI - ProGate view modifier and ProBadge component Feature gating: - Trip saving: 1 free trip, then requires Pro - PDF export: Pro only with badge indicator - Progress tab: Shows ProLockedView for free users - Settings: Subscription management section Also fixes pre-existing test issues with StadiumVisit and ItineraryOption model signature changes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
71
SportsTime/Features/Paywall/ViewModifiers/ProGate.swift
Normal file
71
SportsTime/Features/Paywall/ViewModifiers/ProGate.swift
Normal file
@@ -0,0 +1,71 @@
|
||||
//
|
||||
// ProGate.swift
|
||||
// SportsTime
|
||||
//
|
||||
// View modifier that gates Pro-only features.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct ProGateModifier: ViewModifier {
|
||||
let feature: ProFeature
|
||||
|
||||
@State private var showPaywall = false
|
||||
|
||||
func body(content: Content) -> some View {
|
||||
content
|
||||
.onTapGesture {
|
||||
if !StoreManager.shared.isPro {
|
||||
showPaywall = true
|
||||
}
|
||||
}
|
||||
.allowsHitTesting(!StoreManager.shared.isPro ? true : true)
|
||||
.overlay {
|
||||
if !StoreManager.shared.isPro {
|
||||
Color.clear
|
||||
.contentShape(Rectangle())
|
||||
.onTapGesture {
|
||||
showPaywall = true
|
||||
}
|
||||
}
|
||||
}
|
||||
.sheet(isPresented: $showPaywall) {
|
||||
PaywallView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Modifier for buttons that should show paywall when tapped by free users
|
||||
struct ProGateButtonModifier: ViewModifier {
|
||||
let feature: ProFeature
|
||||
let action: () -> Void
|
||||
|
||||
@State private var showPaywall = false
|
||||
|
||||
func body(content: Content) -> some View {
|
||||
Button {
|
||||
if StoreManager.shared.isPro {
|
||||
action()
|
||||
} else {
|
||||
showPaywall = true
|
||||
}
|
||||
} label: {
|
||||
content
|
||||
}
|
||||
.sheet(isPresented: $showPaywall) {
|
||||
PaywallView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension View {
|
||||
/// Gates entire view - tapping shows paywall if not Pro
|
||||
func proGate(feature: ProFeature) -> some View {
|
||||
modifier(ProGateModifier(feature: feature))
|
||||
}
|
||||
|
||||
/// Gates a button action - shows paywall instead of performing action if not Pro
|
||||
func proGateButton(feature: ProFeature, action: @escaping () -> Void) -> some View {
|
||||
modifier(ProGateButtonModifier(feature: feature, action: action))
|
||||
}
|
||||
}
|
||||
306
SportsTime/Features/Paywall/Views/OnboardingPaywallView.swift
Normal file
306
SportsTime/Features/Paywall/Views/OnboardingPaywallView.swift
Normal file
@@ -0,0 +1,306 @@
|
||||
//
|
||||
// OnboardingPaywallView.swift
|
||||
// SportsTime
|
||||
//
|
||||
// First-launch upsell with feature pages.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import StoreKit
|
||||
|
||||
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, description: String, color: Color)] = [
|
||||
("suitcase.fill", "Unlimited Trips", "Plan as many road trips as you want. Never lose your itineraries.", Theme.warmOrange),
|
||||
("doc.fill", "Export & Share", "Generate beautiful PDF itineraries to share with friends.", Theme.routeGold),
|
||||
("trophy.fill", "Track Your Journey", "Log stadium visits, earn badges, complete your bucket list.", .green)
|
||||
]
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
// Page content
|
||||
TabView(selection: $currentPage) {
|
||||
ForEach(0..<pages.count, id: \.self) { index in
|
||||
featurePage(index: index)
|
||||
.tag(index)
|
||||
}
|
||||
|
||||
// Pricing page
|
||||
pricingPage
|
||||
.tag(pages.count)
|
||||
}
|
||||
.tabViewStyle(.page(indexDisplayMode: .never))
|
||||
.animation(.easeInOut, value: currentPage)
|
||||
|
||||
// Page indicator
|
||||
HStack(spacing: 8) {
|
||||
ForEach(0...pages.count, id: \.self) { index in
|
||||
Circle()
|
||||
.fill(currentPage == index ? Theme.warmOrange : Theme.textMuted(colorScheme))
|
||||
.frame(width: 8, height: 8)
|
||||
}
|
||||
}
|
||||
.padding(.bottom, Theme.Spacing.lg)
|
||||
|
||||
// Bottom buttons
|
||||
bottomButtons
|
||||
.padding(.horizontal, Theme.Spacing.lg)
|
||||
.padding(.bottom, Theme.Spacing.xl)
|
||||
}
|
||||
.background(Theme.backgroundGradient(colorScheme))
|
||||
.task {
|
||||
await storeManager.loadProducts()
|
||||
selectedProduct = storeManager.annualProduct ?? storeManager.monthlyProduct
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Feature Page
|
||||
|
||||
private func featurePage(index: Int) -> some View {
|
||||
let page = pages[index]
|
||||
|
||||
return VStack(spacing: Theme.Spacing.xl) {
|
||||
Spacer()
|
||||
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(page.color.opacity(0.15))
|
||||
.frame(width: 120, height: 120)
|
||||
|
||||
Image(systemName: page.icon)
|
||||
.font(.system(size: 50))
|
||||
.foregroundStyle(page.color)
|
||||
}
|
||||
|
||||
VStack(spacing: Theme.Spacing.md) {
|
||||
Text(page.title)
|
||||
.font(.title.bold())
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
Text(page.description)
|
||||
.font(.body)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.horizontal, Theme.Spacing.xl)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Pricing Page
|
||||
|
||||
private var pricingPage: some View {
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
Spacer()
|
||||
|
||||
Text("Choose Your Plan")
|
||||
.font(.title.bold())
|
||||
.foregroundStyle(Theme.textPrimary(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)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Bottom Buttons
|
||||
|
||||
private var bottomButtons: some View {
|
||||
VStack(spacing: Theme.Spacing.md) {
|
||||
if currentPage < pages.count {
|
||||
// Next button
|
||||
Button {
|
||||
withAnimation {
|
||||
currentPage += 1
|
||||
}
|
||||
} label: {
|
||||
Text("Next")
|
||||
.fontWeight(.semibold)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(Theme.Spacing.md)
|
||||
.background(Theme.warmOrange)
|
||||
.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))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
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())
|
||||
}
|
||||
}
|
||||
|
||||
Text(subtitle)
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
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))
|
||||
}
|
||||
311
SportsTime/Features/Paywall/Views/PaywallView.swift
Normal file
311
SportsTime/Features/Paywall/Views/PaywallView.swift
Normal file
@@ -0,0 +1,311 @@
|
||||
//
|
||||
// PaywallView.swift
|
||||
// SportsTime
|
||||
//
|
||||
// Full-screen paywall for Pro subscription.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import StoreKit
|
||||
|
||||
struct PaywallView: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
|
||||
@State private var selectedProduct: Product?
|
||||
@State private var isPurchasing = false
|
||||
@State private var errorMessage: String?
|
||||
|
||||
private let storeManager = StoreManager.shared
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ScrollView {
|
||||
VStack(spacing: Theme.Spacing.xl) {
|
||||
// Hero
|
||||
heroSection
|
||||
|
||||
// Features
|
||||
featuresSection
|
||||
|
||||
// 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))
|
||||
|
||||
Text(pricePerMonth)
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.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)
|
||||
}
|
||||
|
||||
private var pricePerMonth: String {
|
||||
if product.id.contains("annual") {
|
||||
let monthly = product.price / 12
|
||||
return "\(monthly.formatted(.currency(code: product.priceFormatStyle.currencyCode ?? "USD")))/mo"
|
||||
}
|
||||
return "per month"
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
PaywallView()
|
||||
}
|
||||
46
SportsTime/Features/Paywall/Views/ProBadge.swift
Normal file
46
SportsTime/Features/Paywall/Views/ProBadge.swift
Normal file
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// ProBadge.swift
|
||||
// SportsTime
|
||||
//
|
||||
// Small "PRO" badge indicator for locked features.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct ProBadge: View {
|
||||
var body: some View {
|
||||
Text("PRO")
|
||||
.font(.caption2.bold())
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Theme.warmOrange, in: Capsule())
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - View Modifier
|
||||
|
||||
extension View {
|
||||
/// Adds a small PRO badge overlay to indicate locked feature
|
||||
func proBadge(alignment: Alignment = .topTrailing) -> some View {
|
||||
overlay(alignment: alignment) {
|
||||
if !StoreManager.shared.isPro {
|
||||
ProBadge()
|
||||
.padding(4)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack(spacing: 20) {
|
||||
ProBadge()
|
||||
|
||||
// Example usage
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(.blue.opacity(0.2))
|
||||
.frame(width: 100, height: 60)
|
||||
.proBadge()
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
Reference in New Issue
Block a user