Feat/dev host fix (#5)

* devHosts match fix

* Updated readme

* Updated variable

Author: DhiaPhntm

README.md

@@ -23,14 +23,13 @@ npm i @phntms/ft-lib
 
 ## Usage
 
-consentMonitor - Adds an FT consent cookie poller to enable/disable Permutive consent (only useful if 'consentRequired' is set as an option in the site's Permutive script - see here[https://support.permutive.com/hc/en-us/articles/360010845519-Seeking-User-Consent#h_00327830-509b-422a-952b-1906264031f1])
-The optional constructor arg (default ["localhost", "phq"]) accepts a string or array of strings to includes match against window.location.host.
-The utility also includes an FT banner event listener ((see here[https://registry.origami.ft.com/components/o-cookie-message@6.0.1/readme?brand=master] for a list of banner DOM events) to set session-level cookies for development environments
+consentMonitor - Adds an FT consent cookie poller to enable/disable Permutive consent (only useful if 'consentRequired' is set as an option in the site's Permutive script - see [here](https://support.permutive.com/hc/en-us/articles/360010845519-Seeking-User-Consent#h_00327830-509b-422a-952b-1906264031f1)
+There are optional constructor args for the hostname (defaults to window.location.hostname) and the dev environment host matches (defaults to ["localhost", "phq", "vercel.app"]) which are used to determine development environments in order to generate an FT banner event listener ((see [here](https://registry.origami.ft.com/components/o-cookie-message@6.0.1/readme?brand=master) for a list of banner DOM events) to set session-level cookies for development environments
 
 ```Javascript
 import { consentMonitor } from "@phntms/ft-lib";
 
-new consentMonitor(["localhost", "phq", "staging"]);
+new consentMonitor("FT.staging.testsite.com". ["localhost", "phq", "staging"]);
 ```
 
 permutiveVideoUtils - emitPermutiveProgressEvents - used within a video player's progress event handler to fire Permutive video progress events at [0, 25, 50, 75, 100] percent progress.

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@phntms/ft-lib",
   "description": "A collection of Javascript UI & tracking utils for FT sites",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/ft-lib#readme",

package.json

@@ -8,9 +8,15 @@ const debug = Debug("@phntms/ft-lib");
 export class consentMonitor {
   protected _consent = false;
   protected _devHosts: string[] | string;
+  protected _isDevEnvironment = false;
+  protected _hostname: string;
 
-  constructor(devHosts: string[] | string = ["localhost", "phq"]) {
+  constructor(
+    hostname: string = window.location.hostname,
+    devHosts: string[] | string = ["localhost", "phq", "vercel.app"]
+  ) {
     this._devHosts = devHosts;
+    this._hostname = hostname;
     this.init();
   }
 
@@ -22,6 +28,10 @@ export class consentMonitor {
     return this._devHosts;
   }
 
+  get isDevEnvironment(): boolean {
+    return this._isDevEnvironment;
+  }
+
   getCookieValue = (name: string) =>
     document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)")?.pop() || "";
 
@@ -56,26 +66,33 @@ export class consentMonitor {
     }, 3000);
 
     //Simulate cookie consent behaviour in non-prod environments - TODO confirm best non production conditional..
-    if (this._devHosts.includes(window.location.hostname)) {
-      debug("setting development environment from host match");
-      const oCookieMessage =
-        document.getElementsByClassName("o-cookie-message")[0];
-      if (oCookieMessage) {
-        const onCookieMessageAct = () => {
-          debug("setting development FT consent cookies");
-          document.cookie = "FTConsent=behaviouraladsOnsite%3Aon";
-          document.cookie = "FTCookieConsentGDPR=true";
-          oCookieMessage.removeEventListener(
-            "oCookieMessage.act",
-            onCookieMessageAct,
-            false
-          );
-        };
-        oCookieMessage.addEventListener(
+    if (Array.isArray(this._devHosts)) {
+      this._devHosts.map(
+        (devHost) =>
+          this._hostname.includes(devHost) && this.setDevCookieHandler()
+      );
+    } else {
+      if (this._hostname.includes(this._devHosts)) this.setDevCookieHandler();
+    }
+  };
+
+  setDevCookieHandler = () => {
+    this._isDevEnvironment = true;
+    debug("setting development environment from host match");
+    const oCookieMessage =
+      document.getElementsByClassName("o-cookie-message")[0];
+    if (oCookieMessage) {
+      const onCookieMessageAct = () => {
+        debug("setting development FT consent cookies");
+        document.cookie = "FTConsent=behaviouraladsOnsite%3Aon";
+        document.cookie = "FTCookieConsentGDPR=true";
+        oCookieMessage.removeEventListener(
           "oCookieMessage.act",
-          onCookieMessageAct
+          onCookieMessageAct,
+          false
         );
-      }
+      };
+      oCookieMessage.addEventListener("oCookieMessage.act", onCookieMessageAct);
     }
   };
 }

src/consentMonitor/index.ts

@@ -7,8 +7,17 @@ describe("consentMonitor", () => {
     expect(obj.consent).toBe(false);
   });
   it("sets default dev hosts property", async () => {
-    const obj = new consentMonitor();
-    expect(obj.devHosts).toEqual(["localhost", "phq"]);
+    const obj = new consentMonitor("https://FT-staging.com");
+    expect(obj.devHosts).toEqual(["localhost", "phq", "vercel.app"]);
+  });
+  it("matches hostname to devHosts", async () => {
+    const obj = new consentMonitor("https://FT-staging.devhost.com", [
+      "localhost",
+      "vercel.app",
+      "phq",
+      "devhost",
+    ]);
+    expect(obj.isDevEnvironment).toBe(true);
   });
   //TODO - mock document.cookie get/set and test consent value
 });