@runwell/shopify-toolkit 0.21.0 → 0.24.0

package/modules/scratch-popup/assets/runwell-scratch-popup.css

@@ -0,0 +1,315 @@
+/* Runwell scratch popup. Modal layout with email gate -> foil scratch surface -> revealed code.
+   Two CSS variables drive the brand colors: --runwell-scratch-foil (the scratch overlay) and
+   --runwell-scratch-accent (CTAs, highlights). Set on the root element via inline style from
+   the section's color settings. */
+
+.runwell-scratch {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.runwell-scratch.is-open { display: flex; }
+
+.runwell-scratch__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+.runwell-scratch__panel {
+  position: relative;
+  background: #FFFFFF;
+  color: var(--runwell-primary, #1A1A1A);
+  max-width: 460px;
+  width: 100%;
+  padding: 2.5rem 2rem 2rem;
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+  text-align: center;
+}
+
+.runwell-scratch__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.8rem;
+  background: transparent;
+  border: 0;
+  font-size: 1.8rem;
+  font-weight: 300;
+  color: currentColor;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.runwell-scratch__eyebrow {
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-weight: 700;
+  margin: 0 0 0.6rem 0;
+  opacity: 0.6;
+  color: var(--runwell-scratch-accent);
+}
+
+.runwell-scratch__heading {
+  font-family: var(--font-heading-family, serif);
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1.7rem;
+  line-height: 1.15;
+  margin: 0 0 0.8rem 0;
+}
+
+.runwell-scratch__subheading {
+  font-size: 0.95rem;
+  line-height: 1.55;
+  margin: 0 0 1.6rem 0;
+  opacity: 0.8;
+}
+
+.runwell-scratch__step { animation: runwellScratchFade 0.25s ease-out both; }
+@keyframes runwellScratchFade {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ---------- Step 1: email gate ---------- */
+.runwell-scratch__form {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.8rem;
+}
+
+.runwell-scratch__form input[type="email"] {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.85rem 1rem;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 6px;
+  font-size: 0.95rem;
+  background: #FFFFFF;
+  transition: border-color 0.2s ease;
+}
+
+.runwell-scratch__form input[type="email"].is-invalid {
+  border-color: #C0392B;
+  animation: runwellScratchShake 0.4s ease;
+}
+@keyframes runwellScratchShake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-4px); }
+  40%, 80% { transform: translateX(4px); }
+}
+
+.runwell-scratch__email-prompt {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.6rem 0;
+  color: var(--runwell-scratch-accent, #1A1A1A);
+}
+
+.runwell-scratch__cta {
+  background: var(--runwell-scratch-accent, #1A1A1A);
+  color: #FFFFFF;
+  border: 0;
+  padding: 0.85rem 1.4rem;
+  font-weight: 700;
+  font-size: 0.95rem;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.runwell-scratch__cta:hover { filter: brightness(0.92); }
+
+.runwell-scratch__cta--reveal {
+  display: block;
+  margin: 1rem auto 0;
+  max-width: 280px;
+  text-align: center;
+}
+
+.runwell-scratch__fineprint {
+  font-size: 0.75rem;
+  margin-top: 0.4rem;
+  opacity: 0.55;
+}
+
+/* ---------- Step 1: scratch surface ---------- */
+.runwell-scratch__scratch-prompt {
+  font-size: 0.85rem;
+  margin: 0.6rem 0 0 0;
+  opacity: 0.6;
+  letter-spacing: 0.05em;
+}
+
+.runwell-scratch__card {
+  position: relative;
+  width: 100%;
+  height: 220px;
+  margin: 0.6rem 0 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #FFFFFF;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  user-select: none;
+  touch-action: none;
+}
+
+/* Trophy variant: the same card, shown smaller after the scratch so it sits as
+   a header above the email form / code display. No canvas, just the reveal. */
+.runwell-scratch__card--trophy {
+  height: 110px;
+  background: #FFFFFF;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  margin: 0 0 1rem;
+  color: var(--runwell-scratch-accent, #1A1A1A);
+}
+
+.runwell-scratch__card--trophy .runwell-scratch__reveal-pct {
+  font-size: 1.9rem;
+}
+
+.runwell-scratch__reveal {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  background: #FFFFFF;
+  color: var(--runwell-scratch-accent, #1A1A1A);
+}
+
+.runwell-scratch__reveal-eyebrow {
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-weight: 700;
+  margin: 0;
+  opacity: 0.65;
+}
+
+.runwell-scratch__reveal-pct {
+  font-size: 3rem;
+  font-weight: 800;
+  margin: 0;
+  line-height: 1;
+}
+
+.runwell-scratch__reveal-fineprint {
+  font-size: 0.75rem;
+  margin: 0;
+  opacity: 0.6;
+}
+
+.runwell-scratch__canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+.runwell-scratch__canvas:active { cursor: grabbing; }
+
+.runwell-scratch__card.is-revealed .runwell-scratch__canvas {
+  animation: runwellScratchFadeOut 0.4s ease-out forwards;
+  pointer-events: none;
+}
+@keyframes runwellScratchFadeOut {
+  to { opacity: 0; }
+}
+
+.runwell-scratch__a11y-reveal {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.6rem;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  font-size: 0.7rem;
+  padding: 0.25rem 0.55rem;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 2;
+}
+
+/* ---------- Step 3: revealed ---------- */
+.runwell-scratch__revealed-heading {
+  font-family: var(--font-heading-family, serif);
+  font-size: 1.5rem;
+  font-weight: 400;
+  margin: 0 0 0.4rem 0;
+}
+
+.runwell-scratch__revealed-subheading {
+  font-size: 0.9rem;
+  margin: 0 0 1rem 0;
+  opacity: 0.75;
+}
+
+.runwell-scratch__code-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 0 0 0.8rem 0;
+  padding: 0.8rem 1rem;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 8px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.runwell-scratch__copy {
+  background: transparent;
+  border: 1px solid var(--runwell-scratch-accent, #1A1A1A);
+  color: var(--runwell-scratch-accent, #1A1A1A);
+  padding: 0.35rem 0.7rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.runwell-scratch__copy.is-copied {
+  background: var(--runwell-scratch-accent, #1A1A1A);
+  color: #FFFFFF;
+}
+
+/* ---------- Reduced motion ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .runwell-scratch__step,
+  .runwell-scratch__card.is-revealed .runwell-scratch__canvas {
+    animation: none;
+  }
+}
+
+/* ---------- Mobile ---------- */
+@media (max-width: 540px) {
+  .runwell-scratch { padding: 1rem; }
+  .runwell-scratch__panel { padding: 2rem 1.3rem 1.6rem; }
+  .runwell-scratch__heading { font-size: 1.45rem; }
+  .runwell-scratch__card { height: 150px; }
+  .runwell-scratch__reveal-pct { font-size: 2.1rem; }
+}
+
+body.runwell-scratch-open { overflow: hidden; }

package/modules/scratch-popup/assets/runwell-scratch-popup.js

@@ -0,0 +1,367 @@
+/* Runwell scratch popup. Mystery-discount email capture with foil scratch-to-reveal.
+
+   Flow (matches the live-vendor pattern: Knowband, Poptin, AppSetup, CI Scratch,
+   Triggerbee, Winify, Superpop):
+     1. SCRATCH    - foil card visible immediately; visitor scratches the foil.
+                     At ~60% erased, the discount AMOUNT (e.g. "10% off") is
+                     revealed. The actual code is NOT shown here.
+     2. EMAIL      - the card stays visible as a trophy. An email form appears
+                     below: "Where should we send your code?". Submit posts the
+                     email to Shopify's /contact endpoint in the background.
+     3. REVEALED   - the discount code is shown with Copy + Shop now (the CTA
+                     auto-applies the code via Shopify's /discount/CODE URL).
+
+   Suppression: 30 days via localStorage.runwell_scratch_seen.
+
+   Discount codes are pre-created on the store (via shopify-discount-create.sh).
+   No backend required: a tier is picked client-side (weighted random); the
+   matching code is bound to the email via Shopify's one-use-per-customer
+   discount setting at checkout. */
+(function () {
+  if (typeof window === 'undefined') return;
+
+  var KEY = 'runwell_scratch_seen';
+  var DAYS = 30;
+
+  var root = document.querySelector('[data-runwell-scratch]');
+  if (!root) return;
+
+  // ---------- Config from data attributes ----------
+  var tiers = [
+    {
+      code: root.dataset.tier1Code,
+      pct: parseInt(root.dataset.tier1Pct, 10),
+      prob: parseFloat(root.dataset.tier1Prob)
+    },
+    {
+      code: root.dataset.tier2Code,
+      pct: parseInt(root.dataset.tier2Pct, 10),
+      prob: parseFloat(root.dataset.tier2Prob)
+    },
+    {
+      code: root.dataset.tier3Code,
+      pct: parseInt(root.dataset.tier3Pct, 10),
+      prob: parseFloat(root.dataset.tier3Prob)
+    }
+  ].filter(function (t) { return t.code && t.pct > 0 && t.prob > 0; });
+
+  var triggerDelaySec = parseInt(root.dataset.triggerDelaySec, 10);
+  if (isNaN(triggerDelaySec)) triggerDelaySec = 8;
+  var exitIntentEnabled = root.dataset.exitIntent === 'true';
+  var thresholdPct = parseInt(root.dataset.scratchThresholdPct, 10);
+  if (isNaN(thresholdPct)) thresholdPct = 60;
+
+  // ---------- Session-suppression ----------
+  function seenRecently() {
+    try {
+      var v = localStorage.getItem(KEY);
+      if (!v) return false;
+      var ts = parseInt(v, 10);
+      if (isNaN(ts)) return false;
+      return (Date.now() - ts) < (DAYS * 24 * 60 * 60 * 1000);
+    } catch (e) { return false; }
+  }
+  function markSeen() {
+    try { localStorage.setItem(KEY, String(Date.now())); } catch (e) { /* ignore */ }
+  }
+
+  if (seenRecently()) return;
+
+  // ---------- Pick tier UP FRONT so the scratch reveal can show the amount ----------
+  function pickTier() {
+    var totalWeight = tiers.reduce(function (s, t) { return s + t.prob; }, 0);
+    if (totalWeight <= 0) return tiers[0];
+    var r = Math.random() * totalWeight;
+    var acc = 0;
+    for (var i = 0; i < tiers.length; i++) {
+      acc += tiers[i].prob;
+      if (r <= acc) return tiers[i];
+    }
+    return tiers[tiers.length - 1];
+  }
+  var selectedTier = tiers.length > 0 ? pickTier() : null;
+
+  // Stamp the discount amount into all "pct" placeholders so it's ready at scratch reveal.
+  if (selectedTier) {
+    var amountText = selectedTier.pct + '% off';
+    root.querySelectorAll('[data-runwell-scratch-pct], [data-runwell-scratch-pct-trophy], [data-runwell-scratch-pct-final]')
+      .forEach(function (el) { el.textContent = amountText; });
+  }
+
+  // ---------- Modal open / close ----------
+  function open() {
+    if (seenRecently()) return;
+    root.setAttribute('aria-hidden', 'false');
+    root.classList.add('is-open');
+    document.body.classList.add('runwell-scratch-open');
+    // Init canvas on open so the foil is ready to scratch.
+    initCanvas();
+  }
+  function close() {
+    root.setAttribute('aria-hidden', 'true');
+    root.classList.remove('is-open');
+    document.body.classList.remove('runwell-scratch-open');
+    markSeen();
+  }
+
+  // ---------- Step navigation ----------
+  function showStep(name) {
+    root.querySelectorAll('[data-runwell-scratch-step]').forEach(function (el) {
+      el.hidden = (el.getAttribute('data-runwell-scratch-step') !== name);
+    });
+  }
+
+  // ---------- Trigger ----------
+  var triggered = false;
+  function maybeOpen() {
+    if (triggered) return;
+    triggered = true;
+    open();
+  }
+  if (triggerDelaySec > 0) {
+    setTimeout(maybeOpen, triggerDelaySec * 1000);
+  } else {
+    maybeOpen();
+  }
+  if (exitIntentEnabled) {
+    document.addEventListener('mouseout', function (e) {
+      if (e.relatedTarget === null && e.clientY <= 0) maybeOpen();
+    });
+    if (window.matchMedia('(max-width: 749px)').matches) {
+      setTimeout(maybeOpen, 30000);
+    }
+  }
+
+  // ---------- Close handlers ----------
+  root.querySelectorAll('[data-runwell-scratch-close]').forEach(function (el) {
+    el.addEventListener('click', close);
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && root.classList.contains('is-open')) close();
+  });
+
+  // ---------- Step 1: canvas scratch (visible immediately on open) ----------
+  var canvas = root.querySelector('[data-runwell-scratch-canvas]');
+  var ctx = null;
+  var canvasReady = false;
+  var isDrawing = false;
+  var threshold = thresholdPct / 100;
+  var checkTimer = null;
+  var scratchRevealed = false;
+
+  function initCanvas() {
+    if (canvasReady) return;
+    if (!canvas) { advanceToEmail(); return; }
+
+    // Set canvas pixel size to match its CSS size, accounting for DPR.
+    var rect = canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      // Modal may not have painted yet; retry once.
+      setTimeout(initCanvas, 100);
+      return;
+    }
+    var dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+    canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+
+    ctx = canvas.getContext('2d');
+    if (!ctx) { advanceToEmail(); return; }
+    ctx.scale(dpr, dpr);
+
+    // Foil color from CSS variable.
+    var foilColor = getComputedStyle(root).getPropertyValue('--runwell-scratch-foil').trim() || '#C8B89A';
+    ctx.fillStyle = foilColor;
+    ctx.fillRect(0, 0, rect.width, rect.height);
+
+    // Foil texture: subtle diagonal lines for a tactile look.
+    ctx.strokeStyle = 'rgba(0,0,0,0.07)';
+    ctx.lineWidth = 1;
+    for (var x = -rect.height; x < rect.width; x += 8) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x + rect.height, rect.height);
+      ctx.stroke();
+    }
+
+    // Pointer + touch event handlers.
+    canvas.addEventListener('pointerdown', startDraw);
+    canvas.addEventListener('pointermove', draw);
+    canvas.addEventListener('pointerup', endDraw);
+    canvas.addEventListener('pointerleave', endDraw);
+    canvas.addEventListener('pointercancel', endDraw);
+    canvasReady = true;
+  }
+
+  function getPointerPos(e) {
+    var rect = canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+
+  function startDraw(e) {
+    if (scratchRevealed) return;
+    e.preventDefault();
+    try { canvas.setPointerCapture(e.pointerId); } catch (err) {}
+    isDrawing = true;
+    var p = getPointerPos(e);
+    scratchAt(p.x, p.y, true);
+  }
+  function draw(e) {
+    if (!isDrawing || scratchRevealed) return;
+    e.preventDefault();
+    var p = getPointerPos(e);
+    scratchAt(p.x, p.y, false);
+  }
+  function endDraw(e) {
+    if (!isDrawing) return;
+    isDrawing = false;
+    try { canvas.releasePointerCapture(e.pointerId); } catch (err) {}
+  }
+
+  function scratchAt(x, y, isStart) {
+    if (!ctx) return;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.beginPath();
+    ctx.arc(x, y, 26, 0, Math.PI * 2);
+    ctx.fill();
+    if (!isStart) scheduleCheck();
+  }
+
+  function scheduleCheck() {
+    if (checkTimer) return;
+    checkTimer = setTimeout(function () {
+      checkTimer = null;
+      if (revealedFractionAboveThreshold()) revealAmount();
+    }, 250);
+  }
+
+  function revealedFractionAboveThreshold() {
+    if (!ctx || !canvas.width || !canvas.height) return false;
+    var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = img.data;
+    var sampleW = 40, sampleH = 30;
+    var step = Math.max(1, Math.floor(data.length / 4 / (sampleW * sampleH)));
+    var clear = 0, total = 0;
+    for (var i = 3; i < data.length; i += step * 4) {
+      total++;
+      if (data[i] === 0) clear++;
+    }
+    if (!total) return false;
+    return (clear / total) >= threshold;
+  }
+
+  // ---------- Scratch reveal -> animate to email step ----------
+  function revealAmount() {
+    if (scratchRevealed) return;
+    scratchRevealed = true;
+    var card = root.querySelector('.runwell-scratch__step--scratch .runwell-scratch__card');
+    if (card) card.classList.add('is-revealed');
+    setTimeout(advanceToEmail, 700);
+  }
+
+  function advanceToEmail() {
+    showStep('email');
+    // Focus the email field after step swap.
+    setTimeout(function () {
+      var inp = root.querySelector('[data-runwell-scratch-email]');
+      if (inp) inp.focus();
+    }, 200);
+  }
+
+  // Accessibility fallback: tap-to-reveal button bypasses scratch.
+  var a11yBtn = root.querySelector('[data-runwell-scratch-a11y-reveal]');
+  if (a11yBtn) a11yBtn.addEventListener('click', revealAmount);
+
+  // ---------- Step 2: email submit -> step 3 ----------
+  var emailInput = root.querySelector('[data-runwell-scratch-email]');
+  var emailSubmitBtn = root.querySelector('[data-runwell-scratch-email-submit]');
+  var tagsInput = root.querySelector('[data-runwell-scratch-tags]');
+
+  function submitEmail() {
+    var email = (emailInput.value || '').trim();
+    if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
+      emailInput.focus();
+      emailInput.classList.add('is-invalid');
+      setTimeout(function () { emailInput.classList.remove('is-invalid'); }, 1200);
+      return;
+    }
+
+    // Background subscribe to Shopify Customers with the scratch-popup tag.
+    try {
+      var formData = new FormData();
+      formData.append('form_type', 'customer');
+      formData.append('utf8', '✓');
+      formData.append('contact[tags]', (tagsInput && tagsInput.getAttribute('value')) || 'newsletter, scratch-popup');
+      formData.append('contact[email]', email);
+      var contactUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root ? window.Shopify.routes.root : '/') + 'contact';
+      fetch(contactUrl, {
+        method: 'POST',
+        body: formData,
+        headers: { 'Accept': 'application/json' },
+        credentials: 'same-origin'
+      }).catch(function () { /* non-fatal */ });
+    } catch (e) { /* ignore */ }
+
+    showCode();
+  }
+
+  if (emailSubmitBtn) {
+    emailSubmitBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      submitEmail();
+    });
+  }
+  if (emailInput) {
+    emailInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitEmail();
+      }
+    });
+  }
+
+  // ---------- Step 3: code revealed ----------
+  function showCode() {
+    if (!selectedTier) return;
+    var disp = root.querySelector('[data-runwell-scratch-code-display]');
+    if (disp) disp.textContent = selectedTier.code;
+
+    // Update Shop now CTA to auto-apply the discount via Shopify's
+    // /discount/CODE redirect, then carry the visitor to the configured URL.
+    var shopBtn = root.querySelector('[data-runwell-scratch-shop]');
+    if (shopBtn) {
+      var dest = shopBtn.getAttribute('href') || '/collections/all';
+      shopBtn.setAttribute('href', '/discount/' + selectedTier.code + '?redirect=' + encodeURIComponent(dest));
+    }
+
+    showStep('revealed');
+    markSeen();
+
+    // Auto-copy to clipboard.
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(selectedTier.code).catch(function () {});
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  // Copy button.
+  var copyBtn = root.querySelector('[data-runwell-scratch-copy]');
+  if (copyBtn) {
+    copyBtn.addEventListener('click', function () {
+      if (!selectedTier) return;
+      var text = selectedTier.code;
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).catch(function () {});
+      } else {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch (e) {}
+        document.body.removeChild(ta);
+      }
+      copyBtn.classList.add('is-copied');
+      copyBtn.textContent = 'Copied';
+    });
+  }
+})();