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/fl/ |
<template>
<div>
<h1>Information</h1>
<p class="description">Enter the Address where you would like your Order Shipped.</p>
<ValidationObserver v-slot="{ invalid }" ref="form">
<form action="">
<BirthDate :form="form"/>
<br>
<Address :form="form" address-field="residential_address"/>
<div class="social-security-wrapper">
<h4>Are you an US resident with a Social Security Number?</h4>
<div class="radio-option-row ssn-yn-row">
<div class="radio-option">
<label>
<input type="radio" name="usResident"
class="radio-input usa-yes" v-model="form.is_resident"
:value="true">
<div class="radio-box">
<p>Yes</p>
</div>
</label>
</div>
<div class="radio-option">
<label>
<input type="radio"
:disabled="!!form.ssn || !!form.last_five_ssn"
name="usResident" class="radio-input usa-no" v-model="form.is_resident"
:value="false">
<div class="radio-box">
<p>No</p>
</div>
</label>
</div>
</div>
<div class="security-number-wrapper" v-if="form.is_resident===true">
<div class="radio-option-row">
<div class="radio-option" :class="{'disabled':!!form.last_five_ssn}">
<h4>Social Security Number</h4>
<div class="form-group with-animation">
<p class="placeholder-text">SSN</p>
<input-field :form="form" :rules="ssnRule" field="ssn" :error-msgs-out-of-wrapper="true">
<p class="placeholder-text required" style="font-size: 12px;top: 4px">
Social Security Number
</p>
<vue-delayed-input-mask
name="ssn"
id="securityNumber"
:delayTime="500"
:maxLength="9"
:disabled="!!form.last_five_ssn"
fillChar="●"
:onlyNumbers="true"
v-model="form.ssn"
:value="form.ssn"
placeholder="###-##-####"
wrapperClassName="form-group"
:classNames="['form-control','securityNumber']">
</vue-delayed-input-mask>
<img src="/images/fl/lock.svg" alt="Icon" class="lock-icon">
</input-field>
</div>
</div>
<div class="text">
<h5>OR</h5>
</div>
<div class="radio-option" :class="{'disabled':!!form.ssn}">
<h4>Last 5 digits of your SSN</h4>
<div class="form-group with-animation">
<input-field :form="form" :rules="lastFiveSSNRule" field="last_five_ssn"
:error-msgs-out-of-wrapper="true">
<p class="placeholder-text required" style="font-size: 12px;top: 4px">
Last 5 digits of your SSN
</p>
<vue-delayed-input-mask
name="last_five_ssn"
id="lastFiveSSN"
:delayTime="500"
fillChar="●"
:onlyNumbers="true"
minlength="5"
ref="last_five_ssn"
:maxLength="5"
placeholder="#####"
:disabled="!!form.ssn"
v-model="form.last_five_ssn"
:value="form.last_five_ssn"
:classNames="['form-control','text']">
</vue-delayed-input-mask>
<img src="/images/fl/lock.svg" alt="Icon" class="lock-icon">
</input-field>
</div>
</div>
</div>
</div>
<div class="select-option-wrapper" v-if="showSelectOptionWrapper">
<div class="radio-option-row">
<div class="radio-option">
<h4>Select an option</h4>
<vreg-select :form="form"
required
header-text="Select an option"
@value-selected="v=>form.resident_type=v"
:fieldValue="form.resident_type"
v-if="residentTypeOptions"
:options="residentTypeOptions"
field="resident_type"/>
</div>
<div class="radio-option">
<input-field :form="form" :rules="residentTypeValueRule"
:key="`resident_type_value`"
v-if="form.resident_type"
field="resident_type_value"
:placeholder="residentTypeOptionValueLabel"/>
</div>
</div>
</div>
</div>
<div class="form-button-wrapper">
<nuxt-link to="/fl/step-1" 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 Owner
</nuxt-link>
<button type="submit" class="btn btn-form-green" @click.prevent="frontendFormSubmitHandler"
:disabled=" invalid || !readyToContinue">
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.residential_address"
v-if="showAddressConfirmationModal"/>
</div>
</template>
<script>
import forms from "@/mixins/forms";
import BirthDate from "@/components/Forms/BirthDate";
import Address from "@/components/Forms/Address";
import VregSelect from "@/components/Forms/VregSelect";
import vueDelayedInputMask from "@/components/Forms/vueDelayedInputMask/VueDelayedInputMask";
import AddressConfirmation from "@/components/Forms/AddressConfirmation";
export default {
name: "step-2.vue",
middleware({store: {state}, redirect, route: {path}}) {
if (Object.keys(state.step1Form).length === 0) {
return redirect('/fl/step-1');
}
},
components: {AddressConfirmation, VregSelect, Address, BirthDate, vueDelayedInputMask},
mixins: [forms],
data() {
let step2Form = this.$copyObject(this.$store.state.step2Form);
return {
showAddressConfirmationModal: false,
residentTypeOptions: [
{value: 'floridaDriverLicense', label: "Driver's License Number"},
{value: 'titleNumber', label: "Title Number"},
{value: 'documentedVesselNumber', label: "Documented Vessel Number"},
{value: 'vesselNumber', label: "Vessel Number"},
{value: 'licensePlate', label: "License Plate"},
],
readyToContinue: true,
form: this.$form({
birth_date: step2Form.birth_date || {
day: '',
month: '',
year: ''
},
is_resident: !!step2Form.is_resident,
ssn: step2Form.ssn || '',
last_five_ssn: step2Form.last_five_ssn || '',
resident_type: step2Form.resident_type || '',
residential_address: step2Form.residential_address || {
street: '',
city: '',
address_2: '',
country_code: 'US',
zip: '',
state_code: 'FL'
},
resident_type_value: step2Form.resident_type_value || '',
}),
}
},
methods: {
submit() {
this.showAddressConfirmation();
},
showAddressConfirmation() {
this.showAddressConfirmationModal = true
},
goNext() {
if (!!this.form.ssn) {
this.form.resident_type = '';
this.form.resident_type_value = '';
this.form.last_five_ssn = '';
}
this.$store.commit('SET_STEP2_FORM', this.form.data());
this.storeSavedSession('step-2', '/fl/step-3', this.form.data());
},
setSelectedAddress(selectedAddress) {
this.form.residential_address = this.$copyObject(selectedAddress);
},
},
watch: {
'form.last_five_ssn'(value) {
if (this.form.last_five_ssn && this.form.last_five_ssn.length > 5) {
this.form.last_five_ssn = value.substr(0, 5);
}
},
'form.resident_type_value'() {
this.form.resident_type_value = this.form.resident_type_value.replace(/\s/g, '');
},
'form.resident_type'() {
// this.form.resident_type_value = '';
},
'form.is_resident'(value) {
this.form.resident_type = '';
this.form.ssn = '';
this.form.last_five_ssn = '';
},
'form.ssn'(value) {
if (value.length > 0) {
this.form.resident_type = '';
this.form.resident_type_value = '';
this.form.last_five_ssn = '';
}
}
},
computed: {
residentTypeOptionValueLabel() {
let residentTypeOption = this.residentTypeOptions
.find(o => o.value === this.form.resident_type);
if (residentTypeOption) {
return residentTypeOption.label;
}
return '';
},
showSelectOptionWrapper() {
return this.form.is_resident === false || this.form.last_five_ssn.length === 5;
},
ssnRule() {
if (this.form.last_five_ssn) {
return '';
}
if (!this.form.is_resident) {
return '';
}
return `required|length:9`;
},
lastFiveSSNRule() {
if (this.form.ssn) {
return '';
}
if (!this.form.is_resident) {
return ``;
}
return `required|length:5`;
},
residentTypeValueRule() {
if (this.form.ssn) {
return '';
}
return 'required';
}
}
}
</script>
<style scoped>
</style>