Sign Up

SketchSystems.spec

Sign Up
  Splash Page
    click sign up -> Phone Number Page
    click log in -> Login Page
    
  Phone Number Page
    back -> Splash Page
    
    Phone Number Input Active*
      typed -> Phone Number Input Entry
      blur -> Phone Number Input Inactive
      
      Phone Number Input Empty*
      
      Phone Number Input Entry
        submitted -> Phone Number Input Validating
        clear input -> Phone Number Input Empty

      Phone Number Error Input Entry
        submitted -> Phone Number Input Validating
        skip -> Manual PII Page

    Phone Number Input Inactive
      focused -> Phone Number Input Active
        
    # This page is actually a bit weird since you will get a text and click a link. That validates it and not an OTP.
    Phone Number Input Validating
      valid -> Bank Link Flow Page
      invalid -> Phone Number Error Input Entry
  
  ## This is purely a fallback when user's can't be validated or are having issues with the phone validation
  Manual PII Page
    back -> Phone Number Input Entry
    full name input typed -> Full Name Input Active
    email input typed -> Email Input Active
    street address input typed -> Street Address Input Active
    
    Full Name Input*
      Full Name Input Active*
    
    Email Input
      Email Input Active*
    
    ## Use Google Maps Autocomplete API 
    Street Address Input
      Street Address Input Active*
        
    Manual PII Submit Button
      validated -> Bank Link Flow Page
      invalidated -> Manual PII Page
    
  
  Bank Link Flow Page    
    Bank Link Explainer*
      click next -> Bank Link Webview
    
    # A separate diagram can be made for all possible events here as there are dozens. Instead this is high level of linked or not only.
    Bank Link Webview
      success -> Expense Choosing Page
      fail -> Home Page
      close -> Home Page
      
  Expense Choosing Page
    select expenses -> Terms And Credit Pull Approval Page
    skip -> Terms And Credit Pull Approval Page
    
  Terms And Credit Pull Approval Page
    Credit Pull Checkbox*
      checked -> Home Page  
    
  
  # Login is here for event flow purposes but is not meant to be part of this spec. This spec focuses on sign up.
  Login Page
    login -> Home Page
  
  Home Page
  
  
   

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}