Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/pages/wi/ |
<template>
<div>
<h1>Verify</h1>
<p class="description">Verifying information ...</p>
<div class="loading-bar">
<div class="inner" :class="loadingBarInnerClass"></div>
</div>
<template v-for="step in steps">
<div class="loading-step" :class="step.status" v-if="step.status !== 'pending'">
<p v-text="step.status !== 'done'?step.waiting_text:step.done_text"></p>
<small class="" v-text="step.hint_text" v-if="step.hint_text"></small>
<img src="/images/verify/loading-blue.gif" alt="Loading" class="loading-image">
<img src="/images/verify/form-tick.svg" alt="Loaded" class="loaded-image">
<img src="/images/verify/cross.svg" alt="Loaded" class="error-image">
</div>
</template>
<b-modal id="error-message-modal" hide-footer hide-header body-class="p-3">
<div class="text-center">
<p class="text-danger text-center mt-3">
{{ errorMessage }}
</p>
<hr>
<b-button class="dark-btn pull-right" @click="$bvModal.hide('error-message-modal')">Close</b-button>
</div>
</b-modal>
<b-modal id="suggestion-modal" hide-footer body-class="px-5 py-3" title="Car Registration">
<div>
<ul class="pl-0 suggestions-list">
<li>
Confirm that you are using the exact tag on vehicle's registrations
<li>
Double check your plate entry for typos
</li>
<li>
Make sure you are using the Correct ZIPCODE on file with the DMV
</li>
</ul>
<p class="text-danger text-center mt-4">
<b-button class="btn btn-success" style="width: 70%" @click="$router.push({path:'/wi/step-1'})">
Re-enter info
</b-button>
</p>
</div>
</b-modal>
</div>
</template>
<script>
import forms from "@/mixins/forms";
export default {
name: "verify",
mixins: [forms],
middleware({store: {state}, redirect, route: {path}}) {
if (Object.keys(state.step2Form).length === 0) {
return redirect('/wi/step-1');
}
},
data() {
return {
loadingBarInnerClass: '',
errorMessage: '',
steps: {
verify_information: {
status: 'in_progress',
waiting_text: 'Your information is being verified',
done_text: 'Your information is verified',
},
searching_vehicle: {
status: 'pending',
waiting_text: 'Searching database for vehicle to renew',
done_text: 'Vehicle found in database',
},
finalizing_app: {
status: 'pending',
waiting_text: 'Finalizing application',
hint_text: 'Do not click Back or Refresh.',
done_text: 'Your application is ready',
},
},
verifyInformation: null,
searchingVehicle: null,
}
},
mounted() {
this.verifyInformation = setTimeout(() => {
this.steps.searching_vehicle.status = 'in_progress';
this.steps.verify_information.status = 'done';
}, 5000);
this.searchingVehicle = setTimeout(() => {
this.steps.finalizing_app.status = 'in_progress';
this.steps.searching_vehicle.status = 'done';
}, 10000);
let orderId = this.$store.state.orderId,
url = process.env.get_estimates_api + '/' + orderId,
firstPlate = this.$store.getters.getOfflineFormPlates[0];
if (firstPlate.license_plate === 'XXXX') {
setTimeout(() => {
this.dummyPrices();
}, 1000);
return;
}
this.$axios.get(url).then(({data}) => {
this.completeSteps();
if (data.status === 'success') {
this.steps.finalizing_app.status = 'done';
this.redirectSuccessStatus(data);
} else {
let errorMessage = data.error_message;
if (errorMessage && errorMessage.startsWith('ERROR:')) {
this.errorMessage = errorMessage.replace('ERROR:', '');
}
this.catchError();
}
}).catch((error) => {
this.catchError();
});
},
methods: {
goManual() {
this.completeSteps();
this.$store.commit('SET_ORIGINAL_ORDER_TYPE', 'manual')
this.redirectSuccessStatus({
"status": "success",
"estimates": []
});
},
redirectSuccessStatus(data) {
let prices = this.getPrices(data),
path = '/wi/step-3';
if (this.arePricesEmpty(prices)) {
return this.catchError()
}
this.storeSavedSession('verify', path, {
form_flow: this.$store.state.formFlow,
empty_estimates: this.$store.state.emptyEstimates,
original_order_type: this.$store.state.originalOrderType,
prices: prices
})
},
catchError(message) {
this.completeSteps();
this.steps.finalizing_app.status = 'error';
if (message || this.errorMessage) {
this.$bvModal.show('error-message-modal');
} else {
this.$bvModal.show('suggestion-modal')
}
},
arePricesEmpty(prices) {
return (Array.isArray(prices) && prices.length === 0)
|| (prices.constructor === Object && Object.keys(prices).length === 0)
},
dummyPrices() {
let data = {
"status": "success",
"estimates": [{
"address": "85541",
"zip_code": "85541",
"estimates": ["1 YEAR RENEWALÂ $208.20 (through 5/15/2022)", "2 YEAR RENEWALÂ $362.25 (through 5/15/2023)", "5 YEAR RENEWALÂ $691.13 (through 5/15/2026)"],
"recipient": "Matthew",
"license_make": "BUIC",
"vehicle_year": "2014",
"license_plate": "XXXX",
"vehicle_model": "Lacrosse",
"license_expiry": "",
"offline_processing": false
}]
};
this.redirectSuccessStatus(data);
},
getPricePlaceholder() {
return {
index: 0,
'license_plate': '',
'license_make': '',
'license_plate_label': '',
offline_processing: true,
'prices': [{
price: ''
}],
}
},
completeSteps() {
clearTimeout(this.verifyInformation);
clearTimeout(this.searchingVehicle);
this.steps.searching_vehicle.status = 'done';
this.steps.verify_information.status = 'done';
this.loadingBarInnerClass = 'completed';
},
getPrices(data) {
let prices = {};
data.estimates.forEach((license) => {
if (!license.estimates.length) {
return;
}
prices[license.license_plate] = {
'license_plate': license.license_plate,
'license_make': license.license_make ? license.license_make.replace(/[()]/g, '') : '',
'license_plate_label': license.license_plate,
'vehicle_year': license.vehicle_year,
dont_include: false,
'prices': [],
};
if (license.license_expiry) {
prices[license.license_plate]['license_plate_label'] = `${license.license_plate} - Expires ${license.license_expiry}`;
prices[license.license_plate]['expires_on'] = license.license_expiry;
}
prices[license.license_plate]['offline_processing'] = true;
let priceIndex = 0;
license.estimates.forEach((text) => {
if (!this.includeEstimate(text)) {
return;
}
let price = text.split('$')[1].split(' ')[0],
formattedPrice = this.$money(price),
description,
renewal_type;
if (text.toLowerCase().indexOf('1 year') >= 0) {
description = `1-Year Renewal`;
renewal_type = 'one_year';
} else if (text.toLowerCase().indexOf('2 year') >= 0) {
description = `2-Years Renewal`;
renewal_type = 'two_years';
} else if (text.toLowerCase().indexOf('5 year') >= 0) {
description = `5-Years Renewal`;
renewal_type = 'five_years';
}
prices[license.license_plate]['prices'].push({
key: license.license_plate + '_' + priceIndex,
licence_plate: license.license_plate,
estimate: text,
renewal_type: renewal_type,
description: description,
formatted_price: this.$money(price),
price: price,
});
priceIndex++;
});
});
prices = this.clearEmptyPrices(prices);
prices = this.orderPricesByExpiresOn(prices);
this.$store.commit('SET_OFFLINE_API_PLATES', prices);
return prices;
},
orderPricesByExpiresOn(prices, dir = 'desc') {
return _.orderBy(prices, (item) => {
let expires_on = item['expires_on'] || this.$moment().subtract(100, 'y');
return this.$moment(expires_on).unix();
}, dir);
},
clearEmptyPrices(prices) {
for (let priceKey in prices) {
if (!prices[priceKey].prices || !prices[priceKey].prices.length) {
delete prices[priceKey];
}
}
return prices;
},
shouldConsiderAllAsOffline(estimates) {
let considerAllAsOffline = false;
for (let index in estimates) {
if (this.isLicenseOffline(estimates[index])) {
considerAllAsOffline = true;
break;
}
}
return considerAllAsOffline;
},
isLicenseOffline(license) {
return (license.hasOwnProperty('offline_processing')
&& (license.offline_processing == 'true'
|| license.offline_processing == true
|| license.offline_processing == 1))
},
includeEstimate(estimate) {
let excludedEstimates = ['Take no action', 'Take No Action', 'Get a Duplicate Registration'];
for (let excludeEstimate of excludedEstimates) {
if (estimate.includes(excludeEstimate)) {
return false;
}
}
return true;
}
}
}
</script>
<style>
.loading {
min-height: 457px;
background: #F0F4F8;
padding: 40px 0 50px 0;
}
.loading-box {
width: 100%;
max-width: 580px;
margin: 0 auto;
background: #fff;
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
padding: 25px 40px 32px 40px;
}
.loading-bar {
border: 1px solid #9CA3B5;
border-radius: 4px;
background: #ffffff;
width: 100%;
height: 8px;
position: relative;
margin-bottom: 36px;
}
@keyframes progress-animation {
0% {
width: 0;
}
20% {
width: 14%;
}
55% {
width: 41.2%;
}
100% {
width: 85.4%;
}
}
@keyframes complete-progress-animation {
0% {
width: 85.4%;
}
20% {
width: 95%;
}
55% {
width: 99%;
}
100% {
width: 100%;
}
}
.loading-bar .inner {
position: absolute;
left: -1px;
top: -1px;
height: 8px;
background: #006BCD;
border-radius: 4px;
width: 85.4%;
animation: progress-animation 10s ease-in-out;
}
.loading-bar .inner.completed {
width: calc(100% + 2px);
animation: complete-progress-animation 2s ease-in-out;
}
.loading-step {
border: 1px solid #9CA3B5;
background: #ffffff;
border-radius: 4px;
margin-bottom: 15px;
position: relative;
padding: 13px 45px 14px 18px;
transition: all .3s ease-in;
}
.loading-step p {
margin: 0;
color: #1D2E59;
}
.loading-step .error-image {
width: 16px;
height: 16px;
}
.loading-step .loading-image, .loading-step .error-image {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all .3s ease-in;
}
.loading-step .loaded-image, .loading-step .error-image {
position: absolute;
right: 12px;
top: 47%;
transform: translateY(-50%);
opacity: 0;
transition: all .3s ease-in;
}
.loading-step.done {
border: 1px solid #4BBF64;
}
.loading-step.done .loading-image, .loading-step.error .loading-image {
opacity: 0;
}
.loading-step.done .loaded-image {
opacity: 1;
}
.loading-step.error .error-image {
opacity: 1;
}
@media only screen and (max-width: 767px) {
.loading-box {
padding: 25px 20px 32px 20px;
}
}
</style>