initial commit
This commit is contained in:
266
resources/js/components/partials/modal.vue
Normal file
266
resources/js/components/partials/modal.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user