:recycle: Extended refactoring to other onboarding components

frontend/src/components/onboarding/Aspects.vue

@@ -38,9 +38,9 @@ export default {
             this.$emit('update-answers', {
                 key: 'Aspects',
                 question: {
-                    response_key_prompt: 'aspects',
+                    survey_stage: 'aspects'
                 },
-                answer: answered,
+                input: answered,
             })
         },
     },

frontend/src/components/onboarding/FormDropdown.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 .role
-    h3 {{ question.response_key_category }}
-    p {{ question.response_key_prompt }}
+    span {{ question.response_key_prompt }}
     w-select.mt4(:items='items' placeholder='i am' v-model='selection')
     w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
@@ -32,7 +31,7 @@ export default {
             }
             let payload = {
                 question: this.question,
-                answer: this.selection,
+                input: this.selection,
             }
             this.$emit('update-answers', payload)
         },

frontend/src/components/onboarding/FormInput.vue

@@ -1,8 +1,12 @@
 <template lang="pug">
 .form-input
     span {{ question.response_key_prompt }}
-    input(:placeholder='question.placeholder' type='text' v-model='input')
-    w-button.ma1.grow(@click="this.$emit('update-answers', { question, input })") NEXT
+    input(v-if="question.survey_stage !== 'image' && question.survey_stage !== 'blurb'" :placeholder='question.placeholder' type='text' v-model='input')
+    w-button.ma1.grow(v-else-if="question.survey_stage == 'image'" @click="submitImage") UPLOAD IMAGE
+    textarea(v-else-if="question.survey_stage == 'blurb'" rows="4" cols="50"
+            v-model='input' :placeholder="`${question.placeholder}`")
+    w-button.ma1.grow(@click="handleSubmit({ question, input })") NEXT
+    
 </template>
 <script>
 export default {
@@ -18,22 +22,17 @@ export default {
         input: null,
     }),
     methods: {
-        handleSubmit() {
-            if (this.question.response_key_prompt === 'password') {
-                this.$emit('update-answers') // no password collection
-                return
+        handleSubmit(answerInfo) {
+            if (answerInfo.question.survey_stage === 'password') {
+                this.$emit('update-answers') // don't reveal password here...
+            } else {
+                this.$emit('update-answers', answerInfo)
             }
-
-            let payload = {
-                question: this.question,
-                answer: this.input,
-            }
-            this.$emit('update-answers', payload)
         },
         submitImage() {
             let payload = {
                 question: this.question,
-                answer: 'placeholder for image',
+                input: 'placeholder for image',
             }
             this.$emit('update-answers', payload)
         },

frontend/src/utils/lang.js

@@ -7,19 +7,19 @@ const allSteps = {
         name: 'name',
         email: 'email',
         password: 'password',
-        // pronouns: 'pronouns',
-        // seeking: 'seeking',
-        // urgency: 'urgency',
-        // experience: 'experience',
-        // roles: 'role',
-        // duration: 'duration',
-        // presence: 'presence',
-        // language: 'language',
         zipcode: 'zipcode',
-        // distance: 'distance',
-        // blurb: 'blurb',
-        // image: 'image',
+        seeking: 'seeking',
+        urgency: 'urgency',
+        presence: 'presence',
+        duration: 'duration',
+        pronouns: 'pronouns',
+        language: 'language',
+        image: 'image',
+        distance: 'distance',
+        blurb: 'blurb',
         aspects: 'aspects',
+        // experience: 'experience',
+        // roles: 'role',
     },
 }
 
@@ -81,23 +81,33 @@ possible.usa = {
     blurb: [],
 }
 
+// TODO: set up a separate object of similar prompts based off of
+// employer/employee, right now is generic
 const promptOverrides = {
     name: "What's your name?:",
     email: "In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?:",
     password:
         "Next we'll need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters. Please enter your:",
     zipcode:
-        "Password looks good! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. What's your zip code?:",
+        "Looking good so far! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. What's your zip code?:",
     blurb: "Please provide us with a short blurb about yourself. What's your backstory?:",
     image: "Hey, you're almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:",
+    seeking: "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?",
+    pronouns: "When others refer to you, what pronouns do you prefer they use?:",
+    urgency: "How soon do you need the position filled or you need to be employed?",
+    presence: "Would you prefer remote, hybrid, in-person work?",
+    duration: "What kind of duration would you prefer? Are you looking for part-time, full-time, other?",
+    language: "Your native language is?...",
+    distance: "What distance from your home are you looking to work in?",
 }
 
 const inputPlaceholders = {
     name: 'Joe Doe',
     email: 'Joe@mailme.com',
     zipcode: '90012',
-    blurb: '',
-    image: '',
+    password: 'supersecr3tp@ssword',
+    blurb: 'my backstory starts long long ago...',
+    distance: '5 mi'
 }
 
 export {

frontend/src/utils/survey.js

@@ -8,17 +8,18 @@ const promptToComponent = {
     email: 'FormInput',
     password: 'FormInput',
     zipcode: 'FormInput',
-    // seeking: 'FormDropdown',
-    // urgency: 'FormDropdown',
-    // presence: 'FormDropdown',
-    // duration: 'FormDropdown',
-    // experience: 'FormTags',
-    // pronouns: 'FormDropdown',
-    // language: 'FormDropdown',
+    seeking: 'FormDropdown',
+    urgency: 'FormDropdown',
+    presence: 'FormDropdown',
+    duration: 'FormDropdown',
+    pronouns: 'FormDropdown',
+    language: 'FormDropdown',
     image: 'FormInput',
-    // distance: 'FormInput',
+    distance: 'FormInput',
     blurb: 'FormInput',
     aspects: 'Aspects',
+    // experience: 'FormTags',
+    // role: 'FormDropdown',
 }
 /**
  * Make a step from match or step information
@@ -69,7 +70,7 @@ class SurveyFactory {
                 const langStub = responseKeyLike.response_key_prompt
                 withComponent.response_key_prompt = promptOverrides[langStub]
                 withComponent.placeholder = inputPlaceholders[langStub]
-                withComponent.charzard = langStub
+                withComponent.survey_stage = langStub
             }
 
             return withComponent

frontend/src/views/OnboardingView.vue

@@ -7,21 +7,21 @@ main.view--onboarding
         .answers(v-for='(value, key) in answered')
             span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
             span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
-            span(v-if='key == "zipcode" && value && currentStep == 5') Very cool, {{ answered.name }}, we'll be sure only to show you results in your area. Now let's get to know more about you!
-
+            
         h3(v-if="currentStep == 1") Welcome to Siimee Onboarding! Let's get started!
-        
+        br
         .step(v-for='(step, i) in survey.steps')
             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'
             )
             
         footer
-            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length }} survey steps
+            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length -2 }} survey steps
     
     article(v-else)
         SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
@@ -62,11 +62,10 @@ export default {
         updateAnswers(payload) {
             // null payload is passed on splash page
             if (payload) {
-                // const k = payload.question.response_key_prompt
-                this.answered[payload.question.charzard] = payload.input
-                // console.log(`${k}:`, this.answered[k])
-                // console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
-                // if (k === 'aspects') return
+                const k = payload.question.survey_stage
+                this.answered[k] = payload.input
+                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
+                if (k === 'aspects') return
             }
             console.log('this.answered :>> ', this.answered)
             if (this.currentStep > this.survey.steps.length) {