Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[MWPW-160243] Open up global places API selection #252 #274

Open
wants to merge 13 commits into
base: dev
Choose a base branch
from
+51 −83
Open

[MWPW-160243] Open up global places API selection #252 #274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2dd48aa
global places enabled
qiyundai Oct 9, 2024
f0e7301
restrict language
qiyundai Oct 10, 2024
78a6926
Update venue-info-component-controller.js
qiyundai Oct 10, 2024
bfac8d1
Update venue-info-component-controller.js
qiyundai Oct 10, 2024
3c7e0c9
allow non-en result selection
qiyundai Oct 10, 2024
efed251
Update venue-info-component-controller.js
qiyundai Nov 4, 2024
e414d5a
Merge branch 'dev' into mwpw-160243
qiyundai Nov 4, 2024
8cfc926
revert formatted address
qiyundai Nov 4, 2024
7a9bb34
Update venue-info-component-controller.js
qiyundai Nov 4, 2024
df63698
send formatted_address to BE
qiyundai Nov 6, 2024
84162af
Update venue-info-component-controller.js
qiyundai Nov 12, 2024
c63cf62
Use formatted address for UI
qiyundai Nov 12, 2024
ba3375e
Update venue-info-component-controller.js
qiyundai Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 40 additions & 23 deletions ecc/blocks/form-handler/controllers/venue-info-component-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,9 @@ import { changeInputValue, getEventServiceEnv, getSecret } from '../../../script
import { buildErrorMessage } from '../form-handler.js';

function togglePrefillableFieldsHiddenState(component) {
const address = component.querySelector('#venue-info-venue-address');
const city = component.querySelector('#location-city');
const state = component.querySelector('#location-state');
const postal = component.querySelector('#location-zip-code');
const county = component.querySelector('#location-country');
const address = component.querySelector('#google-place-formatted-address');

const hasUnfilledFields = [address, city, state, postal, county].some((input) => !input.value);

[address, city, state, postal, county].forEach((input) => {
input.classList.toggle('hidden', hasUnfilledFields);
});
address.classList.toggle('hidden', !address.value);
}

async function loadGoogleMapsAPI(callback) {
Expand All @@ -37,13 +29,14 @@ function resetAllFields(component) {
const cityInput = component.querySelector('#location-city');
const stateInput = component.querySelector('#location-state');
const stateCodeInput = component.querySelector('#location-state-code');
const postalCodeInput = component.querySelector('#location-zip-code');
const postalCodeInput = component.querySelector('#location-postal-code');
const countryInput = component.querySelector('#location-country');
const placeLatInput = component.querySelector('#google-place-lat');
const placeLngInput = component.querySelector('#google-place-lng');
const placeIdInput = component.querySelector('#google-place-id');
const mapUrlInput = component.querySelector('#google-map-url');
const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
const formattedAddressInput = component.querySelector('#google-place-formatted-address');

venueNameInput.value = '';
changeInputValue(addressInput, 'value', '');
Expand All @@ -57,6 +50,7 @@ function resetAllFields(component) {
changeInputValue(placeIdInput, 'value', '');
changeInputValue(mapUrlInput, 'value', '');
changeInputValue(gmtoffsetInput, 'value', '');
changeInputValue(formattedAddressInput, 'value', '');
}

function updateAllFields(venueData, component) {
Expand All @@ -65,13 +59,14 @@ function updateAllFields(venueData, component) {
const cityInput = component.querySelector('#location-city');
const stateInput = component.querySelector('#location-state');
const stateCodeInput = component.querySelector('#location-state-code');
const postalCodeInput = component.querySelector('#location-zip-code');
const postalCodeInput = component.querySelector('#location-postal-code');
const countryInput = component.querySelector('#location-country');
const placeLatInput = component.querySelector('#google-place-lat');
const placeLngInput = component.querySelector('#google-place-lng');
const placeIdInput = component.querySelector('#google-place-id');
const mapUrlInput = component.querySelector('#google-map-url');
const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
const formattedAddressInput = component.querySelector('#google-place-formatted-address');

changeInputValue(venueNameInput, 'value', venueData.venueName);
changeInputValue(addressInput, 'value', venueData.address);
Expand All @@ -85,6 +80,7 @@ function updateAllFields(venueData, component) {
changeInputValue(placeIdInput, 'value', venueData.placeId);
changeInputValue(mapUrlInput, 'value', venueData.mapUrl);
changeInputValue(gmtoffsetInput, 'value', venueData.gmtOffset);
changeInputValue(formattedAddressInput, 'value', venueData.formattedAddress);
}

function getVenueDataInForm(component) {
Expand All @@ -93,13 +89,14 @@ function getVenueDataInForm(component) {
const cityInput = component.querySelector('#location-city');
const stateInput = component.querySelector('#location-state');
const stateCodeInput = component.querySelector('#location-state-code');
const postalCodeInput = component.querySelector('#location-zip-code');
const postalCodeInput = component.querySelector('#location-postal-code');
const countryInput = component.querySelector('#location-country');
const placeLatInput = component.querySelector('#google-place-lat');
const placeLngInput = component.querySelector('#google-place-lng');
const placeIdInput = component.querySelector('#google-place-id');
const mapUrlInput = component.querySelector('#google-map-url');
const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
const formattedAddressInput = component.querySelector('#google-place-formatted-address');

const venueName = venueNameInput.value;
const address = addressInput.value;
Expand All @@ -113,6 +110,7 @@ function getVenueDataInForm(component) {
const lat = +placeLatInput.value;
const lon = +placeLngInput.value;
const gmtOffset = +gmtoffsetInput.value;
const formattedAddress = formattedAddressInput.value;

const venueData = {
venueName,
Expand All @@ -129,6 +127,7 @@ function getVenueDataInForm(component) {
lon,
},
gmtOffset,
formattedAddress,
};

return venueData;
Expand All @@ -145,15 +144,16 @@ function initAutocomplete(el, props) {
const city = el.querySelector('#location-city');
const state = el.querySelector('#location-state');
const stateCode = el.querySelector('#location-state-code');
const zip = el.querySelector('#location-zip-code');
const postalCode = el.querySelector('#location-postal-code');
const country = el.querySelector('#location-country');
const placeId = el.querySelector('#google-place-id');
const mapUrl = el.querySelector('#google-map-url');
const placeLAT = el.querySelector('#google-place-lat');
const placeLNG = el.querySelector('#google-place-lng');
const placeGmtOffset = el.querySelector('#google-place-gmt-offset');
const formattedAddress = el.querySelector('#google-place-formatted-address');

autocomplete.setFields(['name', 'address_components', 'geometry', 'place_id', 'utc_offset_minutes', 'url']);
autocomplete.setFields(['formatted_address', 'name', 'address_components', 'geometry', 'place_id', 'utc_offset_minutes', 'url']);

autocomplete.addListener('place_changed', () => {
const place = autocomplete.getPlace();
Expand All @@ -165,32 +165,45 @@ function initAutocomplete(el, props) {
address: '',
city: '',
state: '',
zip: '',
stateCode: '',
postalCode: '',
country: '',
};

const streetAddressCandidates = [
'street_number',
'route',
'neighborhood',
'sublocality_level_1',
'sublocality_level_2',
'sublocality_level_3',
'sublocality_level_4',
];

const cityCandidates = ['locality', 'postal_town', 'administrative_area_level_1'];

components.forEach((component) => {
if (component.types.includes('street_number')) {
if (streetAddressCandidates.some((type) => component.types.includes(type))) {
addressInfo.address += `${component.long_name} `;
}
if (component.types.includes('route')) {
addressInfo.address += component.long_name;
}
if (component.types.includes('locality')) {
if (!addressInfo.city
&& cityCandidates.some((type) => component.types.includes(type))) {
addressInfo.city = component.long_name;
}
if (component.types.includes('administrative_area_level_1')) {
addressInfo.state = component.long_name;
addressInfo.stateCode = component.short_name;
}
if (component.types.includes('postal_code')) {
addressInfo.zip = component.long_name;
addressInfo.postalCode = component.long_name;
}
if (component.types.includes('country')) {
addressInfo.country = component.short_name;
}
});

addressInfo.address = addressInfo.address.trim();

if (Object.values(addressInfo).some((v) => !v)) {
el.dispatchEvent(new CustomEvent('show-error-toast', { detail: { error: { message: 'The selection is not a valid venue.' } }, bubbles: true, composed: true }));
resetAllFields(el);
Expand All @@ -203,7 +216,7 @@ function initAutocomplete(el, props) {
changeInputValue(city, 'value', addressInfo.city);
changeInputValue(state, 'value', addressInfo.state);
changeInputValue(stateCode, 'value', addressInfo.stateCode);
changeInputValue(zip, 'value', addressInfo.zip);
changeInputValue(postalCode, 'value', addressInfo.postalCode);
changeInputValue(country, 'value', addressInfo.country);
changeInputValue(placeId, 'value', place.place_id);
changeInputValue(mapUrl, 'value', place.url);
Expand All @@ -217,6 +230,10 @@ function initAutocomplete(el, props) {
placeLAT.value = place.geometry.location.lat();
placeLNG.value = place.geometry.location.lng();
}

if (place.formatted_address) {
formattedAddress.value = place.formatted_address;
}
});
}

Expand Down
71 changes: 11 additions & 60 deletions ecc/blocks/venue-info-component/venue-info-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,80 +53,31 @@ function buildAdditionalInfo(row) {
}

function buildLocationInputGrid(row) {
const subs = row.querySelectorAll('li');
const locationDetailsWrapper = createTag('div', { class: 'location-wrapper' });

subs.forEach((sub, i) => {
const placeholder = sub.textContent.trim();
switch (i) {
case 0:
locationDetailsWrapper.append(createTag('sp-textfield', {
id: 'location-city',
class: 'location-input venue-info-text text-input',
placeholder,
required: true,
type: 'text',
quiet: true,
size: 'l',
readonly: true,
}));
break;
case 1:
locationDetailsWrapper.append(createTag('sp-textfield', {
id: 'location-state',
class: 'location-input venue-info-text text-input',
placeholder,
required: true,
type: 'text',
quiet: true,
size: 'l',
readonly: true,
pattern: '^(?:Alabama|AL|Alaska|AK|Arizona|AZ|Arkansas|AR|California|CA|Colorado|CO|Connecticut|CT|Delaware|DE|Florida|FL|Georgia|GA|Hawaii|HI|Idaho|ID|Illinois|IL|Indiana|IN|Iowa|IA|Kansas|KS|Kentucky|KY|Louisiana|LA|Maine|ME|Maryland|MD|Massachusetts|MA|Michigan|MI|Minnesota|MN|Mississippi|MS|Missouri|MO|Montana|MT|Nevada|NV|New\\s+Hampshire|NH|New\\s+Jersey|NJ|New\\s+Mexico|NM|New\\s+York|NY|North\\s+Carolina|NC|North\\s+Dakota|ND|Ohio|OH|Oklahoma|OK|Oregon|OR|Pennsylvania|PA|Rhode\\s+Island|RI|South\\s+Carolina|SC|South\\s+Dakota|SD|Tennessee|TN|Texas|TX|Utah|UT|Vermont|VT|Virginia|VA|Washington|WA|West\\s+Virginia|WV|Wisconsin|WI|Wyoming|WY|Nebraska|NE)$',
}));
break;
case 2:
locationDetailsWrapper.append(createTag('sp-textfield', {
id: 'location-zip-code',
class: 'location-input venue-info-text text-input',
placeholder,
required: true,
type: 'text',
quiet: true,
size: 'l',
readonly: true,
pattern: '^[0-9]{5}(?:-[0-9]{4})?$',
}));
break;
case 3:
locationDetailsWrapper.append(createTag('sp-textfield', {
id: 'location-country',
class: 'location-input venue-info-text text-input',
placeholder,
required: true,
type: 'text',
quiet: true,
size: 'l',
readonly: true,
pattern: '^(AF|AX|AL|DZ|AS|AD|AO|AI|AQ|AG|AR|AM|AW|AU|AT|AZ|BS|BH|BD|BB|BY|BE|BZ|BJ|BM|BT|BO|BQ|BA|BW|BV|BR|IO|BN|BG|BF|BI|KH|CM|CA|CV|KY|CF|TD|CL|CN|CX|CC|CO|KM|CG|CD|CK|CR|CI|HR|CU|CW|CY|CZ|DK|DJ|DM|DO|EC|EG|SV|GQ|ER|EE|ET|EU|FK|FO|FJ|FI|FR|GF|PF|TF|GA|GM|GE|DE|GH|GI|GR|GL|GD|GP|GU|GT|GG|GN|GW|GY|HT|HM|VA|HN|HK|HU|IS|IN|ID|IR|IQ|IE|IM|IL|IT|JM|JP|JE|JO|KZ|KE|KI|KP|KR|KW|KG|LA|LV|LB|LS|LR|LY|LI|LT|LU|MO|MK|MG|MW|MY|MV|ML|MT|MH|MQ|MR|MU|YT|MX|FM|MD|MC|MN|ME|MS|MA|MZ|MM|NA|NR|NP|NL|NC|NZ|NI|NE|NG|NU|NF|MP|NO|OM|PK|PW|PS|PA|PG|PY|PE|PH|PN|PL|PT|PR|QA|RE|RO|RU|RW|BL|SH|KN|LC|MF|PM|VC|WS|SM|ST|SA|SN|RS|SC|SL|SG|SX|SK|SI|SB|SO|ZA|GS|SS|ES|LK|SD|SR|SJ|SZ|SE|CH|SY|TW|TJ|TZ|TH|TL|TG|TK|TO|TT|TN|TR|TM|TC|TV|UG|UA|AE|GB|US|UM|UY|UZ|VU|VE|VN|VG|VI|WF|EH|YE|ZM|ZW)$',
}));
break;
default:
break;
}
});
const cityInput = createTag('input', { id: 'location-city', type: 'hidden' });
const stateInput = createTag('input', { id: 'location-state', type: 'hidden' });
const postalCodeInput = createTag('input', { id: 'location-postal-code', type: 'hidden' });
const countryInput = createTag('input', { id: 'location-country', type: 'hidden' });
const stateCodeInput = createTag('input', { id: 'location-state-code', type: 'hidden' });
const placeIdInput = createTag('input', { id: 'google-place-id', type: 'hidden' });
const mapUrlInput = createTag('input', { id: 'google-map-url', type: 'hidden' });
const placeLATInput = createTag('input', { id: 'google-place-lat', type: 'hidden' });
const placeLNGInput = createTag('input', { id: 'google-place-lng', type: 'hidden' });
const gmtOffsetInput = createTag('input', { id: 'google-place-gmt-offset', type: 'hidden' });
const formattedAddressInput = createTag('input', { id: 'venue-info-venue-address', type: 'hidden' });
locationDetailsWrapper.append(
cityInput,
stateInput,
postalCodeInput,
countryInput,
stateCodeInput,
placeIdInput,
mapUrlInput,
placeLATInput,
placeLNGInput,
gmtOffsetInput,
formattedAddressInput,
);

row.innerHTML = '';
Expand All @@ -152,7 +103,7 @@ export default function init(el) {
break;
case 2:
decorateSWCTextField(r, {
id: 'venue-info-venue-address',
id: 'google-place-formatted-address',
quiet: true,
size: 'xl',
readonly: true,
Expand Down
Loading