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/components/Forms/ |
<template>
<div class="form-plate-wrapper">
<div class="form-plate-header" v-if="!$store.state.emptyEstimates && showCancelVehicle">
<component :is="vehicleInfoHeaderComponent" :plate="plate" v-if="!$store.state.emptyEstimates"/>
<a href="#" class="btn-cancel-vehicle" @click.prevent="removeSelectedPlate" v-if="showCancelVehicle">
<span>Cancel vehicle</span>
<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99903 1.56965L1 8.5M8 8.43035L1.00097 1.5" stroke="#FF0000" stroke-width="1.2"
stroke-linecap="round"/>
</svg>
</a>
</div>
<h5>Select your renewal type</h5>
<div class="vehicle-type-wrapper mh-50" :class="{'opened mh-50':headerOpened}">
<div class="vehicle-type-wrapper-menu">
<div class="vehicle-type-header" @click.prevent="selectHeaderClicked"
:class="{'open':headerOpened,'selected':!!selectedPriceItemLabel}">
<p class="vehicle-type-title">Select an option</p>
<h5 class="vehicle-type-name" v-html="selectedPriceItemLabel"></h5>
<svg class="arrow" width="10" height="7" viewBox="0 0 10 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.20003 6.56466C5.80005 7.04961 5.0571 7.04961 4.65712 6.56466L1.21085 2.38628C0.672897 1.73404 1.13684 0.749999 1.98231 0.749999L8.87484 0.75C9.72031 0.75 10.1843 1.73404 9.6463 2.38628L6.20003 6.56466Z"
fill="#182D40"/>
</svg>
</div>
<div class="vehicle-type-options renewal-radio-options" :class="headerOpened ? 'd-block':'d-none'">
<div class="vehicle-type-row" v-for="(priceItem, priceIndex) in getPlatePrices"
@click.prevent="priceItemOptionClicked(priceItem)"
:key="priceItem.key">
<h6>{{ getPriceItemDescription(priceItem) }}</h6>
</div>
</div>
</div>
</div>
<div class="vehicle-renewal-option-wrapper">
<template v-if="orderItemLineItems['receive_digital_copy']">
<h5 class="with-icon"><span class="text">Would you like to receive a digital copy of your renewal?</span>
<span class="alert-icon"
v-b-tooltip.hover
:title="orderItemLineItems['receive_digital_copy'].description"
v-if="orderItemLineItems['receive_digital_copy'].description">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z"
fill="#9CA3B5" stroke="#9CA3B5" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/>
<path
d="M6.8175 6.74994C6.99383 6.24869 7.34187 5.82602 7.79997 5.55679C8.25807 5.28756 8.79668 5.18914 9.32039 5.27897C9.8441 5.3688 10.3191 5.64108 10.6613 6.04758C11.0035 6.45409 11.1908 6.96858 11.19 7.49994C11.19 8.99994 8.94 9.74994 8.94 9.74994"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 12.75H9.00833" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`digitalCopy_${index}`" class="radio-input"
v-model="selectedItem.receive_digital_copy"
:value="1">
<div class="radio-box">
<p>Yes (add {{ $money(orderItemLineItems['receive_digital_copy'].value) }})</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`digitalCopy_${index}`"
v-model="selectedItem.receive_digital_copy"
:value="0"
class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
<template v-if="orderItemLineItems['receive_physical_copy']">
<h5 class="with-icon"><span class="text">Would you like to receive a digital copy of your renewal?</span>
<span class="alert-icon"
v-b-tooltip.hover
:title="orderItemLineItems['receive_physical_copy'].description"
v-if="orderItemLineItems['receive_physical_copy'].description">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z"
fill="#9CA3B5" stroke="#9CA3B5" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/>
<path
d="M6.8175 6.74994C6.99383 6.24869 7.34187 5.82602 7.79997 5.55679C8.25807 5.28756 8.79668 5.18914 9.32039 5.27897C9.8441 5.3688 10.3191 5.64108 10.6613 6.04758C11.0035 6.45409 11.1908 6.96858 11.19 7.49994C11.19 8.99994 8.94 9.74994 8.94 9.74994"
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 12.75H9.00833" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`digitalCopy_${index}`" class="radio-input"
v-model="selectedItem.receive_physical_copy"
:value="1">
<div class="radio-box">
<p>Yes (add {{ $money(orderItemLineItems['receive_physical_copy'].value) }})</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`digitalCopy_${index}`"
v-model="selectedItem.receive_physical_copy"
:value="0"
class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
<template v-if="showAdditionalPlateOptions">
<template v-if="['az'].includes(currentStateCode)">
<h5>Is this vehicle in continuous use?</h5>
<div class="radio-option-row" style="margin-bottom: 13px">
<div class="radio-option">
<label>
<input type="radio" :name="`vehicle_continuous_use_${index}`"
v-model="selectedItem.vehicle_continuous_use"
:value="1"
class="radio-input">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`vehicle_continuous_use_${index}`"
v-model="selectedItem.vehicle_continuous_use"
:value="0" class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
<div v-if="selectedItem.vehicle_continuous_use" class="mb-2">
This vehicle has been driven regularly and recently
</div>
<div v-else class="mb-2">
This vehicle has not been driven regularly or recently
</div>
</template>
<template v-if="orderItemLineItems['registration_expired_fee']">
<h5>Is your registration expired?</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`regExp_${index}`" v-model="selectedItem.is_registration_expired"
:disabled="this.selectedItem.expirationOptionsDisabled"
:value="1"
class="radio-input">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`regExp_${index}`" v-model="selectedItem.is_registration_expired"
:disabled="this.selectedItem.expirationOptionsDisabled"
:value="0" class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
<template v-if="show8MonthExpiration">
<h5>Is your registration expired more than <b>8</b> months?</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`regExp8Months_${index}`"
:disabled="selectedItem.expirationOptionsDisabled"
v-model="selectedItem.is_registration_expired_8_months"
:value="1" class="radio-input">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`regExp8Months_${index}`"
:disabled="selectedItem.expirationOptionsDisabled"
v-model="selectedItem.is_registration_expired_8_months"
:value="0"
class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
<template v-if="orderItemLineItems['special_plate']">
<h5>Is this a specialty license plate?</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`specialPlate_${index}`" v-model="selectedItem.special_plate"
:value="1" class="radio-input">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`specialPlate_${index}`" v-model="selectedItem.special_plate"
:value="0" class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
<template v-if="orderItemLineItems['personal_plate_fee']">
<h5>Is this a personalized license plate?</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="radio" :name="`personalPlate_${index}`" v-model="selectedItem.personal_plate"
:value="1" class="radio-input">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio" :name="`personalPlate_${index}`" v-model="selectedItem.personal_plate"
:value="0" class="radio-input">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
</template>
</template>
</div>
<transition name="slide">
<ValidationProvider
ref="provider"
:custom-messages="{mimes:'The copy should be image or pdf'}"
name="uploadLicense"
rules="mimes:image/*,application/pdf"
v-slot="{ errors, validate }">
<div class="driver-license-row" v-if="showDriverLicenceFileUpload">
<h5>Upload a copy of your Driver License</h5>
<div class="radio-option-row">
<div class="radio-option">
<label>
<input type="file" name="uploadLicense"
id="uploadLicense"
accept="image/*,application/pdf"
class="radio-input" @change="uploadFile"
ref="driverLicenceFile">
<div class="radio-box">
<p>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.5 8.83333V11.2778C12.5 11.6019 12.3712 11.9128 12.142 12.142C11.9128 12.3712 11.6019 12.5 11.2778 12.5H2.72222C2.39807 12.5 2.08719 12.3712 1.85798 12.142C1.62877 11.9128 1.5 11.6019 1.5 11.2778V8.83333M10.0556 4.55556L7 1.5M7 1.5L3.94444 4.55556M7 1.5V8.83333"
stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{{ driverLicenceFileName }}
</p>
</div>
</label>
<span class="validation-err-msg"> {{ errors[0] }} </span>
</div>
</div>
</div>
</ValidationProvider>
</transition>
</div>
</template>
<script>
import _ from 'lodash';
export default {
name: "RenewalDetailsForm",
props: {
index: {
required: true
},
plate: {
required: true
},
showCancelVehicle: {
required: false,
default: true
}
},
data() {
return {
driverLicenceFileName: 'Upload copy (optional)',
headerOpened: false,
useAsStatePrice: false,
selectedPriceItemLabel: '',
selectedItem: this.$copyObject(this.plate),
showDriverLicenceFileUpload: false
}
},
mounted() {
let findByIndex = true,
priceKey = 0;
if (this.selectedItem.key) {
priceKey = this.selectedItem.key;
findByIndex = false;
}
this.setSelectedPrice(priceKey, findByIndex);
this.setInitFields();
},
methods: {
async uploadFile({target: {files}}) {
const {valid} = await this.$refs.provider.validate(files);
if (valid) {
this.$set(this.selectedItem, 'driver_licence', files[0]);
this.driverLicenceFileName = this.selectedItem.driver_licence.name;
}
},
setInitFields() {
this.$set(this.selectedItem, 'receive_physical_copy', this.selectedItem.receive_physical_copy || 0);
this.$set(this.selectedItem, 'receive_digital_copy', this.selectedItem.receive_digital_copy || 0);
this.$set(this.selectedItem, 'is_registration_expired_8_months', this.selectedItem.is_registration_expired_8_months || 0);
this.$set(this.selectedItem, 'is_registration_expired', this.selectedItem.is_registration_expired || 0);
this.$set(this.selectedItem, 'expirationOptionsDisabled', this.selectedItem.expirationOptionsDisabled || 0);
this.$set(this.selectedItem, 'special_plate', this.selectedItem.special_plate || 0);
this.$set(this.selectedItem, 'personal_plate', this.selectedItem.personal_plate || 0);
this.$set(this.selectedItem, 'driver_licence', this.selectedItem.driver_licence || null);
this.$set(this.selectedItem, 'vehicle_continuous_use', this.selectedItem.vehicle_continuous_use || 0);
},
selectHeaderClicked() {
this.headerOpened = !this.headerOpened;
},
priceItemOptionClicked(priceItem) {
this.setSelectedPrice(priceItem.key);
this.headerOpened = false;
},
getPriceItemDescription(priceItem) {
return `${priceItem.description} ${this.getItemPrice(priceItem)}`;
},
getItemPrice(item) {
return this.$money(
this.$ordersCalculator.getItemPrice(this.currentStateCode, this.selectedItem.vehicle_type, this.selectedItem, item)
);
},
setSelectedPrice(priceKey, byIndex = false) {
let price;
if (byIndex) {
price = this.getPlatePrices[priceKey];
} else {
price = this.getPlatePrices.find(pPrice => pPrice.key === priceKey);
}
this.selectedPriceItemLabel = this.getPriceItemDescription(price);
this.selectedItem = _.assignIn(this.selectedItem, price);
this.handleShowHideDriverLicenceFile();
if (this.selectedItem.expires_on) {
let now = this.$moment(),
expiresOn = this.$moment(this.selectedItem.expires_on),
diff = now.diff(expiresOn, 'days');
if (diff > 0) {
this.selectedItem.expirationOptionsDisabled = true;
this.selectedItem.is_registration_expired = 1;
}
diff = now.diff(expiresOn, 'months');
if (diff > 8) {
this.selectedItem.is_registration_expired_8_months = 1;
}
}
},
handleShowHideDriverLicenceFile() {
if (this.selectedItem.renewal_type === undefined) {
return;
}
if (this.selectedItem.renewal_type.startsWith('duplicate')) {
this.showDriverLicenceFileUpload = true;
} else {
if (this.$refs.driverLicenceFile) {
this.$refs.driverLicenceFile.value = null;
}
this.selectedItem.driver_licence = null;
this.showDriverLicenceFileUpload = false;
this.driverLicenceFileName = 'Upload copy (optional)';
}
},
removeSelectedPlate() {
this.$store.commit('REMOVE_OFFLINE_FORM_PLATE', this.selectedItem);
},
submit() {
if (this.useAsStatePrice) {
this.selectedItem.state_price = this.selectedItem.price;
} else {
this.selectedItem.state_price = null;
}
this.selectedItem.break_down_items = this.$ordersCalculator
.getOrderItemBreakDownItems(this.selectedItem, this.currentStateCode, this.selectedItem.state_price);
this.$store.commit('SET_OFFLINE_FORM_PLATE', this.$copyObject(this.selectedItem));
},
getWIPlatePrice() {
let apiPlate = this.$store.getters.getAPIPlates.find(apiPlate => {
return apiPlate.license_plate.toLowerCase() === this.plate.license_plate.toLowerCase()
});
if (apiPlate && apiPlate.prices && apiPlate.prices.length) {
return apiPlate.prices;
} else {
return this.$router.push({path: '/'});
}
}
},
computed: {
vehicleInfoHeaderComponent() {
return () => import(`@/components/States/${this.currentStateCode.toUpperCase()}/VehicleInfoHeader`)
},
showAdditionalPlateOptions() {
if (['wi'].includes(this.currentStateCode)) {
return false;
}
return this.$store.state.formFlow === 'offline' && this.$store.state.emptyEstimates
},
show8MonthExpiration() {
return this.selectedItem.is_registration_expired &&
!(this.selectedItem.expirationOptionsDisabled && this.selectedItem.is_registration_expired_8_months === 0)
&& this.orderItemLineItems['registration_expired_8_months_fee']
},
orderItemLineItems() {
return this.$ordersCalculator.getOrderItemLineItems(this.currentStateCode);
},
getPlatePrices() {
if (['wi', 'az'].includes(this.currentStateCode)) {
return this.getWIPlatePrice();
}
let offlinePlate = this.$copyObject(this.selectedItem),
vehicleType = offlinePlate.vehicle_type_object;
if (!this.$store.state.emptyEstimates) {
this.useAsStatePrice = true;
return this.selectedItem.prices;
}
this.useAsStatePrice = false;
return this.$ordersCalculator.getRenewalTypeOptions(this.currentStateCode, vehicleType.code, offlinePlate)
}
},
beforeMount() {
this.$eventBus.$on(`submitPlateRenewalForm_${this.index}`, this.submit);
},
beforeDestroy() {
this.$eventBus.$off(`submitPlateRenewalForm_${this.index}`);
}
}
</script>
<style scoped>
.vehicle-type-wrapper.opened .vehicle-type-wrapper-menu {
height: auto !important;
}
</style>