Parcourir la source

:recycle: Refactored a onboarding survey flow

tags/0.0.3^2
tomit4 il y a 3 ans
Parent
révision
24f709b46e

+ 2
- 2
frontend/src/components/onboarding/FormInput.vue Voir le fichier

1
 <template lang="pug">
1
 <template lang="pug">
2
 .form-input
2
 .form-input
3
-    h3 Welcome to Siimee Onboarding! Let's get started!
3
+    h3(v-if='question.response_key_prompt == "name"') Welcome to Siimee Onboarding! Let's get started!
4
     span(v-if='question.response_key_prompt == "name"') Hi there, my {{ question.response_key_prompt }} is: 
4
     span(v-if='question.response_key_prompt == "name"') Hi there, my {{ question.response_key_prompt }} is: 
5
     input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
5
     input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
6
     span(v-if='question.response_key_prompt == "email"') My {{ question.response_key_prompt }} is: 
6
     span(v-if='question.response_key_prompt == "email"') My {{ question.response_key_prompt }} is: 
7
-    input(v-if='question.response_key_prompt == "email"' placeholder='Jon_Doe@myemail.com' type='text' v-model='input')
7
+    input(v-if='question.response_key_prompt == "email"' placeholder='jon_doe@generic_email.com' type='text' v-model='input')
8
     span(v-if='question.response_key_prompt == "password"') Please input a {{ question.response_key_prompt }}: 
8
     span(v-if='question.response_key_prompt == "password"') Please input a {{ question.response_key_prompt }}: 
9
     input(v-if='question.response_key_prompt == "password"' placeholder='mysupersecretpassword' type='text' v-model='input')
9
     input(v-if='question.response_key_prompt == "password"' placeholder='mysupersecretpassword' type='text' v-model='input')
10
     span(v-if='question.response_key_prompt == "zipcode"') What zipcode would you like to see results from?{{ question.response_key_prompt }}: 
10
     span(v-if='question.response_key_prompt == "zipcode"') What zipcode would you like to see results from?{{ question.response_key_prompt }}: 

+ 15
- 11
frontend/src/views/OnboardingView.vue Voir le fichier

4
         style='display: flex; flex-direction: column; align-items: center'
4
         style='display: flex; flex-direction: column; align-items: center'
5
         v-if='survey'
5
         v-if='survey'
6
     )
6
     )
7
-        p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
8
-        p(v-if='answered.name') Welcome {{ answered.name }}!
9
-        p(v-if='answered.email') It looks like your email is: {{ answered.email }}.
10
-        p(v-if='answered.zipcode') You're looking for opportunities around: {{ answered.zipcode }}.
11
-        p(v-if='answered.blurb') This is your Origin Story:
12
-            p {{ answered.blurb }}.
13
-        p(v-if='answered.image') You've uploaded the following image:
14
-            p {{ answered.image }}.
7
+        p(v-if='currentStep != 0 && answered.name') You have completed: {{ currentStep - 1 }} / 7 survey steps
8
+        p(v-for='(value, key) in answered')
9
+            span(v-if='key == "name"') Welcome {{ value }}!
10
+            span(v-if='key == "email"') All messages we will send to: {{ value }}
11
+            span(v-if='key == "zipcode"') Your zipcode is: {{ value }}
12
+            span(v-if='key == "blurb"') This is your Origin Story:
13
+                p {{ value }}
14
+            p(v-if='key == "image"') You've uploaded the following image:
15
+                p {{ value }}
15
         .step(v-for='(step, i) in survey.steps')
16
         .step(v-for='(step, i) in survey.steps')
16
             component(
17
             component(
17
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
18
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
21
                 @update-answers='updateAnswers'
22
                 @update-answers='updateAnswers'
22
                 v-if='step && currentStep == i'
23
                 v-if='step && currentStep == i'
23
             )
24
             )
25
+    article(
26
+            style='display: flex; flex-direction: column; align-items: center'
27
+            v-else
28
+    )
29
+        h1(style='text-align: center') Thank you for completing Siimee's Onboarding Survey!
24
 </template>
30
 </template>
25
 
31
 
26
 <script>
32
 <script>
45
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
51
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
46
     },
52
     },
47
     methods: {
53
     methods: {
48
-        // this onSubmit() should actually submit and bring up a page that
49
-        // confirms submission (thank you, etc.)
50
-        // it appears that this should then start to display ./SurveyView.vue(?)
51
         onSubmit() {
54
         onSubmit() {
52
             console.log(JSON.stringify(this.answered))
55
             console.log(JSON.stringify(this.answered))
56
+            this.survey = null
53
         },
57
         },
54
         goToStep(num) {
58
         goToStep(num) {
55
             this.currentStep = num
59
             this.currentStep = num

Chargement…
Annuler
Enregistrer