forked from binary-com/binary-static
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgeocoder.js
More file actions
188 lines (159 loc) · 8.11 KB
/
Copy pathgeocoder.js
File metadata and controls
188 lines (159 loc) · 8.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
/* global google */
const scriptjs = require('scriptjs');
const getElementById = require('./common_functions').getElementById;
const applyToAllElements = require('./utility').applyToAllElements;
const Client = require('../app/base/client');
const Geocoder = (() => {
let el_btn_validate,
el_error,
el_geocode_status,
el_loader,
el_postcode_row,
el_success,
is_states_el_select;
let validated = false;
const init = (form_id) => {
// TODO: We should store the Google API key in an unstaged file so it doesn't get committed to the public repository
scriptjs('https://maps.googleapis.com/maps/api/js?key=AIzaSyAEha6-HeZuI95L9JWmX3m6o-AxQr_oFqU&libraries=places', 'gMaps');
const form = getElementById(form_id.split('#')[1]);
const addr_1 = '#address_line_1';
const addr_2 = '#address_line_2';
const city = '#address_city';
const state = '#address_state';
const postcode = '#address_postcode';
const residence = Client.get('residence').toUpperCase();
is_states_el_select = (form.querySelector(state).tagName === 'SELECT');
const getAddress = () => `${getValue(addr_1)}, ${getValue(addr_2)}, ${getValue(city)}, ${getValue(postcode)} ${is_states_el_select ? getStateText(state) : getValue(state)}, ${residence} `;
el_btn_validate = form.querySelector('#geocode_validate');
el_geocode_status = form.querySelector('#geocode_status');
el_error = form.querySelector('#geocode_error');
el_postcode_row = form.querySelector('.postcode-form-row');
el_success = form.querySelector('#geocode_success');
el_loader = form.querySelector('.barspinner');
if (el_btn_validate) {
applyToAllElements(`${addr_1}, ${addr_2}, ${postcode}, ${!is_states_el_select ? state : undefined} ,${city}`, (element) => {
// List of fields that will trigger event onChange but will allow empty values as they are non-required fields
const non_required_fields = ['addr_2', 'postcode', `${!is_states_el_select ? 'state' : undefined }`];
element.addEventListener('keyup', () => {
const value = element.value;
// Check if address_line_1, address_state and address city have values
const has_met_conditions = (getValue(city).trim().length > 0) &&
(getValue(addr_1).trim().length > 0);
if (value.length > 0 && !non_required_fields.includes(element.id) && has_met_conditions) {
el_btn_validate.classList.remove('geocode-btn-disabled');
} else if (!non_required_fields.includes(element.id) && has_met_conditions) {
el_btn_validate.classList.remove('geocode-btn-disabled');
} else {
el_btn_validate.classList.add('geocode-btn-disabled');
}
});
}, '', form);
el_btn_validate.addEventListener('click', (e) => {
e.preventDefault();
if (el_btn_validate.classList.contains('geocode-btn-disabled')) {
return;
}
validator(getAddress()).then(() => {
validated = true;
});
});
// using jQuery here because for some reason vanilla javascript eventListener isn't working for select input onChange events
$(state).on('change', () => {
if ((getValue(city).length > 0) && (getValue(addr_1).length > 0)) {
el_btn_validate.classList.remove('geocode-btn-disabled');
} else {
el_btn_validate.classList.add('geocode-btn-disabled');
}
});
el_btn_validate.setVisibility(1);
if (validated || !getValue(addr_1).length || !getValue(state)) {
el_btn_validate.classList.add('geocode-btn-disabled');
}
}
el_postcode_row.parentNode.appendChild(el_geocode_status);
if (el_error) {
el_error.setVisibility(0);
}
return {
address: getAddress(),
};
};
const getValue = (selector) => getElementById(selector.split('#')[1]).value || '';
const getStateText = (selector) => {
const states_list_el = getElementById(selector.split('#')[1]);
return states_list_el.options[states_list_el.selectedIndex].text;
};
const validate = (form_id) => {
const address = init(form_id).address;
validator(address).then(() => {
validated = true;
});
};
const validator = (address) => (
new Promise((resolve) => {
scriptjs.ready('gMaps', () => {
const geocoder = new google.maps.Geocoder();
el_btn_validate.classList.add('geocode-btn-disabled');
el_success.setVisibility(0);
el_error.setVisibility(0);
el_loader.setVisibility(1);
geocoder.geocode({
address,
// Restrict Geolocation to client's country of residence and state
componentRestrictions: {
country : Client.get('residence').toUpperCase(),
administrativeArea: is_states_el_select ? getStateText('#address_state') : getValue('#address_state'),
},
}, (result, status) => {
// Geocoding status reference:
// https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes
const data = { result, status };
handleResponse(data);
resolve(data);
});
});
})
);
const isAddressFound = (user_address, user_city, geoloc_address) => {
let result;
const trimSpaces = (string) => string.replace(/^\s+|\s+$/g,'');
if (geoloc_address.length && getValue('#address_city')) {
const item_idx = geoloc_address.length - 1;
const country_longname = getElementById('country').innerHTML;
const input_city = trimSpaces(user_city).toLowerCase();
const user_address_str = trimSpaces(user_address);
const arr_input_address = user_address_str.replace(/[\s]-[\s]|\/\w+/g,' ').toLowerCase().split(', ');
const arr_address_components = geoloc_address[item_idx].address_components;
const arr_address_list = [];
// Create address dictionary string based on returned long and short named address components by Geolocation API
arr_address_components.filter(address => {
arr_address_list.push(address.long_name.replace(/ - /g,' '));
arr_address_list.push(address.short_name.replace(/ - /g,' '));
});
// Filter out duplicates in address components
const address_list_dictionary = arr_address_list.filter((elem, pos, arr) => arr.indexOf(elem) === pos).join(' ').toLowerCase();
// Check if city exists, if true, check if first line of address exists
if ((address_list_dictionary.indexOf(input_city) !== -1)
&& (user_address.toLowerCase() !== country_longname.toLowerCase())) {
result = arr_input_address.some(address => address_list_dictionary.includes(address));
}
}
return result;
};
const handleResponse = (data) => {
const is_address_found = isAddressFound(getValue('#address_line_1'), getValue('#address_city'), data.result);
if (/ZERO_RESULTS|INVALID_REQUEST|UNKNOWN_ERROR/.test(data.status) || !is_address_found) {
el_error.setVisibility(1);
el_success.setVisibility(0);
} else {
el_error.setVisibility(0);
el_success.setVisibility(1);
}
el_loader.setVisibility(0);
};
return {
init,
validate,
};
})();
module.exports = Geocoder;