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>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">
<label>Is your mailing address different from your residential address?</label>
<div class="billing-radio-option mb-3" style="white-space: nowrap;">
<label class="step-radio-label w-50 selected" style="display: inline-block;">
<input type="radio" name="billingOption" class="radio-input" v-model="form.different_mailing_address"
:value="true">
<div class="step-radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p>Yes</p>
</div>
</label>
<label class="step-radio-label bring-up w-50" style="display: inline-block;">
<input type="radio" name="billingOption" class="radio-input" v-model="form.different_mailing_address"
:value="false">
<div class="step-radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p>No</p>
</div>
</label>
</div>
<transition name="fade">
<Address :form="form" address-field="mailing_address" v-if="form.different_mailing_address"/>
</transition>
<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="/pa/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>
<address-confirmation @goNext="goNext"
@close-address-confirmation-modal="showAddressConfirmationModal=false"
@setSelectedAddress="setSelectedAddress"
:original-address="form.mailing_address"
v-if="showAddressConfirmationModal"/>
</div>
</template>
<script>
import forms from '@/mixins/forms'
import Address from "@/components/Forms/Address";
import AddressConfirmation from "@/components/Forms/AddressConfirmation";
export default {
name: "step-3",
middleware({store: {state}, redirect, route: {path}}) {
if (Object.keys(state.step2Form).length === 0) {
return redirect('/pa/step-1');
}
},
components: {
AddressConfirmation, Address
},
mixins: [forms],
data() {
let state = this.$store.state,
step1Form = this.$copyObject(state.step1Form),
step2Form = this.$copyObject(state.step2Form),
step3Form = this.$copyObject(state.step3Form),
ipAddress = state.ipAddress,
mailingAddress = step3Form.mailing_address,
differentMailingAddress = step3Form.different_mailing_address,
residentialAddress = step2Form.residential_address;
return {
showAddressConfirmationModal: false,
ip_address: ipAddress,
ipVisible: false,
resident_address: residentialAddress,
form: this.$form({
different_mailing_address: differentMailingAddress || false,
order_id: this.$store.state.orderId,
signature_sc: '',
deaf_or_hard_of_hearing: step3Form.deaf_or_hard_of_hearing || false,
electronic_signature: step3Form.electronic_signature || '',
agree: step3Form.agree,
mailing_address: mailingAddress || this.$copyObject(residentialAddress),
...step1Form,
...step2Form,
}, {
resetOnSuccess: false
})
}
},
mounted() {
let step3Form = this.$store.state.step3Form;
if (step3Form.electronic_signature) {
this.$refs.signaturePad.fromDataURL(step3Form.electronic_signature);
}
},
methods: {
setSelectedAddress(selectedAddress) {
this.form.mailing_address = this.$copyObject(selectedAddress);
},
async submit() {
try {
this.form.isReady = false;
this.saveElectronicSignature();
await this.screenshot();
if (this.$haveSameData(this.resident_address, this.form.mailing_address) === false && this.form.different_mailing_address) {
this.addressConfirmation()
} else {
this.goNext();
}
} catch (e) {
this.form.isReady = true;
}
},
addressConfirmation() {
this.showAddressConfirmationModal = true;
},
goNext() {
this.$store.commit('SET_STEP3_FORM', this.form.data());
this.form.post(`orders/store`)
.then(response => {
this.$store.commit('SET_ORDER_ID', response.data.id);
this.storeSavedSession('step-3', '/pa/verify', this.form.data());
});
}
},
computed: {
isIPVisible() {
return this.ipVisible;
}
},
watch: {
'form.different_mailing_address'() {
this.form.mailing_address = this.$copyObject(this.resident_address);
},
'form.agree'() {
if (!this.form.agree) {
this.form.agree = null;
}
}
}
}
</script>
<style scoped>
</style>