PaywallView.swift 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. import AppKit
  2. import StoreKit
  3. import SwiftUI
  4. struct PaywallView: View {
  5. @EnvironmentObject private var subscriptions: SubscriptionManager
  6. @ObservedObject private var paywallConfigService = PaywallConfigService.shared
  7. @Bindable var viewModel: PaywallViewModel
  8. var onDismiss: () -> Void
  9. private var config: PaywallConfig { paywallConfigService.config }
  10. private var isPurchasingSelectedPlan: Bool {
  11. subscriptions.purchasingPlan == viewModel.selectedPlan
  12. }
  13. private var buttonsBusy: Bool {
  14. subscriptions.purchasingPlan != nil || subscriptions.isRestoringPurchases
  15. }
  16. private var isPremium: Bool {
  17. subscriptions.hasPremiumAccess
  18. }
  19. private var hasProductLoadFailure: Bool {
  20. subscriptions.productLoadError != nil && !subscriptions.hasAllProductsLoaded
  21. }
  22. private var isProductReady: Bool {
  23. subscriptions.product(for: viewModel.selectedPlan) != nil
  24. }
  25. private var availablePlans: [PaywallPlan] {
  26. subscriptions.availablePaywallPlans
  27. }
  28. var body: some View {
  29. GeometryReader { geometry in
  30. let metrics = PaywallLayoutMetrics(size: geometry.size)
  31. ZStack {
  32. AppTheme.background
  33. .ignoresSafeArea()
  34. VStack(spacing: metrics.sectionSpacing) {
  35. header(metrics: metrics)
  36. featuresSection(metrics: metrics)
  37. if hasProductLoadFailure {
  38. productsErrorSection(metrics: metrics)
  39. } else {
  40. pricingCards(metrics: metrics)
  41. }
  42. ctaSection(metrics: metrics)
  43. Spacer(minLength: 0)
  44. footerLinks(metrics: metrics)
  45. }
  46. .padding(.horizontal, metrics.horizontalInset)
  47. .padding(.top, metrics.topInset)
  48. .padding(.bottom, metrics.bottomInset)
  49. .frame(width: geometry.size.width, height: geometry.size.height, alignment: .top)
  50. if subscriptions.isLoadingProducts && !subscriptions.hasAllProductsLoaded && !hasProductLoadFailure {
  51. AppTheme.scrim
  52. .ignoresSafeArea()
  53. .allowsHitTesting(false)
  54. ProgressView()
  55. .controlSize(.large)
  56. }
  57. if isPremium {
  58. closeButton(metrics: metrics)
  59. }
  60. }
  61. }
  62. .frame(maxWidth: .infinity, maxHeight: .infinity)
  63. .ignoresSafeArea()
  64. .task {
  65. await subscriptions.ensureEntitlementsResolved()
  66. if !subscriptions.hasAllProductsLoaded, !subscriptions.isLoadingProducts {
  67. await subscriptions.loadProducts(presentLoadingUI: true)
  68. }
  69. await subscriptions.refreshTrialEligibility()
  70. await paywallConfigService.refreshFromRemote()
  71. viewModel.syncSelectedPlan(with: availablePlans)
  72. }
  73. .onChange(of: subscriptions.hasEverPurchasedPremium) { _, _ in
  74. Task { await subscriptions.refreshTrialEligibility() }
  75. viewModel.syncSelectedPlan(with: availablePlans)
  76. if let eligiblePlan = config.trialEligiblePlan,
  77. subscriptions.trialDisplay(for: eligiblePlan) != nil {
  78. viewModel.selectPlan(eligiblePlan)
  79. }
  80. }
  81. .onChange(of: subscriptions.hasPremiumAccess) { _, _ in
  82. Task { await subscriptions.refreshTrialEligibility() }
  83. }
  84. .onChange(of: subscriptions.hasAllProductsLoaded) { _, loaded in
  85. if loaded {
  86. Task { await subscriptions.refreshTrialEligibility() }
  87. }
  88. }
  89. .onChange(of: subscriptions.trialDisplayByPlan) { _, _ in
  90. if let eligiblePlan = config.trialEligiblePlan,
  91. subscriptions.trialDisplay(for: eligiblePlan) != nil {
  92. viewModel.selectPlan(eligiblePlan)
  93. }
  94. }
  95. .onReceive(NotificationCenter.default.publisher(for: .paywallConfigDidUpdate)) { _ in }
  96. .alert(
  97. config.messages.purchaseFailedTitle,
  98. isPresented: Binding(
  99. get: { subscriptions.purchaseError != nil },
  100. set: { presented in
  101. if !presented { subscriptions.purchaseError = nil }
  102. }
  103. )
  104. ) {
  105. Button(config.messages.alertOK, role: .cancel) {}
  106. } message: {
  107. Text(subscriptions.purchaseError.map { config.message(for: $0) } ?? "")
  108. }
  109. }
  110. private func closeButton(metrics: PaywallLayoutMetrics) -> some View {
  111. VStack {
  112. HStack {
  113. Spacer()
  114. Button(action: onDismiss) {
  115. Image(systemName: "xmark")
  116. .font(.system(size: metrics.closeButtonSize, weight: .medium))
  117. .foregroundStyle(AppTheme.textSecondary)
  118. .frame(width: metrics.closeButtonHitArea, height: metrics.closeButtonHitArea)
  119. .background(
  120. Circle()
  121. .fill(AppTheme.cardBackground)
  122. .overlay(
  123. Circle()
  124. .stroke(AppTheme.cardBorder, lineWidth: 1)
  125. )
  126. )
  127. }
  128. .buttonStyle(AppPlainButtonStyle())
  129. .help(config.closeButtonHelp)
  130. }
  131. Spacer()
  132. }
  133. .padding(.trailing, metrics.horizontalInset * 0.55)
  134. .padding(.top, metrics.topInset * 0.28)
  135. }
  136. private func header(metrics: PaywallLayoutMetrics) -> some View {
  137. VStack(spacing: metrics.headerSpacing) {
  138. Text(config.rightTitle)
  139. .font(.system(size: metrics.titleFontSize, weight: .bold))
  140. .foregroundStyle(AppTheme.textPrimary)
  141. Text(config.rightSubtitle)
  142. .font(.system(size: metrics.subtitleFontSize))
  143. .foregroundStyle(AppTheme.textSecondary)
  144. .multilineTextAlignment(.center)
  145. .frame(maxWidth: metrics.subtitleMaxWidth)
  146. }
  147. .frame(maxWidth: .infinity)
  148. }
  149. private func featuresSection(metrics: PaywallLayoutMetrics) -> some View {
  150. VStack(alignment: .leading, spacing: metrics.featureSectionSpacing) {
  151. Text(config.leftPanelTitle)
  152. .font(.system(size: metrics.sectionTitleFontSize, weight: .semibold))
  153. .foregroundStyle(AppTheme.textPrimary)
  154. LazyVGrid(columns: metrics.featureColumns, alignment: .leading, spacing: metrics.featureRowSpacing) {
  155. ForEach(Array(config.features.enumerated()), id: \.offset) { _, feature in
  156. PaywallFeatureRow(title: feature, metrics: metrics)
  157. }
  158. }
  159. }
  160. .frame(maxWidth: .infinity, alignment: .leading)
  161. }
  162. private func productsErrorSection(metrics: PaywallLayoutMetrics) -> some View {
  163. VStack(spacing: metrics.ctaSpacing) {
  164. Text(subscriptions.productLoadError ?? config.messages.plansLoadFailed)
  165. .font(.system(size: metrics.footerNoteFontSize))
  166. .foregroundStyle(AppTheme.textSecondary)
  167. .multilineTextAlignment(.center)
  168. Button(subscriptions.isLoadingProducts ? config.messages.retrying : config.messages.retry) {
  169. Task { await subscriptions.loadProducts(presentLoadingUI: true) }
  170. }
  171. .buttonStyle(AppTextLinkButtonStyle())
  172. .font(.system(size: metrics.footerLinkFontSize))
  173. .foregroundStyle(AppTheme.textSecondary)
  174. .disabled(subscriptions.isLoadingProducts)
  175. }
  176. .frame(maxWidth: .infinity, minHeight: metrics.cardMinHeight)
  177. }
  178. private func pricingCards(metrics: PaywallLayoutMetrics) -> some View {
  179. HStack(alignment: .top, spacing: metrics.cardSpacing) {
  180. ForEach(availablePlans) { plan in
  181. PaywallPricingCard(
  182. plan: plan,
  183. config: config,
  184. product: subscriptions.product(for: plan),
  185. trial: subscriptions.trialDisplay(for: plan),
  186. isSelected: viewModel.selectedPlan == plan,
  187. metrics: metrics
  188. ) {
  189. viewModel.selectPlan(plan)
  190. subscriptions.purchaseError = nil
  191. }
  192. }
  193. }
  194. .frame(maxWidth: .infinity)
  195. }
  196. private func ctaSection(metrics: PaywallLayoutMetrics) -> some View {
  197. let selectedProduct = subscriptions.product(for: viewModel.selectedPlan)
  198. let selectedTrial = subscriptions.trialDisplay(for: viewModel.selectedPlan)
  199. let ctaDisabled = buttonsBusy || subscriptions.isLoadingProducts || !isProductReady || hasProductLoadFailure
  200. return VStack(spacing: metrics.ctaSpacing) {
  201. Text(
  202. viewModel.selectedPlan.localizedRenewalDisclosure(
  203. from: selectedProduct,
  204. config: config,
  205. trial: selectedTrial
  206. )
  207. )
  208. .font(.system(size: metrics.footerNoteFontSize))
  209. .foregroundStyle(AppTheme.textTertiary)
  210. .multilineTextAlignment(.center)
  211. Button {
  212. Task {
  213. let purchased = await subscriptions.purchase(viewModel.selectedPlan)
  214. if purchased {
  215. onDismiss()
  216. }
  217. }
  218. } label: {
  219. HStack(spacing: 8) {
  220. if isPurchasingSelectedPlan {
  221. ProgressView()
  222. .controlSize(.small)
  223. .tint(Color(hex: 0x0B0E14))
  224. }
  225. Text(
  226. viewModel.selectedPlan.localizedCTATitle(
  227. from: selectedProduct,
  228. config: config,
  229. trial: selectedTrial
  230. )
  231. )
  232. .font(.system(size: metrics.ctaFontSize, weight: .bold))
  233. .foregroundStyle(Color(hex: 0x0B0E14))
  234. }
  235. .frame(maxWidth: .infinity)
  236. .padding(.vertical, metrics.ctaVerticalPadding)
  237. .background(
  238. LinearGradient(
  239. colors: [AppTheme.accentPurpleLight, AppTheme.accentTeal],
  240. startPoint: .leading,
  241. endPoint: .trailing
  242. )
  243. )
  244. .clipShape(RoundedRectangle(cornerRadius: metrics.cornerRadius))
  245. }
  246. .buttonStyle(AppPrimaryButtonStyle())
  247. .disabled(ctaDisabled)
  248. .opacity(ctaDisabled ? 0.7 : 1)
  249. HStack(spacing: 6) {
  250. Image(systemName: "lock.fill")
  251. .font(.system(size: metrics.footerNoteFontSize))
  252. Text(config.securePaymentNote)
  253. .font(.system(size: metrics.footerNoteFontSize))
  254. }
  255. .foregroundStyle(AppTheme.textTertiary)
  256. }
  257. }
  258. private func footerLinks(metrics: PaywallLayoutMetrics) -> some View {
  259. HStack(spacing: 0) {
  260. if !isPremium {
  261. footerLink(config.footer.continueFree, metrics: metrics) {
  262. onDismiss()
  263. }
  264. Spacer(minLength: metrics.footerLinkSpacing)
  265. } else if subscriptions.hasActiveSubscription {
  266. footerLink(config.footer.manageSubscription, metrics: metrics) {
  267. subscriptions.openSubscriptionManagement()
  268. }
  269. Spacer(minLength: metrics.footerLinkSpacing)
  270. }
  271. footerLink(
  272. subscriptions.isRestoringPurchases ? config.messages.retrying : config.footer.restorePurchase,
  273. metrics: metrics
  274. ) {
  275. Task {
  276. await subscriptions.restorePurchases()
  277. if subscriptions.hasPremiumAccess {
  278. onDismiss()
  279. }
  280. }
  281. }
  282. .disabled(subscriptions.isRestoringPurchases)
  283. Spacer(minLength: metrics.footerLinkSpacing)
  284. footerLink(config.footer.privacyPolicy, metrics: metrics) {
  285. openExternalLink(config.urls.privacy)
  286. }
  287. Spacer(minLength: metrics.footerLinkSpacing)
  288. footerLink(config.footer.support, metrics: metrics) {
  289. openExternalLink(config.urls.support)
  290. }
  291. Spacer(minLength: metrics.footerLinkSpacing)
  292. footerLink(config.footer.termsOfService, metrics: metrics) {
  293. openExternalLink(config.urls.terms)
  294. }
  295. }
  296. .padding(.horizontal, metrics.footerLinksHorizontalInset)
  297. .frame(maxWidth: .infinity)
  298. }
  299. private func openExternalLink(_ urlString: String) {
  300. guard let url = URL(string: urlString) else { return }
  301. NSWorkspace.shared.open(url)
  302. }
  303. private func footerLink(_ title: String, metrics: PaywallLayoutMetrics, action: @escaping () -> Void) -> some View {
  304. Button(title, action: action)
  305. .buttonStyle(AppTextLinkButtonStyle())
  306. .font(.system(size: metrics.footerLinkFontSize))
  307. .foregroundStyle(AppTheme.textSecondary)
  308. .lineLimit(1)
  309. .minimumScaleFactor(0.8)
  310. }
  311. }
  312. // MARK: - Layout Metrics
  313. private struct PaywallLayoutMetrics {
  314. let size: CGSize
  315. var horizontalInset: CGFloat { size.width * 0.06 }
  316. var topInset: CGFloat { size.height * 0.11 }
  317. var bottomInset: CGFloat { size.height * 0.05 }
  318. var sectionSpacing: CGFloat { size.height * 0.04 }
  319. var headerSpacing: CGFloat { size.height * 0.012 }
  320. var featureSectionSpacing: CGFloat { size.height * 0.018 }
  321. var featureRowSpacing: CGFloat { size.height * 0.016 }
  322. var cardSpacing: CGFloat { size.width * 0.018 }
  323. var ctaSpacing: CGFloat { size.height * 0.014 }
  324. var footerLinkSpacing: CGFloat { size.width * 0.018 }
  325. var footerLinksHorizontalInset: CGFloat { size.width * 0.035 }
  326. var titleFontSize: CGFloat { clamp(size.height * 0.043, min: 22, max: 36) }
  327. var subtitleFontSize: CGFloat { clamp(size.height * 0.02, min: 12, max: 16) }
  328. var sectionTitleFontSize: CGFloat { clamp(size.height * 0.018, min: 11, max: 14) }
  329. var featureFontSize: CGFloat { clamp(size.height * 0.017, min: 10, max: 13) }
  330. var ctaFontSize: CGFloat { clamp(size.height * 0.022, min: 13, max: 16) }
  331. var footerNoteFontSize: CGFloat { clamp(size.height * 0.015, min: 9, max: 12) }
  332. var footerLinkFontSize: CGFloat { clamp(size.height * 0.015, min: 9, max: 12) }
  333. var subtitleMaxWidth: CGFloat { size.width * 0.55 }
  334. var cardMinHeight: CGFloat { size.height * 0.32 }
  335. var cardPadding: CGFloat { size.width * 0.014 }
  336. var cornerRadius: CGFloat { clamp(size.height * 0.014, min: 8, max: 12) }
  337. var ctaVerticalPadding: CGFloat { size.height * 0.022 }
  338. var closeButtonSize: CGFloat { clamp(size.height * 0.016, min: 10, max: 14) }
  339. var closeButtonHitArea: CGFloat { clamp(size.height * 0.038, min: 28, max: 36) }
  340. var featureColumns: [GridItem] {
  341. [
  342. GridItem(.flexible(), spacing: featureRowSpacing),
  343. GridItem(.flexible(), spacing: featureRowSpacing),
  344. GridItem(.flexible(), spacing: featureRowSpacing),
  345. ]
  346. }
  347. private func clamp(_ value: CGFloat, min: CGFloat, max: CGFloat) -> CGFloat {
  348. Swift.min(Swift.max(value, min), max)
  349. }
  350. }
  351. // MARK: - Components
  352. private struct PaywallFeatureRow: View {
  353. let title: String
  354. let metrics: PaywallLayoutMetrics
  355. var body: some View {
  356. HStack(spacing: 8) {
  357. Image(systemName: "checkmark")
  358. .font(.system(size: metrics.featureFontSize * 0.75, weight: .bold))
  359. .foregroundStyle(AppTheme.accentGreen)
  360. .frame(width: metrics.featureFontSize + 4)
  361. Text(title)
  362. .font(.system(size: metrics.featureFontSize))
  363. .foregroundStyle(AppTheme.textSecondary)
  364. .lineLimit(1)
  365. .minimumScaleFactor(0.85)
  366. }
  367. }
  368. }
  369. private struct PaywallPricingCard: View {
  370. let plan: PaywallPlan
  371. let config: PaywallConfig
  372. let product: Product?
  373. let trial: PaywallTrialDisplay?
  374. let isSelected: Bool
  375. let metrics: PaywallLayoutMetrics
  376. let onSelect: () -> Void
  377. private var planCopy: PaywallConfig.PlanCopy {
  378. plan.planCopy(from: config)
  379. }
  380. var body: some View {
  381. Button(action: onSelect) {
  382. VStack(alignment: .leading, spacing: 0) {
  383. Color.clear
  384. .frame(height: metrics.cardPadding * 1.0)
  385. .padding(.bottom, metrics.cardPadding * 0.15)
  386. Text(planCopy.title)
  387. .font(.system(size: metrics.ctaFontSize, weight: .semibold))
  388. .foregroundStyle(AppTheme.textPrimary)
  389. if product != nil {
  390. Text(plan.localizedSubtitle(from: product, config: config, trial: trial))
  391. .font(.system(size: metrics.featureFontSize * 0.85))
  392. .foregroundStyle(AppTheme.textTertiary)
  393. .fixedSize(horizontal: false, vertical: true)
  394. .padding(.top, 2)
  395. }
  396. HStack(alignment: .firstTextBaseline, spacing: 2) {
  397. Text(plan.localizedPrice(from: product, config: config))
  398. .font(.system(size: metrics.titleFontSize * 0.85, weight: .bold))
  399. .foregroundStyle(AppTheme.textPrimary)
  400. if product != nil, let priceSuffix = planCopy.priceSuffix {
  401. Text(priceSuffix)
  402. .font(.system(size: metrics.featureFontSize))
  403. .foregroundStyle(AppTheme.textSecondary)
  404. }
  405. }
  406. .padding(.top, metrics.cardPadding)
  407. .padding(.bottom, metrics.cardPadding * 0.9)
  408. VStack(alignment: .leading, spacing: metrics.featureRowSpacing * 0.7) {
  409. ForEach(planCopy.features, id: \.self) { feature in
  410. HStack(alignment: .top, spacing: 8) {
  411. Image(systemName: "checkmark")
  412. .font(.system(size: metrics.featureFontSize * 0.75, weight: .bold))
  413. .foregroundStyle(AppTheme.accentGreen)
  414. .padding(.top, 2)
  415. Text(feature)
  416. .font(.system(size: metrics.featureFontSize * 0.92))
  417. .foregroundStyle(AppTheme.textSecondary)
  418. .fixedSize(horizontal: false, vertical: true)
  419. .multilineTextAlignment(.leading)
  420. }
  421. }
  422. }
  423. Spacer(minLength: 0)
  424. }
  425. .padding(metrics.cardPadding)
  426. .frame(maxWidth: .infinity, minHeight: metrics.cardMinHeight, alignment: .topLeading)
  427. .background(
  428. RoundedRectangle(cornerRadius: metrics.cornerRadius)
  429. .fill(AppTheme.cardBackground)
  430. )
  431. .overlay(
  432. RoundedRectangle(cornerRadius: metrics.cornerRadius)
  433. .stroke(
  434. isSelected ? AppTheme.accentTeal : AppTheme.cardBorder,
  435. lineWidth: isSelected ? 2 : 1
  436. )
  437. )
  438. .overlay(alignment: .topTrailing) {
  439. if let trial {
  440. cardBadge(trial.badgeText)
  441. } else if let badge = planCopy.badge, plan == .lifetime {
  442. cardBadge(badge)
  443. }
  444. }
  445. }
  446. .buttonStyle(AppPlainButtonStyle())
  447. .hoverCard(cornerRadius: metrics.cornerRadius, isSelected: isSelected)
  448. }
  449. private func cardBadge(_ text: String) -> some View {
  450. Text(text)
  451. .font(.system(size: metrics.featureFontSize * 0.75, weight: .bold))
  452. .foregroundStyle(Color(hex: 0x0B0E14))
  453. .padding(.horizontal, 10)
  454. .padding(.vertical, 4)
  455. .background(AppTheme.accentTeal)
  456. .clipShape(Capsule())
  457. .padding(.top, metrics.cardPadding * 0.65)
  458. .padding(.trailing, metrics.cardPadding * 0.65)
  459. }
  460. }
  461. #Preview {
  462. let subscriptions = SubscriptionManager()
  463. return PaywallView(viewModel: PaywallViewModel(), onDismiss: {})
  464. .environmentObject(subscriptions)
  465. .frame(width: AppWindow.width, height: AppWindow.height)
  466. .onAppear {
  467. subscriptions.start()
  468. PaywallConfigService.shared.start()
  469. }
  470. }