# User Flow Documentation ## Onboarding Flow ```mermaid stateDiagram-v2 [*] --> LandingPage: User visits site LandingPage --> Registration: Click "Sign Up" Registration --> GoogleAuth: Click "Sign in with Google" GoogleAuth --> WelcomePage: Successfully authenticated GoogleAuth --> Registration: Authentication failed WelcomePage --> SetupOptions: Choose setup path SetupOptions --> GuidedTour: Choose "Show me around" SetupOptions --> APIKeySetup: Choose "Set up API keys" SetupOptions --> SkipSetup: Choose "Skip for now" GuidedTour --> APIKeySetup: Tour complete APIKeySetup --> Dashboard: API keys set SkipSetup --> Dashboard: Skip setup Dashboard --> [*] ``` ### Steps Breakdown: 1. **Landing Page** - Introduction to TradingScriptPro - Value proposition - Call-to-action for sign-up - Login option for existing users 2. **Registration** - Google social login option - Terms of service acceptance - Privacy policy acknowledgment 3. **Google Authentication** - Secure OAuth flow - Email permission request 4. **Welcome Page** - Welcome message for new users - Brief explanation of the 5 free credits - Setup options presentation 5. **API Key Setup (Optional)** - Educational content about LLM API keys - Secure input fields for API keys - Validation and test connection 6. **Guided Tour (Optional)** - Interactive walkthrough of key features - Example strategy creation - Quick tips for best results ## Core User Journey: Strategy Creation ```mermaid stateDiagram-v2 [*] --> Dashboard: User logged in Dashboard --> StrategyBuilder: Click "Create New Strategy" Dashboard --> AIGenerator: Click "AI Generate Strategy" StrategyBuilder --> TrendSetup: Step 1 TrendSetup --> EntrySetup: Continue EntrySetup --> ExitSetup: Continue ExitSetup --> StopLossSetup: Continue StopLossSetup --> StrategyReview: All components configured AIGenerator --> AIPromptInput: Describe strategy goals AIPromptInput --> AIProcessing: Submit request AIProcessing --> AIResults: Strategy generated AIProcessing --> AIError: Generation failed AIError --> AIPromptInput: Retry with modifications AIResults --> StrategyReview: Review generated strategy StrategyReview --> StrategyTesting: Preview strategy StrategyReview --> StrategyModification: Edit components StrategyModification --> StrategyReview: Changes complete StrategyTesting --> StrategySaving: Save strategy StrategySaving --> ExportOptions: Strategy saved ExportOptions --> PineScriptMinimal: Export minimal code ExportOptions --> PineScriptDetailed: Export detailed code ExportOptions --> ShareCommunity: Share with community PineScriptMinimal --> Dashboard: Return to dashboard PineScriptDetailed --> Dashboard: Return to dashboard ShareCommunity --> Dashboard: Return to dashboard ``` ### Steps Breakdown: 1. **Strategy Builder Entry** - Two paths: Manual builder or AI generator - Clear explanation of each approach - Credit usage information for AI generation 2. **Manual Strategy Building** - **Trend Setup**: - Select from trend indicators - Configure parameters - Visual feedback on selection - **Entry Setup**: - Select from entry indicators - Configure parameters - Rules for entry conditions - **Exit Setup**: - Select from exit indicators - Configure parameters - Rules for exit conditions - **Stop Loss Setup**: - Configure stop loss approach - Set parameters (fixed, trailing, indicator-based) - Risk management options 3. **AI Strategy Generation** - **Prompt Input**: - Market selection - Trading style preferences - Goals and risk tolerance - **Processing**: - Loading indicator - Status updates - Credit usage notification - **Results**: - Complete strategy presentation - Educational explanation of components - Options to modify or accept 4. **Strategy Review** - Complete strategy overview - Component interaction explanation - Performance expectations - Modification options 5. **Export Options** - PineScript code generation: - Minimal code option - Detailed commented code option - Copy to clipboard functionality - Community sharing option - Version saving ## Account Management Flow ```mermaid stateDiagram-v2 [*] --> Dashboard Dashboard --> AccountSettings: Click user avatar AccountSettings --> SubscriptionManagement: "Subscription" tab AccountSettings --> APIKeyManagement: "API Keys" tab AccountSettings --> ProfileSettings: "Profile" tab SubscriptionManagement --> ViewCurrentPlan: View subscription details SubscriptionManagement --> UpgradePlan: Upgrade to premium SubscriptionManagement --> EnterCoupon: Apply coupon code UpgradePlan --> PaymentSelection: Choose payment method PaymentSelection --> StripeCheckout: Stripe selected PaymentSelection --> PayPalCheckout: PayPal selected StripeCheckout --> SubscriptionConfirmation: Payment successful PayPalCheckout --> SubscriptionConfirmation: Payment successful SubscriptionConfirmation --> Dashboard: Return to dashboard APIKeyManagement --> AddNewKey: Add new provider key APIKeyManagement --> RemoveKey: Remove existing key APIKeyManagement --> UpdateKey: Update existing key AddNewKey --> APIKeyValidation: Test connection UpdateKey --> APIKeyValidation: Test connection APIKeyValidation --> APIKeySuccess: Validation passed APIKeyValidation --> APIKeyError: Validation failed APIKeySuccess --> APIKeyManagement: Return to key management APIKeyError --> AddNewKey: Try again RemoveKey --> APIKeyManagement: Key removed ProfileSettings --> UpdateProfile: Edit profile information UpdateProfile --> ProfileSettings: Save changes ``` ### Steps Breakdown: 1. **Account Settings Entry** - User avatar menu in header - Settings categories - Account status overview 2. **Subscription Management** - Current plan display - Usage statistics (credits remaining) - Upgrade options with benefits - Coupon code redemption 3. **Payment Process** - Payment method selection - Secure checkout integration - Order summary - Confirmation and receipt 4. **API Key Management** - Current keys display (partially masked) - Add/update/remove functionality - Connection testing - Security information 5. **Profile Settings** - Basic profile information - Email preferences - Account deletion option ## Error Handling Flows ```mermaid stateDiagram-v2 [*] --> UserAction: User performs action UserAction --> Success: Action completes successfully UserAction --> Error: Action fails Error --> ValidationError: Input validation fails Error --> APIError: API call fails Error --> CreditsExhausted: User out of credits Error --> AuthError: Authentication issue ValidationError --> InlineErrorDisplay: Show error next to input ValidationError --> UserAction: User corrects input APIError --> ConnectionErrorModal: Show API connection error APIError --> APITroubleshooting: Show troubleshooting steps CreditsExhausted --> UpgradePrompt: Show upgrade offer CreditsExhausted --> CouponPrompt: Offer coupon option AuthError --> ReauthPrompt: Prompt for reauthentication InlineErrorDisplay --> UserAction: User corrects error ConnectionErrorModal --> APIKeyManagement: Go to API key settings APITroubleshooting --> UserAction: User retries after troubleshooting UpgradePrompt --> SubscriptionManagement: User opts to upgrade CouponPrompt --> EnterCoupon: User enters coupon ReauthPrompt --> GoogleAuth: User reauthenticates ``` ### Error Scenarios and Recovery: 1. **Validation Errors** - Field-specific error messages - Immediate feedback on input - Clear recovery instructions 2. **API Connection Errors** - Clear explanation of the issue - Troubleshooting steps: - Check API key validity - Verify internet connection - Check LLM provider service status - Retry options with backoff 3. **Credits Exhausted** - Friendly notification - Options to: - Upgrade to premium - Enter coupon code - Review existing strategies 4. **Authentication Errors** - Session expiration handling - Secure re-authentication - Session persistence options ## Alternative Flows 1. **Guest Mode (Limited Features)** - Strategy browsing only - Community section access - Call-to-action for registration 2. **Free vs. Premium User Paths** - Clear indicators of premium features - Upgrade prompts at strategic points - Value demonstration before paywall