@funnelsgrove/cli 0.1.87 → 0.1.89

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

@@ -1,673 +0,0 @@
-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-32b-paywall-b.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { StepPaywall, stepPaywall } from './step-32-paywall';
-import type { FunnelStepMeta } from '@funnelsgrove/runtime';
-
-export const stepPaywallBId = 'paywall-b';
-
-export const stepPaywallB: FunnelStepMeta = {
-  ...stepPaywall,
-  id: stepPaywallBId,
-  name: 'paywall-b',
-  type: 'paywall_offer',
-  title: 'Paywall B',
-  description: 'Duplicate ClaimBee paywall variant for A/B testing.',
-};
-
-export function StepPaywallB() {
-  useEffect(() => {
-    document.documentElement.dataset.paywallVariant = 'b';
-
-    return () => {
-      if (document.documentElement.dataset.paywallVariant === 'b') {
-        delete document.documentElement.dataset.paywallVariant;
-      }
-    };
-  }, []);
-
-  return (
-    <StepPaywall
-      analyticsStepId={stepPaywallBId}
-      analyticsStepName={stepPaywallB.name || stepPaywallB.title}
-    />
-  );
-}