fix(cards): replace NavigationStack header with custom X button, new card form opens as sheet
This commit is contained in:
@@ -189,6 +189,7 @@ struct CheckoutView: View {
|
|||||||
CardSelectionSheet(
|
CardSelectionSheet(
|
||||||
savedCards: savedCards,
|
savedCards: savedCards,
|
||||||
cardContext: cardContext,
|
cardContext: cardContext,
|
||||||
|
appState: $appState,
|
||||||
onSavedCardConfirmed: { cardId in
|
onSavedCardConfirmed: { cardId in
|
||||||
showCardSelectionSheet = false
|
showCardSelectionSheet = false
|
||||||
Task {
|
Task {
|
||||||
@@ -196,10 +197,6 @@ struct CheckoutView: View {
|
|||||||
await confirmOrderWithSavedCard(cardId: cardId, storeId: storeId)
|
await confirmOrderWithSavedCard(cardId: cardId, storeId: storeId)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onNewCard: {
|
|
||||||
showCardSelectionSheet = false
|
|
||||||
cardPaymentContext = cardContext
|
|
||||||
},
|
|
||||||
onOrderCreated: { orderId, shortId in
|
onOrderCreated: { orderId, shortId in
|
||||||
showCardSelectionSheet = false
|
showCardSelectionSheet = false
|
||||||
appState.cart.clear()
|
appState.cart.clear()
|
||||||
@@ -833,25 +830,48 @@ struct PaymentPixView: View {
|
|||||||
struct CardSelectionSheet: View {
|
struct CardSelectionSheet: View {
|
||||||
let savedCards: [SavedCard]
|
let savedCards: [SavedCard]
|
||||||
let cardContext: CardPaymentContext
|
let cardContext: CardPaymentContext
|
||||||
|
@Binding var appState: AppState
|
||||||
let onSavedCardConfirmed: (String) -> Void
|
let onSavedCardConfirmed: (String) -> Void
|
||||||
let onNewCard: () -> Void
|
|
||||||
let onOrderCreated: (String, String?) -> Void
|
let onOrderCreated: (String, String?) -> Void
|
||||||
|
|
||||||
@Environment(\.dismiss) var dismiss
|
@Environment(\.dismiss) var dismiss
|
||||||
@State var selectedCardId: String?
|
@State var selectedCardId: String?
|
||||||
@State var isSubmitting = false
|
@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.savedCards = savedCards
|
||||||
self.cardContext = cardContext
|
self.cardContext = cardContext
|
||||||
|
self._appState = appState
|
||||||
self.onSavedCardConfirmed = onSavedCardConfirmed
|
self.onSavedCardConfirmed = onSavedCardConfirmed
|
||||||
self.onNewCard = onNewCard
|
|
||||||
self.onOrderCreated = onOrderCreated
|
self.onOrderCreated = onOrderCreated
|
||||||
_selectedCardId = State(initialValue: savedCards.first(where: { $0.isDefault })?.id ?? savedCards.first?.id)
|
_selectedCardId = State(initialValue: savedCards.first(where: { $0.isDefault })?.id ?? savedCards.first?.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
var body: some View {
|
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) {
|
ScrollView(showsIndicators: false) {
|
||||||
VStack(alignment: .leading, spacing: 16) {
|
VStack(alignment: .leading, spacing: 16) {
|
||||||
if savedCards.isEmpty == false {
|
if savedCards.isEmpty == false {
|
||||||
@@ -881,7 +901,7 @@ struct CardSelectionSheet: View {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
onNewCard()
|
showNewCardSheet = true
|
||||||
} label: {
|
} label: {
|
||||||
HStack(spacing: 10) {
|
HStack(spacing: 10) {
|
||||||
Image(systemName: "plus.circle.fill")
|
Image(systemName: "plus.circle.fill")
|
||||||
@@ -898,17 +918,20 @@ struct CardSelectionSheet: View {
|
|||||||
}
|
}
|
||||||
.buttonStyle(.plain)
|
.buttonStyle(.plain)
|
||||||
}
|
}
|
||||||
.padding(20)
|
.padding(.horizontal, 20)
|
||||||
|
.padding(.bottom, 32)
|
||||||
}
|
}
|
||||||
.background(AppColors.backgroundLight)
|
}
|
||||||
.navigationTitle("Selecionar Cartão")
|
.background(AppColors.backgroundLight)
|
||||||
.appInlineNavigationTitle()
|
.sheet(isPresented: $showNewCardSheet) {
|
||||||
.toolbar {
|
PaymentCardView(
|
||||||
ToolbarItem(placement: .navigationBarLeading) {
|
context: cardContext,
|
||||||
Button("Cancelar") { dismiss() }
|
appState: $appState,
|
||||||
.foregroundStyle(AppColors.textMuted)
|
onOrderCreated: { orderId, shortId in
|
||||||
|
showNewCardSheet = false
|
||||||
|
onOrderCreated(orderId, shortId)
|
||||||
}
|
}
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -982,6 +1005,28 @@ struct PaymentCardView: View {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var body: some 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) {
|
ScrollView(showsIndicators: false) {
|
||||||
VStack(alignment: .leading, spacing: 16) {
|
VStack(alignment: .leading, spacing: 16) {
|
||||||
// Total
|
// Total
|
||||||
@@ -1058,8 +1103,8 @@ struct PaymentCardView: View {
|
|||||||
.padding(20)
|
.padding(20)
|
||||||
}
|
}
|
||||||
.background(AppColors.backgroundLight)
|
.background(AppColors.backgroundLight)
|
||||||
.navigationTitle("Novo Cartão")
|
} // VStack
|
||||||
.appInlineNavigationTitle()
|
.background(AppColors.backgroundLight)
|
||||||
}
|
}
|
||||||
|
|
||||||
@MainActor
|
@MainActor
|
||||||
|
|||||||
Reference in New Issue
Block a user