Skip to content

Instantly share code, notes, and snippets.

@Kamshak Kamshak/SketchSystems.spec
Last active Sep 28, 2018

Embed
What would you like to do?
Draft Email Flow
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
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>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.