-
Module is disabled via configuration.
+
+ = $escaper->escapeHtml(__('Module is disabled via configuration.')) ?>
+
-
API connection
+
= $escaper->escapeHtml(__('API connection')) ?>
- - Account name
+ - = $escaper->escapeHtml(__('Account name')) ?>
- = $escaper->escapeHtml($accountInfo['name']) ?>
- - Subscription status
+ - = $escaper->escapeHtml(__('Subscription status')) ?>
-
= /* @noEscape */ $block->getApiStatusDescription() ?>
@@ -63,24 +66,31 @@ $moduleInfo = $block->getModuleInfo();
$low = round($limit * .75, 2);
$high = round($limit * .9, 2);
?>
-
- = /* @noEscape */ $usage . ' / ' . /* @noEscape */ $limit ?> euro
+
+ = /* @noEscape */ $usage . ' / ' . /* @noEscape */ $limit ?>
+ = $escaper->escapeHtml(__('euro')) ?>
-
Supported countries
+ isStatusActive()): ?>
+
+ = $escaper->escapeHtml($block->getApiStatusHint()) ?>
+
+
+
+
= $escaper->escapeHtml(__('Supported countries')) ?>
-
- - = /* @noEscape */ $country->name ?>
+
+ - = $escaper->escapeHtml($name) ?>
diff --git a/view/adminhtml/web/css/source/_module.less b/view/adminhtml/web/css/source/_module.less
new file mode 100644
index 0000000..97bdea1
--- /dev/null
+++ b/view/adminhtml/web/css/source/_module.less
@@ -0,0 +1,15 @@
+@import '_shared.less';
+
+.order-address-autofill {
+ min-height: 97px;
+ padding: 2rem;
+ background-color: @color-white-smoke;
+}
+
+.address-autofill-warning {
+ color: @color-tomato-brick;
+}
+
+.admin__field.address-autofill-intl-input {
+ margin-top: 0;
+}
diff --git a/view/adminhtml/web/js/view/address/autofill.js b/view/adminhtml/web/js/view/address/autofill.js
new file mode 100644
index 0000000..67e29a7
--- /dev/null
+++ b/view/adminhtml/web/js/view/address/autofill.js
@@ -0,0 +1,65 @@
+define([
+ 'uiCollection',
+ 'uiRegistry',
+], function (Collection, Registry) {
+ 'use strict';
+
+ return Collection.extend({
+
+ defaults: {
+ container: null,
+ inputs: null,
+ error: '',
+ listens: {
+ visible: 'onVisible',
+ countryCode: 'onChangeCountry',
+ },
+ },
+
+ initialize: function () {
+ this._super();
+
+ this.container = document.getElementById(`order-${this.addressType}_address_fields`);
+ this.inputs = {
+ country: document.getElementById(this.htmlIdPrefix + 'country_id'),
+ street: this.container.querySelectorAll('.field-street .input-text'),
+ postcode: document.getElementById(this.htmlIdPrefix + 'postcode'),
+ city: document.getElementById(this.htmlIdPrefix + 'city'),
+ region: document.getElementById(this.htmlIdPrefix + 'region'),
+ regionId: document.getElementById(this.htmlIdPrefix + 'region_id'),
+ };
+
+ this.inputs.country.addEventListener('change', (e) => {
+ this.countryCode(e.target.value);
+ });
+
+ return this;
+ },
+
+ initElement: function (elem) {
+ if (this.addressType === 'shipping') {
+ this.delegate('disabled', document.forms.edit_form.shipping_same_as_billing.checked);
+ }
+ },
+
+ initObservable: function () {
+ this._super();
+ this.observe('countryCode error visible');
+ return this;
+ },
+
+ onVisible: function (isVisible) {
+ this.container.querySelector('.field-' + this.name).classList.toggle('hidden', !isVisible);
+ },
+
+ onChangeCountry: function (countryCode) {
+ this.visible(this.settings.enabled_countries.includes(countryCode));
+
+ // Update shipping component if same as billing.
+ if (document.forms.edit_form.shipping_same_as_billing.checked && this.addressType === 'billing') {
+ Registry.get('shipping_address_autofill').set('countryCode', countryCode);
+ }
+ },
+
+ });
+});
diff --git a/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-intl.js b/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-intl.js
new file mode 100644
index 0000000..46c68e2
--- /dev/null
+++ b/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-intl.js
@@ -0,0 +1,47 @@
+define([
+ 'Flekto_Postcode/js/form/element/address-autofill-intl',
+ 'mage/translate',
+], function (AddressAutofillIntl, $t) {
+ 'use strict';
+
+ return AddressAutofillIntl.extend({
+ defaults: {
+ showLogo: false,
+ imports: {
+ settings: '${$.parentName}:settings',
+ inputs: '${$.parentName}:inputs',
+ countryCode: '${$.parentName}:countryCode',
+ onChangeCountry: '${$.parentName}:countryCode',
+ },
+ modules: {
+ parent: '${$.parentName}',
+ },
+ },
+
+ initialize: function () {
+ this._super();
+ this.required(false);
+ return this;
+ },
+
+ validateAddress: function (address) {
+ if (
+ this.settings.allow_pobox_shipping === false
+ && address.isPoBox
+ && this.parent().addressType === 'shipping'
+ ) {
+ this.parent().error($t('This address is a PO box'));
+ return false;
+ }
+
+ return this._super(address);
+ },
+
+ resetInputAddress: function () {
+ this.parent().error(false);
+ },
+
+ toggleFields: function () { /* Ignore */ },
+
+ });
+});
diff --git a/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-nl.js b/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-nl.js
new file mode 100644
index 0000000..4259ea7
--- /dev/null
+++ b/view/adminhtml/web/js/view/form/sales/order_create/address-autofill-nl.js
@@ -0,0 +1,69 @@
+define([
+ 'Flekto_Postcode/js/form/components/address-autofill-nl',
+ 'Flekto_Postcode/js/model/address-nl',
+ 'mage/translate',
+], function (Collection, AddressNlModel, $t) {
+ 'use strict';
+
+ return Collection.extend({
+ defaults: {
+ error: '',
+ listens: {
+ status: 'onStatus',
+ visible: 'toggleHouseNumberSelect',
+ '${$.name}.house_number_select:options': 'toggleHouseNumberSelect',
+ },
+ imports: {
+ addressType: '${$.parentName}:addressType',
+ countryCode: '${$.parentName}:countryCode',
+ inputs: '${$.parentName}:inputs',
+ isCountryChanged: '${$.parentName}:isCountryChanged',
+ onChangeCountry: '${$.parentName}:countryCode',
+ settings: '${$.parentName}:settings',
+ },
+ exports: {
+ error: '${$.parentName}:error',
+ },
+ },
+
+ initObservable: function () {
+ this._super();
+ this.observe('error');
+ return this;
+ },
+
+ onStatus: function (status) {
+ if (status === AddressNlModel.status.NOT_FOUND) {
+ this.error($t('Address not found'));
+ }
+ },
+
+ validateAddress: function (address) {
+ if (
+ this.settings.allow_pobox_shipping === false
+ && this.status() === AddressNlModel.status.VALID
+ && this.addressType === 'shipping'
+ && address.addressType === 'PO box'
+ ) {
+ this.error($t('This address is a PO box'));
+ return false;
+ }
+
+ return this._super(address);
+ },
+
+ toggleHouseNumberSelect: function () {
+ this.childHouseNumberSelect((component) => {
+ component.visible(this.visible() && component.options().length > 0);
+ });
+ },
+
+ resetInputAddress: function () {
+ this.error(false);
+ },
+
+ toggleFields: function () { /* Ignore */ },
+
+ });
+
+});
diff --git a/view/adminhtml/web/template/form/element/address-autofill-field.html b/view/adminhtml/web/template/form/element/address-autofill-field.html
new file mode 100644
index 0000000..44c020e
--- /dev/null
+++ b/view/adminhtml/web/template/form/element/address-autofill-field.html
@@ -0,0 +1,13 @@
+
diff --git a/view/frontend/web/css/lib/postcode-eu-autocomplete-address.css b/view/base/web/css/lib/postcode-eu-autocomplete-address.css
similarity index 97%
rename from view/frontend/web/css/lib/postcode-eu-autocomplete-address.css
rename to view/base/web/css/lib/postcode-eu-autocomplete-address.css
index 1cc40cc..01fbf52 100644
--- a/view/frontend/web/css/lib/postcode-eu-autocomplete-address.css
+++ b/view/base/web/css/lib/postcode-eu-autocomplete-address.css
@@ -1,10 +1,8 @@
.postcodenl-autocomplete-menu {
display: none;
position: absolute;
- z-index: 9999;
- padding-bottom: 1.75em;
+ z-index: 99;
background-position: right .85em bottom .3em;
- border-top: 1px solid #ddd;
box-shadow: 0 .5em .75em rgba(0, 0, 0, .15);
background-color: #fff;
}
@@ -16,6 +14,7 @@
.postcodenl-autocomplete-menu-items {
margin: 0;
padding: 0;
+ border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
max-height: 19em;
overflow-y: auto;
@@ -30,17 +29,22 @@ input[class].postcodenl-autocomplete-address-input {
transition: none;
}
-.postcodenl-autocomplete-menu,
-input[class].postcodenl-autocomplete-address-input.postcodenl-autocomplete-address-input-blank {
+.postcodenl-autocomplete-menu.postcodenl-autocomplete-logo {
+ padding-bottom: 1.75em;
+ border-top: 1px solid #ddd;
+}
+
+.postcodenl-autocomplete-logo .postcodenl-autocomplete-menu-items {
+ border-top: none;
+}
+
+.postcodenl-autocomplete-menu.postcodenl-autocomplete-logo,
+input[class].postcodenl-autocomplete-address-input.postcodenl-autocomplete-address-input-blank.postcodenl-autocomplete-logo {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMjYuMTcgNDAiIHdpZHRoPSIyMjYiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8ZyBmaWxsPSIjOTk5Ij4KCQk8cGF0aCBkPSJtOC4zODMgMS43NjlhNy40NjYgNy40NjYgMCAwIDEgNy42ODYgNy42NDIgNy4zNDEgNy4zNDEgMCAwIDEtMi4yIDUuNDQ3IDcuNDczIDcuNDczIDAgMCAxLTUuNSAyLjJoLTYuNXY5LjM2N2gtMS44Njl2LTI0LjY1NnptMCAxMy40OTJhNS42MyA1LjYzIDAgMCAwIDQuMTc3LTEuNjUxIDUuNzE4IDUuNzE4IDAgMCAwIDEuNjM3LTQuMiA1Ljc3IDUuNzcgMCAwIDAtMS42MzctNC4yMjggNS42MyA1LjYzIDAgMCAwLTQuMTc3LTEuNjUxaC02LjUxOHYxMS43NDV6Ii8+CgkJPHBhdGggZD0ibTQwLjQ4NSAyMy4xMDFhMTIuMjMgMTIuMjMgMCAwIDEtOS4wMjIgMy43MjIgMTIuMjMgMTIuMjMgMCAwIDEtOS4wMTQtMy43MjIgMTIuMjgxIDEyLjI4MSAwIDAgMS0zLjY3LTkgMTIuMyAxMi4zIDAgMCAxIDMuNjctOS4wMDcgMTIuMjUyIDEyLjI1MiAwIDAgMSA5LjAxNC0zLjcxNCAxMi4yNTIgMTIuMjUyIDAgMCAxIDkuMDIyIDMuNzE0IDEyLjMgMTIuMyAwIDAgMSAzLjY3IDkuMDA3IDEyLjI4MSAxMi4yODEgMCAwIDEtMy42NyA5em0tMTYuNzE1LTEuMjdhMTAuNCAxMC40IDAgMCAwIDcuNjkzIDMuMTkzIDEwLjQgMTAuNCAwIDAgMCA3LjctMy4xOTMgMTAuNTU2IDEwLjU1NiAwIDAgMCAzLjE1Ny03LjczIDEwLjU4NSAxMC41ODUgMCAwIDAtMy4xNTctNy43MzcgMTAuNDI0IDEwLjQyNCAwIDAgMC03LjctMy4xODYgMTAuNDI0IDEwLjQyNCAwIDAgMC03LjY5MyAzLjE4NiAxMC41ODUgMTAuNTg1IDAgMCAwLTMuMTU3IDcuNzM3IDEwLjU1NiAxMC41NTYgMCAwIDAgMy4xNTcgNy43M3oiLz4KCQk8cGF0aCBkPSJtNTUuMjE4IDI2LjgyM2ExMC4zMjEgMTAuMzIxIDAgMCAxLTUuOC0xLjU3MSA3LjczNyA3LjczNyAwIDAgMS0zLjIyMy00LjI0M2wxLjYyMi0wLjk1NGE2LjUgNi41IDAgMCAwIDIuNTU1IDMuNjI2IDguMTQ4IDguMTQ4IDAgMCAwIDQuODQ1IDEuMzQzIDYuODU2IDYuODU2IDAgMCAwIDQuNi0xLjM4IDQuNDQxIDQuNDQxIDAgMCAwIDEuNi0zLjU1MyAzLjYxMiAzLjYxMiAwIDAgMC0xLjU1MS0zLjE0MiAxOC43ODUgMTguNzg1IDAgMCAwLTQuODEtMi4xNDhsLTEuNzQtMC42MzEtMS41NzEtMC41NzNhOC42MTEgOC42MTEgMCAwIDEtMS41Mi0wLjY5Yy0wLjMzLTAuMjEzLTAuNzM0LTAuNS0xLjE4Mi0wLjg1MmEzLjg2OCAzLjg2OCAwIDAgMS0xLjAyLTEuMDQyIDcuMDU1IDcuMDU1IDAgMCAxLTAuNTU3LTEuMzEyIDUuMiA1LjIgMCAwIDEtMC4yNS0xLjY3NCA2LjAxMiA2LjAxMiAwIDAgMSAyLjEyOS00LjgwOCA3Ljk1IDcuOTUgMCAwIDEgNS4zNDQtMS44NDMgOC4zNDYgOC4zNDYgMCAwIDEgNC45MzMgMS40NjggOC41MyA4LjUzIDAgMCAxIDMgMy43MTRsLTEuNTg2IDAuODgxYTYuMzUgNi4zNSAwIDAgMC02LjM0Mi00LjI2NSA1Ljg3MyA1Ljg3MyAwIDAgMC00LjAzNyAxLjMzNiA0LjM2IDQuMzYgMCAwIDAtMS41MiAzLjQyMSAzLjM5MSAzLjM5MSAwIDAgMCAxLjQwOSAyLjk4OCAxOC42ODIgMTguNjgyIDAgMCAwIDQuNjE3IDIuMDQ4bDMuMTc5IDEuMTgyYTE0LjQxOCAxNC40MTggMCAwIDEgMi40NjcgMS4yNjMgNS4yNzggNS4yNzggMCAwIDEgMS45MTYgMS45NzUgNS43IDUuNyAwIDAgMSAwLjYgMi42NjUgNi4wODYgNi4wODYgMCAwIDEtMi4yIDQuOTE4IDguODgyIDguODgyIDAgMCAxLTUuOTA3IDEuODUzeiIvPgoJCTxwYXRoIGQ9Im04MS44MiAxLjc2OXYxLjc2MmgtNy43NTJ2MjIuOWgtMS45MDh2LTIyLjloLTcuNzUydi0xLjc2MnoiLz4KCQk8cGF0aCBkPSJtOTUuMjM5IDI2LjkyNmExMi41MzEgMTIuNTMxIDAgMCAxLTEyLjgzMi0xMi44MjQgMTIuNTE2IDEyLjUxNiAwIDAgMSAxMi44MzItMTIuODI0IDEyLjY0OCAxMi42NDggMCAwIDEgNi4xMyAxLjUyNyAxMS42OTQgMTEuNjk0IDAgMCAxIDQuNCA0LjE3N2wtNC44NjcgMi44MTlhNS41MjggNS41MjggMCAwIDAtMi4zMjctMi4yIDcuMTU3IDcuMTU3IDAgMCAwLTMuMzc3LTAuNzkzIDYuOTc0IDYuOTc0IDAgMCAwLTUuMiAyIDcuMjg5IDcuMjg5IDAgMCAwLTEuOTYgNS4zMjIgNy4zIDcuMyAwIDAgMCAxLjk2IDUuMzIyIDYuOTY2IDYuOTY2IDAgMCAwIDUuMjM0IDIgNy4yMTYgNy4yMTYgMCAwIDAgMy40LTAuODA3IDUuNDg0IDUuNDg0IDAgMCAwIDIuMzA1LTIuMmw0Ljg2NyAyLjgxOWExMS4zMzQgMTEuMzM0IDAgMCAxLTQuNCA0LjE3NyAxMi43MTQgMTIuNzE0IDAgMCAxLTYuMTY1IDEuNDg1eiIvPgoJCTxwYXRoIGQ9Im0xMzEuODcgMTYuMjUzLTExLjI2OSAyMy43NDctMTEuMjY4LTIzLjc0N2E5Ljg4OCA5Ljg4OCAwIDAgMS0wLjc3MS00LjIxNCAxMi4wMzkgMTIuMDM5IDAgMSAxIDI0LjA3OCAwIDkuODg4IDkuODg4IDAgMCAxLTAuNzcxIDQuMjE0em0tMTEuMjY5LTEwLjIzNGE2LjAxOSA2LjAxOSAwIDEgMCA2LjAxOSA2LjAxOSA2LjAxOSA2LjAxOSAwIDAgMC02LjAxOS02LjAxOXoiLz4KCQk8cGF0aCBkPSJtMTM1Ljk2IDI2LjQzNXYtMjQuNjY2aDkuODU1OXEyLjUxMTMgMCA0LjczMDEgMC45NjMyMyAyLjIzNjEgMC45NDYwMyAzLjgxODUgMi41ODAxIDEuNTgyNCAxLjYzNCAyLjUxMTMgMy45MjE3IDAuOTI4ODMgMi4yODc3IDAuOTI4ODMgNC44Njc3dC0wLjkyODgzIDQuODY3Ny0yLjUxMTMgMy45MjE3cS0xLjU4MjQgMS42MzQtMy44MTg1IDIuNTk3My0yLjIxODkgMC45NDYwMy00LjczMDEgMC45NDYwM3ptNS42NDE4LTUuNDE4Mmg0LjIxNDFxMi45MjQxIDAgNC43MzAxLTEuODc0OSAxLjgyMzMtMS44OTIxIDEuODIzMy01LjAzOTggMC0zLjE0NzctMS44MjMzLTUuMDIyNi0xLjgwNi0xLjg3NDktNC43MzAxLTEuODc0OWgtNC4yMTQxeiIvPgoJCTxwYXRoIGQ9Im0xNjAuNjYgMjYuNDM1di0yNC42NjZoMTUuMzI2djUuNDM1NGgtOS42ODM5djQuMDc2NWg4LjgwNjd2NS4zNjY2aC04LjgwNjd2NC4zNjg5aDkuODU1OXY1LjQxODJ6Ii8+CgkJPHBhdGggZD0ibTE3OC40MiAyMy41OHEwLTEuMzU4OCAwLjk4MDQzLTIuMzM5MyAwLjk5NzYzLTAuOTk3NjMgMi4zNzM3LTAuOTk3NjMgMS4zNTg4IDAgMi4zMzkzIDAuOTgwNDMgMC45OTc2MyAwLjk4MDQzIDAuOTk3NjMgMi4zNTY1IDAgMS4zNzYtMC45OTc2MyAyLjM3MzctMC45ODA0MyAwLjk4MDQzLTIuMzM5MyAwLjk4MDQzdC0yLjM1NjUtMC45ODA0M3EtMC45OTc2My0wLjk5NzYzLTAuOTk3NjMtMi4zNzM3eiIvPgoJCTxwYXRoIGQ9Im0xODguNDQgMjYuNDM1di0yNC42NjZoMTUuMzI2djUuNDM1NGgtOS42ODM5djQuMDc2NWg4LjgwNjd2NS4zNjY2aC04LjgwNjd2NC4zNjg5aDkuODU1OXY1LjQxODJ6Ii8+CgkJPHBhdGggZD0ibTIwNi41NyAxOC40NzF2LTE2LjcwMmg1LjYyNDZ2MTYuMjAzcTAgMy40NTczIDMuODg3MyAzLjQ1NzMgMy44NzAxIDAgMy44NzAxLTMuNDU3M3YtMTYuMjAzaDUuNjQxOHYxNi43MDJxMCAyLjU4MDEtMS4yNTU2IDQuNTIzNy0xLjI1NTYgMS45NDM3LTMuNDA1NyAyLjk0MTMtMi4xMzI5IDAuOTk3NjMtNC44NTA1IDAuOTk3NjMtMi43MTc3IDAtNC44Njc4LTAuOTk3NjMtMi4xMzI5LTAuOTk3NjMtMy4zODg1LTIuOTQxMy0xLjI1NTYtMS45NDM3LTEuMjU1Ni00LjUyMzd6Ii8+Cgk8L2c+Cjwvc3ZnPgo=);
background-repeat: no-repeat;
background-size: 5.0em;
}
-input[class].input-autocomplete-no-logo.postcodenl-autocomplete-address-input-blank {
- background-image: none;
-}
-
input[class].postcodenl-autocomplete-address-input.postcodenl-autocomplete-address-input-blank {
background-position: calc(100% - .85em) calc(50% + .1em);
}
diff --git a/view/base/web/css/source/_shared.less b/view/base/web/css/source/_shared.less
new file mode 100644
index 0000000..3ec24c4
--- /dev/null
+++ b/view/base/web/css/source/_shared.less
@@ -0,0 +1,23 @@
+.postcodenl-autocomplete-menu {
+ z-index: 9999;
+}
+
+.postcodenl-autocomplete-menu,
+.address-autofill-intl-input input[class].input-text.postcodenl-autocomplete-address-input-blank {
+ background-size: 100px;
+}
+
+.address-autofill-nl-house-number.loading input[type=text],
+.address-autofill-intl-input.loading input[class].input-text,
+.address-autofill-intl-input input[class].input-text.postcodenl-autocomplete-loading {
+ background-image: url(data:image/gif;base64,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);
+ background-position: center right .5em;
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+
+.address-autofill-formatted-output address {
+ padding: 1em;
+ font-size: 1.8rem;
+ background-color: @color-white-smoke;
+}
diff --git a/view/base/web/js/form/components/address-autofill-nl.js b/view/base/web/js/form/components/address-autofill-nl.js
new file mode 100644
index 0000000..3790d41
--- /dev/null
+++ b/view/base/web/js/form/components/address-autofill-nl.js
@@ -0,0 +1,229 @@
+define([
+ 'uiCollection',
+ 'jquery',
+ 'Flekto_Postcode/js/model/address-nl',
+], function (Collection, $, AddressNlModel) {
+ 'use strict';
+
+ return Collection.extend({
+ defaults: {
+ listens: {
+ '${$.name}.postcode:value': 'onInputPostcode',
+ '${$.name}.house_number:value': 'onInputHouseNumber',
+ '${$.name}.house_number_select:value': 'onChangeHouseNumberAddition',
+ visible: 'onVisible',
+ },
+ modules: {
+ childPostcode: '${$.name}.postcode',
+ childHouseNumber: '${$.name}.house_number',
+ childHouseNumberSelect: '${$.name}.house_number_select',
+ },
+ address: null,
+ lookupTimeout: null,
+ loading: false,
+ status: null,
+ settings: {},
+ visible: false,
+ inputs: null,
+ },
+
+ initialize: function () {
+ this._super();
+
+ // The "loading" class will be added to the house number element based on loading's observable value.
+ // I.e. when looking up an address.
+ this.childHouseNumber((component) => { component.additionalClasses['loading'] = this.loading; });
+
+ this.address.subscribe((address) => {
+ if (address !== null) {
+ this.setInputAddress(address);
+ }
+ });
+
+ return this;
+ },
+
+ initObservable: function () {
+ this._super();
+ this.observe('address loading status visible');
+ return this;
+ },
+
+ onVisible: function (isVisible) {
+ this.toggleFields(isVisible && this.status() === AddressNlModel.status.VALID);
+ },
+
+ onChangeCountry: function (countryCode) {
+ if (countryCode !== 'NL') {
+ this.visible(false);
+ return;
+ }
+
+ if (this.address() !== null) {
+ this.setInputAddress(this.address());
+ } else {
+ this.resetInputAddress();
+ }
+
+ this.visible(true);
+ },
+
+ onInputPostcode: function () {
+ clearTimeout(this.lookupTimeout);
+
+ if (
+ !this.childPostcode().valueChangedByUser
+ || !this.childPostcode().visible()
+ || this.childPostcode().checkInvalid() !== null
+ ) {
+ return;
+ }
+
+ this.resetHouseNumberSelect();
+
+ this.lookupTimeout = setTimeout(() => {
+ if (this.isPostcodeValid() && this.isHouseNumberValid()) {
+ this.getAddress();
+ }
+ }, AddressNlModel.lookupDelay);
+ },
+
+ onInputHouseNumber: function (value) {
+ clearTimeout(this.lookupTimeout);
+
+ if (
+ !this.childHouseNumber().valueChangedByUser
+ || !this.childHouseNumber().visible()
+ || value === ''
+ ) {
+ return;
+ }
+
+ this.resetHouseNumberSelect();
+
+ this.lookupTimeout = setTimeout(() => {
+ if (this.isHouseNumberValid() && this.isPostcodeValid()) {
+ this.getAddress();
+ }
+ }, AddressNlModel.lookupDelay);
+ },
+
+ isPostcodeValid: function () {
+ return AddressNlModel.postcodeRegex.test(this.childPostcode().value());
+ },
+
+ isHouseNumberValid: function () {
+ return AddressNlModel.houseNumberRegex.test(this.childHouseNumber().value());
+ },
+
+ getAddress: function () {
+ const postcode = encodeURIComponent(
+ AddressNlModel.postcodeRegex.exec(this.childPostcode().value())[0].replace(/\s/g, '')
+ ),
+ houseNumber = encodeURIComponent(
+ AddressNlModel.houseNumberRegex.exec(this.childHouseNumber().value())[0].trim()
+ ),
+ url = `${this.settings.api_actions.dutchAddressLookup}/${postcode}/${houseNumber}`;
+
+ this.resetInputAddress();
+ this.address(null);
+ this.status(null);
+ this.loading(true);
+ this.childHouseNumber().error(false);
+
+ $.get({
+ url: url,
+ cache: true,
+ dataType: 'json',
+ success: ([response]) => {
+ if (response.error) {
+ return this.childHouseNumber().error(response.message);
+ }
+
+ this.status(response.status);
+
+ if (
+ this.status() === AddressNlModel.status.NOT_FOUND
+ || !this.validateAddress(response.address)
+ ) {
+ return;
+ }
+
+ this.address(response.address);
+
+ if (this.status() === AddressNlModel.status.ADDITION_INCORRECT) {
+ this.childHouseNumberSelect().setOptions(response.address.houseNumberAdditions);
+ } else {
+ this.toggleFields(true);
+ }
+ }
+ }).always(this.loading.bind(this, false));
+ },
+
+ validateAddress: function () {
+ return true;
+ },
+
+ onChangeHouseNumberAddition: function (value) {
+ if (!this.childHouseNumberSelect().visible()) {
+ return;
+ }
+
+ const option = this.childHouseNumberSelect().getOption(value),
+ isValid = typeof option !== 'undefined' && typeof option.houseNumberAddition !== 'undefined';
+
+ this.address().houseNumberAddition = isValid ? option.houseNumberAddition : null;
+ this.status(isValid ? AddressNlModel.status.VALID : AddressNlModel.status.ADDITION_INCORRECT);
+ this.address.valueHasMutated();
+ this.toggleFields(isValid);
+ },
+
+ resetHouseNumberSelect: function () {
+ this.childHouseNumberSelect(component => component.setOptions([]));
+ },
+
+ getAddressParts: function (address) {
+ return {
+ ...address,
+ houseNumberAddition: address.houseNumberAddition ?? '',
+ house: `${address.houseNumber} ${address.houseNumberAddition ?? ''}`.trim(),
+ streetParts: [address.street, address.houseNumber, address.houseNumberAddition ?? ''],
+ };
+ },
+
+ setInputAddress: function (address) {
+ if (this.inputs === null) {
+ return;
+ }
+
+ const addressParts = this.getAddressParts(address),
+ setValue = (input, value) => {
+ input.value = value;
+ input.dispatchEvent(new Event('change', {bubbles: true}));
+ };
+
+ let streetLines;
+
+ if (this.settings.split_street_values) {
+ const lastChildIndex = this.inputs.street.length - 1;
+
+ streetLines = addressParts.streetParts.slice(0, lastChildIndex);
+ streetLines.push(addressParts.streetParts.slice(lastChildIndex).join(' ').trim());
+ } else {
+ streetLines = [addressParts.streetParts.join(' ').trim()];
+ }
+
+ for (let i = 0; i < streetLines.length; i++) {
+ setValue(this.inputs.street[i], streetLines[i]);
+ }
+
+ setValue(this.inputs.city, addressParts.city);
+ setValue(this.inputs.postcode, addressParts.postcode);
+
+ if (this.inputs.region) {
+ setValue(this.inputs.region, addressParts.province);
+ }
+ },
+
+ });
+});
diff --git a/view/frontend/web/js/form/element/address-autofill-intl.js b/view/base/web/js/form/element/address-autofill-intl.js
similarity index 72%
rename from view/frontend/web/js/form/element/address-autofill-intl.js
rename to view/base/web/js/form/element/address-autofill-intl.js
index 1da2974..d3b3421 100644
--- a/view/frontend/web/js/form/element/address-autofill-intl.js
+++ b/view/base/web/js/form/element/address-autofill-intl.js
@@ -1,8 +1,9 @@
define([
'Magento_Ui/js/form/element/abstract',
'mage/translate',
+ 'uiRegistry',
'Flekto_Postcode/js/ko/bindings/init-intl-autocomplete',
-], function (Abstract, $t) {
+], function (Abstract, $t, Registry) {
'use strict';
return Abstract.extend({
@@ -17,6 +18,7 @@ define([
additionalClasses: {
'address-autofill-intl-input': true,
},
+ inputs: null,
},
initialize: function () {
@@ -81,7 +83,7 @@ define([
isEnabledCountry: function (countryCode) {
return (
this.settings.enabled_countries.includes(countryCode)
- && !(countryCode === 'NL' && this.settings.nl_input_behavior === 'zip_house')
+ && !(countryCode === 'NL' && Registry.has(this.parentName + '.address_autofill_nl'))
);
},
@@ -98,5 +100,29 @@ define([
return true;
},
+ setInputAddress: function (result) {
+ if (this.inputs === null) {
+ return;
+ }
+
+ const setValue = (input, value) => {
+ input.value = value;
+ input.dispatchEvent(new Event('change', {bubbles: true}));
+ };
+
+ for (let i = 0; i < result.streetLines.length; i++) {
+ setValue(this.inputs.street[i], result.streetLines[i]);
+ }
+
+ setValue(this.inputs.city, result.address.locality);
+ setValue(this.inputs.postcode, result.address.postcode);
+
+ if (this.inputs.regionId && this.inputs.regionId.style.display !== 'none') {
+ setValue(this.inputs.regionId, result.region.id ?? '');
+ } else if (this.inputs.region && this.inputs.region.style.display !== 'none') {
+ setValue(this.inputs.region, result.region.name ?? '');
+ }
+ },
+
});
});
diff --git a/view/frontend/web/js/ko/bindings/init-intl-autocomplete.js b/view/base/web/js/ko/bindings/init-intl-autocomplete.js
similarity index 98%
rename from view/frontend/web/js/ko/bindings/init-intl-autocomplete.js
rename to view/base/web/js/ko/bindings/init-intl-autocomplete.js
index b1b1559..c4a5477 100644
--- a/view/frontend/web/js/ko/bindings/init-intl-autocomplete.js
+++ b/view/base/web/js/ko/bindings/init-intl-autocomplete.js
@@ -18,6 +18,7 @@ define([
autocompleteUrl: viewModel.settings.api_actions.autocomplete,
addressDetailsUrl: viewModel.settings.api_actions.addressDetails,
context: viewModel.countryCode || 'NL',
+ showLogo: viewModel.showLogo ?? true,
});
viewModel.inputElement = element;
@@ -71,3 +72,4 @@ define([
renderer.addAttribute('initIntlAutocomplete');
});
+
diff --git a/view/frontend/web/js/lib/postcode-eu-autocomplete-address.js b/view/base/web/js/lib/postcode-eu-autocomplete-address.js
similarity index 96%
rename from view/frontend/web/js/lib/postcode-eu-autocomplete-address.js
rename to view/base/web/js/lib/postcode-eu-autocomplete-address.js
index 70eac97..f676dd2 100644
--- a/view/frontend/web/js/lib/postcode-eu-autocomplete-address.js
+++ b/view/base/web/js/lib/postcode-eu-autocomplete-address.js
@@ -8,10 +8,10 @@
* https://www.tldrlegal.com/license/apple-mit-license-aml
*
* @author Postcode.nl
- * @version 1.4.1
+ * @version 1.4.2
*/
-(function (global, factory) {
+(function (root, factory) {
'use strict';
// eslint-disable-next-line no-undef
@@ -22,8 +22,8 @@
}
else
{
- global.PostcodeNl = global.PostcodeNl || {};
- global.PostcodeNl.AutocompleteAddress = factory(global);
+ root.PostcodeNl = root.PostcodeNl || {};
+ root.PostcodeNl.AutocompleteAddress = factory();
}
}(typeof self !== 'undefined' ? self : this, function () {
'use strict';
@@ -31,7 +31,7 @@
const document = window.document,
$ = function (selector) { return document.querySelectorAll(selector); },
elementData = new WeakMap(),
- VERSION = '1.4.1',
+ VERSION = '1.4.2',
EVENT_NAMESPACE = 'autocomplete-',
PRECISION_ADDRESS = 'Address',
KEY_ESC = 'Escape',
@@ -149,6 +149,15 @@
writable: true,
},
+ /**
+ * Show the Postcode logo on the input
+ * @type {boolean}
+ */
+ showLogo: {
+ value: true,
+ writable: true,
+ },
+
/**
* Get screen reader text for a successful response with at least one match.
* Override this function to translate the message.
@@ -223,6 +232,7 @@
classNames = {
menuOpen: options.cssPrefix + 'menu-open',
itemFocus: options.cssPrefix + 'item-focus',
+ logo: options.cssPrefix + 'logo',
},
/**
@@ -415,6 +425,8 @@
});
wrapper.classList.add(options.cssPrefix + 'menu');
+ wrapper.classList.toggle(classNames.logo, options.showLogo);
+
ul.classList.add(options.cssPrefix + 'menu-items');
wrapper.appendChild(ul);
@@ -452,7 +464,7 @@
});
// Add the menu to the page.
- if (HTMLElement.prototype.isPrototypeOf(options.appendTo))
+ if (Object.prototype.isPrototypeOf.call(HTMLElement.prototype, options.appendTo))
{
options.appendTo.appendChild(wrapper);
}
@@ -728,10 +740,10 @@
{
if (arguments.length > 1)
{
- return (this[arguments[1]? 'add' : 'remove'](value), !!arguments[1]);
+ return (this[arguments[1] ? 'add' : 'remove'](value), !!arguments[1]);
}
- return (this[this.contains(value)? 'remove' : 'add'](value), this.contains(value));
+ return (this[this.contains(value) ? 'remove' : 'add'](value), this.contains(value));
}
}
@@ -748,11 +760,11 @@
{
inputElements = $(elementsOrSelector);
}
- else if (HTMLElement.prototype.isPrototypeOf(elementsOrSelector))
+ else if (Object.prototype.isPrototypeOf.call(HTMLElement.prototype, elementsOrSelector))
{
inputElements = [elementsOrSelector];
}
- else if (NodeList.prototype.isPrototypeOf(elementsOrSelector))
+ else if (Object.prototype.isPrototypeOf.call(NodeList.prototype, elementsOrSelector))
{
inputElements = elementsOrSelector;
}
@@ -796,7 +808,7 @@
const liveRegion = document.createElement('div'),
liveRegionId = 'aria-live-region';
liveRegion.id = getUniqueId(liveRegionId);
- liveRegion.setAttribute('aria-role', 'status');
+ liveRegion.setAttribute('role', 'status');
liveRegion.setAttribute('aria-live', 'assertive');
liveRegion.classList.add(options.cssPrefix + liveRegionId);
document.body.appendChild(liveRegion);
@@ -1154,7 +1166,12 @@
}
elementData.delete(element);
- element.classList.remove(options.cssPrefix + 'address-input', options.cssPrefix + 'loading', inputBlankClassName);
+ element.classList.remove(
+ options.cssPrefix + 'address-input',
+ options.cssPrefix + 'loading',
+ inputBlankClassName,
+ options.cssPrefix + 'logo'
+ );
}
}
@@ -1184,6 +1201,7 @@
element.setAttribute('aria-controls', liveRegion.id);
element.classList.add(options.cssPrefix + 'address-input');
element.classList.toggle(inputBlankClassName, element.value === '');
+ element.classList.toggle(options.cssPrefix + 'logo', options.showLogo);
element.addEventListener('keydown', eventHandlers.keydown = function (e) {
isKeyEvent = true;
diff --git a/view/frontend/web/js/model/address-nl.js b/view/base/web/js/model/address-nl.js
similarity index 100%
rename from view/frontend/web/js/model/address-nl.js
rename to view/base/web/js/model/address-nl.js
diff --git a/view/base/web/template/form/element/address-autofill-intl.html b/view/base/web/template/form/element/address-autofill-intl.html
new file mode 100644
index 0000000..bc297c4
--- /dev/null
+++ b/view/base/web/template/form/element/address-autofill-intl.html
@@ -0,0 +1,13 @@
+
diff --git a/view/frontend/layout/checkout_index_index.xml b/view/frontend/layout/checkout_index_index.xml
index 41d81b9..8d58445 100644
--- a/view/frontend/layout/checkout_index_index.xml
+++ b/view/frontend/layout/checkout_index_index.xml
@@ -22,6 +22,7 @@
-
- Flekto_Postcode/js/form/components/checkout/address-autofill-nl
- checkoutProvider
+ - shippingAddress.address_autofill_nl
-
- checkoutProvider
@@ -37,7 +38,7 @@
- shippingAddress
- checkoutProvider
-
- shippingAddress.address_autofill_nl.postcode
+
- postcode
-
- Flekto_Postcode/js/form/element/house-number
@@ -46,7 +47,7 @@
- shippingAddress
- checkoutProvider
-
- shippingAddress.address_autofill_nl.house_number
+
- house_number
-
- Flekto_Postcode/js/form/element/house-number-select
@@ -56,7 +57,7 @@
- shippingAddress
- checkoutProvider
-
- shippingAddress.address_autofill_nl.house_number_select
+
- house_number_select
diff --git a/view/frontend/templates/customer/address/autofill.phtml b/view/frontend/templates/customer/address/autofill.phtml
index aeeb3cb..68b0412 100644
--- a/view/frontend/templates/customer/address/autofill.phtml
+++ b/view/frontend/templates/customer/address/autofill.phtml
@@ -13,9 +13,9 @@