Merge pull request #400 from coderoad/feature/final-page

level complete message

Author: ShMcK

web-app/src/containers/Tutorial/components/Continue.tsx

@@ -43,22 +43,25 @@ 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}
         css={{ padding: '1rem' }}
       >
         <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;

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,12 +140,35 @@ 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' },
       progress: { levels: {}, steps: {}, complete: false },
     }
     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')} />
+  })