DS5 — Pricing (Desk-as-hero) + Motion + Empty/Error + archetype glyphs
Part 6 #8 — Desk $44.99 is the hero tier. New DeskShowcase leads the pricing page with the "$1M terminal · $44.99" story + real feature visuals (alt-line ladder, quarter-Kelly, parlay φ, real-time feed) in a balanced two-column layout (kills the dead right-half). Desk is the sole highlighted tier / single primary CTA (color contract #9); Analyst is secondary. Real prices: Free 5 scans, Analyst $14.99/$19.99, Desk $34.99/$44.99. ClaimMeter + Stripe checkout wiring untouched. Part 4 #7 — Ticker → punctuated stillness. The continuous marquee is retired; the ticker now RESTS ≥4s on each ranked item and pulses only on change. The EKG heartbeat is a static readout — the header's ONE idle proof-of-life is the single SIGNAL-LIVE live-dot (the ticker dropped its competing pulse). All durations tokenized (--motion-*, --ticker-hold); prefers-reduced-motion kills the motion entirely. Part 8 #20 — new EmptyState component modeled on the north-star 404 (scanlines + glitch wordmark + amber system voice + CTA hierarchy), reused at the bare-red "Team not found", "Game not found", and the ledger empties — one unified voice. Part 5 — archetype glyph+chip propagated to STREAKS rows + ledger rows (optional + self-hiding; absent beats fabricated); grade reveal already carries ArchetypeBlend. Tests: new tests/unit/ds5PricingStates.test.js (22) locks all four workstreams; updated teamHubUI + vyndrDesignSystem for the new surfaces. 237 suites / 2864 tests green; next build exit 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
// DS5 (Design v2) — Pricing (Desk-as-hero) + Motion (ticker → punctuated
|
||||
// stillness) + Empty/Error unification (the 404 bar) + archetype propagation.
|
||||
// Source-grep locks (plain-JS Jest, no TS transform) — same pattern as
|
||||
// vyndrParityQA / ds4Billboards. Every assertion targets a DS5 artifact that
|
||||
// did NOT exist on the base commit, so the suite fails before and passes after.
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const ROOT = path.join(__dirname, '..', '..');
|
||||
const WEB = path.join(ROOT, 'web', 'src');
|
||||
const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8');
|
||||
const readCss = () => fs.readFileSync(path.join(WEB, 'app', 'globals.css'), 'utf8');
|
||||
|
||||
// Extract a single TIERS object block by its id.
|
||||
function tierBlock(src, id) {
|
||||
const m = src.match(new RegExp(`id: '${id}'[\\s\\S]*?highlight: (true|false)`));
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
// ── 1. Desk $44.99 is the HERO tier (#8, Part 6) ──────────────────────────
|
||||
describe('Pricing — Desk is the hero, real prices, single primary CTA', () => {
|
||||
const pricing = read('components/Pricing.tsx');
|
||||
const showcase = read('app/pricing/DeskShowcase.tsx');
|
||||
const page = read('app/pricing/page.tsx');
|
||||
|
||||
test('Desk is highlighted (the hero); Analyst is NOT (no two competing green CTAs, #9)', () => {
|
||||
expect(tierBlock(pricing, 'desk')).toBe('true');
|
||||
expect(tierBlock(pricing, 'analyst')).toBe('false');
|
||||
});
|
||||
|
||||
test('Desk CTA is at least as strong as Analyst — Desk drives the primary button', () => {
|
||||
// highlight:true → btn-primary (the strong CTA); highlight:false → btn-ghost.
|
||||
expect(pricing).toContain("className={tier.highlight ? 'btn-primary' : 'btn-ghost'}");
|
||||
// Desk is the highlighted tier, so it owns the primary; Analyst is secondary.
|
||||
expect(tierBlock(pricing, 'desk')).toBe('true');
|
||||
});
|
||||
|
||||
test('real prices only — Desk $34.99 founder / $44.99 regular, Analyst $14.99/$19.99, Free 5 scans', () => {
|
||||
expect(pricing).toMatch(/id: 'desk'[\s\S]*?price: '\$34\.99'/);
|
||||
expect(pricing).toMatch(/id: 'desk'[\s\S]*?originalPrice: '\$44\.99'/);
|
||||
expect(pricing).toMatch(/id: 'analyst'[\s\S]*?price: '\$14\.99'/);
|
||||
expect(pricing).toMatch(/id: 'analyst'[\s\S]*?originalPrice: '\$19\.99'/);
|
||||
expect(pricing).toContain('5 scans to try the model');
|
||||
// no fabricated legacy price
|
||||
expect(pricing).not.toContain("originalPrice: '$24.99'");
|
||||
expect(pricing).not.toContain("originalPrice: '$49.99'");
|
||||
});
|
||||
|
||||
test('the "$1M terminal · $44.99" story leads, above the grid, with a real feature ladder', () => {
|
||||
expect(page).toContain('import DeskShowcase');
|
||||
expect(page).toContain('<DeskShowcase');
|
||||
expect(showcase).toContain('$1M terminal');
|
||||
expect(showcase).toContain('$44.99'); // the conversion hook figure
|
||||
expect(showcase).toContain('$34.99'); // the founder price
|
||||
// real feature visuals fill the right half (kills the dead half, #8)
|
||||
expect(showcase).toContain('ALT LINE LADDER');
|
||||
expect(showcase).toContain('QUARTER-KELLY');
|
||||
// the primary CTA scrolls to the grid where the real checkout lives
|
||||
expect(showcase).toContain('href="#pricing"');
|
||||
expect(showcase).toContain('btn-primary');
|
||||
});
|
||||
|
||||
test('Stripe checkout wiring is untouched (checkoutUrl + POST /api/checkout)', () => {
|
||||
expect(require('../../web/src/lib/checkout').checkoutUrl('desk')).toBe('/api/checkout?tier=desk');
|
||||
expect(pricing).toContain("fetch('/api/checkout'");
|
||||
});
|
||||
});
|
||||
|
||||
// ── 2. Ticker → punctuated stillness (#7, Part 4) ─────────────────────────
|
||||
describe('Ticker + header motion — mostly still, meaningful pulses', () => {
|
||||
const ticker = read('components/vyndr/Ticker.tsx');
|
||||
const css = readCss();
|
||||
|
||||
test('motion is tokenized — no one-off durations (--ticker-hold + --motion-*)', () => {
|
||||
expect(css).toMatch(/--ticker-hold:\s*\d+ms/);
|
||||
expect(css).toContain('--motion-transition:');
|
||||
expect(css).toContain('--motion-data:');
|
||||
expect(css).toContain('--motion-idle:');
|
||||
});
|
||||
|
||||
test('the ticker RESTS ≥4s on each item (hold token + JS constant both ≥4000ms, in sync)', () => {
|
||||
const holdMs = Number((css.match(/--ticker-hold:\s*(\d+)ms/) || [])[1]);
|
||||
const jsMs = Number((ticker.match(/TICKER_HOLD_MS\s*=\s*(\d+)/) || [])[1]);
|
||||
expect(holdMs).toBeGreaterThanOrEqual(4000);
|
||||
expect(jsMs).toBeGreaterThanOrEqual(4000);
|
||||
expect(jsMs).toBe(holdMs);
|
||||
});
|
||||
|
||||
test('the continuous marquee is retired — the ticker no longer scrolls forever', () => {
|
||||
// The resting strip is static; the old infinite .ticker-track marquee is gone
|
||||
// from the component (constant motion reads cheap — Part 0 law #1).
|
||||
expect(ticker).not.toContain('ticker-track');
|
||||
expect(ticker).toContain('ticker-rest');
|
||||
});
|
||||
|
||||
test('ONE animated element in the header zone — the ticker no longer renders a competing live-dot', () => {
|
||||
// The single idle proof-of-life is the heartbeat live-dot; the ticker drops
|
||||
// its own pulsing dot so the header is not ticker + heartbeat + counter.
|
||||
expect(ticker).not.toMatch(/className="[^"]*\blive-dot\b/);
|
||||
const live = read('components/vyndr/LiveLayer.tsx');
|
||||
expect((live.match(/live-dot/g) || []).length).toBe(1);
|
||||
});
|
||||
|
||||
test('the EKG heartbeat is a STATIC readout (no idle scroll animation)', () => {
|
||||
// .ekg-track keeps its class (vyndrSystems locks the string) but no longer
|
||||
// carries an infinite scroll — proof-of-life is the one live-dot.
|
||||
expect(/\.ekg-track\s*\{[^}]*animation/.test(css)).toBe(false);
|
||||
expect(read('components/vyndr/LiveLayer.tsx')).toContain('ekg-track');
|
||||
});
|
||||
|
||||
test('prefers-reduced-motion kills the motion entirely', () => {
|
||||
expect(ticker).toContain('prefers-reduced-motion');
|
||||
// new ticker motion classes are in the global reduced-motion kill list
|
||||
expect(css).toMatch(/prefers-reduced-motion[\s\S]*?\.ticker-item-enter/);
|
||||
expect(css).toMatch(/prefers-reduced-motion[\s\S]*?\.ticker-pulse/);
|
||||
});
|
||||
|
||||
test('the polling contract is preserved (tickerLive lock stays green)', () => {
|
||||
expect(ticker).toContain("fetch('/api/ticker'");
|
||||
expect(ticker).toContain('pollMs = 30_000');
|
||||
expect(ticker).toContain('feed && feed.length > 0 ? feed : items');
|
||||
});
|
||||
});
|
||||
|
||||
// ── 3. Unify empty/error to the 404 bar (#20, Part 8) ─────────────────────
|
||||
describe('EmptyState — one designed empty/error system, modeled on the 404', () => {
|
||||
const es = read('components/vyndr/EmptyState.tsx');
|
||||
|
||||
test('carries the 404 north-star grammar (scanlines + glitch wordmark + amber system voice)', () => {
|
||||
expect(es).toContain('scanlines');
|
||||
expect(es).toContain('crt-sweep');
|
||||
expect(es).toContain('amber-glow');
|
||||
expect(es).toContain('Wordmark');
|
||||
});
|
||||
|
||||
test('CTA hierarchy — at most one primary (color contract #9)', () => {
|
||||
expect(es).toContain('primary');
|
||||
expect(es).toContain("a.primary ? 'btn-primary' : 'btn-ghost'");
|
||||
});
|
||||
|
||||
test('reused at the "Team not found" offender — no bare-red line', () => {
|
||||
const hub = read('app/team/[abbr]/TeamHub.tsx');
|
||||
expect(hub).toContain('<EmptyState');
|
||||
expect(hub).toContain('code="TEAM NOT FOUND"');
|
||||
// the bare-red string is gone
|
||||
expect(hub).not.toContain('Team not found.');
|
||||
});
|
||||
|
||||
test('reused at the "Game not found" offender', () => {
|
||||
const game = read('app/game/[id]/page.tsx');
|
||||
expect(game).toContain('<EmptyState');
|
||||
expect(game).toContain('code="GAME NOT FOUND"');
|
||||
});
|
||||
|
||||
test('reused for the ledger empty states (one voice, not a bespoke box)', () => {
|
||||
const ledger = read('app/ledger/page.tsx');
|
||||
expect(ledger).toContain('<EmptyState');
|
||||
// the old bespoke "surface diagonal-cut tex-scan" empty box is replaced
|
||||
expect(ledger).not.toContain('LEDGER EMPTY</p>');
|
||||
});
|
||||
|
||||
test('EmptyState is exported from the vyndr barrel (one component, everywhere)', () => {
|
||||
expect(read('components/vyndr/index.ts')).toContain("export { default as EmptyState }");
|
||||
});
|
||||
});
|
||||
|
||||
// ── 4. Propagate archetype glyphs everywhere (Part 5) ─────────────────────
|
||||
describe('Archetype glyph+chip — the ONE component, propagated', () => {
|
||||
test('the grade reveal renders the archetype (glyph+chip via ArchetypeBlend)', () => {
|
||||
const card = read('components/vyndr/GradeResultCard.tsx');
|
||||
expect(card).toContain('ArchetypeBlend');
|
||||
expect(card).toContain('<ArchetypeBlend');
|
||||
});
|
||||
|
||||
test('STREAKS rows render the archetype badge (was plain text) — self-hiding', () => {
|
||||
const panel = read('components/StreaksPanel.tsx');
|
||||
expect(panel).toContain("import ArchetypeBadge");
|
||||
expect(panel).toContain('<ArchetypeBadge');
|
||||
expect(panel).toContain('s.archetype &&'); // optional + self-hiding
|
||||
});
|
||||
|
||||
test('the ledger rows render the archetype badge (was plain text) — self-hiding', () => {
|
||||
const ledger = read('app/ledger/page.tsx');
|
||||
expect(ledger).toContain('ArchetypeBadge');
|
||||
expect(ledger).toContain('<ArchetypeBadge');
|
||||
expect(ledger).toContain('row.archetype &&');
|
||||
});
|
||||
|
||||
test('the badge shows its one-line meaning where it leads (showDesc)', () => {
|
||||
expect(read('components/StreaksPanel.tsx')).toContain('showDesc');
|
||||
expect(read('app/ledger/page.tsx')).toContain('showDesc');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user