+ Consent/Tracking

.storybook/stories/trackingMatomo.stories.ts → .storybook/stories/consent.stories.ts

@@ -5,12 +5,12 @@ import { html } from "lit";
 import "../../src/hotosm-ui";
 
 const meta: Meta = {
-  title: "Tracking",
-  component: "hot-tracking",
+  title: "Consent",
+  component: "hot-consent",
 };
 export default meta;
 
-export const TrackingMatomo: StoryObj = {
+export const Consent: StoryObj = {
   args: {
     siteId: "1",
     domain: "localhost",
@@ -22,31 +22,25 @@ export const TrackingMatomo: StoryObj = {
         type: "select",
       },
     },
-    domain: {
-      options: ["localhost", "anotherdomain"],
-      control: {
-        type: "select",
-      },
-    },
   },
   parameters: {
     showAgreeToast: () => {
       const agree = document.getElementById("agree-toast");
       if (agree) {
-        agree.toast();
+        // agree.toast();
       }
     },
     showDisagreeToast: () => {
       const disagree = document.getElementById("disagree-toast");
       if (disagree) {
-        disagree.toast();
+        // disagree.toast();
       }
     },
     addKeyLocalStorage: (siteId: number) => {
-      localStorage.setItem(`${siteId}-matomo-agree`, 'true');
+      localStorage.setItem(`${siteId}-consent-agree`, 'true');
     },
     removeKeyLocalStorage: (siteId: number) => {
-      localStorage.removeItem(`${siteId}-matomo-agree`);
+      localStorage.removeItem(`${siteId}-consent-agree`);
     },
   },
   render: (args, { parameters }) => {
@@ -58,17 +52,30 @@ export const TrackingMatomo: StoryObj = {
         parameters.addKeyLocalStorage(args.siteId)
       }}>Disable Banner</sl-button>
       <br /><br />
-      <hot-matomo-tracking
-        id="matomo-banner"
-        site-id="${args.siteId}"
-        domain="${args.domain}"
+
+      <hot-consent
+
+      site-id=${args.siteId}
+        agree-label="Yes, I accept"
+        not-agree-label="I DO NOT accept"
+        title=${"What info we collect about you?"}
         @agree=${() => {
           parameters.showAgreeToast()
         }}
         @disagree=${() => {
           parameters.showDisagreeToast()
         }}
-      ></hot-matomo-tracking>
+      >
+        We use cookies and similar technologies to recognize and analyze your
+        visits, and measure traffic usage and activity. You can learn about how
+        we use the data about your visit or information you provide reading our
+        <a
+          href="https://www.hotosm.org/privacy"
+          target="_blank"
+          rel="noopener noreferrer"
+          >privacy policy</a
+        >. By clicking "I Agree", you consent to the use of cookies.
+      </hot-consent>
 
       <sl-alert id="agree-toast" variant="success" duration="3000" closable>
         <sl-icon slot="icon" name="check2-circle"></sl-icon>

.storybook/stories/tracking.stories.ts

@@ -22,25 +22,39 @@ export const Tracking: StoryObj = {
         type: "select",
       },
     },
+    domain: {
+      options: ["localhost", "anotherdomain"],
+      control: {
+        type: "select",
+      },
+    },
   },
   parameters: {
-    showAgreeToast: () => {
-      const agree = document.getElementById("agree-toast");
-      if (agree) {
-        agree.toast();
+    agree: (siteId, domain) => {
+      const tracking = document.getElementById("hot-tracking");
+      console.log(tracking)
+      if (tracking) {
+        tracking.agree(
+          siteId,
+          domain
+        );  
+      }
+      const agreeAlert = document.getElementById("agree-alert");
+      if (agreeAlert) {
+        agreeAlert.toast();
       }
     },
-    showDisagreeToast: () => {
-      const disagree = document.getElementById("disagree-toast");
-      if (disagree) {
-        disagree.toast();
+    disagree: () => {
+      const disagreeAlert = document.getElementById("disagree-alert");
+      if (disagreeAlert) {
+        disagreeAlert.toast();
       }
     },
     addKeyLocalStorage: (siteId: number) => {
-      localStorage.setItem(`${siteId}-tracking-agree`, 'true');
+      localStorage.setItem(`${siteId}-consent-agree`, 'true');
     },
     removeKeyLocalStorage: (siteId: number) => {
-      localStorage.removeItem(`${siteId}-tracking-agree`);
+      localStorage.removeItem(`${siteId}-consent-agree`);
     },
   },
   render: (args, { parameters }) => {
@@ -51,38 +65,34 @@ export const Tracking: StoryObj = {
       <sl-button @click=${() => {
         parameters.addKeyLocalStorage(args.siteId)
       }}>Disable Banner</sl-button>
+
       <br /><br />
 
-      <hot-tracking
-        id="tracking-banner"
-        site-id=${args.siteId}
-        agree-label="Yes, I accept"
-        not-agree-label="I DO NOT accept"
-        title=${"What info we collect about you?"}
+      <hot-consent
+        id="matomo-banner"
+        site-id="${args.siteId}"
+        domain="${args.domain}"
         @agree=${() => {
-          parameters.showAgreeToast()
+          parameters.agree(args.siteId, args.domain)
         }}
         @disagree=${() => {
-          parameters.showDisagreeToast()
+          parameters.disagree()
         }}
+      ></hot-consent>
+
+      <hot-tracking
+        id="hot-tracking"
+        site-id=${args.siteId}
+        domain=${args.domain}
       >
-        We use cookies and similar technologies to recognize and analyze your
-        visits, and measure traffic usage and activity. You can learn about how
-        we use the data about your visit or information you provide reading our
-        <a
-          href="https://www.hotosm.org/privacy"
-          target="_blank"
-          rel="noopener noreferrer"
-          >privacy policy</a
-        >. By clicking "I Agree", you consent to the use of cookies.
       </hot-tracking>
 
-      <sl-alert id="agree-toast" variant="success" duration="3000" closable>
+      <sl-alert id="agree-alert" variant="success" duration="3000" closable>
         <sl-icon slot="icon" name="check2-circle"></sl-icon>
         You clicked agree.
       </sl-alert>
 
-      <sl-alert id="disagree-toast" variant="danger" duration="3000" closable>
+      <sl-alert id="disagree-alert" variant="danger" duration="3000" closable>
         <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
         You clicked disagree.
       </sl-alert>

dist/components/tracking/tracking.component.d.ts

@@ -1,21 +1,19 @@
-import "@shoelace-style/shoelace/dist/components/alert/alert.js";
 import { LitElement } from "lit";
-import type { CSSResultGroup } from 'lit';
-export declare class Tracking extends LitElement {
-    static styles: CSSResultGroup;
+declare global {
+    interface Window {
+        _paq: any[];
+    }
+}
+export declare class MatomoTracking extends LitElement {
     name: string;
-    /** The site id for tracking. */
+    /** The Matomo site id for tracking. */
     accessor siteId: string;
-    /** Force display the banner. */
-    accessor force: boolean;
-    accessor isOpen: boolean;
-    accessor title: string;
-    accessor message: import("lit").TemplateResult<1>;
-    accessor agreeLabel: string;
-    accessor notAgreeLabel: string;
-    protected render(): import("lit").TemplateResult<1>;
-    private _setAgree;
-    private _setDisagree;
+    /** The domains to apply tracking. */
+    accessor domain: string;
+    /** The Matomo URL */
+    accessor matomoURL: string;
+    agree(): void;
+    disagree(): void;
     connectedCallback(): void;
 }
-export default Tracking;
+export default MatomoTracking;

dist/components/tracking/tracking.component.js

@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.BZRLYTOZ.js";import"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Tracking,b as default};
+import{a,b}from"../../chunks/chunk.NZIJQUIE.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as MatomoTracking,b as default};

dist/components/tracking/tracking.d.ts

@@ -1,8 +1,8 @@
-import Tracking from './tracking.component.js';
+import MatomoTracking from './tracking.component.js';
 export * from './tracking.component.js';
-export default Tracking;
+export default MatomoTracking;
 declare global {
     interface HTMLElementTagNameMap {
-        'hot-tracking': Tracking;
+        'hot-tracking': MatomoTracking;
     }
 }

dist/components/tracking/tracking.js

@@ -1 +1 @@
-import{a as e,b as a}from"../../chunks/chunk.BZRLYTOZ.js";import"../../chunks/chunk.4DV2WAS7.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.FWYUHKRF.js";var t=a;export{e as Tracking,t as default};
+import{a as o,b as a}from"../../chunks/chunk.NZIJQUIE.js";import"../../chunks/chunk.FWYUHKRF.js";var r=a;export{o as MatomoTracking,r as default};