Feature #57079: Make manual input option more similar to M2 module

postcode-nl · Apr 4, 2023 · b8898b6 · b8898b6
1 parent 11eb3d2
commit b8898b6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git 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
@@ -36,18 +36,9 @@
 				return;
 			}
 
-			if (settings.displayMode === 'allowManual')
+			if (settings.allowAutofillIntlBypass === 'y')
 			{
-				addFormattedAddressOutput(container);
-				container.find('.postcode-eu-autofill-intl').append(`<a href="#manual-input" class="manual-input-trigger">${settings.manualInputLabel}</a>`);
-				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 = $('<div>', {class: 'form-row form-row-wide postcode-eu-autofill postcode-eu-autofill-address-container'}),
+		const formRow = $('<div>', {class: 'form-row form-row-wide postcode-eu-autofill'}),
 			addressElement = $('<address>', {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 = $('<a>', {'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
@@ -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
@@ -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),