From b8898b66bc0cfb6f139210d4fcdd3009d0109f1c Mon Sep 17 00:00:00 2001 From: Jerry Smidt Date: Tue, 4 Apr 2023 11:37:10 +0200 Subject: [PATCH] Feature #57079: Make manual input option more similar to M2 module --- assets/css/style.css | 12 ++++++- assets/js/postcode-eu-autofill.js | 33 ++++++++++--------- src/PostcodeNl/AddressAutocomplete/Main.php | 3 +- .../AddressAutocomplete/Options.php | 17 +++++++--- 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 2b884f6..73d5b2c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -15,7 +15,7 @@ background-repeat: no-repeat; } -.form-row.hidden, .form-row.hidden *, .manual-input-trigger.hidden { +.form-row.hidden, .form-row.hidden * { display: none; /** To prevent inline display style**/ opacity: 0; @@ -30,3 +30,13 @@ font-size: 120%; background-color: #f8f8f8; } + +.postcode-eu-autofill-intl-bypass-link { + display: none; + cursor: pointer; + font-size: 85%; +} + +.woocommerce-invalid .postcode-eu-autofill-intl-bypass-link { + display: initial; +} diff --git a/assets/js/postcode-eu-autofill.js b/assets/js/postcode-eu-autofill.js index 77d37af..27fd0c3 100644 --- a/assets/js/postcode-eu-autofill.js +++ b/assets/js/postcode-eu-autofill.js @@ -36,18 +36,9 @@ return; } - if (settings.displayMode === 'allowManual') + if (settings.allowAutofillIntlBypass === 'y') { - addFormattedAddressOutput(container); - container.find('.postcode-eu-autofill-intl').append(`${settings.manualInputLabel}`); - container.find('.manual-input-trigger').on('click', function(event) { - event.preventDefault(); - let addressFields = getAddressFields(container); - toggleAddressFields(addressFields, true, true); - $(this).addClass('hidden'); - container.find('.postcode-eu-autofill-intl').addClass('hidden'); - container.find('.postcode-eu-autofill-address-container').addClass('hidden'); - }); + addAutofillIntlBypassLink(container); } container.find('.country_to_state').on('change.postcode-eu.address-fields', function () { @@ -56,9 +47,6 @@ // Wrap in timeout to execute after Woocommerce field logic: window.setTimeout(function () { toggleAddressFields(getAddressFields(container), !isSupportedCountry(selectedCountry), true); - container.find('.postcode-eu-autofill-intl').removeClass('hidden'); - container.find('.manual-input-trigger').removeClass('hidden'); - container.find('.postcode-eu-autofill-address-container').removeClass('hidden'); }); }).trigger('change.postcode-eu.address-fields'); }) @@ -540,7 +528,7 @@ const addFormattedAddressOutput = function (container) { - const formRow = $('
', {class: 'form-row form-row-wide postcode-eu-autofill postcode-eu-autofill-address-container'}), + const formRow = $('
', {class: 'form-row form-row-wide postcode-eu-autofill'}), addressElement = $('
', {class: 'postcode-eu-autofill-address'}).appendTo(formRow); container.find('.postcode-eu-autofill').last().after(formRow); @@ -572,4 +560,19 @@ formRow.show(); }); } + + const addAutofillIntlBypassLink = function (container) + { + const formRow = container.find('.form-row.postcode-eu-autofill-intl'), + link = $('', {'class': 'postcode-eu-autofill-intl-bypass-link', text: settings.autofillIntlBypassLinkText}); + + link.on('click', function () { + toggleAddressFields(getAddressFields(container), true, true); + formRow.hide(); + return false; + }); + + formRow.append(link); + } + })(); diff --git a/src/PostcodeNl/AddressAutocomplete/Main.php b/src/PostcodeNl/AddressAutocomplete/Main.php index f70d20c..5a11817 100644 --- a/src/PostcodeNl/AddressAutocomplete/Main.php +++ b/src/PostcodeNl/AddressAutocomplete/Main.php @@ -219,7 +219,8 @@ public function afterCheckoutForm(): void 'postcodeOnlyPlaceholder' => '1234 AB', 'postcodeOnlyInputHint' => __('Enter a postcode and house number.', 'postcodenl-address-autocomplete'), 'houseNumberPlaceholder' => '123 A', - 'manualInputLabel' => __('Enter an address', 'postcodenl-address-autocomplete'), + 'autofillIntlBypassLinkText' => __('Enter an address', 'postcodenl-address-autocomplete'), + 'allowAutofillIntlBypass' => $this->_options->allowAutofillIntlBypass, ]; printf( diff --git a/src/PostcodeNl/AddressAutocomplete/Options.php b/src/PostcodeNl/AddressAutocomplete/Options.php index b9f9708..5aa204f 100644 --- a/src/PostcodeNl/AddressAutocomplete/Options.php +++ b/src/PostcodeNl/AddressAutocomplete/Options.php @@ -33,13 +33,11 @@ class Options ]; protected const DISPLAY_MODE_DEFAULT = 'default'; - protected const DISPLAY_MODE_MANUAL_ON_ERROR = 'allowManual'; protected const DISPLAY_MODE_SHOW_ON_ADDRESS = 'showOnAddress'; protected const DISPLAY_MODE_SHOW_ALL = 'showAll'; protected const DISPLAY_MODE_DESCRIPTIONS = [ self::DISPLAY_MODE_DEFAULT => 'Hide fields and show a formatted address instead (default)', - self::DISPLAY_MODE_MANUAL_ON_ERROR => 'Hide fields, unless user selects manual address input', self::DISPLAY_MODE_SHOW_ON_ADDRESS => 'Hide fields until an address is selected', self::DISPLAY_MODE_SHOW_ALL => 'Show fields', ]; @@ -61,6 +59,8 @@ class Options /** @var string The mode used for Dutch address validation. */ public $netherlandsMode; + public $allowAutofillIntlBypass; + /** @var array */ protected $_supportedCountries; /** @var \DateTime|null The most recent date time Api account information was imported. */ @@ -78,7 +78,6 @@ class Options /** @var array List of country codes for which the autocomplete API is disabled, even though it is supported. */ protected $_apiDisabledCountries; - public function __construct() { $data = get_option(static::OPTION_KEY, []); @@ -94,6 +93,7 @@ public function __construct() $this->netherlandsMode = $data['netherlandsMode'] ?? static::NETHERLANDS_MODE_DEFAULT; } $this->displayMode = $data['displayMode'] ?? static::DISPLAY_MODE_DEFAULT; + $this->allowAutofillIntlBypass = $data['allowAutofillIntlBypass'] ?? 'n'; $this->_supportedCountries = json_decode($data['supportedCountries'] ?? 'NULL', true); $apiAccountInfoDateTime = $data['apiAccountInfoDateTime'] ?? ''; $this->_apiAccountInfoDateTime = $apiAccountInfoDateTime === '' ? null : new DateTime($apiAccountInfoDateTime); @@ -147,6 +147,14 @@ public function show(): void __('How to display the address fields in the checkout form.', 'postcodenl-address-autocomplete'), static::DISPLAY_MODE_DESCRIPTIONS ); + $markup .= $this->_getInputRow( + __('Add manual entry link', 'postcodenl-address-autocomplete'), + 'allowAutofillIntlBypass', + $this->allowAutofillIntlBypass, + 'select', + __('Allows users to skip the autocomplete field and manually enter an address.', 'postcodenl-address-autocomplete'), + ['n' => __('No'), 'y' => __('Yes')] + ); $markup .= $this->_getInputRow( __('Dutch address lookup method', 'postcodenl-address-autocomplete'), 'netherlandsMode', @@ -171,7 +179,7 @@ public function show(): void 'select', sprintf(__('Use autocomplete input for the country %s.', 'postcodenl-address-autocomplete'), $supportedCountry['name']), [ - 'enabled' => __('Active', 'postcodenl-address-autocomplete'), + 'enabled' => __('Enabled', 'postcodenl-address-autocomplete'), 'disabled' => __('Disabled', 'postcodenl-address-autocomplete'), ] ); @@ -459,6 +467,7 @@ protected function _getData(): array 'apiKey' => $this->apiKey, 'apiSecret' => $this->apiSecret, 'displayMode' => $this->displayMode, + 'allowAutofillIntlBypass' => $this->allowAutofillIntlBypass, 'netherlandsMode' => $this->netherlandsMode, 'apiAccountInfoDateTime' => $this->_apiAccountInfoDateTime === null ? '' : $this->_apiAccountInfoDateTime->format('Y-m-d H:i:s'), 'supportedCountries' => json_encode($this->_supportedCountries),