From 6e96f2a5f813a8f75c8f0d926c1b721197307a3d Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Tue, 21 Jul 2020 20:58:33 -0700
Subject: [PATCH] level complete message

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 .../Tutorial/components/Continue.tsx          |  7 +++--
 web-app/stories/Tutorial.stories.tsx          | 29 ++++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/web-app/src/containers/Tutorial/components/Continue.tsx b/web-app/src/containers/Tutorial/components/Continue.tsx
index 19451990..5a974a4f 100644
--- a/web-app/src/containers/Tutorial/components/Continue.tsx
+++ b/web-app/src/containers/Tutorial/components/Continue.tsx
@@ -43,13 +43,15 @@ const Continue = (props: Props) => {
     onClose()
   }
 
+  const isComplete = props.current === props.max
+
   return (
     <>
       <Button type="primary" size="medium" onClick={onOpen}>
         Continue
       </Button>
       <Dialog
-        title="Level Complete!"
+        title={isComplete ? 'Tutorial Complete!' : 'Level Complete!'}
         visible={modalState === 'open'}
         onClose={onClose}
         footer={false}
@@ -57,8 +59,9 @@ const Continue = (props: Props) => {
       >
         <div css={styles.content}>
           <ProgressPie current={props.current} max={props.max} />
+
           <div css={styles.message}>
-            <h3>{props.title}</h3>
+            <h3>{isComplete ? 'Congratulations!' : props.title}</h3>
             <br />
             <Button type="primary" size="large" onClick={onContinue}>
               Continue&nbsp;&nbsp;
diff --git a/web-app/stories/Tutorial.stories.tsx b/web-app/stories/Tutorial.stories.tsx
index a44bcbf1..d2017b9e 100644
--- a/web-app/stories/Tutorial.stories.tsx
+++ b/web-app/stories/Tutorial.stories.tsx
@@ -9,8 +9,6 @@ import SideBarDecorator from './utils/SideBarDecorator'
 const context: Partial<T.MachineContext> = {
   env: { machineId: '', sessionId: '', token: '' },
   error: null,
-  position: { levelId: '2', stepId: '2.2' },
-  progress: { levels: { '1': true }, steps: { '1.1': true, '1.2': true, '1.3': true, '2.1': true }, complete: false },
   processes: [],
   testStatus: null,
   tutorial: {
@@ -142,7 +140,7 @@ const context: Partial<T.MachineContext> = {
 storiesOf('Tutorial', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
-  .add('1 step', () => {
+  .add('1.1 Start', () => {
     const firstLevel = {
       ...context,
       position: { levelId: '1', stepId: '1.2' },
@@ -150,4 +148,27 @@ storiesOf('Tutorial', module)
     }
     return <Tutorial state="Normal" context={firstLevel} send={action('send')} />
   })
-  .add('3 step', () => <Tutorial state="Normal" context={context} send={action('send')} />)
+  .add('1.3 Level Complete', () => {
+    const levelComplete = {
+      ...context,
+      position: { levelId: '1', stepId: '1.2' },
+      progress: { levels: {}, steps: { '1.1': true }, complete: false },
+    }
+    return <Tutorial state="LevelComplete" context={levelComplete} send={action('send')} />
+  })
+  .add('3.1 Level Start', () => {
+    const newLevel = {
+      ...context,
+      position: { levelId: '1', stepId: '1.2' },
+      progress: { levels: { '1': true, '2': true }, steps: {}, complete: false },
+    }
+    return <Tutorial state="Normal" context={newLevel} send={action('send')} />
+  })
+  .add('3.3 Final', () => {
+    const lastLevel = {
+      ...context,
+      position: { levelId: '3', stepId: '3.3' },
+      progress: { levels: { '3': true }, steps: { '3.3': true }, complete: true },
+    }
+    return <Tutorial state="LevelComplete" context={lastLevel} send={action('send')} />
+  })