:sparkles: Rendering dynamic thank you at survey completion

frontend/src/views/OnboardingView.vue

@@ -2,7 +2,7 @@
 main.view--onboarding
     article(
         style='display: flex; flex-direction: column; align-items: center'
-        v-if='survey'
+        v-if='incomplete'
     )
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
         .answers(v-for='(value, key) in answered')
@@ -20,7 +20,7 @@ main.view--onboarding
                 v-if='step && currentStep == i'
             )
     article(v-else)
-        SurveyCompleteView(:answers='answered')
+        SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
 </template>
 
 <script>
@@ -42,6 +42,7 @@ export default {
         aspectQuestions: [],
         currentStep: 0,
         survey: null,
+        incomplete: true,
     }),
     async created() {
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
@@ -49,8 +50,7 @@ export default {
     methods: {
         onSubmit() {
             console.log(JSON.stringify(this.answered))
-            this.survey = null
-            this.goToStep(this.currentStep + 1)
+            this.incomplete = null
         },
         goToStep(num) {
             this.currentStep = num

frontend/src/views/SurveyCompleteView.vue

@@ -4,9 +4,17 @@ main.view--surveycomplete
         h2 Thanks for Completing Our Survey!!
         h1 Please review your answers and let us know if you need to change anything.
         br
+        h1 Your Profile Info:
         div(v-for='(answer, key) in answers')
-            span(v-if='answer')  Your {{ key }}: {{ answer }}
+            span(v-if='answer && key != "aspects"')  Your {{ key }}: {{ answer }}
         br
+        div(v-if="answers.aspects")
+            h1 Your Survey Answers:
+        div(v-for='(aspect, index) in answers.aspects')
+            div(v-if='aspect')
+                p {{ surveyObjects[index].response_key_prompt }}
+                p You Answered:  {{aspect}}
+                br
         button(@click="changeAnswers") Change Answers
         br
         button(@click="finalSubmit") Submit Answers
@@ -17,8 +25,18 @@ export default {
     props: {
         answers: {
             type: Object,
-            default: () => ({})
+            default: () => ({}),
         },
-    }
+        surveySteps: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data: () => ({
+        surveyObjects: [],
+    }),
+    created() {
+        this.surveyObjects = this.surveySteps.slice(-6)
+    },
 }
 </script>