@funnelsgrove/cli 0.1.15 → 0.1.18

package/template_scaffold/src/steps/step-04.tsx

@@ -0,0 +1,673 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+} from 'react';
+import { FunnelStepHeader } from '@/components/step/FunnelStepHeader';
+import {
+  usePreviewStepLocalizedContent,
+  usePreviewVariableValues,
+  useFunnel,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import { getStepContentLocale } from '@/runtime/step-content-context';
+import { stepFourContent } from '@/steps/content/step-04.content';
+import { stepFourEditor } from '@/steps/editor/step-04.editor';
+
+export const stepFourId = 'step-4';
+const scratchThreshold = 0.34;
+const scratchBrushRadius = 18;
+const rewardRevealDelayMs = 520;
+
+type ScratchPoint = {
+  x: number;
+  y: number;
+};
+
+const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+const drawScratchOverlay = (
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+): void => {
+  const gradient = context.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, '#ffd460');
+  gradient.addColorStop(0.45, '#efbc41');
+  gradient.addColorStop(1, '#cb8b3e');
+  context.clearRect(0, 0, width, height);
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, width, height);
+
+  context.globalAlpha = 0.16;
+  for (let index = 0; index < 1200; index += 1) {
+    const x = Math.random() * width;
+    const y = Math.random() * height;
+    const size = 1 + Math.random() * 1.8;
+    context.fillStyle = index % 2 === 0 ? '#fff5b3' : '#b36f18';
+    context.fillRect(x, y, size, size);
+  }
+
+  context.globalAlpha = 0.12;
+  context.strokeStyle = '#fff7d3';
+  context.lineWidth = 1.5;
+  for (let index = 0; index < 10; index += 1) {
+    const y = ((index + 1) / 12) * height;
+    context.beginPath();
+    context.moveTo(18, y);
+    context.bezierCurveTo(width * 0.3, y - 8, width * 0.7, y + 8, width - 18, y);
+    context.stroke();
+  }
+
+  context.globalAlpha = 1;
+};
+
+const eraseScratch = (
+  context: CanvasRenderingContext2D,
+  fromPoint: ScratchPoint,
+  toPoint: ScratchPoint,
+  radius: number,
+): void => {
+  context.save();
+  context.globalCompositeOperation = 'destination-out';
+  context.strokeStyle = '#000000';
+  context.lineCap = 'round';
+  context.lineJoin = 'round';
+  context.lineWidth = radius * 2;
+  context.beginPath();
+  context.moveTo(fromPoint.x, fromPoint.y);
+  context.lineTo(toPoint.x, toPoint.y);
+  context.stroke();
+  context.restore();
+};
+
+const measureScratchProgress = (
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+): number => {
+  const imageData = context.getImageData(0, 0, width, height).data;
+  const sampleStride = Math.max(4, Math.floor(width / 24));
+  let transparentPixels = 0;
+  let sampledPixels = 0;
+
+  for (let y = 0; y < height; y += sampleStride) {
+    for (let x = 0; x < width; x += sampleStride) {
+      const alpha = imageData[(y * width + x) * 4 + 3];
+      sampledPixels += 1;
+      if (alpha < 32) {
+        transparentPixels += 1;
+      }
+    }
+  }
+
+  if (sampledPixels === 0) {
+    return 0;
+  }
+
+  return transparentPixels / sampledPixels;
+};
+
+export const stepFour: FunnelStepMeta = {
+  id: stepFourId,
+  name: 'scratchpad-entry',
+  type: 'progress_interstitial',
+  figmaNodeId: '7390-1456',
+  title: 'Scratchcard Entry',
+  description: 'Scratch-to-reveal discount step before the canonical paywall.',
+  actionBar: {
+    hidden: true,
+  },
+};
+
+export function StepFour() {
+  const { attributes, goNext } = useFunnel();
+  const variableValues = {};
+  usePreviewVariableValues(stepFourId, variableValues);
+  const content = usePreviewStepLocalizedContent(
+    stepFourId,
+    stepFourContent,
+    getStepContentLocale(attributes),
+    {
+      editorSections: stepFourEditor,
+      variableValues,
+    },
+  );
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const measurementFrameRef = useRef<number | null>(null);
+  const rewardTimeoutRef = useRef<number | null>(null);
+  const pointerActiveRef = useRef(false);
+  const lastPointRef = useRef<ScratchPoint | null>(null);
+  const [scratchProgress, setScratchProgress] = useState(0);
+  const [scratchComplete, setScratchComplete] = useState(false);
+  const [rewardVisible, setRewardVisible] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width * devicePixelRatio));
+    const height = Math.max(1, Math.round(rect.height * devicePixelRatio));
+
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return;
+    }
+
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.scale(devicePixelRatio, devicePixelRatio);
+    drawScratchOverlay(context, rect.width, rect.height);
+    pointerActiveRef.current = false;
+    lastPointRef.current = null;
+
+    return () => {
+      if (measurementFrameRef.current !== null) {
+        window.cancelAnimationFrame(measurementFrameRef.current);
+        measurementFrameRef.current = null;
+      }
+      if (rewardTimeoutRef.current !== null) {
+        window.clearTimeout(rewardTimeoutRef.current);
+        rewardTimeoutRef.current = null;
+      }
+    };
+  }, [content.ticket.code, content.ticket.offerLabel]);
+
+  useEffect(() => {
+    if (!scratchComplete || rewardVisible) {
+      return;
+    }
+
+    rewardTimeoutRef.current = window.setTimeout(() => {
+      setRewardVisible(true);
+      rewardTimeoutRef.current = null;
+    }, rewardRevealDelayMs);
+
+    return () => {
+      if (rewardTimeoutRef.current !== null) {
+        window.clearTimeout(rewardTimeoutRef.current);
+        rewardTimeoutRef.current = null;
+      }
+    };
+  }, [rewardVisible, scratchComplete]);
+
+  const queueProgressMeasurement = (): void => {
+    if (measurementFrameRef.current !== null) {
+      return;
+    }
+
+    measurementFrameRef.current = window.requestAnimationFrame(() => {
+      measurementFrameRef.current = null;
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return;
+      }
+
+      const nextProgress = measureScratchProgress(context, canvas.width, canvas.height);
+      setScratchProgress(nextProgress);
+      if (nextProgress >= scratchThreshold) {
+        setScratchComplete(true);
+      }
+    });
+  };
+
+  const getPointFromEvent = (
+    event: ReactPointerEvent<HTMLDivElement>,
+  ): { point: ScratchPoint; context: CanvasRenderingContext2D } | null => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return null;
+    }
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return null;
+    }
+
+    const rect = canvas.getBoundingClientRect();
+    const point = {
+      x: clamp(event.clientX - rect.left, 0, rect.width),
+      y: clamp(event.clientY - rect.top, 0, rect.height),
+    };
+
+    return { point, context };
+  };
+
+  const handleReveal = (): void => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = canvas.getContext('2d');
+      if (context) {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+
+    setScratchProgress(1);
+    setScratchComplete(true);
+  };
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    if (scratchComplete) {
+      return;
+    }
+
+    const scratchState = getPointFromEvent(event);
+    if (!scratchState) {
+      return;
+    }
+
+    event.currentTarget.setPointerCapture(event.pointerId);
+    pointerActiveRef.current = true;
+    lastPointRef.current = scratchState.point;
+    eraseScratch(
+      scratchState.context,
+      scratchState.point,
+      scratchState.point,
+      scratchBrushRadius,
+    );
+    queueProgressMeasurement();
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    if (!pointerActiveRef.current || scratchComplete) {
+      return;
+    }
+
+    const scratchState = getPointFromEvent(event);
+    if (!scratchState) {
+      return;
+    }
+
+    eraseScratch(
+      scratchState.context,
+      lastPointRef.current ?? scratchState.point,
+      scratchState.point,
+      scratchBrushRadius,
+    );
+    lastPointRef.current = scratchState.point;
+    queueProgressMeasurement();
+  };
+
+  const endScratch = (): void => {
+    pointerActiveRef.current = false;
+    lastPointRef.current = null;
+  };
+
+  const handleTicketKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+
+    event.preventDefault();
+    handleReveal();
+  };
+
+  return (
+    <>
+      <section className='scratchpad-step' data-node-id='7390:1456'>
+        <div className='scratchpad-shell'>
+          {rewardVisible ? (
+            <article className='scratchpad-reward-card' data-node-id='6992:6168'>
+              <div className='scratchpad-reward-copy'>
+                <p className='scratchpad-reward-kicker'>{content.reward.kicker}</p>
+                <p className='scratchpad-reward-description'>{content.reward.description}</p>
+                <p className='scratchpad-reward-offer'>{content.reward.offerLabel}</p>
+                <p className='scratchpad-reward-applied'>{content.reward.appliedLabel}</p>
+              </div>
+              <button
+                type='button'
+                className='scratchpad-reward-cta'
+                onClick={() => goNext()}
+              >
+                {content.reward.ctaLabel}
+              </button>
+            </article>
+          ) : (
+            <article className='scratchpad-card-panel'>
+              <FunnelStepHeader
+                className='scratchpad-header'
+                titleClassName='scratchpad-title'
+                subtitleClassName='scratchpad-description'
+                title={
+                  <>
+                    {content.header.title[0]}
+                    <br />
+                    {content.header.title[1]}
+                  </>
+                }
+                subtitle={
+                  <div className='scratchpad-description-group'>
+                    {content.header.description.map((line) => (
+                      <p key={line} className='scratchpad-description-line'>
+                        {line}
+                      </p>
+                    ))}
+                  </div>
+                }
+                subtitleAs='div'
+              />
+
+              <div className='scratchpad-ticket-block'>
+                <p className='scratchpad-instruction'>{content.header.instructionLabel}</p>
+                <div
+                  className={scratchComplete ? 'scratchpad-ticket is-revealed' : 'scratchpad-ticket'}
+                  data-node-id='7390:1455'
+                  role='button'
+                  tabIndex={0}
+                  onKeyDown={handleTicketKeyDown}
+                  onPointerDown={handlePointerDown}
+                  onPointerMove={handlePointerMove}
+                  onPointerUp={endScratch}
+                  onPointerLeave={endScratch}
+                  onPointerCancel={endScratch}
+                  aria-label={content.header.scratchAriaLabel}
+                >
+                  <div className='scratchpad-ticket-face'>
+                    <p className='scratchpad-ticket-offer'>{content.ticket.offerLabel}</p>
+                    <div className='scratchpad-ticket-code'>{content.ticket.code}</div>
+                  </div>
+                  <canvas
+                    ref={canvasRef}
+                    className={scratchComplete ? 'scratchpad-overlay is-hidden' : 'scratchpad-overlay'}
+                  />
+                  {!scratchComplete ? (
+                    <div className='scratchpad-overlay-icon' aria-hidden>
+                      〰︎
+                    </div>
+                  ) : null}
+                  <span className='scratchpad-ticket-notch scratchpad-ticket-notch--left' aria-hidden />
+                  <span className='scratchpad-ticket-notch scratchpad-ticket-notch--right' aria-hidden />
+                </div>
+                {!scratchComplete ? (
+                  <button
+                    type='button'
+                    className='scratchpad-reveal-button'
+                    onClick={handleReveal}
+                  >
+                    Reveal instantly
+                  </button>
+                ) : null}
+                <p className='scratchpad-progress-copy'>
+                  {scratchComplete
+                    ? 'Discount unlocked'
+                    : `${Math.round(scratchProgress * 100)}% revealed`}
+                </p>
+              </div>
+            </article>
+          )}
+        </div>
+      </section>
+
+      {stepFourStyles ? <style>{stepFourStyles}</style> : null}
+    </>
+  );
+}
+
+const stepFourStyles = `
+.scratchpad-step {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.2) 36%, transparent 58%),
+    linear-gradient(180deg, #f6f8fb 0%, #edf2f8 100%);
+  padding: calc(env(safe-area-inset-top, 0px) + 48px) var(--padding) 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scratchpad-shell {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.scratchpad-card-panel,
+.scratchpad-reward-card {
+  width: min(100%, 382px);
+  border-radius: 20px;
+  background: var(--color-surface);
+  box-shadow: 0 20px 44px rgba(31, 41, 51, 0.14);
+  padding: 16px 24px 24px;
+}
+
+.scratchpad-header {
+  text-align: center;
+}
+
+.scratchpad-title {
+  margin: 0;
+  color: #1b1557;
+  font-size: 24px;
+  line-height: 1.35;
+  font-weight: 800;
+}
+
+.scratchpad-description {
+  margin: 0;
+}
+
+.scratchpad-description-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.scratchpad-description-line {
+  margin: 0;
+  color: #262729;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.scratchpad-ticket-block {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.scratchpad-instruction {
+  margin: 0;
+  color: #1b1557;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-transform: uppercase;
+}
+
+.scratchpad-ticket {
+  position: relative;
+  border-radius: 16px;
+  width: 160px;
+  height: 160px;
+  cursor: pointer;
+  outline: none;
+  isolation: isolate;
+}
+
+.scratchpad-ticket:focus-visible {
+  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.24);
+}
+
+.scratchpad-ticket-face {
+  position: absolute;
+  inset: 0;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffd15f 0%, #cf8f45 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px rgba(86, 51, 12, 0.24);
+}
+
+.scratchpad-ticket-offer {
+  margin: 0;
+  color: #56330c;
+  font-size: 24px;
+  line-height: 1.35;
+  font-weight: 800;
+}
+
+.scratchpad-ticket-code {
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.94);
+  color: #56330c;
+  font-size: 11px;
+  line-height: 1.35;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 7px 10px;
+}
+
+.scratchpad-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  transition: opacity 180ms ease;
+}
+
+.scratchpad-overlay.is-hidden {
+  opacity: 0;
+}
+
+.scratchpad-overlay-icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 245, 211, 0.84);
+  font-size: 44px;
+  transform: rotate(-12deg);
+  pointer-events: none;
+}
+
+.scratchpad-ticket-notch {
+  position: absolute;
+  top: 50%;
+  width: 28px;
+  height: 28px;
+  margin-top: -14px;
+  border-radius: 999px;
+  background: var(--color-surface);
+  box-shadow: inset 0 0 0 1px rgba(31, 41, 51, 0.04);
+}
+
+.scratchpad-ticket-notch--left {
+  left: -14px;
+}
+
+.scratchpad-ticket-notch--right {
+  right: -14px;
+}
+
+.scratchpad-reveal-button {
+  border: none;
+  background: transparent;
+  color: #3f51b5;
+  font-size: 13px;
+  line-height: 1.35;
+  font-weight: 700;
+  padding: 0;
+}
+
+.scratchpad-progress-copy {
+  margin: 0;
+  color: #5b647a;
+  font-size: 12px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.scratchpad-reward-card {
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.scratchpad-reward-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.scratchpad-reward-kicker {
+  margin: 0;
+  color: #1b1557;
+  font-size: 28px;
+  line-height: 1.35;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.scratchpad-reward-description {
+  margin: 0;
+  color: #262729;
+  font-size: 16px;
+  line-height: 1.35;
+}
+
+.scratchpad-reward-offer {
+  margin: 0;
+  color: #1b1557;
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.scratchpad-reward-applied {
+  margin: 0;
+  color: #262729;
+  font-size: 15px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.scratchpad-reward-cta {
+  border: none;
+  border-radius: 16px;
+  background: #3f51b5;
+  color: #ffffff;
+  font-size: 16px;
+  line-height: 1.35;
+  font-weight: 700;
+  padding: 18px 24px;
+}
+
+@media (hover: hover) {
+  .scratchpad-reveal-button:hover,
+  .scratchpad-reward-cta:hover {
+    opacity: 0.92;
+  }
+}
+
+@media (max-width: 430px) {
+  .scratchpad-card-panel,
+  .scratchpad-reward-card {
+    width: 100%;
+  }
+}
+`;

package/template_scaffold/src/steps/step-31-email-capture.test.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+describe('email capture workflow ownership', () => {
+  it('only validates UI state and calls the shared context helper', () => {
+    const source = readFileSync(new URL('./step-31-email-capture.tsx', import.meta.url), 'utf8');
+
+    expect(source).toContain('submitEmailCapture } = useFunnel();');
+    expect(source).toContain('await submitEmailCapture(email);');
+    expect(source.match(/submitEmailCapture\(email\)/g)).toHaveLength(1);
+
+    expect(source).not.toContain('apiService');
+    expect(source).not.toContain('publicAnalyticsSdk');
+    expect(source).not.toContain('trackLead');
+    expect(source).not.toContain('trackEmailCaptured');
+    expect(source).not.toContain('metaPixel');
+    expect(source).not.toContain('googleTag');
+    expect(source).not.toContain('stepPaywallId');
+    expect(source).not.toContain('goToStep');
+    expect(source).not.toContain('/sdk/public/users/email-capture');
+  });
+});