siimee/frontend/src/views/OnboardingView.vue

<template lang="pug">
main.view--onboarding
    article(
        style='display: flex; flex-direction: column; align-items: center'
        v-if='survey'
    )
        p {{ currentStep }}
        p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
        .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!

        .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'
            )
    // TODO: change to different vue component
    article(
        style='display: flex; flex-direction: column; align-items: center; text-align: center;'
        v-if='currentStep == 8'
    )
        h1 Thanks for Completing Our Survey!!
        h2 Please review your answers and let us know if you need to change anything.
        span Your name: {{ answered.name }}
        span Your email: {{ answered.email }}
        span Your zipcode: {{ answered.zipcode }}
        span Your blurb: {{ answered.blurb }}
        span Your image: {{ answered.image }}
        br
        button(@click="changeAnswers") Change Answers
        br
        button(@click="finalSubmit") Submit Answers

</template>

<script>
import { surveyFactory } from '@/utils'
import { allSteps } from '@/utils/lang'
import stepViews from '@/components/onboarding'

// import savesurveybyprfileid - call it on submit
// paginate to save every steps answers
export default {
    name: 'OnboardingView',
    components: {
        ...stepViews,
    },
    data: () => ({
        answered: {},
        aspectQuestions: [],
        currentStep: 0,
        survey: null,
    }),
    async created() {
        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
    },
    methods: {
        onSubmit() {
            console.log(JSON.stringify(this.answered))
            // TODO: Change to different vue component
            this.goToStep(this.currentStep + 1)
        },
        goToStep(num) {
            this.currentStep = num
        },
        updateAnswers(payload) {
            // 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)}`)
                if (k === 'aspects') return
            }
            this.goToStep(this.currentStep + 1)
        },
    },
}
</script>

<style lang="sass">
.view--onboarding
    width: 100%
    max-width: 428px
    background-color: #fff
    color: #1F2024
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif
    margin: 0 auto

    article
        height: 100vh

    .answers
        text-align: center

    .w-button
            display: flex
            width: 315px
            height: 60px
            border-radius: 6
            background-color: #D5D5D5
            color: #1F2024
            margin: 11px auto
            font-weight: bold
            font-size: 16px
            text-transform: uppercase
            &.next-btn
                border-radius: 6px
                background-color: #5BA626
                color: #1F2024
                height: 50px
                width: 315px
                font-size: 18px
                padding: 7px

    .w-card
        background-color: #1F2024
        justify-content: center
        align-items: center
        width: 100%


        h3
            text-transform: uppercase
            text-align: center
            font-size: 28px
            font-weight: bold
            color: white
            margin-top: 88px

        p
            color: white
            font-size: 18px
            padding: 11px
            text-align: center
            margin: 22px auto
            font-weight: bold

        input
            display: flex
            width: 315px
            height: 60px
            padding: 11px
            border-radius: 6
            background-color: #D5D5D5
            color: #1F2024
            margin: 11px auto
            font-weight: bold
            font-size: 16px

            .w-select
                padding: 11px
                color: #1F2024

            .search-type
                color: #1F2024
                height: 50px

        &.question
            p
                font-size: 18px
                text-align: left
                margin: 7px auto
                font-weight: normal
            section
                p
                    margin: 0
                    font-weight: bold
                    text-transform: capitalize
    .w-radio__input

        &.primary
            background-color: #FFFFFF
            border: #BCC5D3 1px solid

    .w-card__content
        .w-button
            height: 50px
            background-color: #5BA626
</style>