feat(Custom Fields): Allow custom address field autofill

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: "@cablanchard",
+  rules: {
+    "@typescript-eslint/no-inferrable-types": 1
+  },
 };

Helper/Data.php

@@ -150,6 +150,13 @@ public function hoistCountry(
         );
     }
 
+    public function customFields($scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT) {
+        return $this->scopeConfig->getValue(
+            'idealpostcodes/settings/custom_fields',
+            $scope
+        );
+    }
+
     public function toConfiguration(
         $scope = ScopeConfigInterface::SCOPE_TYPE_DEFAULT
     ) {
@@ -162,7 +169,8 @@ public function toConfiguration(
             'hoistCountryField' => $this->hoistCountry($scope),
             'requireCounty' => $this->requireCounty($scope),
             'autocompleteOverride' => $this->getAutocompleteOverride($scope),
-            "postcodeLookupOverride" => $this->getPostcodeLookupOverride($scope)
+            "postcodeLookupOverride" => $this->getPostcodeLookupOverride($scope),
+            "customFields" => $this->customFields($scope)
         );
         return $config;
     }

etc/adminhtml/system.xml

@@ -260,6 +260,24 @@
             <field id="enabled">1</field>
           </depends>
         </field>
+        <field
+                id="custom_fields"
+                type="textarea"
+                translate="label,comment"
+                sortOrder="80"
+                showInDefault="1"
+                showInWebsite="1"
+                showInStore="1"
+        >
+          <label>Custom Fields Configuration</label>
+          <comment>
+            Advanced: Custom fields configuration to enable additional fields to bind autocomplete solution like coming from different plugin that handles address data.
+          </comment>
+          <config_path>idealpostcodes/settings/custom_fields</config_path>
+          <depends>
+            <field id="enabled">1</field>
+          </depends>
+        </field>
       </group>
     </section>
   </system>

etc/config.xml

@@ -16,6 +16,7 @@
         <hoist_country>1</hoist_country>
         <autocomplete_override>{}</autocomplete_override>
         <postcode_lookup_override>{}</postcode_lookup_override>
+        <custom_fields>[]</custom_fields>
       </settings>
     </idealpostcodes>
   </default>

lib/admin-custom.ts

@@ -0,0 +1,17 @@
+import { Config, setupAutocomplete } from "./extension";
+import { getParent } from "@ideal-postcodes/jsutil";
+
+const parentScope = "fieldset";
+const parentTest = (e: HTMLElement) => e.className === "admin__fieldset";
+
+const pageTest = () => true;
+
+export const bind = (config: Config) => {
+    const fields = config.customFields || [];
+    fields.forEach((selectors) => {
+        setupAutocomplete(config, selectors, {
+            pageTest,
+            getScope: (anchor: HTMLElement) => getParent(anchor, parentScope, parentTest)
+        });
+    })
+};

lib/admin.ts

@@ -3,9 +3,10 @@ import { config } from "@ideal-postcodes/jsutil";
 import { bind as orders } from "./admin-orders";
 import { bind as ordersEdit } from "./admin-orders-edit";
 import { bind as customers } from "./admin-customers";
+import { bind as custom } from "./admin-custom";
 
 window.idpcStart = () =>
-  [orders, customers, ordersEdit].forEach((bind) => {
+  [orders, customers, ordersEdit, custom].forEach((bind) => {
     const conf = config();
     if (conf) bind(conf);
   });

lib/custom.ts

@@ -0,0 +1,15 @@
+import { Config, setupAutocomplete, setupPostcodeLookup } from "./extension";
+
+const pageTest = () => true;
+
+export const bind = (config: Config) => {
+    const fields = config.customFields || [];
+    fields.forEach((selectors) => {
+        setupAutocomplete(config, selectors, {
+            pageTest
+        });
+        setupPostcodeLookup(config, selectors, {
+            pageTest
+        })
+    })
+};

lib/extension.ts

@@ -23,6 +23,7 @@ import { PostcodeLookup } from "@ideal-postcodes/postcode-lookup";
 
 export interface Config extends BaseConfig {
   hoistCountry?: boolean;
+  customFields?: OutputFields[];
 }
 
 interface LinesIdentifier {
@@ -90,11 +91,23 @@ const SUPPORTED_COUNTRIES: SupportedCountry[] = [
   "GG",
 ];
 
+const EXTENDED_COUNTRIES: string[] =[
+    "United States of America",
+    "US"
+]
+
+export const supportedCountries = (extended: boolean): string[] => {
+  //@ts-expect-error
+  if(extended) return SUPPORTED_COUNTRIES.concat(EXTENDED_COUNTRIES);
+  return SUPPORTED_COUNTRIES;
+}
+
 export const countryIsSupported = (
-  e: HTMLInputElement | HTMLSelectElement
+  e: HTMLInputElement | HTMLSelectElement,
+  extended: boolean = false
 ): boolean => {
   const country = e.value;
-  return SUPPORTED_COUNTRIES.reduce<boolean>((prev, supported) => {
+  return supportedCountries(extended).reduce<boolean>((prev, supported) => {
     if (country === supported) return true;
     return prev;
   }, false);
@@ -118,11 +131,12 @@ const NOOP = () => {};
 export const watchCountry = (
   { country }: any,
   activate: any,
-  deactivate: any
+  deactivate: any,
+  extended: boolean = false
 ) => {
   if (!country) return NOOP;
   const checkCountry = (target: HTMLInputElement | HTMLSelectElement) => {
-    if (countryIsSupported(target))
+    if (countryIsSupported(target, extended))
       return activate();
     deactivate();
   };
@@ -218,7 +232,7 @@ export const setupAutocomplete = async (
         this.options.outputFields = getFields(outputFields, this.scope);
         //@ts-expect-error
         hoistCountry(config, this.options.outputFields, linesIdentifier);
-        watchCountry(this.options.outputFields, () => this.view.attach(), () => this.view.detach());
+        watchCountry(this.options.outputFields, () => this.attach(), () => this.detach(), true);
       },
       outputFields,
       ...config.autocompleteOverride