Credit-Zombies/resources/js/components/partials/modal.vue

<template>
    <div  class="modal-backdrop">
        <div class="modal" >
            <header class="modal-header">
                <slot name="header">
                    Complete The Identity Question
                </slot>
<!--                <button type="button"  class="btn-close" @click="close" >  x  </button>-->
            </header>

            <section class="modal-body">
                <div class="text" style="margin-top: 10px" v-if="isButtonDisabled">
                    <p style="color:red;text-align:center">All fields are required</p>
                </div>
                <div class="text" v-if="message">
                    <p style="color:red;text-align:center">{{ message[0] }}</p>
                </div>
                <slot name="body">
                    <fieldset class="fieldset-body">
                        <legend class="label-text">Complete The Identity Questions Below<br></legend>
                        <div v-for="(item,key) in questionAnswer.idVerificationCriteria">
                            <div class="input-text" v-if="getQuestionCounter(key) > 0">
                            <div class="input-div">
                                <label class="label-text"  >  {{item.displayName}} </label>
                                <div class="radio-text"  v-for="subitem in item.choiceList.choice">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" @change="radioButtonEvent($event,getQuestionCounter(key))" v-model="answers['answer'+getQuestionCounter(key)]" :value="{id: subitem.key, name: subitem.display}">
                                            {{subitem.display}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </fieldset>
                </slot>
            </section>

            <footer class="modal-footer">
<!--                        <div class="input-div buttons" style="text-align: left">-->
<!--                            <button  type="button" value="Back" class="back_button" @click="close">-->
<!--                                Skip-->
<!--                            </button>-->
<!--                        </div>-->
                        <div class="input-div buttons" style="text-align: right">
                            <button :disabled="isNotValid"  type="submit" value="Next" class="next_button" @click="submitQuestion" >
                                Submit
                            </button>
                        </div>
            </footer>
        </div>
    </div>
</template>

<script>
import useVuelidate from '@vuelidate/core'
import {required} from "@vuelidate/validators";
import {
    getCustomerToken,
    setStep,
    getTrackingToken,
    getReferenceNumber,
    unsetTrackingToken,
    unsetCustomerToken,
    unsetReferenceNumber, setUserQuestionAnswer, getLocalStorage, setLocalStorage, unsetLocalStorage
} from "../../helper";
import router from "../../router";
import register from "../../Api/register";

export default {
    name: 'modal.vue',
    setup() {

        return {v$: useVuelidate()}
    },
    data() {
        let finalFormData = {};
        let qa = this.questionAnswer.idVerificationCriteria;
        finalFormData['email'] = "";
        finalFormData['customerToken'] = "";
        finalFormData['trackingToken'] = "";
        finalFormData['referenceNumber'] = "";
        let totalQuestion = 0;
        let qa_assoc = {};
        for (let q in qa){
            if(this.getQuestionCounter(q) > 0) {
               // qa_assoc[q] = qa[q].displayName;
                qa_assoc[`answer${this.getQuestionCounter(q)}`] = {
                    'question':qa[q].displayName,
                    'answer':""
                };
                totalQuestion++;
            }
        }
        finalFormData['security_question_answer'] = qa_assoc;
        console.log('qa', 'key ', finalFormData)
        return {
            formData: finalFormData,
            answers:{},
            totalQuestion:totalQuestion,
            isNotValid:true,
            message: [
                "All fields are required"
            ],
        }
    },
    props: {
        questionAnswer: {
            type: Object,
        },
    },
    mounted() {


    },

    methods: {
        // close() {
        //     this.$emit('close');
        // },
        radioButtonEvent(event,counter){
            this.isNotValid = true;
            if(this.totalQuestion == Object.keys(this.answers).length){
                console.log('correct')
                this.isNotValid = false;
            }
        },
        getQuestionCounter(key){
            let result = "";

            if(key){
                result = key.replace('question','')
            }

            return result > 0 ? result : 0;
        },
        async submitQuestion (){
            if(!this.isNotValid) {
                const userData = JSON.parse(getLocalStorage('formData')) || [];
                this.formData.email = userData.email;
                this.formData.customerToken = getCustomerToken();
                this.formData.trackingToken = getTrackingToken();
                this.formData.referenceNumber = getReferenceNumber();
                let security_question_answer = this.formData.security_question_answer
                for(let ans in this.answers){
                    security_question_answer[ans].answer = this.answers[ans];
                }

                this.formData.security_question_answer = security_question_answer;
            }
            /*console.log('dddd',this.formData);
            return false*/
            // this.formData.questionAnswer = this.questionAnswer;
            const data = await register.postIdentityQuestion(this.formData);
            if (data.status_code == "100") {
                unsetCustomerToken();
                unsetTrackingToken();
                unsetReferenceNumber();
                unsetLocalStorage('formData');
                setStep(6);
                router.push({name: "success"});
                // setLocalStorage('userQuestionAnswer', JSON.stringify(this.formData));
                // setStep(5);
                // router.push({name: "make-payment"});
            }else {
                this.message[0] = data.message;
            }

        },
    },
    validations() {
        return {
            formData: {
                question1:{required},
                question2:{required},
                question3:{required},
                answer1:{required},
                answer2:{required},
                answer3:{required},

            }
        }
    }

}
</script>
<style scoped>
.modal-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    width: 650px;
    background: #FFFFFF;
    box-shadow: 2px 2px 20px 1px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.modal-header,
.modal-footer {
    padding: 15px;
    display: flex;
}

.modal-header {
    position: relative;
    border-bottom: 1px solid #eeeeee;
    color: #4AAE9B;
    justify-content: space-between;
}

.modal-footer {
    border-top: 1px solid #eeeeee;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0px 20px;
}

.modal-body {
    position: relative;
    padding: 0px 10px 10px 10px;
}

.btn-close {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    color: #4AAE9B;
    background: transparent;
}

.btn-green {
    color: white;
    background: #4AAE9B;
    border: 1px solid #4AAE9B;
    border-radius: 2px;
}
.fieldset-body{
    height:400px;
    overflow: auto;
    padding: 0px 20px;
    border-radius: 10px;
    margin: 0px 20px;
}

</style>