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/az/ |
<template>
<div>
<h1>Registered vehicle owner</h1>
<p class="description">Enter the registered owner's vehicle information</p>
<ValidationObserver v-slot="{ invalid }" ref="form">
<form action="" ref="screenShotSection">
<offline-vehicle-form v-for="(offlinePlate,index) in offlineFormPlates"
:plate="offlinePlate"
:index="index"
:key="`${index}_offline_vehicle_form`"
:wrapper-class="{ 'another-vehicle-wrapper':index >0 }"/>
<div>
<h5 style="margin-bottom: 5px"> Having difficulty locating your Vehicle License Plate? </h5>
Your VIN number may be found on your vehicle's windshield or on the driver side door, or printed on your
registration renewal notice. The following image shows the location of the VIN number on your renewal notice:
<div class="text-center">
<img src="/images/az/vin-az.png" alt="Az license plate" class="img-fluid mt-3">
</div>
</div>
<h3>
Terms of Purchase
<br>
<small class="text-danger" v-show="isIPVisible">IP {{ ip_address }}
{{ $moment().format('MM/DD/YYYY h:mm:ss a') }}</small>
</h3>
<p class="terms-desc">This information will assist law enforcement in ensuring they use appropriate
communication.</p>
<input-field :form="form" field="agree" rules="required">
<label class="checkbox-input-wrapper">
<input type="checkbox" name='agree' class="c-input" v-model="form.agree">
<div class="checkbox-inner">
<div class="outer">
<div class="inner">
<svg width="12" height="8" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.2252 1.90835L5.60358 7.53001C5.21306 7.92053 4.57989 7.92053 4.18937 7.53001L1.32944 4.67008"
stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</div>
<p>By checking this box and electronically signing your name below:</p>
</div>
</label>
</input-field>
<div class="terms-content-wrapper">
<p><span>1.</span>You acknowledge that you have read and agree to our <a href="#">Terms & Conditions</a>, <a
href="#">Refund Policy</a> and <a href="#">Privacy Policy</a></p>
<p><span>2.</span>You affirm that you are the record holder for this vehicle and that all information you have
provided is true and accurate.</p>
<p><span>3.</span>By checking this box, you also acknowledge that this website is privately owned and
independently operated, having no affiliation with any state or federal agency. </p>
<p><span>4.</span>You hereby appoint this site as your agent and expressly authorize its personnel to access
and
contact the FLHSMV online vehicle services portal and process your registration on your behalf for a fee
that
includes features and benefits exclusive to this site. </p>
<p><span>5.</span>You also authorize this website to retain your information for future renewals.</p>
</div>
<h5>Electronic Signature</h5>
<input-field :form="form" field="electronic_signature" rules="required">
<div class="demo-e-signature-outer">
<VueSignaturePad name="electronic_signature"
id="electronic_signature"
width="100%" height="150px"
:options="{ onBegin : onBeginSignature, onEnd : onEndSignature }"
ref="signaturePad"/>
<input type="hidden" name="electronic_signature" v-model="form.electronic_signature">
</div>
</input-field>
<button class="btn-clear-signature" @click.prevent="clearElectronicSignature" type="button">
Clear signature
</button>
<div class="form-button-wrapper">
<nuxt-link to="/az/step-2" class="btn-return">
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9L1 5L5 1" stroke="#182D40" stroke-width="1.2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
Return to information
</nuxt-link>
<button type="submit"
:disabled="!form.isReady"
class="btn btn-form-green" @click.prevent="frontendFormSubmitHandler">
<b-spinner class="mr-1" small v-if="!form.isReady"></b-spinner>
Continue
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L6 6.5L1 11.5" stroke="white" stroke-width="1.2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</div>
<FormErrorMsg :msg="formErrorMsg"/>
</form>
</ValidationObserver>
</div>
</template>
<script>
import forms from '@/mixins/forms'
import OfflineVehicleForm from "@/components/States/AZ/OfflineVehicleForm";
export default {
name: "step-2",
components: {OfflineVehicleForm},
middleware({store: {state}, redirect, route: {path}}) {
if (Object.keys(state.step1Form).length === 0) {
return redirect('/az/step-1');
}
},
mixins: [forms],
data() {
let state = this.$store.state,
step1Form = this.$copyObject(state.step1Form),
step2Form = this.$copyObject(state.step2Form),
ipAddress = state.ipAddress;
return {
ip_address: ipAddress,
ipVisible: false,
form: this.$form({
state_code: 'AZ',
order_id: this.$store.state.orderId,
zip_code: this.$store.state.zipCode || '',
signature_sc: '',
electronic_signature: step2Form.electronic_signature || '',
agree: step2Form.agree,
...step1Form
}, {
resetOnSuccess: false
})
}
},
mounted() {
let step2Form = this.$store.state.step2Form;
if (step2Form.electronic_signature) {
this.$refs.signaturePad.fromDataURL(step2Form.electronic_signature);
}
},
methods: {
setSelectedAddress(selectedAddress) {
this.form.mailing_address = this.$copyObject(selectedAddress);
},
async submit() {
try {
this.form.isReady = false;
this.saveElectronicSignature();
await this.screenshot();
this.goNext();
} catch (e) {
this.form.isReady = true;
}
},
goNext() {
for (let index in this.offlineFormPlates) {
this.$eventBus.$emit(`submitOfflineStep_${index}`);
}
this.form.zip_code = this.$store.state.zip_code;
this.$store.commit('SET_STEP2_FORM', this.form.data());
this.form.post(`orders/store`)
.then(response => {
let payload = {
order_type: this.$store.state.formFlow === 'online' ? 'online' : (this.$store.state.emptyEstimates ? 'unverified' : 'verified'),
storedPlates: this.offlineFormPlates,
step1_data: this.form.data(),
create_order_items: true
}
this.$store.commit('SET_ORDER_ID', response.data.id);
this.storeSavedSession('step-2', '/az/verify', payload);
});
},
addMoreVehicle() {
this.$store.commit('SET_OFFLINE_FORM_PLATE', {
index: this.offlineFormPlates.length,
'license_plate': '',
'license_make': '',
'license_plate_label': '',
offline_processing: true,
'prices': [{
price: ''
}],
});
},
},
computed: {
isIPVisible() {
return this.ipVisible;
},
offlineFormPlates() {
return this.$store.getters.getOfflineFormPlates;
}
},
watch: {
'form.agree'() {
if (!this.form.agree) {
this.form.agree = null;
}
}
},
beforeMount() {
if (!this.offlineFormPlates || this.offlineFormPlates.length < 1) {
this.addMoreVehicle();
}
}
}
</script>
<style scoped>
</style>