@funnelsgrove/cli 0.1.15 → 0.1.18

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

@@ -0,0 +1,262 @@
+import { useEffect } from 'react';
+import { FunnelStepImage } from '@/components/FunnelStepImage';
+import {
+  usePreviewStepLocalizedContent,
+  useFunnel,
+  type FunnelStepMeta,
+} from '@funnelsgrove/runtime';
+import bee from '@/assets/claimbee/bee.png';
+import glow from '@/assets/claimbee/glow.svg';
+import stepsSpriteAlt from '@/assets/claimbee/steps-sprite-alt.png';
+import { getStepContentLocale } from '@/runtime/step-content-context';
+import { stepThreeContent } from '@/steps/content/step-03.content';
+
+export const stepThreeId = 'step-3';
+const STEP_THREE_AUTO_ADVANCE_MS = 2200;
+
+export const resolveStepThreeAutoAdvanceMs = (isBuilder: boolean): number | null => {
+  return isBuilder ? null : STEP_THREE_AUTO_ADVANCE_MS;
+};
+
+export const stepThree: FunnelStepMeta = {
+  id: stepThreeId,
+  name: 'step-3',
+  type: 'progress_interstitial',
+  figmaNodeId: 'template-03-processing',
+  title: 'Step 3',
+  description: 'Animated processing step before decision.',
+  actionBar: {
+    hidden: true,
+  },
+};
+
+export function StepThree() {
+  const { attributes, goNext, isBuilder } = useFunnel();
+  const content = usePreviewStepLocalizedContent(
+    stepThreeId,
+    stepThreeContent,
+    getStepContentLocale(attributes),
+  );
+  const autoAdvanceMs = resolveStepThreeAutoAdvanceMs(isBuilder);
+
+  useEffect(() => {
+    if (!autoAdvanceMs) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      goNext();
+    }, autoAdvanceMs);
+
+    return () => window.clearTimeout(timer);
+  }, [autoAdvanceMs, goNext]);
+
+  return (
+    <>
+      <section className="owners-step" data-node-id="template:03-processing">
+        <div className="owners-copy-wrap">
+          <p className="owners-kicker">{content.kicker}</p>
+          <h2 className="owners-title">
+            {content.title[0]}
+            <br />
+            <span className="is-accent">{content.title[1]}</span>
+          </h2>
+          <p className="owners-copy">{content.description}</p>
+        </div>
+
+        <div className="owners-artwork" aria-hidden>
+          <FunnelStepImage
+            src={content.artwork.sprite.src || stepsSpriteAlt.src}
+            alt={content.artwork.sprite.alt || ''}
+            width={1364}
+            height={909}
+            className="owners-sprite"
+            draggable={false}
+          />
+          <FunnelStepImage
+            src={content.artwork.glow.src || glow.src}
+            alt={content.artwork.glow.alt || ''}
+            width={122}
+            height={116}
+            className="owners-glow"
+            draggable={false}
+          />
+          <FunnelStepImage
+            src={content.artwork.bee.src || bee.src}
+            alt={content.artwork.bee.alt || ''}
+            width={88}
+            height={88}
+            className="owners-bee"
+            draggable={false}
+          />
+        </div>
+
+        <div className="owners-status" role="status" aria-live="polite">
+          <p className="owners-status-label">{content.progressLabel}</p>
+          <div className="owners-progress-track">
+            <span
+              className="owners-progress-fill"
+              style={{ animationDuration: `${STEP_THREE_AUTO_ADVANCE_MS}ms` }}
+            />
+          </div>
+        </div>
+      </section>
+
+      {stepThreeStyles ? <style>{stepThreeStyles}</style> : null}
+    </>
+  );
+}
+
+const stepThreeStyles = `
+.owners-step {
+  min-height: 100%;
+  background: var(--color-bg-success);
+  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--padding) 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow: hidden;
+}
+
+.owners-copy-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.owners-kicker {
+  margin: 0;
+  color: var(--color-accent);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.owners-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 34px;
+  line-height: 1.12;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.owners-title .is-accent {
+  color: var(--color-button);
+}
+
+.owners-copy {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 17px;
+  line-height: 1.44;
+  font-weight: 500;
+}
+
+.owners-artwork {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  margin-top: 4px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgba(77, 181, 63, 0.06), rgba(63, 81, 181, 0.08));
+  overflow: hidden;
+}
+
+.owners-sprite {
+  position: absolute;
+  left: -520px;
+  top: -250px;
+  width: 1364px;
+  height: 909px;
+  max-width: none;
+}
+
+.owners-glow {
+  position: absolute;
+  left: 50%;
+  top: 52%;
+  width: 122px;
+  height: 116px;
+  transform: translate(-50%, -50%);
+}
+
+.owners-bee {
+  position: absolute;
+  left: 50%;
+  top: 52%;
+  width: 88px;
+  height: 88px;
+  transform: translate(-50%, -50%);
+}
+
+.owners-status {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.84);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.owners-status-label {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 14px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.owners-progress-track {
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(63, 81, 181, 0.16);
+  overflow: hidden;
+}
+
+.owners-progress-fill {
+  display: block;
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #4db53f, #3f51b5);
+  animation-name: ownersProgress;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  animation-duration: 2200ms;
+}
+
+@keyframes ownersProgress {
+  0% {
+    width: 0%;
+    opacity: 0.88;
+  }
+
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}
+
+@media (max-width: 430px) {
+  .owners-step {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .owners-title {
+    font-size: 30px;
+  }
+
+  .owners-copy {
+    font-size: 16px;
+  }
+
+  .owners-artwork {
+    height: 284px;
+  }
+}
+`;

package/template_scaffold/src/steps/step-04.test.ts

@@ -0,0 +1,32 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { stepFourContent } from '@/steps/content/step-04.content';
+
+describe('StepFour scratchpad', () => {
+  it('stores scratchpad and reward copy as structured editable content', () => {
+    expect(stepFourContent.locales.en.header.title).toEqual([
+      'Scratch & Unlock',
+      'Your Claim Advantage',
+    ]);
+    expect(stepFourContent.locales.en.ticket.offerLabel).toBe('50% OFF');
+    expect(stepFourContent.locales.en.reward.ctaLabel).toBe('Claim Discount →');
+  });
+
+  it('reveals the scratch ticket before advancing through the manifest edge', () => {
+    const stepSource = readFileSync(path.resolve(__dirname, './step-04.tsx'), 'utf8');
+
+    expect(stepSource).toContain("data-node-id='7390:1456'");
+    expect(stepSource).toContain("data-node-id='6992:6168'");
+    expect(stepSource).toContain('scratchThreshold');
+    expect(stepSource).not.toContain("from '@funnelsgrove/analytics'");
+    expect(stepSource).not.toContain('publicAnalyticsSdk');
+    expect(stepSource).not.toContain('trackFunnelCompleted');
+    expect(stepSource).not.toContain('trackRegistrationCompleted');
+    expect(stepSource).not.toContain('.flush()');
+    // Manifest edges own routing (step-4 -> email-capture -> paywall);
+    // the CTA must not hardcode a jump past email capture.
+    expect(stepSource).toContain('goNext()');
+    expect(stepSource).not.toContain('goToStep(stepPaywallId)');
+  });
+});