:recycle: working static onboarding flow

frontend/src/components/onboarding/Aspects.vue

@@ -24,13 +24,13 @@ export default {
             required: true,
             type: Array,
         },
-        currentStep: {
-            required: true,
-            type: Number,
-            default: 0,
-        },
     },
     emits: ['handle-submit', 'update-answers'],
+    async created() {
+        this.aspectQuestions.forEach((q,i) => {
+            console.log(`Aspect #${i}: ${JSON.stringify(q)}`) 
+        })
+    },
     methods: {
         updateRadio(onRadioSelect) {
             answered[onRadioSelect.id] = onRadioSelect.answer

frontend/src/components/onboarding/QuestionResponse.vue

@@ -27,7 +27,8 @@ export default {
     }),
     methods: {
         onUpdate(e) {
-            this.$emit('updated', { ...this.question, answer: e + 1 })
+            console.log('event: ', e)
+            // this.$emit('updated', { ...this.question, answer: e + 1 })
         },
     },
 }

frontend/src/components/onboarding/Splash.vue

@@ -2,7 +2,8 @@
 .splash
     .splash--icon(style='width: 347px; height: 347px; background-color: red')
     div(style='text-align: center')
-        w-button.ma1.grow(@click='this.$emit("go-to-step", currentStep + 1)') GET STARTED
+        w-button.ma1.grow(@click='handleSubmit') GET STARTED
+
 </template>
 
 <script>
@@ -15,5 +16,12 @@ export default {
             default: 0,
         },
     },
+    emits: ['update-answers'],
+    methods: {
+        handleSubmit() {
+            this.$emit('update-answers', null)
+        },
+    },
+
 }
 </script>

frontend/src/entities/survey/survey.js

@@ -35,6 +35,7 @@ class Survey extends _baseRecord {
         /**  Fields */
         this.steps = [...questionSteps] // ! required
         this.aspectQuestions = _formatAspectQuestions(this.steps)
+        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
     }
 
     isValid() {

frontend/src/utils/lang.js

@@ -3,20 +3,23 @@ const DELIMITER = '_'
 // TODO: Combine these two
 const allSteps = {
     usa: {
-        email: 'email',
+        splash: 'splash',
         name: 'name',
-        pronouns: 'pronouns',
-        seeking: 'seeking',
-        urgency: 'urgency',
-        experience: 'experience',
-        roles: 'role',
-        duration: 'duration',
-        presence: 'presence',
-        language: 'language',
+        email: 'email',
+        password: 'password',
+        // pronouns: 'pronouns',
+        // seeking: 'seeking',
+        // urgency: 'urgency',
+        // experience: 'experience',
+        // roles: 'role',
+        // duration: 'duration',
+        // presence: 'presence',
+        // language: 'language',
         zipcode: 'zipcode',
-        distance: 'distance',
+        // distance: 'distance',
         blurb: 'blurb',
         image: 'image',
+        aspects: 'aspects'
     },
 }
 

frontend/src/utils/survey.js

@@ -3,18 +3,20 @@ import { fetchQuestions } from '../services/index.js'
 import { possible } from './lang.js'
 
 const promptToComponent = {
-    email: 'FormInput',
+    splash: 'Splash',
     name: 'FormInput',
-    seeking: 'FormDropdown',
-    urgency: 'FormDropdown',
-    presence: 'FormDropdown',
-    duration: 'FormDropdown',
-    experience: 'FormTags',
-    pronouns: 'FormDropdown',
-    language: 'FormDropdown',
-    image: 'FormInput',
-    distance: 'FormInput',
+    email: 'FormInput',
+    password: 'FormInput',
     zipcode: 'FormInput',
+    // seeking: 'FormDropdown',
+    // urgency: 'FormDropdown',
+    // presence: 'FormDropdown',
+    // duration: 'FormDropdown',
+    // experience: 'FormTags',
+    // pronouns: 'FormDropdown',
+    // language: 'FormDropdown',
+    image: 'FormInput',
+    // distance: 'FormInput',
     blurb: 'FormInput',
     aspects: 'Aspects'
 }
@@ -64,8 +66,9 @@ class SurveyFactory {
             console.log('withComponent :>> ', withComponent)
             return withComponent
         })
-        const unseen = this.questionsFromDb.filter(
-            q => !seenIds.includes(q.response_key_id),
+        // temporary extra condition in filter 
+        let unseen = this.questionsFromDb.filter(
+            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
         )
         return [...stepsInCommon, ...unseen]
     }

frontend/src/views/OnboardingView.vue

@@ -11,19 +11,8 @@ main.view--onboarding
                 :question='step'
                 @handle-submit='onSubmit'
                 @update-answers='updateAnswers'
-                v-if='step.component'
+                v-if='step && currentStep == i'
             )
-            p(v-else) {{ step }}
-            p step: {{ i + 1 }} of {{ survey.steps.length }}
-            //- component(
-            //-     :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
-            //-     :is='step.component'
-            //-     :question='step'
-            //-     @handle-submit='onSubmit'
-            //-     @update-answers='updateAnswers'
-            //-     v-if='step && currentStep == i'
-            //- )
-            //- p(v-if='currentStep == i') step: {{ i+1 }} of {{ survey.steps.length }}
 </template>
 
 <script>
@@ -46,22 +35,8 @@ export default {
     }),
     async created() {
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
-        this.configureAspectStep()
     },
     methods: {
-        configureAspectStep(){
-            // remove all steps regarding aspects
-            this.survey.steps = this.survey.steps.slice(0,this.survey.steps.length-6)
-            // insert single step to render Aspects component
-            this.survey.steps.push({
-                response_key_id:1,
-                response_key_category:"profile",
-                response_key_prompt:"aspects",
-                response_key_description:"",
-                responses:[],
-                component:"Aspects"
-            })
-        },
         onSubmit() {
             console.log(JSON.stringify(this.answered))
         },
@@ -69,9 +44,13 @@ export default {
             this.currentStep = num
         },
         updateAnswers(payload) {
-            const k = payload.question.response_key_prompt
-            this.answered[k] = payload.answer
-            console.log(`${k}:`, this.answered[k])
+            // null payload is passed on splash page
+            if(payload){
+                const k = payload.question.response_key_prompt
+                this.answered[k] = payload.answer
+                console.log(`${k}:`, this.answered[k])
+                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
+            }
             this.goToStep(this.currentStep + 1)
         },
     },