From a54895532094246d65354555af81e863a9bfa3db Mon Sep 17 00:00:00 2001
From: Daniel Arantes Loverde <daniel@loverde.com.br>
Date: Wed, 3 Jun 2026 17:44:10 -0300
Subject: [PATCH] fix(cards): replace NavigationStack header with custom X
 button, new card form opens as sheet

---
 .../PediFoods/Views/Main/CheckoutView.swift   | 85 ++++++++++++++-----
 1 file changed, 65 insertions(+), 20 deletions(-)

diff --git a/pedi-foods/Sources/PediFoods/Views/Main/CheckoutView.swift b/pedi-foods/Sources/PediFoods/Views/Main/CheckoutView.swift
index 30e9f07..8103fd4 100644
--- a/pedi-foods/Sources/PediFoods/Views/Main/CheckoutView.swift
+++ b/pedi-foods/Sources/PediFoods/Views/Main/CheckoutView.swift
@@ -189,6 +189,7 @@ struct CheckoutView: View {
             CardSelectionSheet(
                 savedCards: savedCards,
                 cardContext: cardContext,
+                appState: $appState,
                 onSavedCardConfirmed: { cardId in
                     showCardSelectionSheet = false
                     Task {
@@ -196,10 +197,6 @@ struct CheckoutView: View {
                         await confirmOrderWithSavedCard(cardId: cardId, storeId: storeId)
                     }
                 },
-                onNewCard: {
-                    showCardSelectionSheet = false
-                    cardPaymentContext = cardContext
-                },
                 onOrderCreated: { orderId, shortId in
                     showCardSelectionSheet = false
                     appState.cart.clear()
@@ -833,25 +830,48 @@ struct PaymentPixView: View {
 struct CardSelectionSheet: View {
     let savedCards: [SavedCard]
     let cardContext: CardPaymentContext
+    @Binding var appState: AppState
     let onSavedCardConfirmed: (String) -> Void
-    let onNewCard: () -> Void
     let onOrderCreated: (String, String?) -> Void
 
     @Environment(\.dismiss) var dismiss
     @State var selectedCardId: String?
     @State var isSubmitting = false
+    @State var showNewCardSheet = false
 
-    init(savedCards: [SavedCard], cardContext: CardPaymentContext, onSavedCardConfirmed: @escaping (String) -> Void, onNewCard: @escaping () -> Void, onOrderCreated: @escaping (String, String?) -> Void) {
+    init(savedCards: [SavedCard], cardContext: CardPaymentContext, appState: Binding<AppState>, onSavedCardConfirmed: @escaping (String) -> Void, onOrderCreated: @escaping (String, String?) -> Void) {
         self.savedCards = savedCards
         self.cardContext = cardContext
+        self._appState = appState
         self.onSavedCardConfirmed = onSavedCardConfirmed
-        self.onNewCard = onNewCard
         self.onOrderCreated = onOrderCreated
         _selectedCardId = State(initialValue: savedCards.first(where: { $0.isDefault })?.id ?? savedCards.first?.id)
     }
 
     var body: some View {
-        NavigationStack {
+        VStack(spacing: 0) {
+            // Header
+            HStack {
+                Text("Selecionar Cartão")
+                    .font(AppTypography.heading2)
+                    .foregroundStyle(AppColors.textPrimary)
+                Spacer()
+                Button {
+                    dismiss()
+                } label: {
+                    Image(systemName: "xmark")
+                        .font(.system(size: 12, weight: .bold))
+                        .foregroundStyle(AppColors.textMuted)
+                        .frame(width: 30, height: 30)
+                        .background(AppColors.surface)
+                        .clipShape(Circle())
+                }
+                .buttonStyle(.plain)
+            }
+            .padding(.horizontal, 20)
+            .padding(.top, 20)
+            .padding(.bottom, 16)
+
             ScrollView(showsIndicators: false) {
                 VStack(alignment: .leading, spacing: 16) {
                     if savedCards.isEmpty == false {
@@ -881,7 +901,7 @@ struct CardSelectionSheet: View {
                     }
 
                     Button {
-                        onNewCard()
+                        showNewCardSheet = true
                     } label: {
                         HStack(spacing: 10) {
                             Image(systemName: "plus.circle.fill")
@@ -898,17 +918,20 @@ struct CardSelectionSheet: View {
                     }
                     .buttonStyle(.plain)
                 }
-                .padding(20)
+                .padding(.horizontal, 20)
+                .padding(.bottom, 32)
             }
-            .background(AppColors.backgroundLight)
-            .navigationTitle("Selecionar Cartão")
-            .appInlineNavigationTitle()
-            .toolbar {
-                ToolbarItem(placement: .navigationBarLeading) {
-                    Button("Cancelar") { dismiss() }
-                        .foregroundStyle(AppColors.textMuted)
+        }
+        .background(AppColors.backgroundLight)
+        .sheet(isPresented: $showNewCardSheet) {
+            PaymentCardView(
+                context: cardContext,
+                appState: $appState,
+                onOrderCreated: { orderId, shortId in
+                    showNewCardSheet = false
+                    onOrderCreated(orderId, shortId)
                 }
-            }
+            )
         }
     }
 
@@ -982,6 +1005,28 @@ struct PaymentCardView: View {
     }
 
     var body: some View {
+        VStack(spacing: 0) {
+            HStack {
+                Text("Novo Cartão")
+                    .font(AppTypography.heading2)
+                    .foregroundStyle(AppColors.textPrimary)
+                Spacer()
+                Button {
+                    dismiss()
+                } label: {
+                    Image(systemName: "xmark")
+                        .font(.system(size: 12, weight: .bold))
+                        .foregroundStyle(AppColors.textMuted)
+                        .frame(width: 30, height: 30)
+                        .background(AppColors.surface)
+                        .clipShape(Circle())
+                }
+                .buttonStyle(.plain)
+            }
+            .padding(.horizontal, 20)
+            .padding(.top, 20)
+            .padding(.bottom, 16)
+
         ScrollView(showsIndicators: false) {
             VStack(alignment: .leading, spacing: 16) {
                 // Total
@@ -1058,8 +1103,8 @@ struct PaymentCardView: View {
             .padding(20)
         }
         .background(AppColors.backgroundLight)
-        .navigationTitle("Novo Cartão")
-        .appInlineNavigationTitle()
+        } // VStack
+        .background(AppColors.backgroundLight)
     }
 
     @MainActor