Draft Email Flow

SketchSystems.spec

Draft Email Flow
  Clicked CTA
    No action for one hour? -> Aborted Creation
    Create Draft -> Initial Creation
  Draft Created
    Publish Trip -> Draft Published
    Initial Creation*
      Change Trip -> Initial Creation
      No action for 1 hour? -> Active
    Active
      Change Trip -> Active
      Do Nothing for 2 Days? -> Incative - 2d
    Incative - 2d
      Change Trip -> Active
      Do Nothing for 5 Days? -> Inactive - 7d
    Inactive - 7d
      Change Trip -> Active
      Do Nothing for 23 Days? -> Aborted Creation
  Aborted Creation
  Draft Published

SketchSystems_prototype.js

let emails = [];
let model;
function render(_model){
  model = _model;
  let current_state_name = model.active_states[0].name;
  let path = [];
  let state = model.active_states[0];
  while (state && state.name !== 'root') {
    path.push(state.name);
    state = state.parent;
  }
  state = path.reverse();
  
  return (
    <div>
     <div style={{padding: "1rem"}}>
       <p style={{color: '#ccc'}}>{
        state.map(s => (
          <div style={{ display: 'inline' }}>
            > <span style={{ ['color']: '#888' }}>{s} </span>
          </div>
         ))}
       </p>
      {renderState(current_state_name)}
      {path.find(x => x === 'Draft Created') && makeButton('Publish Trip', () => emails.push('[PUBLISH INFO] We are reviewing your trip')) }
     </div>
     <div style={{padding: "1rem"}}>
       <h2 style={{'margin': '0px'}}>User inbox</h2>
       <ul>
         {[...emails].reverse().map(subject => (
            <li>{subject}</li>
          ))}
       </ul>
     </div>
    </div>
  );
}

function renderState(stateName) {
  switch (stateName) {
    case "Clicked CTA": {
      return (
        <div>
         <h3>Editor Page 1</h3>
         <p>
          To create a draft the user fills out the first two editor pages.
         </p>
         {makeButton('Create Draft')}
         {makeButton('No action for one hour?', () => emails.push('[ABORT INFO] ❤ That will be a cool trip! '))}
        </div>
      );
    }
      
    case "Initial Creation": {
      return (
        <div>
         <h3>User has created a draft and is currently working on it in the editor</h3>
         <p>
          As soon as they stopped working on the trip (no action in one hour) we send them an email with a link to continue and a checklist of next steps.
         </p>
         {makeButton('Change Trip')}
         {makeButton('No action for 1 hour?', () => emails.push('[DRAFT CREATED] 🎉 Congrats, you just created “Flugreise in Business Class nach Thailand mit Villa Auto und Roller”!'))}
        </div>
      );
    }
  
  case "Active": {
   return (
     <div>
       <h3>User is working on their trip (adding stops, can be spread over some time)</h3>
       {makeButton('Change Trip')}
       {makeButton('Do Nothing for 2 Days?', () => emails.push('[CONTINUE CHECKLIST] 🌟 Your trip is looking better every day!'))}
     </div>
   )
  }
      
    case "Incative - 2d": {
      return (
        <div>
         <h3>User has been inactive for 2 days since last edit</h3>
         {makeButton('Change Trip')}
         {makeButton('Do Nothing for 5 Days?', () => emails.push('[CONTINUE CHECKLIST | SOCIAL PROOF] ✔️ Are you ready for your first TravelMate booking?'))}
        </div>
      );
    }
    
    case "Inactive - 7d": {
      return (
        <div>
         <h3>User has been inactive for 7 days since last edit</h3>
         {makeButton('Change Trip')}
         {makeButton('Do Nothing for 23 Days?')}
        </div>
      );
    }
      
    case "Aborted Creation": {
      return (
        <div>
         <h3>User has not created a draft but dropped somewhere in the process.</h3>
         <p>
            -> We sign them up into a slow content flow to keep them engaged.
            <br/>e.g.<br/>
            <ul>
              <li>The best way to finance travel (without much work)</li>
              <li>Why you shouldn't order coffee in a plane</li>
              <li>The best secret travel spots to visit this Summer</li>
            </ul>
         </p>
        </div>
      );
    }
  }
}

function makeButton(action, cbl) {
 return (
   <button onClick={() => {
     if (cbl) {
       cbl(); 
     }
     model.emit(action);
   }}>
     {action}
   </button>
 )
}