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>
<b-modal :id="modalId" hide-footer hide-header
modal-class="address-confirm-modal"
visible
no-close-on-backdrop>
<h1>Address confirmation</h1>
<template v-if="ready">
<h4>USPS adjusted the address entered</h4>
<p class="desc">Please verify and select the address for this order, then click ”Continue”. If you still need to
modify the address click "Back"</p>
<h5 class="text-danger text-center" v-html="addressAnalyzeMessage"></h5>
<h6>Address entered</h6>
<label class="step-radio-label">
<input type="radio" name="addressConfirmation" class="radio-input" v-model="selectedAddress"
value="original_address">
<div class="step-radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p><span class="user-name">{{ customerFullName }}</span>
<br>
{{ clonedOriginalAddress.street }}
<br v-if="clonedOriginalAddress.address_2"/>
{{ clonedOriginalAddress.address_2 }}
<br/>
{{ clonedOriginalAddress.city }},
{{ clonedOriginalAddress.state_code }}
{{ clonedOriginalAddress.zip }}
</p>
</div>
</label>
<h6>Suggestion</h6>
<label class="step-radio-label">
<input type="radio" name="addressConfirmation" class="radio-input" v-model="selectedAddress"
value="new_address">
<div class="step-radio-box">
<div class="outer">
<div class="inner"></div>
</div>
<p><span class="user-name">{{ customerFullName }}</span>
<br/>
{{ newAddress.street }}
<br v-if="clonedOriginalAddress.address_2"/>
{{ newAddress.address_2 }}
<br>
{{ newAddress.city }},
{{ newAddress.state_code }}
{{ newAddress.zip }} - {{ newAddress.plus_4_code || '' }}
</p>
</div>
</label>
</template>
<template v-else>
<h5 class="text-center">
Verifying Address ...
</h5>
</template>
<div class="form-button-wrapper">
<a href="#" class="btn-return" @click.prevent="close">
<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>
Back
</a>
<button type="submit" class="btn btn-form-green" @click.prevent="continueClicked" v-if="ready">
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>
</b-modal>
</template>
<script>
export default {
name: "AddressConfirmation",
props: {
originalAddress: {
required: true,
type: Object
}
},
data() {
return {
newAddress: {},
usedAddress: {},
clonedOriginalAddress: {},
selectedAddress: 'original_address',
modalId: 'address-confirmation-modal',
ready: false,
showAddressConfirmationSuggestions: false,
addressAnalyzeMessage: ''
}
},
mounted() {
this.callAPI();
},
methods: {
close() {
this.$bvModal.hide(this.modalId)
this.ready = false;
this.$emit('close-address-confirmation-modal');
},
continueClicked() {
this.$emit('goNext');
this.$bvModal.hide(this.modalId);
},
callAPI() {
this.newAddress = this.$copyObject(this.originalAddress);
this.clonedOriginalAddress = this.$copyObject(this.originalAddress);
const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usStreet.Lookup;
let lookup = new Lookup();
lookup.maxCandidates = 10;
lookup.street = this.clonedOriginalAddress.street;
lookup.secondary = this.clonedOriginalAddress.address_2;
lookup.city = this.clonedOriginalAddress.city;
lookup.state = this.clonedOriginalAddress.state_code;
lookup.zipCode = this.clonedOriginalAddress.zip;
lookup.match = "invalid";
let key = process.env.SMARTY_WEBSITE_KEY,
hostname = process.env.app_domain;
let credentials = new SmartyStreetsCore.SharedCredentials(key, hostname);
let clientBuilder = new SmartyStreetsCore.ClientBuilder(credentials)
.withBaseUrl("https://us-street.api.smartystreets.com/street-address");
let client = clientBuilder.buildUsStreetApiClient();
return client.send(lookup)
.then(response => {
let component = response.lookups[0].result[0].components;
if (Array.isArray(component)) {
component = _.first(component);
}
this.newAddress = this.getNewFormattedAddress(this.$copyObject(component));
let newAddressToCompare = this.$copyObject(this.newAddress);
delete newAddressToCompare['plus_4_code'];
let haveSameData = this.$haveSameData(this.clonedOriginalAddress, newAddressToCompare);
this.analyzeNewAddressResponse(response.lookups[0].result[0].analysis);
this.showAddressConfirmationSuggestions = haveSameData === false || (haveSameData === true && this.newAddress.plus_4_code);
this.ready = true;
this.$bvModal.show(this.modalId);
}).catch(console.log);
},
analyzeNewAddressResponse(analysis) {
let dpvMatchCode = analysis.dpvMatchCode,
noStat = analysis.noStat,
dpvFootnotes = analysis.dpvFootnotes;
this.addressAnalyzeMessage = '';
switch (dpvMatchCode) {
case 'Y':
if (noStat === 'N') {
// this.addressAnalyzeMessage = 'The Address is deliverable!';
} else {
this.addressAnalyzeMessage = 'The Address is not deliverable!';
}
break;
case 'N':
this.addressAnalyzeMessage = "Address is not present in the USPS data, Please verify that is correct";
break;
case 'S':
this.addressAnalyzeMessage = "The main address is present in the USPS data, but the submitted secondary information (apartment, suite, etc.) was not recognized.";
break;
case 'D':
this.addressAnalyzeMessage = "The main address is present in the USPS data, but it is missing secondary information (apartment, suite, etc.).";
break;
default:
this.addressAnalyzeMessage = "The address is not present in the USPS database,Please verify that is correct";
}
switch (dpvFootnotes) {
case 'AAM3':
this.addressAnalyzeMessage += `<br> ZIP, state, city, and street name match, but the primary number is invalid.`
break;
case 'AAN1':
this.addressAnalyzeMessage += `<br> ZIP, state, city, street name, and primary number match, but there is secondary information such as apartment or suite that would be helpful.`;
break;
}
},
getFormattedStreet(address) {
let street = ''
if (address.primaryNumber) {
street += ' ' + address.primaryNumber;
}
if (address.streetPredirection) {
street += ' ' + address.streetPredirection;
}
if (address.streetName) {
street += ' ' + address.streetName;
}
if (address.streetSuffix) {
street += ' ' + address.streetSuffix;
}
return street.trim();
},
getFormattedAddress2(address) {
let address2 = ''
if (address.secondaryDesignator) {
address2 += ' ' + address.secondaryDesignator;
}
if (address.secondaryNumber) {
address2 += ' ' + address.secondaryNumber;
}
return address2.trim();
},
getNewFormattedAddress(address) {
return {
'street': this.getFormattedStreet(address),
'address_2': this.getFormattedAddress2(address),
'city': address.cityName || '',
'state_code': address.state || '',
'zip': address.zipCode | '',
country_code: 'US',
plus_4_code: address.plus4Code
}
}
},
computed: {
customerFullName() {
let {first_name, last_name} = this.$store.state.step1Form;
return `${first_name} ${last_name}`;
}
},
watch: {
selectedAddress(selectedAddress) {
switch (selectedAddress) {
case 'new_address':
this.usedAddress = this.newAddress;
break;
case 'original_address':
this.usedAddress = this.$copyObject(this.clonedOriginalAddress);
break;
}
this.$emit('setSelectedAddress', this.usedAddress)
}
}
}
</script>
<style>
#address-confirmation-modal .next-step-button {
padding: 6px 6px;
width: 150px;
}
#address-confirmation-modal .modal-footer {
justify-content: space-between !important;
}
legend {
all: unset !important;
}
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding: 12px 32px 16px 18px;
border-width: 1px;
border-style: groove;
border-radius: 3px;
border-color: rgba(108, 117, 125, 0.3) !important;
}
</style>