alexandrev-tibco
3b1f62cc26
- Header de marca arriba, grande (logo BrandMark 48px + nombre title2 rounded), nunca se corta en Story (9:16 real 360x640, Post 4:5 360x450). - Héroe = retorno % (privacy/branding-friendly), valor como apoyo. - Fecha del último check-in bajo el nombre (share_as_of) para dar contexto a quien no conoce la app; DashboardViewModel.shareAsOfDate. - Tema Dark + Light (ShareCardTheme) con selector en el sheet + preview vivo. - Sparkline real (viewModel.evolutionData), ya se pasaba. - CTA de descarga + QR con ct=snapshot_share (atribución App Analytics). - L10n x7 (as_of, theme_dark/light, cta, hero, metrics). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L38583J7AYWCVPevkivscj
512 lines
20 KiB
Swift
512 lines
20 KiB
Swift
import SwiftUI
|
|
|
|
// MARK: - Share card design system ("dark panorama")
|
|
//
|
|
// Same visual language as the App Store screenshots — the app's strongest
|
|
// brand asset: near-black navy base, blue/green atmospheric glows, a subtle
|
|
// technical grid and the gradient evolution sparkline. These cards are the
|
|
// main referral surface, so they are designed to look premium in a chat or a
|
|
// story, and to carry an attributed QR/link back to the App Store.
|
|
|
|
enum ShareCardStyle {
|
|
static let navyTop = Color(red: 10 / 255, green: 21 / 255, blue: 42 / 255)
|
|
static let navyBottom = Color(red: 3 / 255, green: 9 / 255, blue: 22 / 255)
|
|
static let blue = Color(red: 48 / 255, green: 132 / 255, blue: 255 / 255)
|
|
static let green = Color(red: 16 / 255, green: 185 / 255, blue: 129 / 255)
|
|
static let gridLine = Color(red: 93 / 255, green: 132 / 255, blue: 181 / 255)
|
|
static let muted = Color(red: 155 / 255, green: 169 / 255, blue: 191 / 255)
|
|
// Light theme
|
|
static let lightTop = Color(red: 248 / 255, green: 250 / 255, blue: 252 / 255)
|
|
static let lightBottom = Color(red: 226 / 255, green: 232 / 255, blue: 240 / 255)
|
|
static let ink = Color(red: 15 / 255, green: 27 / 255, blue: 45 / 255)
|
|
static let lightMuted = Color(red: 100 / 255, green: 116 / 255, blue: 139 / 255)
|
|
}
|
|
|
|
/// Light/dark variants of the card. Blue/green accents are shared; everything
|
|
/// else (surface, text, grid, panels) flips per theme.
|
|
enum ShareCardTheme: String, CaseIterable, Identifiable {
|
|
case dark, light
|
|
var id: String { rawValue }
|
|
|
|
var ink: Color { self == .dark ? .white : ShareCardStyle.ink }
|
|
var mutedInk: Color { self == .dark ? ShareCardStyle.muted : ShareCardStyle.lightMuted }
|
|
var panelFill: Color { self == .dark ? Color.white.opacity(0.06) : ShareCardStyle.ink.opacity(0.05) }
|
|
var strokeColor: Color { self == .dark ? Color.white.opacity(0.12) : ShareCardStyle.ink.opacity(0.10) }
|
|
var footerFill: Color { self == .dark ? Color.white.opacity(0.08) : ShareCardStyle.ink.opacity(0.04) }
|
|
var gridOpacity: Double { self == .dark ? 0.10 : 0.06 }
|
|
var glowOpacityMul: Double { self == .dark ? 1.0 : 0.7 }
|
|
}
|
|
|
|
struct ShareCardBackground: View {
|
|
var theme: ShareCardTheme = .dark
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
LinearGradient(
|
|
colors: theme == .dark
|
|
? [ShareCardStyle.navyTop, ShareCardStyle.navyBottom]
|
|
: [ShareCardStyle.lightTop, ShareCardStyle.lightBottom],
|
|
startPoint: .top, endPoint: .bottom
|
|
)
|
|
|
|
// Atmospheric glows (blue top-left, green bottom-right)
|
|
Circle()
|
|
.fill(ShareCardStyle.blue.opacity(0.30 * theme.glowOpacityMul))
|
|
.frame(width: 280, height: 280)
|
|
.blur(radius: 70)
|
|
.offset(x: -100, y: -120)
|
|
Circle()
|
|
.fill(ShareCardStyle.green.opacity(0.22 * theme.glowOpacityMul))
|
|
.frame(width: 260, height: 260)
|
|
.blur(radius: 80)
|
|
.offset(x: 130, y: 150)
|
|
|
|
// Subtle technical grid
|
|
ShareCardGrid()
|
|
.stroke(ShareCardStyle.gridLine.opacity(theme.gridOpacity), lineWidth: 1)
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct ShareCardGrid: Shape {
|
|
func path(in rect: CGRect) -> Path {
|
|
var p = Path()
|
|
let step: CGFloat = 44
|
|
var x: CGFloat = 0
|
|
while x <= rect.width {
|
|
p.move(to: CGPoint(x: x, y: 0))
|
|
p.addLine(to: CGPoint(x: x, y: rect.height))
|
|
x += step
|
|
}
|
|
var y: CGFloat = 0
|
|
while y <= rect.height {
|
|
p.move(to: CGPoint(x: 0, y: y))
|
|
p.addLine(to: CGPoint(x: rect.width, y: y))
|
|
y += step
|
|
}
|
|
return p
|
|
}
|
|
}
|
|
|
|
/// Gradient evolution sparkline (line + soft area + endpoint dot).
|
|
struct ShareSparkline: View {
|
|
let values: [Double]
|
|
|
|
var body: some View {
|
|
GeometryReader { geo in
|
|
let pts = points(in: geo.size)
|
|
if pts.count > 1 {
|
|
ZStack {
|
|
// Area fill
|
|
Path { p in
|
|
p.move(to: CGPoint(x: pts[0].x, y: geo.size.height))
|
|
pts.forEach { p.addLine(to: $0) }
|
|
p.addLine(to: CGPoint(x: pts[pts.count - 1].x, y: geo.size.height))
|
|
p.closeSubpath()
|
|
}
|
|
.fill(
|
|
LinearGradient(colors: [ShareCardStyle.blue.opacity(0.30), .clear],
|
|
startPoint: .top, endPoint: .bottom)
|
|
)
|
|
|
|
// Gradient line
|
|
Path { p in
|
|
p.move(to: pts[0])
|
|
pts.dropFirst().forEach { p.addLine(to: $0) }
|
|
}
|
|
.stroke(
|
|
LinearGradient(colors: [ShareCardStyle.blue, .cyan],
|
|
startPoint: .leading, endPoint: .trailing),
|
|
style: StrokeStyle(lineWidth: 2.4, lineCap: .round, lineJoin: .round)
|
|
)
|
|
|
|
// Endpoint dot ("now")
|
|
if let last = pts.last {
|
|
Circle()
|
|
.fill(Color.cyan)
|
|
.frame(width: 7, height: 7)
|
|
.position(last)
|
|
Circle()
|
|
.fill(Color.cyan.opacity(0.3))
|
|
.frame(width: 16, height: 16)
|
|
.position(last)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private func points(in size: CGSize) -> [CGPoint] {
|
|
guard values.count > 1 else { return [] }
|
|
let minV = values.min() ?? 0
|
|
let maxV = values.max() ?? 1
|
|
let range = maxV - minV
|
|
let inset: CGFloat = 6
|
|
return values.indices.map { i in
|
|
let x = size.width * CGFloat(i) / CGFloat(values.count - 1)
|
|
let norm = range > 0 ? (values[i] - minV) / range : 0.5
|
|
let y = inset + (size.height - inset * 2) * (1 - CGFloat(norm))
|
|
return CGPoint(x: x, y: y)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Shared pieces
|
|
|
|
private func eyebrow(_ text: String) -> some View {
|
|
Text(text.uppercased())
|
|
.font(.caption2.weight(.bold))
|
|
.tracking(2.2)
|
|
.foregroundColor(ShareCardStyle.green)
|
|
}
|
|
|
|
private func deltaChip(_ text: String, positive: Bool, large: Bool = false) -> some View {
|
|
HStack(spacing: 4) {
|
|
Image(systemName: positive ? "arrow.up.right" : "arrow.down.right")
|
|
.font(.system(size: large ? 13 : 10, weight: .bold))
|
|
Text(text)
|
|
.font((large ? Font.headline : Font.caption).weight(.bold))
|
|
}
|
|
.foregroundColor(positive ? ShareCardStyle.green : Color(red: 1, green: 0.42, blue: 0.42))
|
|
.padding(.horizontal, large ? 12 : 9)
|
|
.padding(.vertical, large ? 6 : 4)
|
|
.background(
|
|
Capsule().fill((positive ? ShareCardStyle.green : Color.red).opacity(0.14))
|
|
)
|
|
}
|
|
|
|
private func metricRow(_ title: String, _ value: String, theme: ShareCardTheme) -> some View {
|
|
HStack {
|
|
Text(title)
|
|
.font(.caption.weight(.semibold))
|
|
.foregroundColor(theme.mutedInk)
|
|
Spacer()
|
|
Text(value)
|
|
.font(.subheadline.weight(.semibold))
|
|
.foregroundColor(theme.ink)
|
|
.multilineTextAlignment(.trailing)
|
|
.minimumScaleFactor(0.7)
|
|
.lineLimit(1)
|
|
}
|
|
}
|
|
|
|
/// Brand lockup pinned at the TOP of every card — big and unmissable so the
|
|
/// name does the branding work (and never clips like the old footer mark did).
|
|
/// Optional `asOf` line gives an outsider the context ("what date is this?").
|
|
private func brandHeader(theme: ShareCardTheme, asOf: String?) -> some View {
|
|
HStack(spacing: 12) {
|
|
Image("BrandMark")
|
|
.resizable()
|
|
.aspectRatio(contentMode: .fit)
|
|
.frame(width: 48, height: 48)
|
|
.clipShape(RoundedRectangle(cornerRadius: 11, style: .continuous))
|
|
VStack(alignment: .leading, spacing: 1) {
|
|
Text("Portfolio Journal")
|
|
.font(.system(.title2, design: .rounded).weight(.heavy))
|
|
.foregroundColor(theme.ink)
|
|
.minimumScaleFactor(0.7)
|
|
.lineLimit(1)
|
|
if let asOf {
|
|
Text(String(format: String(localized: "share_as_of"), asOf))
|
|
.font(.caption2.weight(.medium))
|
|
.foregroundColor(theme.mutedInk)
|
|
}
|
|
}
|
|
Spacer(minLength: 0)
|
|
}
|
|
}
|
|
|
|
/// Download-focused footer: an explicit "get the app" CTA plus a scannable QR.
|
|
/// This is the conversion surface — every shared card should sell the install.
|
|
private func downloadFooter(qrCodeImage: UIImage?, theme: ShareCardTheme) -> some View {
|
|
HStack(spacing: 12) {
|
|
VStack(alignment: .leading, spacing: 3) {
|
|
Text(String(localized: "share_cta_headline"))
|
|
.font(.subheadline.weight(.bold))
|
|
.foregroundColor(theme.ink)
|
|
.fixedSize(horizontal: false, vertical: true)
|
|
Text(String(localized: "share_cta_sub"))
|
|
.font(.caption2.weight(.medium))
|
|
.foregroundColor(theme.mutedInk)
|
|
}
|
|
|
|
Spacer(minLength: 8)
|
|
|
|
if let qrCodeImage {
|
|
Image(uiImage: qrCodeImage)
|
|
.interpolation(.none)
|
|
.resizable()
|
|
.frame(width: 54, height: 54)
|
|
.padding(4)
|
|
.background(Color.white)
|
|
.clipShape(RoundedRectangle(cornerRadius: 9, style: .continuous))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 9, style: .continuous)
|
|
.stroke(ShareCardStyle.ink.opacity(theme == .light ? 0.10 : 0), lineWidth: 1)
|
|
)
|
|
}
|
|
}
|
|
.padding(12)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 14, style: .continuous)
|
|
.fill(theme.footerFill)
|
|
)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 14, style: .continuous)
|
|
.stroke(ShareCardStyle.green.opacity(0.35), lineWidth: 1)
|
|
)
|
|
}
|
|
|
|
// MARK: - Portfolio value card
|
|
|
|
struct PortfolioValueShareCardView: View {
|
|
let totalValue: String
|
|
let changeText: String
|
|
let changeLabel: String
|
|
let yearChange: String?
|
|
let sinceInceptionChange: String?
|
|
let appName: String
|
|
var qrCodeImage: UIImage? = nil
|
|
var sparkline: [Double] = []
|
|
var isPositive: Bool = true
|
|
/// The all-time (or best available) return %, shown as the hero — this is
|
|
/// the number people actually want to post. Falls back to nil → uses value.
|
|
var heroPercent: String? = nil
|
|
/// Date of the latest check-in, shown under the brand so an outsider knows
|
|
/// what point in time the numbers describe.
|
|
var asOf: String? = nil
|
|
var theme: ShareCardTheme = .dark
|
|
/// Story = 9:16 (Instagram/WhatsApp status); otherwise 4:5 feed post.
|
|
var storyFormat: Bool = false
|
|
|
|
// Exact aspect ratios so nothing clips: 9:16 story, 4:5 post.
|
|
private var cardWidth: CGFloat { storyFormat ? 360 : 360 }
|
|
private var cardHeight: CGFloat { storyFormat ? 640 : 450 }
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
brandHeader(theme: theme, asOf: asOf)
|
|
|
|
Spacer(minLength: storyFormat ? 24 : 14)
|
|
|
|
// Hero: big return % (branding-friendly, privacy-friendly), with the
|
|
// portfolio value as the supporting line.
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
eyebrow(String(localized: "share_hero_eyebrow"))
|
|
Text(heroPercent ?? totalValue)
|
|
.font(.system(size: storyFormat ? 52 : 44, weight: .heavy, design: .rounded))
|
|
.foregroundColor(heroIsPercent ? (isPositive ? ShareCardStyle.green : Color(red: 1, green: 0.42, blue: 0.42)) : theme.ink)
|
|
.minimumScaleFactor(0.5)
|
|
.lineLimit(1)
|
|
if heroIsPercent && !totalValue.isEmpty {
|
|
Text(totalValue)
|
|
.font(.title3.weight(.bold))
|
|
.foregroundColor(theme.ink)
|
|
.minimumScaleFactor(0.5)
|
|
.lineLimit(1)
|
|
}
|
|
deltaChip("\(changeText) \(changeLabel)", positive: isPositive, large: true)
|
|
}
|
|
|
|
if sparkline.count > 1 {
|
|
ShareSparkline(values: sparkline)
|
|
.frame(height: storyFormat ? 150 : 96)
|
|
.padding(.top, storyFormat ? 24 : 16)
|
|
}
|
|
|
|
VStack(spacing: 9) {
|
|
if let yearChange {
|
|
metricRow(String(localized: "share_metric_yoy"), yearChange, theme: theme)
|
|
}
|
|
if let sinceInceptionChange {
|
|
metricRow(String(localized: "share_metric_since_inception"), sinceInceptionChange, theme: theme)
|
|
}
|
|
}
|
|
.padding(13)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 12, style: .continuous)
|
|
.fill(theme.panelFill)
|
|
)
|
|
.padding(.top, storyFormat ? 24 : 14)
|
|
|
|
Spacer(minLength: 14)
|
|
|
|
downloadFooter(qrCodeImage: qrCodeImage, theme: theme)
|
|
}
|
|
.padding(storyFormat ? 28 : 22)
|
|
.frame(width: cardWidth, height: cardHeight)
|
|
.background(ShareCardBackground(theme: theme))
|
|
.clipShape(RoundedRectangle(cornerRadius: 26, style: .continuous))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 26, style: .continuous)
|
|
.stroke(theme.strokeColor, lineWidth: 1)
|
|
)
|
|
}
|
|
|
|
private var heroIsPercent: Bool { heroPercent != nil }
|
|
}
|
|
|
|
// MARK: - Monthly check-in card
|
|
|
|
struct MonthlyCheckInShareCardView: View {
|
|
let summary: MonthlySummary
|
|
let appName: String
|
|
var qrCodeImage: UIImage? = nil
|
|
var theme: ShareCardTheme = .dark
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
brandHeader(theme: theme, asOf: summary.formattedMonthYear)
|
|
|
|
Spacer(minLength: 16)
|
|
|
|
eyebrow(summary.formattedMonthYear)
|
|
Text("Monthly Check-in")
|
|
.font(.title.weight(.bold))
|
|
.foregroundColor(theme.ink)
|
|
.padding(.top, 4)
|
|
|
|
VStack(spacing: 9) {
|
|
metricRow("Starting", summary.formattedStartingValue, theme: theme)
|
|
metricRow("Ending", summary.formattedEndingValue, theme: theme)
|
|
if summary.contributions != 0 {
|
|
metricRow("Contributions", summary.formattedContributions, theme: theme)
|
|
}
|
|
metricRow("Net performance", "\(summary.formattedNetPerformance) (\(summary.formattedNetPerformancePercentage))", theme: theme)
|
|
}
|
|
.padding(13)
|
|
.background(
|
|
RoundedRectangle(cornerRadius: 12, style: .continuous)
|
|
.fill(theme.panelFill)
|
|
)
|
|
.padding(.top, 16)
|
|
|
|
Spacer(minLength: 14)
|
|
downloadFooter(qrCodeImage: qrCodeImage, theme: theme)
|
|
}
|
|
.padding(22)
|
|
.frame(width: 360, height: 420)
|
|
.background(ShareCardBackground(theme: theme))
|
|
.clipShape(RoundedRectangle(cornerRadius: 26, style: .continuous))
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 26, style: .continuous)
|
|
.stroke(theme.strokeColor, lineWidth: 1)
|
|
)
|
|
}
|
|
}
|
|
|
|
// MARK: - Pre-share options (privacy + format) with live preview
|
|
|
|
/// Sheet shown before sharing the portfolio card. The privacy toggle ("only
|
|
/// percentages") is the referral unlock: nobody shares absolute net worth,
|
|
/// everybody shares +42%.
|
|
struct PortfolioShareOptionsView: View {
|
|
let totalValue: String
|
|
let changeText: String
|
|
let changeLabel: String
|
|
let yearChange: String?
|
|
let sinceInceptionChange: String?
|
|
let sparkline: [Double]
|
|
let isPositive: Bool
|
|
var asOf: String? = nil
|
|
|
|
@State private var percentOnly = false
|
|
@State private var storyFormat = false
|
|
@State private var theme: ShareCardTheme = .dark
|
|
@Environment(\.dismiss) private var dismiss
|
|
|
|
var body: some View {
|
|
NavigationStack {
|
|
VStack(spacing: 16) {
|
|
Spacer(minLength: 0)
|
|
|
|
// Live preview — scaled to fit
|
|
previewCard
|
|
.scaleEffect(storyFormat ? 0.62 : 0.78)
|
|
.frame(height: storyFormat ? 310 : 275)
|
|
.animation(.snappy, value: percentOnly)
|
|
.animation(.snappy, value: storyFormat)
|
|
.animation(.snappy, value: theme)
|
|
|
|
Spacer(minLength: 0)
|
|
|
|
VStack(spacing: 12) {
|
|
Toggle(isOn: $percentOnly.animation(.snappy)) {
|
|
Label(String(localized: "share_percent_only"), systemImage: "eye.slash")
|
|
.font(.subheadline)
|
|
}
|
|
.tint(.appPrimary)
|
|
|
|
Picker("Theme", selection: $theme.animation(.snappy)) {
|
|
Text(String(localized: "share_theme_dark")).tag(ShareCardTheme.dark)
|
|
Text(String(localized: "share_theme_light")).tag(ShareCardTheme.light)
|
|
}
|
|
.pickerStyle(.segmented)
|
|
|
|
Picker("Format", selection: $storyFormat.animation(.snappy)) {
|
|
Text(String(localized: "share_format_post")).tag(false)
|
|
Text(String(localized: "share_format_story")).tag(true)
|
|
}
|
|
.pickerStyle(.segmented)
|
|
}
|
|
.padding(.horizontal)
|
|
|
|
Button {
|
|
ShareService.shared.sharePortfolioValue(
|
|
totalValue: totalValue,
|
|
changeText: changeText,
|
|
changeLabel: changeLabel,
|
|
yearChange: yearChange,
|
|
sinceInceptionChange: sinceInceptionChange,
|
|
sparkline: sparkline,
|
|
isPositive: isPositive,
|
|
asOf: asOf,
|
|
theme: theme,
|
|
percentOnly: percentOnly,
|
|
storyFormat: storyFormat
|
|
)
|
|
dismiss()
|
|
} label: {
|
|
Text(String(localized: "share_card_cta"))
|
|
.font(.headline)
|
|
.frame(maxWidth: .infinity)
|
|
.padding(.vertical, 14)
|
|
.background(Color.appPrimary)
|
|
.foregroundColor(.white)
|
|
.cornerRadius(14)
|
|
}
|
|
.padding(.horizontal)
|
|
.padding(.bottom, 8)
|
|
}
|
|
.navigationTitle(String(localized: "share_options_title"))
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
}
|
|
.presentationDetents([.large])
|
|
}
|
|
|
|
private var previewCard: some View {
|
|
let display = ShareService.portfolioCardStrings(
|
|
totalValue: totalValue,
|
|
changeText: changeText,
|
|
yearChange: yearChange,
|
|
sinceInceptionChange: sinceInceptionChange,
|
|
percentOnly: percentOnly
|
|
)
|
|
return PortfolioValueShareCardView(
|
|
totalValue: display.totalValue,
|
|
changeText: display.changeText,
|
|
changeLabel: changeLabel,
|
|
yearChange: display.yearChange,
|
|
sinceInceptionChange: display.sinceInceptionChange,
|
|
appName: "Portfolio Journal",
|
|
qrCodeImage: GoalShareService.generateQRCode(for: ShareService.snapshotShareURL, size: 200),
|
|
sparkline: sparkline,
|
|
isPositive: isPositive,
|
|
heroPercent: display.heroPercent,
|
|
asOf: asOf,
|
|
theme: theme,
|
|
storyFormat: storyFormat
|
|
)
|
|
}
|
|
}
|