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/pa/ |
<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>
<div class="text-danger" v-if="showErrorMessage">
<h6 v-text="errorMessage"></h6>
<nuxt-link to="/florida/step-1" class="btn-back">
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 5.6C11.3314 5.6 11.6 5.33137 11.6 5C11.6 4.66863 11.3314 4.4 11 4.4L11 5.6ZM0.575736 4.57574C0.341421 4.81005 0.341421 5.18995 0.575736 5.42427L4.39411 9.24264C4.62843 9.47696 5.00833 9.47696 5.24264 9.24264C5.47696 9.00833 5.47696 8.62843 5.24264 8.39411L1.84853 5L5.24264 1.60589C5.47696 1.37157 5.47695 0.991675 5.24264 0.75736C5.00833 0.523045 4.62843 0.523045 4.39411 0.75736L0.575736 4.57574ZM11 4.4L1 4.4L1 5.6L11 5.6L11 4.4Z"
fill="#1D2E59"/>
</svg>
Go back and try again
</nuxt-link>
</div>
</div>
</template>
<script>
import forms from "@/mixins/forms";
export default {
name: "verify",
mixins: [forms],
middleware({store: {state}, redirect, route: {path}}) {
if (Object.keys(state.step3Form).length === 0) {
return redirect('/pa/step-1');
}
},
data() {
return {
loadingBarInnerClass: '',
showErrorMessage: false,
errorMessage: 'Sorry, something went wrong!!',
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;
return setTimeout(() => {
this.dummyPrices();
}, 1000);
this.$axios.get(url).then(({data}) => {
this.completeSteps();
if (data.status === 'success') {
this.steps.finalizing_app.status = 'done';
this.redirectSuccessStatus(data);
} else {
this.goManual();
}
}).catch((error) => {
this.goManual();
});
},
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 = '/pa/select-offline-plates',
isEmptyEstimates = false;
// if we don't have any estimate, go and fill manually.
//otherwise select from incoming estimates.
if (this.arePricesEmpty(prices)) {
//if we don't have any plates
if (!this.$store.state.offlineFormPlates.length) {
this.$store.commit('SET_OFFLINE_FORM_PLATE', this.getPricePlaceholder());
this.$store.commit('SET_ORIGINAL_ORDER_TYPE', 'manual')
}
isEmptyEstimates = true;
path = '/pa/step-4';
}
this.$store.commit('SET_EMPTY_ESTIMATES', isEmptyEstimates);
this.$store.commit('SET_FORM_FLOW', 'offline');
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
})
},
arePricesEmpty(prices) {
return (Array.isArray(prices) && prices.length === 0)
|| (prices.constructor === Object && Object.keys(prices).length === 0)
},
dummyPrices() {
let data = {
"status": "success",
"estimates": [
{
"estimates": [
"Renew this Registration for Vehicle for 2 years -- $92.95",
"Renew this Registration for Vehicle for 1 year -- $46.85",
"Get a Duplicate Registration -- $3.75 ( *** NO DECAL will be issued ***)",
"Take No Action"
],
"license_make": "(KIA)",
"license_plate": "JR16R",
"license_expiry": "8/28/2021",
"offline_processing": "false"
},
{
"estimates": [
"Renew this Registration for Vehicle for 2 years -- $92.95",
"Renew this Registration for Vehicle for 1 year -- $46.85",
"Get a Duplicate Registration -- $3.75 ( *** NO DECAL will be issued ***)",
"Take No Action"
],
"license_make": "(FORD MOTOR COMPANY)",
"license_plate": "PJBW88",
"license_expiry": "8/28/2020",
"offline_processing": "false"
},
{
"estimates": [
"Get a Duplicate Registration -- $3.75 ( *** NO DECAL will be issued ***)",
"Take No Action"
],
"license_make": "(ARISING INDUSTRIES, INC.)",
"license_plate": "Y314IK",
"license_expiry": "8/28/2022",
"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) => {
let hasOffline = this.isLicenseOffline(license);
if (!license.estimates.length && !hasOffline) {
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,
'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)) {
if (!text.includes('--')) {
return;
}
let split = text.split("--"),
formatted_priceSplit = split[1].trim(),
secondSplit = formatted_priceSplit.split(' ('),
formatted_price = secondSplit[0].trim(),
description = split[0].trim() + (secondSplit.length > 1 ? (' (' + secondSplit[1]) : ''),
renewal_type;
if (text.indexOf('1 year') >= 0) {
description = `1-Year Renewal`;
renewal_type = 'one_year';
} else if (text.indexOf('2 years') >= 0) {
description = `2-Years Renewal`;
renewal_type = 'two_years';
}
prices[license.license_plate]['prices'].push({
key: license.license_plate + '_' + priceIndex,
license_plate: license.license_plate,
estimate: text,
renewal_type: renewal_type,
description: description,
formatted_price: formatted_price,
price: formatted_price.match(/\d+(?:\.\d+)?/g)[0],
});
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>