Migrate js binding to watch methods (#190)

* Dependencies update

* Extend configuration by adding custom fields configuration

Author: mfilip

cypress/integration/01_checkout.ts

@@ -20,7 +20,7 @@ const suite = {
 };
 
 describe("Checkout", () => {
-  before(() => {
+  beforeEach(() => {
     // Add product and visit checkout
     cy.visit("/index.php?route=product/product&product_id=43");
     cy.get("button").contains("Add to Cart").click();

cypress/support/suite.ts

@@ -7,6 +7,11 @@ interface Suite {
   address: Address;
 }
 
+const normalizeCity = (city: string): string => {
+  const lowerCase = city.toLowerCase();
+  return lowerCase.charAt(0).toUpperCase() + lowerCase.slice(1);
+}
+
 const assertions = (
   scope: JQuery<HTMLElement>,
   selectors: Selectors,
@@ -29,7 +34,7 @@ const assertions = (
     cy
       .get(selectors.organisation)
       .should("have.value", address.organisation_name);
-  cy.get(selectors.post_town).should("have.value", address.post_town);
+  cy.get(selectors.post_town).should("have.value", normalizeCity(address.post_town));
   cy.get(selectors.country).should("have.value", "257");
   cy.get(selectors.postcode).should("have.value", address.postcode);
 };
@@ -64,16 +69,16 @@ export const postcodeLookupSuite = (suite: Suite) => {
   it("Postcode Lookup", () => {
     cy.get(scope).within((scope) => {
       cy.get(selectors.country).select("222");
-      cy.get("#idpc_input")
+      cy.get(".idpc_lookup input.form-control")
         .clear({
           force: true,
         })
         .type(address.postcode, {
           force: true,
         });
-      cy.get("#idpc_button").click({ force: true });
+      cy.get(".idpc-button").click({ force: true });
       cy.wait(1000);
-      cy.get("#idpc_dropdown").select("0");
+      cy.get(".idpc-select-container select").select("0");
       assertions(scope, selectors, address);
     });
   });

lib/account.ts

@@ -1,4 +1,4 @@
-import { setupBind, Binding, Config } from "@ideal-postcodes/jsutil";
+import { Config } from "@ideal-postcodes/jsutil";
 import { selectors as billingSelectors } from "./billing";
 import { setupAutocomplete, setupShippingPostcodeLookup } from "./extension";
 
@@ -7,15 +7,13 @@ const selectors = {
   line_1: "#input-address-1",
 };
 
-const bind = (config: Config) => {
-  setupBind({
-    selectors,
-  }).forEach(({ targets }) => {
-    setupAutocomplete(config, targets);
-    setupShippingPostcodeLookup(config, targets);
-  });
-};
+const getScope = undefined;
 
 export const pageTest = () => window.location.href.includes("/address");
 
-export const bindings: Binding = { bind, pageTest };
+const bind = (config: Config) => {
+  setupAutocomplete(config, selectors, pageTest, getScope);
+  setupShippingPostcodeLookup(config, selectors, pageTest, getScope);
+};
+
+export const bindings = { bind };

lib/billing.ts

@@ -1,4 +1,4 @@
-import { setupBind, Config } from "@ideal-postcodes/jsutil";
+import { getParent, Config } from "@ideal-postcodes/jsutil";
 
 import { setupAutocomplete, setupPostcodeLookup } from "./extension";
 
@@ -7,22 +7,18 @@ export const selectors = {
   line_2: '[name="address_2"]',
   postcode: '[name="postcode"]',
   post_town: '[name="city"]',
-  organisation: '[name="company"]',
+  organisation_name: '[name="company"]',
   county: '[name="zone_id"]',
   country: '[name="country_id"]',
 };
 
-const bind = (config: Config) => {
-  setupBind({
-    selectors,
-    parentScope: "fieldset",
-    parentTest: (e) => e.id === "address",
-  }).forEach(({ targets }) => {
-    setupAutocomplete(config, targets);
-    setupPostcodeLookup(config, targets);
-  });
-};
+const getScope = (anchor: any) => getParent(anchor, "fieldset", (e) => e.id === "address");
 
 export const pageTest = () => window.location.href.includes("/checkout");
 
-export const bindings = { bind, pageTest };
+const bind = (config: Config) => {
+  setupAutocomplete(config, selectors, pageTest, getScope);
+  setupPostcodeLookup(config, selectors, pageTest, getScope);
+};
+
+export const bindings = { bind };

lib/custom.ts

@@ -0,0 +1,19 @@
+import { Config, OutputFields } from "@ideal-postcodes/jsutil";
+
+import { setupAutocomplete, setupPostcodeLookup } from "./extension";
+
+export const pageTest = () => true;
+
+interface CustomConfig extends Config {
+    customFields?: OutputFields[]
+}
+
+const bind = (config: CustomConfig) => {
+    const selectors = config.customFields || [];
+    selectors.forEach((selectors: OutputFields) => {
+        setupAutocomplete(config, selectors, pageTest);
+        setupPostcodeLookup(config, selectors, pageTest);
+    });
+};
+
+export const bindings = { bind };