@rubytech/create-maxy-code 0.1.126 → 0.1.129

package/payload/server/public/consent.js

@@ -0,0 +1,259 @@
+/* PECR consent banner (Task 375).
+ *
+ * Loads BEFORE /v.js on any page that wires in the visitor pixel:
+ *
+ *   <link rel="stylesheet" href="/consent.css">
+ *   <script defer src="/consent.js"></script>
+ *   <script defer src="/v.js" data-site="<slug>"></script>
+ *
+ * Responsibility:
+ *   1. Reads mxy_consent cookie. If absent → render banner.
+ *   2. On accept → POST /v/consent {decision:"yes", v?:<token>}, server sets
+ *      mxy_consent (12mo) + (if v= present in URL and HMAC-valid) mxy_v.
+ *   3. On reject → POST /v/consent {decision:"no"}, banner hides, never re-shows
+ *      until manageCookies() is called or cookie expires.
+ *   4. After accept with ?consent=needed&v=… in URL, calls history.replaceState
+ *      to strip both params so the token doesn't sit in browser history.
+ *   5. Dispatches `mxy:consent-changed` so v.js can react without reloading.
+ *   6. Exposes window.mxyManageCookies() to re-open the banner from a footer link.
+ *   7. On yes→no transition, purges every visitor-graph storage key the pixel
+ *      could have written.
+ *
+ * No build step. Plain JS IIFE. ~2.5 KB.
+ */
+(function () {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return
+
+  var COOKIE_NAME = 'mxy_consent'
+  var CONSENT_ENDPOINT = '/v/consent'
+  var BRAND_CONFIG_ENDPOINT = '/v/brand-config'
+  // Storage keys the pixel may write. Mirror v.js literals.
+  var PIXEL_STORAGE_KEYS = [
+    'mxy_visitor_id', // localStorage
+    'mxy_session_id', // sessionStorage
+    'mxy_session_pv',
+    'mxy_last_pv',
+    'mxy_scroll_depth',
+    'mxy_dwell_start',
+  ]
+
+  var DEFAULT_COPY = {
+    title: 'Before you browse',
+    body: 'We use a small first-party script to count page views, scrolls and clicks on this listing. Nothing is shared with third parties. You can change your mind at any time.',
+    accept: 'Accept',
+    reject: 'Reject',
+    manage: 'Manage cookies',
+    policyLinkText: 'Read the cookie policy',
+    policyHref: '/privacy.html#cookies',
+  }
+  var DEFAULT_PALETTE = {
+    bg: '#FFFFFF',
+    fg: '#1F1F1F',
+    accent: '#1F1F1F',
+    accentFg: '#FFFFFF',
+    border: '#E5E5E2',
+  }
+
+  function readCookie(name) {
+    var raw = document.cookie || ''
+    var parts = raw.split(';')
+    for (var i = 0; i < parts.length; i++) {
+      var kv = parts[i].trim().split('=')
+      if (kv[0] === name) return decodeURIComponent(kv.slice(1).join('='))
+    }
+    return null
+  }
+
+  function readUrlToken() {
+    try {
+      var u = new URL(window.location.href)
+      if (u.searchParams.get('consent') !== 'needed') return null
+      var v = u.searchParams.get('v')
+      return v && v.length > 0 && v.length <= 2048 ? v : null
+    } catch (_e) {
+      return null
+    }
+  }
+
+  function stripConsentQuery() {
+    try {
+      var u = new URL(window.location.href)
+      if (!u.searchParams.has('consent') && !u.searchParams.has('v')) return
+      u.searchParams.delete('consent')
+      u.searchParams.delete('v')
+      var next = u.pathname + (u.searchParams.toString() ? '?' + u.searchParams.toString() : '') + u.hash
+      history.replaceState(null, '', next)
+    } catch (_e) { /* never break the page */ }
+  }
+
+  function purgePixelStorage() {
+    for (var i = 0; i < PIXEL_STORAGE_KEYS.length; i++) {
+      var k = PIXEL_STORAGE_KEYS[i]
+      try { localStorage.removeItem(k) } catch (_e) {}
+      try { sessionStorage.removeItem(k) } catch (_e) {}
+    }
+  }
+
+  function fireChange(decision) {
+    try {
+      window.dispatchEvent(new CustomEvent('mxy:consent-changed', { detail: { decision: decision } }))
+    } catch (_e) {
+      // IE/older Safari fallback — synthesise a plain Event.
+      try {
+        var ev = document.createEvent('Event')
+        ev.initEvent('mxy:consent-changed', true, true)
+        ev.detail = { decision: decision }
+        window.dispatchEvent(ev)
+      } catch (_e2) {}
+    }
+  }
+
+  function postConsent(decision, token) {
+    var body = JSON.stringify(token ? { decision: decision, v: token } : { decision: decision })
+    return fetch(CONSENT_ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: body,
+      credentials: 'include',
+      keepalive: true,
+    }).catch(function () { /* server records the decision; UI proceeds regardless */ })
+  }
+
+  function fetchBrandConfig() {
+    return fetch(BRAND_CONFIG_ENDPOINT, { credentials: 'omit' })
+      .then(function (r) { return r.ok ? r.json() : null })
+      .catch(function () { return null })
+  }
+
+  function applyPalette(palette) {
+    var root = document.documentElement
+    for (var k in palette) {
+      if (Object.prototype.hasOwnProperty.call(palette, k)) {
+        root.style.setProperty('--mxy-consent-' + k, palette[k])
+      }
+    }
+  }
+
+  var bannerEl = null
+
+  function buildBanner(copy) {
+    var root = document.createElement('div')
+    root.id = 'mxy-consent'
+    root.setAttribute('role', 'dialog')
+    root.setAttribute('aria-live', 'polite')
+    root.setAttribute('aria-label', copy.title)
+
+    var inner = document.createElement('div')
+    inner.className = 'mxy-consent__inner'
+
+    var text = document.createElement('div')
+    text.className = 'mxy-consent__text'
+    var h = document.createElement('strong')
+    h.className = 'mxy-consent__title'
+    h.textContent = copy.title
+    var p = document.createElement('p')
+    p.className = 'mxy-consent__body'
+    p.textContent = copy.body
+    var link = document.createElement('a')
+    link.className = 'mxy-consent__link'
+    link.href = copy.policyHref
+    link.textContent = copy.policyLinkText
+    link.target = '_blank'
+    link.rel = 'noopener'
+    text.appendChild(h)
+    text.appendChild(p)
+    text.appendChild(link)
+
+    var actions = document.createElement('div')
+    actions.className = 'mxy-consent__actions'
+    var reject = document.createElement('button')
+    reject.className = 'mxy-consent__btn mxy-consent__btn--reject'
+    reject.type = 'button'
+    reject.textContent = copy.reject
+    var accept = document.createElement('button')
+    accept.className = 'mxy-consent__btn mxy-consent__btn--accept'
+    accept.type = 'button'
+    accept.textContent = copy.accept
+    // Order: reject first then accept; CSS equal-weights them. ICO requires
+    // the reject path to be no harder than the accept path.
+    actions.appendChild(reject)
+    actions.appendChild(accept)
+
+    inner.appendChild(text)
+    inner.appendChild(actions)
+    root.appendChild(inner)
+
+    accept.addEventListener('click', function () { onDecide('yes') })
+    reject.addEventListener('click', function () { onDecide('no') })
+
+    return root
+  }
+
+  function hideBanner() {
+    if (bannerEl && bannerEl.parentNode) {
+      bannerEl.parentNode.removeChild(bannerEl)
+    }
+    bannerEl = null
+  }
+
+  function onDecide(decision) {
+    var token = decision === 'yes' ? readUrlToken() : null
+    // Optimistic local cookie write so v.js sees consent immediately. The
+    // server POST below will refresh the lifetime to the full 12 months;
+    // this JS write is ITP-clamped to 7 days on Safari but covers the gap
+    // until the server response lands.
+    document.cookie = COOKIE_NAME + '=' + decision + '; Max-Age=' + (60 * 60 * 24 * 365) + '; Path=/; SameSite=Lax; Secure'
+    if (decision === 'no') purgePixelStorage()
+    if (decision === 'yes') stripConsentQuery()
+    hideBanner()
+
+    var p = postConsent(decision, token)
+    if (decision === 'yes' && token) {
+      // Wait for the server to set HttpOnly mxy_v before letting v.js fire
+      // the first pageview. Otherwise the first event is attributed to
+      // AnonVisitor and the cross-session merge runs one event later.
+      p.then(function () { fireChange(decision) })
+    } else {
+      // No token to bind → no reason to wait; emit immediately.
+      fireChange(decision)
+    }
+  }
+
+  function maybeShowBanner() {
+    var current = readCookie(COOKIE_NAME)
+    if (current === 'yes' || current === 'no') return
+    fetchBrandConfig().then(function (cfg) {
+      var consent = (cfg && cfg.consent) || {}
+      var copy = {}
+      for (var k in DEFAULT_COPY) copy[k] = (consent.copy && consent.copy[k]) || DEFAULT_COPY[k]
+      var palette = {}
+      for (var p in DEFAULT_PALETTE) palette[p] = (consent.palette && consent.palette[p]) || DEFAULT_PALETTE[p]
+      applyPalette(palette)
+      bannerEl = buildBanner(copy)
+      document.body.appendChild(bannerEl)
+    })
+  }
+
+  // Withdrawal entry point — footer links call this to re-open the banner
+  // when the visitor wants to change their mind. Purge happens in onDecide
+  // when the visitor actually flips to reject, not here.
+  window.mxyManageCookies = function () {
+    if (bannerEl) hideBanner()
+    fetchBrandConfig().then(function (cfg) {
+      var consent = (cfg && cfg.consent) || {}
+      var copy = {}
+      for (var k in DEFAULT_COPY) copy[k] = (consent.copy && consent.copy[k]) || DEFAULT_COPY[k]
+      var palette = {}
+      for (var p in DEFAULT_PALETTE) palette[p] = (consent.palette && consent.palette[p]) || DEFAULT_PALETTE[p]
+      applyPalette(palette)
+      bannerEl = buildBanner(copy)
+      document.body.appendChild(bannerEl)
+    })
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', maybeShowBanner)
+  } else {
+    maybeShowBanner()
+  }
+})()

package/payload/server/public/privacy.html

@@ -41,11 +41,74 @@
   </table>
   <p class="muted">We do not collect: cursor positions, keystrokes, form contents, screen recordings, or anything from third-party tracking networks. The pixel is loaded from the same site as the listing, never from a third party.</p>
 
-  <h2>Cookies</h2>
-  <p>One cookie is set when you arrive via a personalised marketing link from the agent:</p>
-  <ul>
-    <li><code>mxy_v</code> — signed token containing your contact identifier. Set <code>HttpOnly</code>, <code>SameSite=Lax</code>, <code>Secure</code>. Lives for 30 days. Lets the site recognise you on later visits without you clicking the marketing link again.</li>
-  </ul>
+  <h2 id="cookies">Cookies and storage</h2>
+  <p>Before any of the storage below is used, you see a consent banner and choose to accept or reject. If you reject, nothing in the second table is ever written. The only cookie that is set without consent is the one that remembers your consent decision &mdash; this is permitted under PECR Regulation 6(4) as strictly necessary to deliver the consent service you asked for.</p>
+
+  <p><strong>Set even when you reject (strictly necessary):</strong></p>
+  <table>
+    <thead><tr><th>Key</th><th>Type</th><th>Purpose</th><th>Lifetime</th></tr></thead>
+    <tbody>
+      <tr>
+        <td><code>mxy_consent</code></td>
+        <td>Cookie (<code>SameSite=Lax</code>, <code>Secure</code>)</td>
+        <td>Remembers whether you accepted or rejected, so the banner doesn't re-show on every page.</td>
+        <td>12 months</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <p><strong>Set only after you accept:</strong></p>
+  <table>
+    <thead><tr><th>Key</th><th>Type</th><th>Purpose</th><th>Lifetime</th></tr></thead>
+    <tbody>
+      <tr>
+        <td><code>mxy_v</code></td>
+        <td>Cookie (<code>HttpOnly</code>, <code>SameSite=Lax</code>, <code>Secure</code>)</td>
+        <td>Signed token containing your contact identifier &mdash; only set if you arrived via a personalised marketing link. Lets the site recognise you on later visits without you clicking the link again.</td>
+        <td>30 days</td>
+      </tr>
+      <tr>
+        <td><code>mxy_visitor_id</code></td>
+        <td>localStorage</td>
+        <td>Random ID so we can tell two visits from one browser apart from two browsers.</td>
+        <td>Until you clear browser storage</td>
+      </tr>
+      <tr>
+        <td><code>mxy_session_id</code></td>
+        <td>sessionStorage</td>
+        <td>Random ID so one tab's activity stays grouped together.</td>
+        <td>Until you close the tab</td>
+      </tr>
+      <tr>
+        <td><code>mxy_session_pv</code></td>
+        <td>sessionStorage</td>
+        <td>Page-view identifier used to roll scroll milestones up into a single record per page.</td>
+        <td>Until you close the tab</td>
+      </tr>
+      <tr>
+        <td><code>mxy_last_pv</code></td>
+        <td>sessionStorage</td>
+        <td>Deduplicates a single page view across very fast client-side navigations (within 5 seconds).</td>
+        <td>Until you close the tab</td>
+      </tr>
+      <tr>
+        <td><code>mxy_scroll_depth</code></td>
+        <td>sessionStorage</td>
+        <td>Highest scroll milestone already recorded for the current page, so we only send each one once.</td>
+        <td>Until you close the tab</td>
+      </tr>
+      <tr>
+        <td><code>mxy_dwell_start</code></td>
+        <td>sessionStorage</td>
+        <td>Time you arrived on the page, used to compute dwell when you navigate away.</td>
+        <td>Until you close the tab</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Withdrawing consent</h2>
+  <p>To change your mind after accepting or rejecting, click <strong>Manage cookies</strong> in the page footer. The banner re-opens and you can switch your choice. If you flip from accept to reject, every key in the second table is cleared from your browser immediately. The personalised cookie (<code>mxy_v</code>) is cleared by your browser when it next sees a response that overrides it; if you want it removed sooner, clear cookies for this site in your browser settings.</p>
+  <p>Withdrawing consent stops new visit data from being written. It does not delete visit data already on our servers from your previous accepted sessions. For that, see &ldquo;Right to access and erasure&rdquo; below.</p>
 
   <h2>Cross-session attribution</h2>
   <p>If you visit anonymously today and later click a personalised marketing link from the agent, prior anonymous visits from the same browser are linked to your contact record. This is the only way an anonymous visit ever becomes named.</p>

package/payload/server/public/v.js

@@ -25,6 +25,7 @@
   var siteSlug = script.getAttribute('data-site') || ''
   var endpoint = new URL('/v/event', script.src).toString()
 
+  var CONSENT_KEY = 'mxy_consent'
   var VISITOR_KEY = 'mxy_visitor_id'
   var SESSION_KEY = 'mxy_session_id'
   var SESSION_PV_KEY = 'mxy_session_pv'
@@ -32,6 +33,55 @@
   var SCROLL_KEY = 'mxy_scroll_depth'
   var DWELL_KEY = 'mxy_dwell_start'
 
+  // ─────────── PECR consent gate (Task 375) ───────────
+  // Reads the mxy_consent cookie set by /consent.js (and persisted server-side
+  // via POST /v/consent). When the visitor has not accepted, the pixel is a
+  // total no-op: no storage writes, no /v/event POSTs, no event listeners
+  // attached. A later flip yes ← rebooted via the mxy:consent-changed event.
+  function readConsentCookie() {
+    var raw = (typeof document !== 'undefined' && document.cookie) || ''
+    var parts = raw.split(';')
+    for (var i = 0; i < parts.length; i++) {
+      var kv = parts[i].trim().split('=')
+      if (kv[0] === CONSENT_KEY) return decodeURIComponent(kv.slice(1).join('='))
+    }
+    return null
+  }
+  function purgeAll() {
+    var keys = [VISITOR_KEY, SESSION_KEY, SESSION_PV_KEY, LAST_PV_KEY, SCROLL_KEY, DWELL_KEY]
+    for (var i = 0; i < keys.length; i++) {
+      try { localStorage.removeItem(keys[i]) } catch (_e) {}
+      try { sessionStorage.removeItem(keys[i]) } catch (_e) {}
+    }
+  }
+  var started = false
+  function start() {
+    if (started) return
+    started = true
+    boot()
+  }
+  // React to consent changes from the banner: yes→start (emit deferred
+  // pageview), yes→no→purge storage and detach listeners by setting a flag
+  // that all emit-paths check before sending.
+  var revoked = false
+  window.addEventListener('mxy:consent-changed', function (ev) {
+    var decision = (ev && ev.detail && ev.detail.decision) || readConsentCookie()
+    if (decision === 'yes') {
+      revoked = false
+      start()
+    } else if (decision === 'no') {
+      revoked = true
+      purgeAll()
+    }
+  })
+  if (readConsentCookie() !== 'yes') {
+    // Banner / server will fire mxy:consent-changed when the visitor accepts.
+    return
+  }
+  start()
+
+  function boot() {
+
   function randomId() {
     if (window.crypto && window.crypto.getRandomValues) {
       var buf = new Uint8Array(16)
@@ -71,6 +121,7 @@
   var sessionId = getSessionId()
 
   function send(payload) {
+    if (revoked) return
     payload.site = siteSlug
     payload.vid = visitorId
     payload.sid = sessionId
@@ -98,6 +149,7 @@
 
   // ─────────── pageview (idempotent within 5s for SPA nav) ───────────
   function emitPageview() {
+    if (revoked) return
     try {
       var last = sessionStorage.getItem(LAST_PV_KEY)
       if (last) {
@@ -188,4 +240,5 @@
 
   // Boot.
   emitPageview()
+  } // end boot()
 })()