refactor(wizard): show all steps at once with validation gating
- Replace progressive reveal with single fade-in of all steps - Add canPlanTrip validation requiring all fields before planning - Disable Plan Trip button until all selections are made - Simplify ViewModel by removing step-by-step visibility logic - Update tests for new validation-based approach Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
// TripWizardView.swift
|
||||
// SportsTime
|
||||
//
|
||||
// Progressive-reveal wizard for trip creation.
|
||||
// Wizard for trip creation.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
@@ -20,15 +20,14 @@ struct TripWizardView: View {
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ScrollViewReader { proxy in
|
||||
ScrollView {
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Step 1: Planning Mode (always visible)
|
||||
PlanningModeStep(selection: $viewModel.planningMode)
|
||||
.id("planningMode")
|
||||
ScrollView {
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Step 1: Planning Mode (always visible)
|
||||
PlanningModeStep(selection: $viewModel.planningMode)
|
||||
|
||||
// Step 2: Dates (after mode selected)
|
||||
if viewModel.isDatesStepVisible {
|
||||
// All other steps appear together after planning mode selected
|
||||
if viewModel.areStepsVisible {
|
||||
Group {
|
||||
DatesStep(
|
||||
startDate: $viewModel.startDate,
|
||||
endDate: $viewModel.endDate,
|
||||
@@ -39,58 +38,28 @@ struct TripWizardView: View {
|
||||
}
|
||||
}
|
||||
)
|
||||
.id("dates")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 3: Sports (after dates set)
|
||||
if viewModel.isSportsStepVisible {
|
||||
SportsStep(
|
||||
selectedSports: $viewModel.selectedSports,
|
||||
sportAvailability: viewModel.sportAvailability,
|
||||
isLoading: viewModel.isLoadingSportAvailability,
|
||||
canSelectSport: viewModel.canSelectSport
|
||||
)
|
||||
.id("sports")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 4: Regions (after dates set)
|
||||
if viewModel.isRegionsStepVisible {
|
||||
RegionsStep(selectedRegions: $viewModel.selectedRegions)
|
||||
.id("regions")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 5: Route Preference (after regions selected)
|
||||
if viewModel.isRoutePreferenceStepVisible {
|
||||
RoutePreferenceStep(
|
||||
routePreference: $viewModel.routePreference,
|
||||
hasSetRoutePreference: $viewModel.hasSetRoutePreference
|
||||
)
|
||||
.id("routePreference")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 6: Repeat Cities (after route preference)
|
||||
if viewModel.isRepeatCitiesStepVisible {
|
||||
RepeatCitiesStep(
|
||||
allowRepeatCities: $viewModel.allowRepeatCities,
|
||||
hasSetRepeatCities: $viewModel.hasSetRepeatCities
|
||||
)
|
||||
.id("repeatCities")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 7: Must Stops (after repeat cities)
|
||||
if viewModel.isMustStopsStepVisible {
|
||||
MustStopsStep(mustStopLocations: $viewModel.mustStopLocations)
|
||||
.id("mustStops")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
|
||||
// Step 8: Review (after must stops visible)
|
||||
if viewModel.isReviewStepVisible {
|
||||
ReviewStep(
|
||||
planningMode: viewModel.planningMode ?? .dateRange,
|
||||
selectedSports: viewModel.selectedSports,
|
||||
@@ -101,26 +70,15 @@ struct TripWizardView: View {
|
||||
allowRepeatCities: viewModel.allowRepeatCities,
|
||||
mustStopLocations: viewModel.mustStopLocations,
|
||||
isPlanning: viewModel.isPlanning,
|
||||
canPlanTrip: viewModel.canPlanTrip,
|
||||
onPlan: { Task { await planTrip() } }
|
||||
)
|
||||
.id("review")
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
}
|
||||
}
|
||||
.padding(Theme.Spacing.md)
|
||||
.animation(.easeInOut(duration: 0.15), value: viewModel.revealState)
|
||||
}
|
||||
.onChange(of: viewModel.revealState) { _, newState in
|
||||
// Auto-scroll to newly revealed section after a delay
|
||||
// to avoid interrupting user interactions
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.8) {
|
||||
// Only scroll if state hasn't changed (user stopped interacting)
|
||||
guard viewModel.revealState == newState else { return }
|
||||
withAnimation(.easeInOut(duration: 0.25)) {
|
||||
scrollToLatestStep(proxy: proxy)
|
||||
}
|
||||
.transition(.opacity)
|
||||
}
|
||||
}
|
||||
.padding(Theme.Spacing.md)
|
||||
.animation(.easeInOut(duration: 0.2), value: viewModel.areStepsVisible)
|
||||
}
|
||||
.themedBackground()
|
||||
.navigationTitle("Plan a Trip")
|
||||
@@ -148,26 +106,6 @@ struct TripWizardView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Auto-scroll
|
||||
|
||||
private func scrollToLatestStep(proxy: ScrollViewProxy) {
|
||||
if viewModel.isReviewStepVisible {
|
||||
proxy.scrollTo("review", anchor: .top)
|
||||
} else if viewModel.isMustStopsStepVisible {
|
||||
proxy.scrollTo("mustStops", anchor: .top)
|
||||
} else if viewModel.isRepeatCitiesStepVisible {
|
||||
proxy.scrollTo("repeatCities", anchor: .top)
|
||||
} else if viewModel.isRoutePreferenceStepVisible {
|
||||
proxy.scrollTo("routePreference", anchor: .top)
|
||||
} else if viewModel.isRegionsStepVisible {
|
||||
proxy.scrollTo("regions", anchor: .top)
|
||||
} else if viewModel.isSportsStepVisible {
|
||||
proxy.scrollTo("sports", anchor: .top)
|
||||
} else if viewModel.isDatesStepVisible {
|
||||
proxy.scrollTo("dates", anchor: .top)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Planning
|
||||
|
||||
private func planTrip() async {
|
||||
|
||||
Reference in New Issue
Block a user