Jacek Pyziak
d39433f0d4
- Implemented Google Pay parser in bongooglepay.js - Added Buckaroo 3 payment parser in buckaroo3.js - Introduced DataTrans CW Mastercard parser in datatranscw.js - Created DataTrans CW Credit Card parser in datatranscw_creditcard.js - Developed DHL Assistant shipping parser in dhlassistant.js - Added Estimated Delivery parser in estimateddelivery.js - Implemented Floapay payment parser in floapay.js - Created FS Pickup at Store shipping parser in fspickupatstore.js - Developed Generic Iframe parser in generic_iframe_parser.js - Added Geodis Officiel shipping parser in geodisofficiel.js - Implemented Glob Kurier module shipping parser in globkuriermodule.js - Created Latvija Post Express Pickup Terminal parser in latvijaspastsexpresspastspostterminalslv.js - Developed LP Shipping parser in lpshipping.js - Added Mijora Venipak parser in mijoravenipak.js - Implemented Apple Pay parser in pm_applepay.js - Created Przelewy24 payment parser in przelewy24.js - Developed Pshugls shipping parser in pshugls.js - Added Redsys Insite payment parser in redsysinsite.js - Implemented Tpay payment parser in tpay.js - Updated third-party integration documentation for FedEx DotCom
237 lines
12 KiB
Smarty
237 lines
12 KiB
Smarty
{**
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Software License Agreement
|
|
* that is bundled with this package in the file LICENSE.txt.
|
|
*
|
|
* @author Peter Sliacky (Zelarg)
|
|
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
|
|
*}
|
|
|
|
{literal}
|
|
<script async
|
|
src="https://maps.googleapis.com/maps/api/js?key={/literal}{$z_tc_config->google_maps_api_key|escape:'javascript':'UTF-8'}{literal}&libraries=places&loading=async&callback=googlePlacesScriptLoadCallbackOnce">
|
|
</script>
|
|
<script>
|
|
|
|
function googlePlacesScriptLoadCallbackOnce() {
|
|
if (typeof googlePlacesScriptLoadCallbackOnce.called === 'undefined') {
|
|
googlePlacesScriptLoadCallbackOnce.called = true;
|
|
googlePlacesScriptLoadCallback();
|
|
}
|
|
}
|
|
|
|
function tc_reInitGooglePlaces() {
|
|
googlePlacesScriptLoadCallback();
|
|
}
|
|
function isAddressController() {
|
|
return document.querySelector('body#address') !== null;
|
|
}
|
|
var tc_autocomplete = {}
|
|
var debug_google_places = 0;
|
|
var isoCodes = [];
|
|
|
|
try {
|
|
if (typeof tc_countriesIsoCodes !== 'undefined' && tc_countriesIsoCodes.length) {
|
|
isoCodes = JSON.parse(tc_countriesIsoCodes);
|
|
}
|
|
} catch (e) {
|
|
console.warn('Countries ISO codes parsing failed!');
|
|
}
|
|
|
|
function googlePlacesScriptLoadCallback() {
|
|
if (debug_google_places == 1) {
|
|
console.log('googlePlacesScriptLoadCallback');
|
|
}
|
|
// addEventListener('DOMContentLoaded', (event) => {
|
|
/* global google */
|
|
if (google) {
|
|
if (isAddressController()) {
|
|
// When included for Prestashop's address edit controller
|
|
tc_autocomplete['address'] = new google.maps.places.Autocomplete(document.querySelector(`[name=address1]`), {
|
|
fields: ['address_components'],
|
|
strictBounds: false,
|
|
types: ['address'],
|
|
// TODO: component restriction based on selected country
|
|
// TODO: what about US states?
|
|
// componentRestrictions: { country: ['sk'] },
|
|
});
|
|
tc_autocomplete['address'].addListener('place_changed', () => googlePlaceChanged('address', tc_autocomplete['address'].getPlace()));
|
|
|
|
// jQuery version
|
|
// const idCountry = $(`[name=id_country]`).val();
|
|
|
|
// Vanilla JS version
|
|
const idCountry = document.querySelector(`[name=id_country]`).value;
|
|
|
|
const matchingCountry = isoCodes.find(x => x.id_country == idCountry);
|
|
if (typeof matchingCountry !== undefined && matchingCountry !== null) {
|
|
const initialIso = matchingCountry?.iso_code;
|
|
tc_autocomplete['address'].setComponentRestrictions({'country': initialIso});
|
|
}
|
|
|
|
if (typeof prestashop?.on === 'function') {
|
|
prestashop.on('updatedAddressForm', function () {
|
|
tc_reInitGooglePlaces();
|
|
})
|
|
}
|
|
} else {
|
|
// When included for TheCheckout module
|
|
for (const tc_addr_type of ['invoice', 'delivery']) {
|
|
// console.log('Attempt to bind ' + tc_addr_type, document.querySelector(`[data-address-type=${tc_addr_type}] [name=address1]`))
|
|
tc_autocomplete[tc_addr_type] = new google.maps.places.Autocomplete(document.querySelector(`[data-address-type=${tc_addr_type}] [name=address1]`), {
|
|
fields: ['address_components'],
|
|
strictBounds: false,
|
|
types: ['address'],
|
|
// TODO: component restriction based on selected country
|
|
// TODO: what about US states?
|
|
// componentRestrictions: { country: ['sk'] },
|
|
});
|
|
tc_autocomplete[tc_addr_type].addListener('place_changed', () => googlePlaceChanged(tc_addr_type, tc_autocomplete[tc_addr_type].getPlace()));
|
|
|
|
// jQuery version
|
|
// const initialIso = $(`[data-address-type=${tc_addr_type}] [name=id_country]`).children('option').filter(':selected').attr('data-iso-code');
|
|
|
|
// Vanilla JS version
|
|
const initialIso = document.querySelector(`[data-address-type=${tc_addr_type}] [name=id_country] option:checked`)?.dataset?.isoCode
|
|
|
|
if (initialIso !== undefined && initialIso !== null) {
|
|
tc_autocomplete[tc_addr_type].setComponentRestrictions({'country': initialIso});
|
|
}
|
|
|
|
// jQuery version
|
|
// $('body').off('googlePlacesScriptLoadCallback').on('change.componentRestrictions', `[data-address-type=${tc_addr_type}] [name=id_country]`, function() {
|
|
// // console.log('Google places, change.componentRestrictions change listener called');
|
|
// if (tc_autocomplete && tc_autocomplete[tc_addr_type]) {
|
|
// const iso = $(this).children('option').filter(':selected').attr('data-iso-code');
|
|
// if (debug_google_places == 1) {
|
|
// console.log(`setting '${iso}' as component/country restriction`)
|
|
// }
|
|
// tc_autocomplete[tc_addr_type].setComponentRestrictions({'country': iso});
|
|
// }
|
|
// });
|
|
|
|
// Vanilla JS version
|
|
document.body.addEventListener('change', function(event) {
|
|
if (event.target.matches(`[data-address-type=${tc_addr_type}] [name=id_country]`)) {
|
|
if (tc_autocomplete && tc_autocomplete[tc_addr_type]) {
|
|
const iso = event.target.querySelector('option:checked')?.dataset?.isoCode;
|
|
if (debug_google_places == 1) {
|
|
console.log(`setting '${iso}' as component/country restriction (vanilla JS)`)
|
|
}
|
|
tc_autocomplete[tc_addr_type].setComponentRestrictions({'country': iso});
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
// });
|
|
}
|
|
|
|
function googlePlaceChanged(addressType, place) {
|
|
if (place.address_components) {
|
|
if (debug_google_places == 1) {
|
|
console.log(addressType, place);
|
|
}
|
|
const placeDetails = place.address_components.reduce((acc, x) => ({...acc, [x.types[0]]: x.long_name}), {});
|
|
if (debug_google_places == 1) {
|
|
console.log('Place details: ', placeDetails);
|
|
}
|
|
|
|
const streetNumberFirst = ['US', 'GB', 'AU'].includes(tc_autocomplete[addressType]?.componentRestrictions?.country);
|
|
const stateFromAdministrativeArea2 = ['IT'].includes(tc_autocomplete[addressType]?.componentRestrictions?.country);
|
|
|
|
const tc_place_address = {};
|
|
if (streetNumberFirst) {
|
|
tc_place_address.street = `${placeDetails?.street_number || placeDetails?.premise || ''} ${placeDetails?.route || ''}`;
|
|
} else {
|
|
tc_place_address.street = `${placeDetails?.route || placeDetails?.locality} ${placeDetails?.street_number || placeDetails?.premise || ''}`;
|
|
}
|
|
//
|
|
// if (streetNumberFirst) {
|
|
// tc_place_address.street = `${placeDetails?.street_number || ''} ${placeDetails?.route || ''}`;
|
|
// } else {
|
|
// tc_place_address.street = `${placeDetails?.route || ''} ${placeDetails?.street_number || ''}`;
|
|
// }
|
|
tc_place_address.city = placeDetails?.locality || placeDetails?.sublocality_level_1 || '';
|
|
tc_place_address.postcode = placeDetails?.postal_code || '';
|
|
|
|
if (stateFromAdministrativeArea2) {
|
|
var provincia = placeDetails?.administrative_area_level_2 || placeDetails?.administrative_area_level_1 || '';
|
|
tc_place_address.state = provincia.replace(/^.*? di /, '');
|
|
} else {
|
|
tc_place_address.state = placeDetails?.administrative_area_level_1 || '';
|
|
}
|
|
|
|
if (debug_google_places == 1) {
|
|
console.log(tc_place_address);
|
|
}
|
|
|
|
var mapPlacePropsToFields = {
|
|
address1: 'street',
|
|
city: 'city',
|
|
postcode: 'postcode',
|
|
id_state: 'state'
|
|
}
|
|
|
|
var el;
|
|
var stateEl;
|
|
for (const [fieldName, propName] of Object.entries(mapPlacePropsToFields)) {
|
|
// jQuery version
|
|
// if (isAddressController()) {
|
|
// el = $(`[name=${fieldName}]`);
|
|
// } else {
|
|
// el = $(`[data-address-type=${addressType}] [name=${fieldName}]`);
|
|
// }
|
|
// if (tc_place_address && tc_place_address[propName]) {
|
|
// if (propName === 'state') {
|
|
// stateEl = el.find('option').filter(function() {
|
|
// return $.trim($(this).text()).toLowerCase().replace(/[^a-z]/g,'') === (tc_place_address[propName] || '').toLowerCase().replace(/[^a-z]/g,'');
|
|
// });
|
|
// if (stateEl && stateEl.length) {
|
|
// stateEl.attr('selected', true).trigger('change');
|
|
// }
|
|
// } else {
|
|
// el.val(tc_place_address[propName] || '');
|
|
// setTimeout(function (thisEl) {
|
|
// // console.log('el.val', thisEl.val())
|
|
// thisEl.change();
|
|
// }, 100, el);
|
|
// }
|
|
// }
|
|
|
|
// Vanilla JS version
|
|
if (isAddressController()) {
|
|
el = document.querySelector(`[name=${fieldName}]`);
|
|
} else {
|
|
el = document.querySelector(`[data-address-type=${addressType}] [name=${fieldName}]`);
|
|
}
|
|
if (tc_place_address && tc_place_address[propName] && el) {
|
|
if (propName === 'state') {
|
|
stateEl = el.querySelector('option:checked');
|
|
stateEl = Array.from(el.querySelectorAll('option')).filter(x =>
|
|
x.innerText.trim().toLowerCase().replace(/[^a-z]/g, '') === (tc_place_address[propName] || '').toLowerCase().replace(/[^a-z]/g, ''));
|
|
if (stateEl && stateEl.length) {
|
|
stateEl[0].selected = true;
|
|
stateEl[0].dispatchEvent(new Event('change'));
|
|
}
|
|
} else {
|
|
el.value = tc_place_address[propName] || '';
|
|
setTimeout(function (thisEl) {
|
|
// console.log('el.val', thisEl.val())
|
|
// Prefer jquery call so that attached event handlers are properly executed
|
|
if (typeof $ === 'function' && typeof $(thisEl) !== 'undefined' && typeof $(thisEl).change === 'function') {
|
|
$(thisEl).change();
|
|
} else {
|
|
thisEl.dispatchEvent(new Event('change'));
|
|
}
|
|
}, 100, el);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{/literal} |