05.08.Freeze Steps Tabs.spec

05.08. Freeze Steps Tabs.spec

1. Problem Statement

Once a user has authenticated via the Tesla app, the application state enters a complex control flow involving session-specific data (vehicles, quotes, tokens). Currently, users can navigate backwards using the top step indicator tabs. This manual state jumping can "mess up" the internal application state, leading to inconsistent UI behavior or API errors.

2. Goal

The primary goal is to lock the wizard state once a user is authenticated. In this "Frozen" state: 1. The top step indicator tabs become strictly informational (visual only) and non-clickable. 2. The user is forced into a Forward-Only linear flow. 3. The only way to "unlock" or reset the UI is for the 30-minute session to naturally expire or be manually cleared.

3. Implementation Specification

3.1 Session-Aware Locking (`stores/app.ts`)

We will leverage the existing sessionId and sessionExpiresAt fields. * isAuthenticated: A new computed property that returns true if a sessionId exists AND the current time is before sessionExpiresAt. * isFrozen: An alias for isAuthenticated used specifically for UI locking logic.

3.2 Disabling Tab Navigation (`components/StepIndicator.vue`)

The isClickable helper will be updated to return false globally whenever the session is active.

const isClickable = (stepId: number): boolean => {
  // CRITICAL: Block all tab clicks if the session is active to prevent state corruption
  if (store.isAuthenticated) return false;

  // Normal non-auth logic:
  if (stepId >= currentStepIndex.value) return false;
  if (stepId === 1) return true;
  return hasValidSession.value;
};

3.3 Automatic Cleanup & UI Reset (`App.vue`)

To prevent the user from being stuck in a "locked" state indefinitely if they leave the tab open: * A background monitor will run every 10-30 seconds. * If Date.now() > sessionExpiresAt, the app will trigger a full store.clearExpiredSessionState(). * The UI will automatically redirect to the landing step, which re-enables the interactive wizard for a new journey.

Users will advance through the following sequence strictly using the primary action buttons in the center of the screen: 1. Package Selection: Select Basic/Pro/Bulk. 2. Payment Gateway: Redirect to Stripe/PayPal. 3. Generating: Wait for report aggregation. 4. Report: View and download results.

4. User Experience (UX) Impact

Visual Feedback: When tabs are frozen, the cursor should change from pointer to default or not-allowed.
Focus: The user is encouraged to complete the transaction/viewing process without distraction or accidental navigation to the "Brand" or "OAuth" screens.

5. Security & Stability

By freezing the tabs, we ensure that the OrderSession ID on the backend always matches the expected step in the frontend, reducing "Session/Step Mismatch" errors during the sensitive payment and report-generation phases.