feat(Admin): Add address validation to admin pages

Adds address autocomplete to:

- Customer page
  - Create new customer
- Orders page
  - Create new order
  - Edit existing order

lib/admin-customers.ts

@@ -0,0 +1,19 @@
+import { setupBind } from "@ideal-postcodes/jsutil";
+
+import { Config, setupAutocomplete } from "./extension";
+
+import { selectors } from "./billing";
+
+const parentScope = "fieldset";
+const parentTest = (e: HTMLElement) => e.className === "admin__fieldset";
+
+const bind = (config: Config) => {
+  setupBind({ selectors, parentScope, parentTest }).forEach(({ targets }) => {
+    console.log(selectors);
+    setupAutocomplete(config, targets);
+  });
+};
+
+const pageTest = () => window.location.pathname.includes("/customer");
+
+export const bindings = { bind, pageTest };

lib/admin-orders.ts

@@ -0,0 +1,41 @@
+import { setupBind } from "@ideal-postcodes/jsutil";
+
+import { Config, setupAutocomplete } from "./extension";
+
+export const billing = {
+  line_1: '[name="order[billing_address][street][0]"]',
+  line_2: '[name="order[billing_address][street][1]"]',
+  line_3: '[name="order[billing_address][street][2]"]',
+  postcode: '[name="order[billing_address][postcode]"]',
+  post_town: '[name="order[billing_address][city]"]',
+  organisation: '[name="order[billing_address][company]"]',
+  county: '[name="order[billing_address][region_id]"]',
+  country: '[name="order[billing_address][country_id]"]'
+};
+
+export const shipping = {
+  line_1: '[name="order[shipping_address][street][0]"]',
+  line_2: '[name="order[shipping_address][street][1]"]',
+  line_3: '[name="order[shipping_address][street][2]"]',
+  postcode: '[name="order[shipping_address][postcode]"]',
+  post_town: '[name="order[shipping_address][city]"]',
+  organisation: '[name="order[shipping_address][company]"]',
+  county: '[name="order[shipping_address][region_id]"]',
+  country: '[name="order[shipping_address][country_id]"]'
+};
+
+const selectorList = [billing, shipping];
+
+const parentScope = "fieldset";
+
+const bind = (config: Config) => {
+  selectorList.forEach(selectors => {
+    setupBind({ selectors, parentScope }).forEach(({ targets }) => {
+      setupAutocomplete(config, targets);
+    });
+  });
+};
+
+const pageTest = () => window.location.pathname.includes("/sales");
+
+export const bindings = { bind, pageTest };

lib/billing.ts

@@ -30,6 +30,6 @@ const bind = (config: Config) => {
   });
 };
 
-const pageTest = () => true;
+const pageTest = () => window.location.pathname.includes("/checkout");
 
 export const bindings = { bind, pageTest };

lib/customer.ts

@@ -0,0 +1,6 @@
+import { bindings as b } from "./multishipping";
+const { bind } = b;
+
+const pageTest = () => window.location.pathname.includes("/customer/address");
+
+export const bindings = { bind, pageTest };

lib/index.ts

@@ -2,6 +2,19 @@ import { setup } from "@ideal-postcodes/jsutil";
 
 import { bindings as shipping } from "./shipping";
 import { bindings as billing } from "./billing";
-import { bindings as multiAndCustomer } from "./multishipping-and-customer";
+import { bindings as customer } from "./customer";
+import { bindings as multishipping } from "./multishipping";
+import { bindings as adminOrders } from "./admin-orders";
+import { bindings as adminCustomers } from "./admin-customers";
 
-setup({ bindings: [shipping, billing, multiAndCustomer], window });
+setup({
+  bindings: [
+    shipping,
+    billing,
+    customer,
+    multishipping,
+    adminOrders,
+    adminCustomers
+  ],
+  window
+});

lib/multishipping-and-customer.ts → lib/multishipping.ts

@@ -25,7 +25,6 @@ const linesIdentifier = {
 };
 
 const bind = (config: Config) => {
-  console.log("Calling bind");
   setupBind({
     selectors,
     parentTest: e => e.getAttribute("id") === "form-validate"
@@ -36,6 +35,6 @@ const bind = (config: Config) => {
   });
 };
 
-const pageTest = () => true;
+const pageTest = () => window.location.pathname.includes("/multishipping");
 
 export const bindings = { bind, pageTest };

lib/shipping.ts

@@ -1,4 +1,5 @@
 import { setupBind, Binding } from "@ideal-postcodes/jsutil";
+import { selectors } from "./billing";
 
 import {
   Config,
@@ -7,17 +8,6 @@ import {
   hoistCountry
 } from "./extension";
 
-const selectors = {
-  line_1: '[name="street[0]"]',
-  line_2: '[name="street[1]"]',
-  line_3: '[name="street[2]"]',
-  postcode: '[name="postcode"]',
-  post_town: '[name="city"]',
-  organisation: '[name="company"]',
-  county: '[name="region"]',
-  country: '[name="country_id"]'
-};
-
 const bind = (config: Config) => {
   setupBind({ selectors }).forEach(({ targets }) => {
     hoistCountry(config, targets);
@@ -26,6 +16,6 @@ const bind = (config: Config) => {
   });
 };
 
-const pageTest = () => true;
+const pageTest = () => window.location.pathname.includes("/checkout");
 
 export const bindings: Binding = { bind, pageTest };

package.json

@@ -20,11 +20,12 @@
   },
   "scripts": {
     "semantic-release": "semantic-release",
-    "start": "rollup -c",
+    "start": "make bootstrap && make set-base-url",
+    "build": "rollup -c",
     "watch": "rollup -cw",
     "lint": "eslint lib/**/*.ts",
     "test:e2e": "cypress run --project test/e2e",
-    "test:all": "make bootstrap && make set-base-url && npm run test:e2e && make down",
+    "test:all": "npm start && npm run test:e2e && make down",
     "test:snapshot": "cypress run --project test/snapshot",
     "test:watch": "rollup -c test/snapshot/rollup.config.js -w",
     "test": "npm run test:snapshot"