@networkpro/web 1.10.0 → 1.11.0

package/src/lib/pages/PrivacyContent.svelte

@@ -9,41 +9,45 @@ 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 { trackingStatus } from "$lib/stores/trackingStatus.js";
   import {
+    /** @type {(type: 'enable' | 'disable') => void} */
     setTrackingPreference,
+    /** @type {() => void} */
     clearTrackingPreferences,
   } from "$lib/utils/trackingCookies.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);
 
-  console.log(CONSTANTS.APP_NAME);
+  /** @type {typeof CONSTANTS.COMPANY_INFO} */
+  const COMPANY_INFO = CONSTANTS.COMPANY_INFO;
 
-  /**
-   * 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 {typeof CONSTANTS.CONTACT} */
+  const CONTACT = CONSTANTS.CONTACT;
+
+  /** @type {typeof CONSTANTS.PAGE} */
+  const PAGE = CONSTANTS.PAGE;
+
+  /** @type {typeof CONSTANTS.NAV} */
+  const NAV = CONSTANTS.NAV;
+
+  /** @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
-   * @type {{ id: string, text: string }[]}
-   */
+  /** @type {{ id: string, text: string }[]} */
   const tocLinks = [
     { id: "intro", text: "Introduction" },
     { id: "collect", text: "Information We Collect" },
@@ -62,41 +66,44 @@ This file is part of Network Pro.
   /** @type {string} */
   const effectiveDate = "June 2, 2025";
 
-  /**
-   * Constants used throughout the component for consistent styling and behavior
-   * @type {{
-   *   classSmall: string,
-   *   rel: string,
-   *   backTop: string,
-   *   hrefTop: string,
-   *   targetSelf: string,
-   *   targetBlank: string
-   * }}
-   */
-  const constants = {
-    classSmall: "small-text",
-    rel: "noopener noreferrer",
-    backTop: "Back to top",
-    hrefTop: "#top",
-    targetSelf: "_self",
-    targetBlank: "_blank",
-  };
+  /** @type {string} */
+  const classSmall = "small-text";
 
+  /** @type {boolean} */
   let optedOut = false;
+
+  /** @type {boolean} */
   let optedIn = false;
-  let trackingStatus = "";
 
-  onMount(() => {
-    const prefs = getTrackingPreferences();
+  /**
+   * Refreshes tracking preferences state and updates the reactive store.
+   * This function uses dynamic import to avoid SSR evaluation of browser-only code.
+   *
+   * @returns {Promise<void>}
+   */
+  async function refreshTrackingStatus() {
+    /** @type {typeof import("$lib/utils/trackingStatus.js")} */
+    const tracking = await import("$lib/utils/trackingStatus.js");
+
+    const prefs = tracking.getTrackingPreferences();
     optedOut = prefs.optedOut;
     optedIn = prefs.optedIn;
-    trackingStatus = prefs.status;
-    console.log("[Tracking] Status:", trackingStatus);
+    trackingStatus.set(prefs.status);
+  }
+
+  /**
+   * Runs tracking preference detection on client mount.
+   */
+  onMount(() => {
+    refreshTrackingStatus();
+    console.log("[Tracking] Status:", $trackingStatus);
   });
 
   /**
-   * Toggle tracking opt-out.
-   * @param {boolean} value
+   * Toggles user tracking opt-out setting and updates cookies + store.
+   *
+   * @param {boolean} value - Whether the user is opting out
+   * @returns {void}
    */
   function toggleTracking(value) {
     optedOut = value;
@@ -107,11 +114,14 @@ This file is part of Network Pro.
       console.log("[Tracking] User cleared opt-out");
       clearTrackingPreferences();
     }
+    refreshTrackingStatus();
   }
 
   /**
-   * Toggle tracking opt-in.
-   * @param {boolean} value
+   * Toggles user tracking opt-in setting and updates cookies + store.
+   *
+   * @param {boolean} value - Whether the user is opting in
+   * @returns {void}
    */
   function toggleOptIn(value) {
     optedIn = value;
@@ -122,16 +132,17 @@ This file is part of Network Pro.
       console.log("[Tracking] User cleared opt-in");
       clearTrackingPreferences();
     }
+    refreshTrackingStatus();
   }
 </script>
 
 <!-- BEGIN TITLE -->
 <section id="top">
-  <span class={constants.classSmall}>
+  <span class={classSmall}>
     <a
-      rel={constants.rel}
+      rel={PAGE.REL}
       href="https://spdx.dev/learn/handling-license-info"
-      target={constants.targetBlank}>
+      target={PAGE.BLANK}>
       SPDX License Identifier
     </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
@@ -140,7 +151,7 @@ This file is part of Network Pro.
 <section id="page-title">
   <h1>Privacy Policy</h1>
   <p>
-    <strong>{CONSTANTS.COMPANY}</strong><br />
+    <strong>{COMPANY_INFO.NAME}</strong><br />
     <strong>Effective Date:</strong>
     {effectiveDate}
   </p>
@@ -167,7 +178,7 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a href={privacyLink} target={constants.targetSelf}>Docs</a>
+      <a href={privacyLink} target={PAGE.SELF}>Docs</a>
     </sup>
   </p>
 </section>
@@ -188,9 +199,9 @@ This file is part of Network Pro.
         4 of the
         <strong>
           <a
-            rel={constants.rel}
+            rel={PAGE.REL}
             href="https://www.azleg.gov/arstitle"
-            target={constants.targetBlank}>
+            target={PAGE.BLANK}>
             Arizona Revised Statutes
           </a>
         </strong> (A.R.S. §§ 18-551, 18-552).
@@ -232,12 +243,11 @@ This file is part of Network Pro.
       <p>
         We configure PostHog to prioritize user privacy. <strong
           >Analytics tracking is automatically disabled when a user's browser
-          sends a “Do Not Track” (DNT) or <a
-            rel={constants.rel}
+          sends a "Do Not Track" (DNT) or <a
+            rel={PAGE.REL}
             href={gpcLink}
-            target={constants.targetBlank}
-            >“Global Privacy Control” (GPC / Sec-GPC)</a> signal.</strong> No further
-        action is required—your browser settings are honored by default.
+            target={PAGE.BLANK}>"Global Privacy Control" (GPC / Sec-GPC)</a> signal.</strong>
+        No further action is required—your browser settings are honored by default.
       </p>
       <p>
         You can view your current tracking status below, along with manual
@@ -250,17 +260,24 @@ This file is part of Network Pro.
       <p class="emphasis">
         For convenient access, you can manage these settings through our <a
           href={pdashLink}
-          target={constants.targetSelf}>Privacy Dashboard</a
+          target={PAGE.SELF}>Privacy Dashboard</a
         >.
       </p>
 
       <div class="spacer"></div>
 
       <h3>Tracking Preferences</h3>
-      <p id="tracking-status" aria-live="polite">
-        <strong>Tracking Status:</strong>
-        {trackingStatus}
-      </p>
+      {#if $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}
 
       <!-- Opt-out checkbox -->
       <label>
@@ -296,9 +313,9 @@ This file is part of Network Pro.
         PostHog Cloud is a third-party service, but we deploy it in a
         privacy-conscious manner that avoids intrusive profiling and aligns with
         data protection best practices. For more information, please refer to <a
-          rel={constants.rel}
+          rel={PAGE.REL}
           href="https://posthog.com/privacy"
-          target={constants.targetBlank}>PostHog's Privacy Policy</a
+          target={PAGE.BLANK}>PostHog's Privacy Policy</a
         >.
       </p>
     {:else if link.id === "payment"}
@@ -379,25 +396,24 @@ This file is part of Network Pro.
       <p>
         Although these rights are specifically granted to residents of
         California and the European Union under laws such as the <a
-          rel={constants.rel}
+          rel={PAGE.REL}
           href="https://oag.ca.gov/privacy/ccpa"
-          target={constants.targetBlank}
-          >California Consumer Privacy Act (CCPA)</a
+          target={PAGE.BLANK}>California Consumer Privacy Act (CCPA)</a
         >, the California Privacy Rights Act (CPRA), and the
         <a
-          rel={constants.rel}
+          rel={PAGE.REL}
           href="https://gdpr.eu/what-is-gdpr/"
-          target={constants.targetBlank}
-          >EU General Data Protection Regulation (GDPR)</a
+          target={PAGE.BLANK}>EU General Data Protection Regulation (GDPR)</a
         >, we voluntarily extend these rights to all users, regardless of
         residency.
       </p>
       <p>
         To exercise any of these rights, you may submit a request through our <a
+          rel={PAGE.REL}
           href={prightsLink}
-          target={constants.targetBlank}>Privacy Rights Request Form</a
+          target={PAGE.BLANK}>Privacy Rights Request Form</a
         >. Alternatively, you can email us at
-        <strong>{CONSTANTS.PRIVACY_EMAIL}</strong>
+        <strong>{CONTACT.PRIVACY}</strong>
         with the subject line: "<strong>Privacy Rights Preferences</strong>".
       </p>
     {:else if link.id === "third-party"}
@@ -418,22 +434,23 @@ This file is part of Network Pro.
         posting.
       </p>
     {:else if link.id === "contact"}
-      <p
-        >For questions, please utilize our <a
-          rel={constants.rel}
+      <p>
+        For questions, please utilize our <a
+          rel={PAGE.REL}
           href={contactLink}
-          target={constants.targetSelf}>Contact Form</a> or contact us directly:</p>
+          target={PAGE.BLANK}>Contact Form</a> or contact us directly:
+      </p>
       <p>
-        <strong>{CONSTANTS.COMPANY}</strong><br />
-        📧 General Inquiries: {CONSTANTS.CONTACT_EMAIL}<br />
-        🔐 Secure Email: {CONSTANTS.SECURE_EMAIL}<br />
-        📞 Phone: {CONSTANTS.PHONE}
+        <strong>{COMPANY_INFO.NAME}</strong><br />
+        📧 General Inquiries: {CONTACT.EMAIL}<br />
+        🔐 Secure Email: {CONTACT.SECURE}<br />
+        📞 Phone: {CONTACT.PHONE}
       </p>
     {/if}
 
     <!-- Back to Top Link -->
-    <span class={constants.classSmall}>
-      <a href={constants.hrefTop}>{constants.backTop}</a>
+    <span class={classSmall}>
+      <a href={NAV.HREFTOP}>{NAV.BACKTOP}</a>
     </span>
   </section>
 {/each}

package/src/lib/pages/PrivacyDashboard.svelte

@@ -9,69 +9,72 @@ 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 { trackingStatus } from "$lib/stores/trackingStatus.js";
   import {
+    /** @type {(type: 'enable' | 'disable') => void} */
     setTrackingPreference,
+    /** @type {() => void} */
     clearTrackingPreferences,
   } from "$lib/utils/trackingCookies.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);
 
-  console.log(CONSTANTS.APP_NAME);
+  /** @type {typeof CONSTANTS.CONTACT} */
+  const CONTACT = CONSTANTS.CONTACT;
 
-  const { PRIVACY_EMAIL } = CONSTANTS;
+  /** @type {typeof CONSTANTS.PAGE} */
+  const PAGE = CONSTANTS.PAGE;
 
-  /**
-   * @type {string}
-   * Style class for the div element.
-   */
+  /** @type {typeof CONSTANTS.NAV} */
+  const NAV = CONSTANTS.NAV;
+
+  /** @type {string} */
   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`;
 
-  /**
-   * Constants used throughout the component for consistent styling and behavior
-   * @type {{
-   *   classSmall: string,
-   *   rel: string,
-   *   backTop: string,
-   *   hrefTop: string,
-   *   targetSelf: string,
-   *   targetBlank: string
-   * }}
-   */
-  const constants = {
-    classSmall: "small-text",
-    rel: "noopener noreferrer",
-    backTop: "Back to top",
-    hrefTop: "#top",
-    targetSelf: "_self",
-    targetBlank: "_blank",
-  };
+  /** @type {string} */
+  const classSmall = "small-text";
 
+  /** @type {boolean} */
   let optedOut = false;
+
+  /** @type {boolean} */
   let optedIn = false;
-  let trackingStatus = "";
 
-  onMount(() => {
-    const prefs = getTrackingPreferences();
+  /**
+   * Refreshes tracking preferences state and updates the reactive store.
+   * Uses dynamic import to prevent SSR from loading browser-only dependencies.
+   *
+   * @returns {Promise<void>}
+   */
+  async function refreshTrackingStatus() {
+    /** @type {typeof import("$lib/utils/trackingStatus.js")} */
+    const tracking = await import("$lib/utils/trackingStatus.js");
+
+    const prefs = tracking.getTrackingPreferences();
     optedOut = prefs.optedOut;
     optedIn = prefs.optedIn;
-    trackingStatus = prefs.status;
-    console.log("[Tracking] Status:", trackingStatus);
+    trackingStatus.set(prefs.status);
+  }
+
+  /**
+   * Initializes tracking state on component mount (runs only in browser).
+   */
+  onMount(() => {
+    refreshTrackingStatus();
   });
 
   /**
-   * Toggle tracking opt-out.
-   * @param {boolean} value
+   * Toggles opt-out tracking state, updates cookie and tracking store.
+   *
+   * @param {boolean} value - Whether the user is opting out
+   * @returns {void}
    */
   function toggleTracking(value) {
     optedOut = value;
@@ -82,11 +85,14 @@ This file is part of Network Pro.
       console.log("[Tracking] User cleared opt-out");
       clearTrackingPreferences();
     }
+    refreshTrackingStatus();
   }
 
   /**
-   * Toggle tracking opt-in.
-   * @param {boolean} value
+   * Toggles opt-in tracking state, updates cookie and tracking store.
+   *
+   * @param {boolean} value - Whether the user is opting in
+   * @returns {void}
    */
   function toggleOptIn(value) {
     optedIn = value;
@@ -97,15 +103,16 @@ This file is part of Network Pro.
       console.log("[Tracking] User cleared opt-in");
       clearTrackingPreferences();
     }
+    refreshTrackingStatus();
   }
 </script>
 
 <section id="top">
-  <span class={constants.classSmall}>
+  <span class={classSmall}>
     <a
-      rel={constants.rel}
+      rel={PAGE.REL}
       href="https://spdx.dev/learn/handling-license-info"
-      target={constants.targetBlank}>
+      target={PAGE.BLANK}>
       SPDX License Identifier
     </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
@@ -119,18 +126,13 @@ This file is part of Network Pro.
 
 <nav class="tracking-nav">
   <ul>
-    <li
-      ><a href="#tracking" target={constants.targetSelf}>Tracking Preferences</a
-      ></li>
-    <li
-      ><a href="#rights" target={constants.targetSelf}
-        >Your Rights and Choices</a
-      ></li>
+    <li><a href="#tracking" target={PAGE.SELF}>Tracking Preferences</a></li>
+    <li><a href="#rights" target={PAGE.SELF}>Your Rights and Choices</a></li>
   </ul>
 </nav>
 
 <p class="bquote">
-  For full details, please see our <a href={privacyPolicy} target="_self"
+  For full details, please see our <a href={privacyPolicy} target={PAGE.SELF}
     >Privacy Policy</a
   >.
 </p>
@@ -147,11 +149,10 @@ This file is part of Network Pro.
   <p>
     <strong
       >Analytics tracking is automatically disabled when a user's browser sends
-      a “Do Not Track” (DNT) or <a
-        rel={constants.rel}
+      a "Do Not Track" (DNT) or <a
+        rel={PAGE.REL}
         href="https://globalprivacycontrol.org/"
-        target={constants.targetBlank}
-        >“Global Privacy Control” (GPC / Sec-GPC)</a> signal.</strong>
+        target={PAGE.BLANK}>"Global Privacy Control" (GPC / Sec-GPC)</a> signal.</strong>
     No further action is required—your browser settings are honored by default.
   </p>
 
@@ -166,10 +167,17 @@ This file is part of Network Pro.
 
   &nbsp;
 
-  <p id="tracking-status" aria-live="polite">
-    <strong>Tracking Status:</strong>
-    {trackingStatus}
-  </p>
+  {#if $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}
 
   <!-- Opt-out checkbox -->
   <label>
@@ -205,9 +213,8 @@ This file is part of Network Pro.
   </p>
 </section>
 
-<span class={constants.classSmall}>
-  <a href={constants.hrefTop} target={constants.targetSelf}
-    >{constants.backTop}</a>
+<span class={classSmall}>
+  <a href={NAV.HREFTOP} target={PAGE.SELF}>{NAV.BACKTOP}</a>
 </span>
 
 <div class={spaceStyle}></div>
@@ -243,30 +250,27 @@ This file is part of Network Pro.
   <p>
     Although these rights are specifically granted to residents of California
     and the European Union under laws such as the <a
-      rel={constants.rel}
+      rel={PAGE.REL}
       href="https://oag.ca.gov/privacy/ccpa"
-      target={constants.targetBlank}>California Consumer Privacy Act (CCPA)</a
+      target={PAGE.BLANK}>California Consumer Privacy Act (CCPA)</a
     >, the California Privacy Rights Act (CPRA), and the
-    <a
-      rel={constants.rel}
-      href="https://gdpr.eu/what-is-gdpr/"
-      target={constants.targetBlank}
+    <a rel={PAGE.REL} href="https://gdpr.eu/what-is-gdpr/" target={PAGE.BLANK}
       >EU General Data Protection Regulation (GDPR)</a
     >, we voluntarily extend these rights to all users, regardless of residency.
   </p>
   <p>
     To exercise any of these rights, you may submit a request through our <a
+      rel={PAGE.REL}
       href={prightsLink}
-      target={constants.targetBlank}>Privacy Rights Request Form</a
+      target={PAGE.BLANK}>Privacy Rights Request Form</a
     >. Alternatively, you can email us at
-    <strong>{PRIVACY_EMAIL}</strong>
+    <strong>{CONTACT.PRIVACY}</strong>
     with the subject line: "<strong>Privacy Rights Preferences</strong>".
   </p>
 </section>
 
-<span class={constants.classSmall}>
-  <a href={constants.hrefTop} target={constants.targetSelf}
-    >{constants.backTop}</a>
+<span class={classSmall}>
+  <a href={NAV.HREFTOP} target={PAGE.SELF}>{NAV.BACKTOP}</a>
 </span>
 
 <!-- cspell:ignore prefs prights -->

package/src/lib/pages/TermsConditionsContent.svelte

@@ -15,9 +15,9 @@ This file is part of Network Pro.
   // Log the base path to verify its value
   //console.log("Base path:", base);
 
-  console.log(CONSTANTS.APP_NAME);
+  console.log(CONSTANTS.COMPANY_INFO.APP_NAME);
 
-  const { COMPANY } = CONSTANTS;
+  const { COMPANY_INFO, PAGE, NAV } = CONSTANTS;
 
   /**
    * URL to Terms of Use page, using the base path
@@ -35,20 +35,12 @@ This file is part of Network Pro.
    * Common constants used throughout the component
    * @type {{
    *   effectiveDate: string,
-   *   rel: string,
-   *   targetBlank: string,
-   *   targetSelf: string,
    *   classSmall: string,
-   *   hrefTop: string
    * }}
    */
   const constants = {
     effectiveDate: "May 8, 2025",
-    rel: "noopener noreferrer",
-    targetBlank: "_blank",
-    targetSelf: "_self",
     classSmall: "small-text",
-    hrefTop: "#top",
   };
 
   /**
@@ -73,7 +65,10 @@ This file is part of Network Pro.
 <!-- BEGIN TITLE -->
 <section id="top">
   <span class={constants.classSmall}>
-    <a rel={constants.rel} href="https://spdx.dev/learn/handling-license-info">
+    <a
+      rel={PAGE.REL}
+      href="https://spdx.dev/learn/handling-license-info"
+      target={PAGE.BLANK}>
       SPDX License Identifier
     </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
@@ -82,7 +77,7 @@ This file is part of Network Pro.
 <section id="page-title">
   <h1>Consulting Terms and Conditions</h1>
   <p>
-    <strong>{COMPANY}<br />Effective Date:</strong>
+    <strong>{COMPANY_INFO.NAME}<br />Effective Date:</strong>
     {constants.effectiveDate}
   </p>
 </section>
@@ -104,7 +99,7 @@ This file is part of Network Pro.
   These Terms and Conditions apply exclusively to the provision of our
   consulting and implementation services. For all other uses of our website and
   associated platforms, please refer to the applicable
-  <a href={termsLink} target={constants.targetSelf}> Website Terms of Use </a>.
+  <a href={termsLink} target={PAGE.SELF}> Website Terms of Use </a>.
 </p>
 
 <hr />
@@ -115,9 +110,9 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a href={tandcLink} target={constants.targetSelf}>Docs</a>
+      <a href={tandcLink} target={PAGE.SELF}>Docs</a>
       |
-      <a href="/assets/consulting-terms.pdf" target={constants.targetBlank}>
+      <a href="/assets/consulting-terms.pdf" target={PAGE.BLANK}>
         PDF <span class="fas fa-file-arrow-down"></span>
       </a>
     </sup>
@@ -132,8 +127,8 @@ This file is part of Network Pro.
       <p>
         By engaging with the information security, network security,
         cybersecurity, and digital privacy consulting and implementation
-        services provided by {COMPANY} ("Company," "we," "us," or "our"), you ("Client")
-        agree to be bound by these Terms and Conditions ("Terms").
+        services provided by {COMPANY_INFO.NAME} ("Company," "we," "us," or "our"),
+        you ("Client") agree to be bound by these Terms and Conditions ("Terms").
         <strong>
           These Terms govern all engagements except where explicitly superseded
           by a separate written agreement or Statement of Work (SOW).
@@ -237,7 +232,7 @@ This file is part of Network Pro.
     {/if}
 
     <span class={constants.classSmall}
-      ><a href={constants.hrefTop}>Back to top</a></span>
+      ><a href={NAV.HREFTOP}>{NAV.BACKTOP}</a></span>
   </section>
 {/each}
 <!-- END TERMS AND CONDITIONS -->