@shaykec/app-agent 1.0.0

package/templates/shared/ios/OnboardingCoachMarks/OnboardingCoachMarksService.swift

@@ -0,0 +1,46 @@
+import Foundation
+import Combine
+
+// MARK: - Onboarding Coach Marks Service
+/// Manages coach marks state and completion tracking.
+class OnboardingCoachMarksService: ObservableObject {
+    
+    // MARK: - Published Properties
+    @Published var hasSeenCoachMarks: Bool = false
+    
+    // MARK: - Private Properties
+    private var cancellables = Set<AnyCancellable>()
+    
+    init() {
+        loadState()
+    }
+    
+    // MARK: - Public Methods
+    
+    /// Marks coach marks as seen
+    func markAsSeen() {
+        hasSeenCoachMarks = true
+        saveState()
+    }
+    
+    /// Resets coach marks (for testing or re-onboarding)
+    func reset() {
+        hasSeenCoachMarks = false
+        saveState()
+    }
+    
+    /// Checks if coach marks should be shown
+    func shouldShowCoachMarks() -> Bool {
+        !hasSeenCoachMarks
+    }
+    
+    // MARK: - Private Methods
+    
+    private func saveState() {
+        UserDefaults.standard.set(hasSeenCoachMarks, forKey: "hasSeenCoachMarks")
+    }
+    
+    private func loadState() {
+        hasSeenCoachMarks = UserDefaults.standard.bool(forKey: "hasSeenCoachMarks")
+    }
+}

package/templates/shared/ios/OnboardingCoachMarks/OnboardingCoachMarksView.swift

@@ -0,0 +1,113 @@
+import SwiftUI
+
+// MARK: - Onboarding Coach Marks View
+/// Tooltip spotlight overlay with step indicator, skip/next buttons.
+struct OnboardingCoachMarksView: View {
+    @ObservedObject var service: OnboardingCoachMarksService
+    let steps: [CoachMarkStep]
+    let onComplete: () -> Void
+    let onSkip: () -> Void
+    
+    @State private var currentStepIndex: Int = 0
+    
+    var body: some View {
+        ZStack {
+            // Overlay background
+            Color.black.opacity(0.6)
+                .ignoresSafeArea()
+                .accessibilityIdentifier("coach_mark_overlay")
+            
+            // Spotlight cutout
+            if currentStepIndex < steps.count {
+                let step = steps[currentStepIndex]
+                SpotlightView(
+                    targetFrame: step.targetFrame,
+                    content: {
+                        VStack(spacing: AppConfig.Theme.Spacing.md) {
+                            Text(step.title)
+                                .font(AppConfig.Theme.Typography.title3)
+                                .foregroundStyle(.white)
+                            
+                            if let description = step.description {
+                                Text(description)
+                                    .font(AppConfig.Theme.Typography.body)
+                                    .foregroundStyle(.white.opacity(0.9))
+                                    .multilineTextAlignment(.center)
+                            }
+                            
+                            // Step indicator
+                            HStack(spacing: AppConfig.Theme.Spacing.xs) {
+                                ForEach(0..<steps.count, id: \.self) { index in
+                                    Circle()
+                                        .fill(index == currentStepIndex ? Color.white : Color.white.opacity(0.3))
+                                        .frame(width: 8, height: 8)
+                                }
+                            }
+                            .accessibilityIdentifier("coach_mark_step_indicator")
+                            
+                            // Actions
+                            HStack(spacing: AppConfig.Theme.Spacing.md) {
+                                Button(Strings.OnboardingCoachMarks.skip) {
+                                    onSkip()
+                                }
+                                .accessibilityIdentifier("coach_mark_skip_button")
+                                
+                                Button(currentStepIndex == steps.count - 1 ? Strings.OnboardingCoachMarks.done : Strings.OnboardingCoachMarks.next) {
+                                    if currentStepIndex < steps.count - 1 {
+                                        currentStepIndex += 1
+                                    } else {
+                                        onComplete()
+                                    }
+                                }
+                                .buttonStyle(.borderedProminent)
+                                .accessibilityIdentifier("coach_mark_next_button")
+                            }
+                        }
+                        .padding(AppConfig.Theme.Spacing.lg)
+                        .background(
+                            RoundedRectangle(cornerRadius: AppConfig.Theme.CornerRadius.large)
+                                .fill(.ultraThinMaterial)
+                        )
+                        .padding(AppConfig.Theme.Spacing.lg)
+                    }
+                )
+            }
+        }
+    }
+}
+
+// MARK: - Spotlight View
+struct SpotlightView<Content: View>: View {
+    let targetFrame: CGRect
+    let content: () -> Content
+    
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack {
+                // Dark overlay with cutout
+                Path { path in
+                    path.addRect(geometry.frame(in: .local))
+                    path.addEllipse(in: targetFrame)
+                }
+                .fill(.black.opacity(0.6), style: FillStyle(eoFill: true))
+                
+                // Content positioned relative to target
+                content()
+                    .position(
+                        x: targetFrame.midX,
+                        y: targetFrame.maxY + 100
+                    )
+            }
+        }
+    }
+}
+
+// MARK: - Coach Mark Step
+struct CoachMarkStep {
+    let title: String
+    let description: String?
+    let targetFrame: CGRect // Frame of the element to highlight
+    let targetViewID: String? // Optional: accessibility identifier of target view
+}
+
+// OnboardingCoachMarksService is defined in OnboardingCoachMarksService.swift

package/templates/shared/ios/OnboardingCoachMarks/Strings.swift

@@ -0,0 +1,11 @@
+import Foundation
+
+// MARK: - Onboarding Coach Marks Strings
+extension Strings {
+    enum OnboardingCoachMarks {
+        static let skip = "Skip"
+        static let next = "Next"
+        static let done = "Done"
+        static let back = "Back"
+    }
+}

package/templates/shared/ios/PaymentMethods/INTEGRATION.md

@@ -0,0 +1,213 @@
+# PaymentMethods Module — Integration Guide
+
+## Prerequisites
+
+- **iOS**: iOS 15.0+
+- **Framework**: SwiftUI
+- **Dependencies**: Foundation, Combine
+- **Optional**: PassKit framework for Apple Pay integration
+
+## AppConfig Additions
+
+No AppConfig additions required. The module uses existing theme tokens from `AppConfig.Theme`.
+
+## Navigation Wiring
+
+### Show Payment Methods
+
+Present payment methods as a sheet or full-screen cover:
+
+```swift
+@State private var showPaymentMethods = false
+@State private var selectedMethod: PaymentMethod?
+
+Button("Select Payment Method") {
+    showPaymentMethods = true
+}
+.sheet(isPresented: $showPaymentMethods) {
+    PaymentMethodsView { method in
+        selectedMethod = method
+        // Handle payment method selection
+    }
+}
+```
+
+Or as a navigation destination:
+
+```swift
+NavigationLink {
+    PaymentMethodsView { method in
+        // Handle payment method selection
+    }
+} label: {
+    Label("Payment Methods", systemImage: "creditcard")
+}
+```
+
+### Use Selected Payment Method
+
+```swift
+if let method = selectedMethod {
+    Text("Selected: \(method.displayName)")
+}
+```
+
+## String Merge
+
+Add `Strings.PaymentMethods` enum to the app's `Strings.swift` file. All strings are in the module's `Strings.swift`.
+
+## Test IDs
+
+| Test ID | Element |
+|---------|---------|
+| `payment_card_number_field` | Card number text field |
+| `payment_expiry_month_picker` | Expiry month picker |
+| `payment_expiry_year_picker` | Expiry year picker |
+| `payment_expiry_field` | Expiry field (combined month/year) |
+| `payment_cvv_field` | CVV text field |
+| `payment_cardholder_name_field` | Cardholder name text field |
+| `payment_save_card_toggle` | Save card toggle |
+| `payment_save_button` | Add card button |
+| `payment_saved_card_{index}_card` | Saved card row (0, 1, 2, etc.) |
+| `payment_apple_pay_button` | Apple Pay button |
+| `payment_google_pay_button` | Google Pay button |
+| `payment_close_button` | Close button (X) |
+
+## Module Dependencies
+
+- **Optional**: Paywall module (for subscription management)
+
+## Usage Examples
+
+### Add Card Input Validation
+
+The service automatically validates card input:
+- Card number: 13-19 digits
+- Expiry: Valid month (1-12) and year (current or future)
+- CVV: 3-4 digits
+
+### Save Card
+
+```swift
+let service = PaymentMethodsService()
+service.updateCardNumber("4242424242424242")
+service.updateExpiry(month: 12, year: 2025)
+service.updateCVV("123")
+service.saveCard()
+```
+
+### Delete Card
+
+```swift
+service.deleteCard(method)
+```
+
+### Set Default Card
+
+```swift
+service.setDefaultCard(method)
+```
+
+### Process Apple Pay
+
+```swift
+// CUSTOMIZE: Integrate with PassKit
+import PassKit
+
+// Check if Apple Pay is available
+if PKPaymentAuthorizationController.canMakePayments() {
+    service.processApplePay()
+}
+```
+
+### Process Google Pay
+
+```swift
+// CUSTOMIZE: Integrate with Google Pay SDK
+service.processGooglePay()
+```
+
+## Customization
+
+### Card Number Formatting
+
+The service automatically formats card numbers with spaces (e.g., "4242 4242 4242 4242"). Customize `formatCardNumber()` in `PaymentMethodsService` if needed.
+
+### Backend Integration
+
+Update the service to integrate with your backend:
+
+```swift
+// In PaymentMethodsService.saveCard()
+// POST /api/v1/payment-methods
+// {
+//   "cardNumber": "...",
+//   "expiryMonth": 12,
+//   "expiryYear": 2025,
+//   ...
+// }
+
+// In PaymentMethodsService.deleteCard()
+// DELETE /api/v1/payment-methods/{id}
+
+// In PaymentMethodsService.loadSavedMethods()
+// GET /api/v1/payment-methods
+```
+
+### Apple Pay Integration
+
+1. Enable Apple Pay capability in Xcode
+2. Configure merchant ID in App Store Connect
+3. Integrate PassKit framework:
+
+```swift
+import PassKit
+
+func processApplePay() {
+    let request = PKPaymentRequest()
+    request.merchantIdentifier = "merchant.com.yourapp"
+    request.supportedNetworks = [.visa, .masterCard, .amex]
+    request.merchantCapabilities = .capability3DS
+    request.countryCode = "US"
+    request.currencyCode = "USD"
+    
+    // Create payment summary items
+    request.paymentSummaryItems = [
+        PKPaymentSummaryItem(label: "Total", amount: NSDecimalNumber(string: "10.00"))
+    ]
+    
+    let controller = PKPaymentAuthorizationController(paymentRequest: request)
+    controller.delegate = self
+    controller.present()
+}
+```
+
+### Google Pay Integration
+
+1. Add Google Pay SDK dependency
+2. Configure Google Pay API in Google Cloud Console
+3. Integrate Google Pay SDK:
+
+```swift
+// Use Google Pay SDK to process payments
+// See Google Pay documentation for implementation details
+```
+
+## Security Considerations
+
+- **Never store full card numbers** - only store last 4 digits
+- **Use tokenization** - tokenize card numbers before sending to backend
+- **PCI Compliance** - Ensure backend is PCI compliant
+- **Encryption** - Encrypt sensitive data in transit and at rest
+- **CVV** - Never store CVV codes
+
+## Testing
+
+- Test card number formatting (spaces, length limits)
+- Test expiry validation (invalid months, past dates)
+- Test CVV validation (length, numeric only)
+- Test save card flow
+- Test delete card flow
+- Test set default card flow
+- Test Apple Pay flow (if available)
+- Test Google Pay flow (if available)

package/templates/shared/ios/PaymentMethods/PaymentMethodsView.swift

@@ -0,0 +1,314 @@
+import SwiftUI
+
+// MARK: - Payment Methods View
+/// Credit card input with formatting/validation, saved cards list, Apple Pay/Google Pay button.
+struct PaymentMethodsView: View {
+    @StateObject private var service = PaymentMethodsService()
+    @Environment(\.dismiss) private var dismiss
+    
+    var onPaymentMethodSelected: ((PaymentMethod) -> Void)?
+    
+    var body: some View {
+        NavigationStack {
+            ScrollView {
+                VStack(spacing: AppConfig.Theme.Spacing.lg) {
+                    // Saved Cards
+                    if !service.savedMethods.isEmpty {
+                        savedCardsSection
+                    }
+                    
+                    // Card Input Form
+                    cardInputSection
+                    
+                    // Apple Pay / Google Pay
+                    if service.isApplePayAvailable || service.isGooglePayAvailable {
+                        paymentButtonsSection
+                    }
+                }
+                .padding(AppConfig.Theme.Spacing.md)
+            }
+            .navigationTitle(Strings.PaymentMethods.title)
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .navigationBarLeading) {
+                    Button {
+                        dismiss()
+                    } label: {
+                        Image(systemName: "xmark")
+                    }
+                    .accessibilityIdentifier("payment_close_button")
+                }
+            }
+            .alert("Error", isPresented: $service.showError) {
+                Button("OK", role: .cancel) { }
+            } message: {
+                Text(service.errorMessage ?? "")
+            }
+        }
+    }
+    
+    // MARK: - Saved Cards Section
+    
+    private var savedCardsSection: some View {
+        VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.md) {
+            Text(Strings.PaymentMethods.savedCards)
+                .font(AppConfig.Theme.Typography.headline)
+                .accessibilityIdentifier("payment_saved_cards_title")
+            
+            ForEach(Array(service.savedMethods.enumerated()), id: \.element.id) { index, method in
+                SavedCardRow(
+                    method: method,
+                    onSelect: {
+                        onPaymentMethodSelected?(method)
+                        dismiss()
+                    },
+                    onDelete: {
+                        service.deleteCard(method)
+                    },
+                    onSetDefault: {
+                        service.setDefaultCard(method)
+                    }
+                )
+                .accessibilityIdentifier("payment_saved_card_\(index)_card")
+            }
+        }
+    }
+    
+    // MARK: - Card Input Section
+    
+    private var cardInputSection: some View {
+        VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.md) {
+            Text(Strings.PaymentMethods.addCard)
+                .font(AppConfig.Theme.Typography.headline)
+                .accessibilityIdentifier("payment_add_card_title")
+            
+            // Card Number
+            VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                Text(Strings.PaymentMethods.cardNumber)
+                    .font(AppConfig.Theme.Typography.caption)
+                
+                TextField("", text: Binding(
+                    get: { service.cardInput.cardNumber },
+                    set: { service.updateCardNumber($0) }
+                ))
+                .textFieldStyle(.roundedBorder)
+                .keyboardType(.numberPad)
+                .placeholder(when: service.cardInput.cardNumber.isEmpty) {
+                    Text("1234 5678 9012 3456")
+                        .foregroundStyle(.secondary)
+                }
+                .accessibilityIdentifier("payment_card_number_field")
+            }
+            
+            // Expiry and CVV
+            HStack(spacing: AppConfig.Theme.Spacing.md) {
+                // Expiry Month
+                VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                    Text(Strings.PaymentMethods.expiryMonth)
+                        .font(AppConfig.Theme.Typography.caption)
+                    
+                    Picker("", selection: Binding(
+                        get: { service.cardInput.expiryMonth ?? 1 },
+                        set: { service.updateExpiry(month: $0, year: service.cardInput.expiryYear) }
+                    )) {
+                        ForEach(1...12, id: \.self) { month in
+                            Text(String(format: "%02d", month)).tag(month)
+                        }
+                    }
+                    .pickerStyle(.menu)
+                    .accessibilityIdentifier("payment_expiry_month_picker")
+                }
+                
+                // Expiry Year
+                VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                    Text(Strings.PaymentMethods.expiryYear)
+                        .font(AppConfig.Theme.Typography.caption)
+                    
+                    Picker("", selection: Binding(
+                        get: { service.cardInput.expiryYear ?? Calendar.current.component(.year, from: Date()) },
+                        set: { service.updateExpiry(month: service.cardInput.expiryMonth, year: $0) }
+                    )) {
+                        ForEach(Calendar.current.component(.year, from: Date())...(Calendar.current.component(.year, from: Date()) + 10), id: \.self) { year in
+                            Text("\(year)").tag(year)
+                        }
+                    }
+                    .pickerStyle(.menu)
+                    .accessibilityIdentifier("payment_expiry_year_picker")
+                }
+                
+                // CVV
+                VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                    Text(Strings.PaymentMethods.cvv)
+                        .font(AppConfig.Theme.Typography.caption)
+                    
+                    TextField("", text: Binding(
+                        get: { service.cardInput.cvv },
+                        set: { service.updateCVV($0) }
+                    ))
+                    .textFieldStyle(.roundedBorder)
+                    .keyboardType(.numberPad)
+                    .placeholder(when: service.cardInput.cvv.isEmpty) {
+                        Text("123")
+                            .foregroundStyle(.secondary)
+                    }
+                    .accessibilityIdentifier("payment_cvv_field")
+                }
+            }
+            
+            // Cardholder Name
+            VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                Text(Strings.PaymentMethods.cardholderName)
+                    .font(AppConfig.Theme.Typography.caption)
+                
+                TextField("", text: Binding(
+                    get: { service.cardInput.cardholderName },
+                    set: { service.updateCardholderName($0) }
+                ))
+                .textFieldStyle(.roundedBorder)
+                .placeholder(when: service.cardInput.cardholderName.isEmpty) {
+                    Text("John Doe")
+                        .foregroundStyle(.secondary)
+                }
+                .accessibilityIdentifier("payment_cardholder_name_field")
+            }
+            
+            // Save Card Toggle
+            Toggle(Strings.PaymentMethods.saveCard, isOn: Binding(
+                get: { service.cardInput.saveCard },
+                set: { _ in service.toggleSaveCard() }
+            ))
+            .accessibilityIdentifier("payment_save_card_toggle")
+            
+            // Add Card Button
+            Button {
+                service.saveCard()
+            } label: {
+                Text(Strings.PaymentMethods.addCardButton)
+                    .font(AppConfig.Theme.Typography.headline)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, AppConfig.Theme.Spacing.sm)
+            }
+            .buttonStyle(.borderedProminent)
+            .disabled(!service.cardInput.isValid || service.isProcessing)
+            .accessibilityIdentifier("payment_save_button")
+        }
+    }
+    
+    // MARK: - Payment Buttons Section
+    
+    private var paymentButtonsSection: some View {
+        VStack(spacing: AppConfig.Theme.Spacing.md) {
+            if service.isApplePayAvailable {
+                Button {
+                    Task {
+                        await service.processApplePay()
+                    }
+                } label: {
+                    HStack {
+                        Image(systemName: "applelogo")
+                        Text(Strings.PaymentMethods.applePay)
+                    }
+                    .font(AppConfig.Theme.Typography.headline)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, AppConfig.Theme.Spacing.md)
+                }
+                .buttonStyle(.borderedProminent)
+                .tint(.black)
+                .disabled(service.isProcessing)
+                .accessibilityIdentifier("payment_apple_pay_button")
+            }
+            
+            if service.isGooglePayAvailable {
+                Button {
+                    Task {
+                        await service.processGooglePay()
+                    }
+                } label: {
+                    HStack {
+                        Image(systemName: "creditcard")
+                        Text(Strings.PaymentMethods.googlePay)
+                    }
+                    .font(AppConfig.Theme.Typography.headline)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, AppConfig.Theme.Spacing.md)
+                }
+                .buttonStyle(.borderedProminent)
+                .tint(.blue)
+                .disabled(service.isProcessing)
+                .accessibilityIdentifier("payment_google_pay_button")
+            }
+        }
+    }
+}
+
+// MARK: - Saved Card Row
+
+struct SavedCardRow: View {
+    let method: PaymentMethod
+    let onSelect: () -> Void
+    let onDelete: () -> Void
+    let onSetDefault: () -> Void
+    
+    var body: some View {
+        HStack {
+            VStack(alignment: .leading, spacing: AppConfig.Theme.Spacing.xs) {
+                HStack {
+                    Text(method.displayName)
+                        .font(AppConfig.Theme.Typography.body)
+                    
+                    if method.isDefault {
+                        Text(Strings.PaymentMethods.defaultBadge)
+                            .font(AppConfig.Theme.Typography.caption)
+                            .padding(.horizontal, AppConfig.Theme.Spacing.xs)
+                            .padding(.vertical, 2)
+                            .background(.blue.opacity(0.2))
+                            .cornerRadius(AppConfig.Theme.CornerRadius.small)
+                    }
+                }
+                
+                if let expiry = method.expiryString {
+                    Text(expiry)
+                        .font(AppConfig.Theme.Typography.caption)
+                        .foregroundStyle(.secondary)
+                }
+            }
+            
+            Spacer()
+            
+            Menu {
+                if !method.isDefault {
+                    Button(Strings.PaymentMethods.setDefault) {
+                        onSetDefault()
+                    }
+                }
+                
+                Button(role: .destructive, action: onDelete) {
+                    Text(Strings.PaymentMethods.delete)
+                }
+            } label: {
+                Image(systemName: "ellipsis")
+            }
+        }
+        .padding(AppConfig.Theme.Spacing.md)
+        .background(Color(.systemGray6))
+        .cornerRadius(AppConfig.Theme.CornerRadius.medium)
+        .contentShape(Rectangle())
+        .onTapGesture {
+            onSelect()
+        }
+    }
+}
+
+// MARK: - View Extension
+
+extension View {
+    func placeholder<Content: View>(
+        when shouldShow: Bool,
+        alignment: Alignment = .leading,
+        @ViewBuilder placeholder: () -> Content) -> some View {
+        ZStack(alignment: alignment) {
+            placeholder().opacity(shouldShow ? 1 : 0)
+            self
+        }
+    }
+}