@networkpro/web 1.10.1 → 1.12.2

package/src/lib/pages/PrivacyContent.svelte

@@ -9,41 +9,33 @@ This file is part of Network Pro.
 <script>
   import { base } from "$app/paths";
   import { onMount } from "svelte";
-  import { getTrackingPreferences } from "$lib/utils/trackingStatus.js";
-  /** @type {(type: 'enable' | 'disable') => void} */
   import {
-    setTrackingPreference,
-    clearTrackingPreferences,
-  } from "$lib/utils/trackingCookies.js";
+    trackingPreferences,
+    setOptIn,
+    setOptOut,
+    clearPrefs,
+  } from "$lib/stores/trackingPreferences.js";
   import { CONSTANTS } from "$lib";
 
-  // Log the base path to verify its value
-  //console.log("Base path:", base);
-
-  console.log(CONSTANTS.COMPANY_INFO.APP_NAME);
-
   const { COMPANY_INFO, CONTACT, PAGE, NAV } = CONSTANTS;
 
-  /**
-   * URL to the Privacy Rights Request Form redirect route, using the base path
-   * URL to the Contact Form redirect route, using the base path
-   * URL to the Privacy Dashboard using the base path
-   * @type {string}
-   */
+  /** @type {string} */
   const prightsLink = `${base}/privacy-rights`;
+
+  /** @type {string} */
   const contactLink = `${base}/contact`;
+
+  /** @type {string} */
   const pdashLink = `${base}/privacy-dashboard`;
 
-  /**
-   * URL to the privacy policy in Markdown format
-   * External URL to the GPC website
-   * @type {string}
-   */
+  /** @type {string} */
   const privacyLink = "https://docs.netwk.pro/privacy";
+
+  /** @type {string} */
   const gpcLink = "https://globalprivacycontrol.org/";
 
   /**
-   * Table of Contents Links
+   * Table of Contents sections and their headings.
    * @type {{ id: string, text: string }[]}
    */
   const tocLinks = [
@@ -67,47 +59,49 @@ This file is part of Network Pro.
   /** @type {string} */
   const classSmall = "small-text";
 
-  let optedOut = false;
-  let optedIn = false;
-  let trackingStatus = "";
+  /** @type {boolean} */
+  let optedOut;
 
-  onMount(() => {
-    const prefs = getTrackingPreferences();
-    optedOut = prefs.optedOut;
-    optedIn = prefs.optedIn;
-    trackingStatus = prefs.status;
-    console.log("[Tracking] Status:", trackingStatus);
-  });
+  /** @type {boolean} */
+  let optedIn;
+
+  /** @type {string} */
+  let trackingStatus;
+
+  // Reactive assignments from the store
+  $: ({ optedOut, optedIn, status: trackingStatus } = $trackingPreferences);
 
   /**
-   * Toggle tracking opt-out.
+   * Toggle tracking opt-out setting.
    * @param {boolean} value
    */
   function toggleTracking(value) {
-    optedOut = value;
-    if (optedOut) {
+    if (value) {
       console.log("[Tracking] User opted out");
-      setTrackingPreference("disable");
+      setOptOut();
     } else {
       console.log("[Tracking] User cleared opt-out");
-      clearTrackingPreferences();
+      clearPrefs();
     }
   }
 
   /**
-   * Toggle tracking opt-in.
+   * Toggle tracking opt-in setting.
    * @param {boolean} value
    */
   function toggleOptIn(value) {
-    optedIn = value;
-    if (optedIn) {
+    if (value) {
       console.log("[Tracking] User opted in");
-      setTrackingPreference("enable");
+      setOptIn();
     } else {
       console.log("[Tracking] User cleared opt-in");
-      clearTrackingPreferences();
+      clearPrefs();
     }
   }
+
+  onMount(() => {
+    console.log("[Tracking] Store initialized:", $trackingPreferences.status);
+  });
 </script>
 
 <!-- BEGIN TITLE -->
@@ -241,38 +235,51 @@ This file is part of Network Pro.
       <div class="spacer"></div>
 
       <h3>Tracking Preferences</h3>
-      <p id="tracking-status" aria-live="polite">
-        <strong>Tracking Status:</strong>
-        {trackingStatus}
-      </p>
 
-      <!-- Opt-out checkbox -->
-      <label>
-        <input
-          type="checkbox"
-          checked={optedOut}
-          disabled={optedIn}
-          aria-describedby="tracking-status"
-          on:change={(e) =>
-            toggleTracking(
-              /** @type {HTMLInputElement} */ (e.target).checked,
-            )} />
-        <strong>&nbsp;Disable analytics tracking (opt-out)</strong>
-      </label>
-
-      <br />
-
-      <!-- Opt-in checkbox -->
-      <label>
-        <input
-          type="checkbox"
-          checked={optedIn}
-          disabled={optedOut}
-          aria-describedby="tracking-status"
-          on:change={(e) =>
-            toggleOptIn(/** @type {HTMLInputElement} */ (e.target).checked)} />
-        <strong>&nbsp;Enable analytics tracking (opt-in)</strong>
-      </label>
+      {#if trackingStatus && trackingStatus !== "⏳ Checking tracking preferences..."}
+        <p id="tracking-status" aria-live="polite">
+          <strong>Tracking Status:</strong>
+          {trackingStatus}
+        </p>
+      {:else}
+        <p id="tracking-status" aria-live="polite">
+          <strong>Tracking Status:</strong> <em>Loading…</em>
+        </p>
+      {/if}
+
+      <fieldset>
+        <legend class="sr-only">Tracking Preference Controls</legend>
+
+        <!-- Opt-out checkbox -->
+        <label>
+          <input
+            type="checkbox"
+            checked={optedOut}
+            disabled={optedIn}
+            aria-describedby="tracking-status"
+            on:change={(e) =>
+              toggleTracking(
+                /** @type {HTMLInputElement} */ (e.target).checked,
+              )} />
+          <strong>&nbsp;Disable analytics tracking (opt-out)</strong>
+        </label>
+
+        <br />
+
+        <!-- Opt-in checkbox -->
+        <label>
+          <input
+            type="checkbox"
+            checked={optedIn}
+            disabled={optedOut}
+            aria-describedby="tracking-status"
+            on:change={(e) =>
+              toggleOptIn(
+                /** @type {HTMLInputElement} */ (e.target).checked,
+              )} />
+          <strong>&nbsp;Enable analytics tracking (opt-in)</strong>
+        </label>
+      </fieldset>
 
       <div class="spacer"></div>
 
@@ -405,7 +412,7 @@ This file is part of Network Pro.
         For questions, please utilize our <a
           rel={PAGE.REL}
           href={contactLink}
-          target={PAGE.SELF}>Contact Form</a> or contact us directly:
+          target={PAGE.BLANK}>Contact Form</a> or contact us directly:
       </p>
       <p>
         <strong>{COMPANY_INFO.NAME}</strong><br />

package/src/lib/pages/PrivacyDashboard.svelte

@@ -9,78 +9,76 @@ This file is part of Network Pro.
 <script>
   import { base } from "$app/paths";
   import { onMount } from "svelte";
-  import { getTrackingPreferences } from "$lib/utils/trackingStatus.js";
-  /** @type {(type: 'enable' | 'disable') => void} */
-  import {
-    setTrackingPreference,
-    clearTrackingPreferences,
-  } from "$lib/utils/trackingCookies.js";
-  import { CONSTANTS } from "$lib";
 
-  // Log the base path to verify its value
-  //console.log("Base path:", base);
+  import {
+    trackingPreferences,
+    setOptIn,
+    setOptOut,
+    clearPrefs,
+  } from "$lib/stores/trackingPreferences.js";
 
-  console.log(CONSTANTS.COMPANY_INFO.APP_NAME);
+  import { CONSTANTS } from "$lib";
 
   const { CONTACT, PAGE, NAV } = CONSTANTS;
 
-  /**
-   * @type {string}
-   * Style class for the div element.
-   */
-  const spaceStyle = "spacer";
-
-  /**
-   * URL to the full Privacy Policy using the base path
-   * @type {string}
-   */
+  /** @type {string} */
   const privacyPolicy = `${base}/privacy`;
+
+  /** @type {string} */
   const prightsLink = `${base}/privacy-rights`;
 
   /** @type {string} */
   const classSmall = "small-text";
 
-  let optedOut = false;
-  let optedIn = false;
-  let trackingStatus = "";
+  /** @type {string} */
+  const spaceStyle = "spacer";
 
-  onMount(() => {
-    const prefs = getTrackingPreferences();
-    optedOut = prefs.optedOut;
-    optedIn = prefs.optedIn;
-    trackingStatus = prefs.status;
-    console.log("[Tracking] Status:", trackingStatus);
-  });
+  /** @type {boolean} */
+  let optedOut;
+
+  /** @type {boolean} */
+  let optedIn;
+
+  /** @type {string} */
+  let trackingStatus;
+
+  // Reactive assignments from the store
+  $: ({ optedOut, optedIn, status: trackingStatus } = $trackingPreferences);
 
   /**
-   * Toggle tracking opt-out.
+   * Toggle tracking opt-out setting.
    * @param {boolean} value
    */
   function toggleTracking(value) {
-    optedOut = value;
-    if (optedOut) {
+    if (value) {
       console.log("[Tracking] User opted out");
-      setTrackingPreference("disable");
+      setOptOut();
     } else {
       console.log("[Tracking] User cleared opt-out");
-      clearTrackingPreferences();
+      clearPrefs();
     }
   }
 
   /**
-   * Toggle tracking opt-in.
+   * Toggle tracking opt-in setting.
    * @param {boolean} value
    */
   function toggleOptIn(value) {
-    optedIn = value;
-    if (optedIn) {
+    if (value) {
       console.log("[Tracking] User opted in");
-      setTrackingPreference("enable");
+      setOptIn();
     } else {
       console.log("[Tracking] User cleared opt-in");
-      clearTrackingPreferences();
+      clearPrefs();
     }
   }
+
+  onMount(() => {
+    console.log(
+      "[PrivacyDashboard] Tracking status:",
+      $trackingPreferences.status,
+    );
+  });
 </script>
 
 <section id="top">
@@ -143,36 +141,46 @@ This file is part of Network Pro.
 
   &nbsp;
 
-  <p id="tracking-status" aria-live="polite">
-    <strong>Tracking Status:</strong>
-    {trackingStatus}
-  </p>
-
-  <!-- Opt-out checkbox -->
-  <label>
-    <input
-      type="checkbox"
-      checked={optedOut}
-      disabled={optedIn}
-      aria-describedby="tracking-status"
-      on:change={(e) =>
-        toggleTracking(/** @type {HTMLInputElement} */ (e.target).checked)} />
-    <strong>&nbsp;Disable analytics tracking (opt-out)</strong>
-  </label>
-
-  <br />
-
-  <!-- Opt-in checkbox -->
-  <label>
-    <input
-      type="checkbox"
-      checked={optedIn}
-      disabled={optedOut}
-      aria-describedby="tracking-status"
-      on:change={(e) =>
-        toggleOptIn(/** @type {HTMLInputElement} */ (e.target).checked)} />
-    <strong>&nbsp;Enable analytics tracking (opt-in)</strong>
-  </label>
+  {#if trackingStatus && trackingStatus !== "⏳ Checking tracking preferences..."}
+    <p id="tracking-status" aria-live="polite">
+      <strong>Tracking Status:</strong>
+      {trackingStatus}
+    </p>
+  {:else}
+    <p id="tracking-status" aria-live="polite">
+      <strong>Tracking Status:</strong> <em>Loading…</em>
+    </p>
+  {/if}
+
+  <fieldset>
+    <legend class="sr-only">Tracking Preference Controls</legend>
+
+    <!-- Opt-out checkbox -->
+    <label>
+      <input
+        type="checkbox"
+        checked={optedOut}
+        disabled={optedIn}
+        aria-describedby="tracking-status"
+        on:change={(e) =>
+          toggleTracking(/** @type {HTMLInputElement} */ (e.target).checked)} />
+      <strong>&nbsp;Disable analytics tracking (opt-out)</strong>
+    </label>
+
+    <br />
+
+    <!-- Opt-in checkbox -->
+    <label>
+      <input
+        type="checkbox"
+        checked={optedIn}
+        disabled={optedOut}
+        aria-describedby="tracking-status"
+        on:change={(e) =>
+          toggleOptIn(/** @type {HTMLInputElement} */ (e.target).checked)} />
+      <strong>&nbsp;Enable analytics tracking (opt-in)</strong>
+    </label>
+  </fieldset>
 
   <div class={spaceStyle}></div>
 

package/src/lib/stores/posthog.js

@@ -0,0 +1,115 @@
+/* ==========================================================================
+src/lib/stores/posthog.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+========================================================================== */
+
+/**
+ * @file posthog.js
+ * @description Privacy-aware PostHog tracking store with reactive state and safe API surface.
+ * @module src/lib/stores
+ */
+
+import {
+  remindUserToReconsent,
+  trackingPreferences,
+} from "$lib/stores/trackingPreferences.js";
+import { get, writable } from "svelte/store";
+
+/**
+ * Tracks whether tracking is allowed based on cookies, DNT/GPC, and user preference.
+ * @type {import("svelte/store").Writable<boolean>}
+ */
+export const trackingEnabled = writable(false);
+
+/**
+ * Determines if the user should be reminded to re-consent (after 6 months).
+ * @type {import("svelte/store").Writable<boolean>}
+ */
+export const showReminder = writable(false);
+
+/** @type {boolean} Internal one-time init guard */
+let initialized = false;
+
+/** @type {import("posthog-js").PostHog | null} Loaded PostHog instance */
+let ph = null;
+
+/**
+ * Initializes the PostHog analytics client if tracking is permitted.
+ * Uses dynamic import to avoid SSR failures.
+ * @returns {Promise<void>}
+ */
+export async function initPostHog() {
+  if (initialized || typeof window === "undefined") return;
+  initialized = true;
+
+  const { enabled } = get(trackingPreferences);
+  trackingEnabled.set(enabled);
+  showReminder.set(get(remindUserToReconsent)); // ✅ use derived store instead
+
+  if (!enabled) {
+    console.log("[PostHog] Tracking is disabled — skipping init.");
+    return;
+  }
+
+  const posthogModule = await import("posthog-js");
+  ph = posthogModule.default;
+
+  // cspell:disable-next-line
+  ph.init("phc_Qshfo6AXzh4pS7aPigfqyeo4qj1qlyh7gDuHDeVMSR0", {
+    api_host: "https://us.i.posthog.com",
+    autocapture: true,
+    capture_pageview: false,
+    person_profiles: "identified_only",
+    loaded: (phInstance) => {
+      if (!enabled) {
+        console.log(
+          "[PostHog] ⛔ User opted out — calling opt_out_capturing()",
+        );
+        phInstance.opt_out_capturing();
+      } else {
+        console.log("[PostHog] ✅ Tracking enabled");
+      }
+    },
+  });
+
+  ph.capture("$pageview");
+}
+
+/**
+ * Conditionally captures an event if tracking is enabled.
+ * @param {string} event - The event name to track
+ * @param {Record<string, any>} [properties={}] - Optional event properties
+ */
+export function capture(event, properties = {}) {
+  if (ph !== null && get(trackingEnabled)) {
+    ph.capture(event, properties);
+  }
+}
+
+/**
+ * Conditionally identifies a user if tracking is enabled.
+ * @param {string} id - Unique user identifier
+ * @param {Record<string, any>} [properties={}] - Optional user traits
+ */
+export function identify(id, properties = {}) {
+  if (ph !== null && get(trackingEnabled)) {
+    ph.identify(id, properties);
+  }
+}
+
+/**
+ * For test cleanup only — resets internal state.
+ * No-op in production.
+ * @returns {void}
+ */
+export function _resetPostHog() {
+  if (import.meta.env.MODE === "production") {
+    console.warn("[PostHog] _resetPostHog() called in production — no-op");
+    return;
+  }
+
+  initialized = false;
+  ph = null;
+}