// Carimbou brand components // - CarimbouLogo: recreates the square-rounded-badge mark with dashed border + serif C // - LoyaltyCard: full vertical web card (mobile), theme-aware // - WalletPass: vertical wallet-style pass (flat, gradient strip, generic — not mimicking // any specific branded wallet) // - CarimbouWordmark: text treatment function CarimbouLogo({ size = 56, color = '#2D8A6B', dark = '#1F6A51', cream = '#E8F4EB' }) { return ( {/* drop-shadow base (darker green) */} {/* front plate */} {/* dashed inner border */} {/* corner dots */} {/* serif C */} C ); } function CarimbouWordmark({ color = '#1A2E28', size = 22 }) { return ( Carimbou ); } // ───────────────────────────────────────────────────────────── // Business themes (demo businesses) // ───────────────────────────────────────────────────────────── const BUSINESSES = { tapioca: { id: 'tapioca', name: 'Estação Tapioca', tagline: 'Excelência e tradição · desde 2000', instagram: '@estacaotapiocarj', phone: '(21) 97704-6932', icon: 'tapioca', stampColor: '#B5442A', cardBg: '#2B1810', cardAccent: '#E87D3E', cardText: '#F5EFE4', reward: 'Uma tapioca grátis', script: 'Tapioca', }, padaria: { id: 'padaria', name: 'Padaria do Bairro', tagline: 'Pão fresquinho todo dia', instagram: '@padariadobairro', phone: '(21) 98123-4567', icon: 'bread', stampColor: '#7A3F1E', cardBg: '#F5E6CE', cardAccent: '#C9782F', cardText: '#3A2816', reward: 'Um pão doce grátis', script: 'Padaria', }, esmalte: { id: 'esmalte', name: 'Studio Belli Unhas', tagline: 'Esmaltação, spa dos pés, nail art', instagram: '@studiobelli', phone: '(21) 99811-0022', icon: 'nail', stampColor: '#C2185B', cardBg: '#F9E8EF', cardAccent: '#D8467A', cardText: '#3C1A2A', reward: 'Uma esmaltação grátis', script: 'Belli', }, cabelo: { id: 'cabelo', name: 'Studio Raízes', tagline: 'Corte, barba & escova', instagram: '@studioraizes', phone: '(21) 98455-7788', icon: 'scissors', stampColor: '#1F4A5F', cardBg: '#103240', cardAccent: '#7BC5D9', cardText: '#E8F4F8', reward: 'Um corte grátis', script: 'Raízes', }, }; // ───────────────────────────────────────────────────────────── // LoyaltyCard — portrait, mobile-first. Used as the "web" card. // ───────────────────────────────────────────────────────────── function LoyaltyCard({ business, customerName, stamps = 0, total = 10, stampStyle = 'textured', overrideStampColor, overrideBg, overrideAccent, showQR = true, compact = false, splashAt = null, // index of the most recent stamp to "splash" qrOverrideUrl = null, // real scannable QR data URL — replaces FakeQR when provided }) { const b = business; const bg = overrideBg || b.cardBg; const accent = overrideAccent || b.cardAccent; const text = b.cardText; const stampColor = overrideStampColor || b.stampColor; const grid = buildStampGrid(total); return (
{/* subtle noise / paper overlay */}
{/* top: business header — the Fidelidade/Carimbou label row lives in the wallet detail's unified top bar now (see CardDetail in stamp-web.js), so the card itself starts straight at the business name/logo. */}
{b.logoUrl ? ( // Logo-as-title: when a card logo is set it replaces the text name; // the tagline below stays. Caps height/width and contains so it never // overflows the card; left-aligned to match the text name it replaces.
{b.name}
) : (
{b.name}
)}
{b.tagline}
{/* stamp area */}
{Array.from({ length: total }).map((_, i) => { const filled = i < stamps; return (
{/* sequence number */} {!filled && ( {String(i + 1).padStart(2, '0')} )}
); })}
{/* middle: customer + progress */}
Cliente
{customerName || '—'}
{/* progress */}
Carimbos {stamps} /{total}
Prêmio ao completar: {b.reward}
{/* QR — large, scannable from a phone (web cards are shared as images on WhatsApp) */} {showQR && (
{qrOverrideUrl ? : }
C
)}
Mostre para o atendente · {b.instagram}
); } // Helper: pick a grid shape for a given stamp count function buildStampGrid(total) { if (total <= 6) return { cols: 3, rows: Math.ceil(total / 3) }; if (total <= 10) return { cols: 5, rows: Math.ceil(total / 5) }; if (total <= 12) return { cols: 4, rows: Math.ceil(total / 4) }; return { cols: 5, rows: Math.ceil(total / 5) }; } // ───────────────────────────────────────────────────────────── // WalletPass — generic vertical pass (NOT mimicking Apple/Google specifically) // Header strip, logo text, primary field, secondary fields, QR // ───────────────────────────────────────────────────────────── function WalletPass({ business, customerName, stamps = 0, total = 10, stampStyle = 'textured' }) { const b = business; return (
{/* top colored strip */}
Carimbou · Fidelidade
{b.name}
{/* primary field */}
Carimbos
{stamps} / {total}
{/* mini stamp grid */}
{Array.from({ length: total }).map((_, i) => { const filled = i < stamps; return (
); })}
{/* secondary fields */}
Cliente
{customerName || '—'}
Prêmio
{b.reward}
{/* QR */}
); } // ───────────────────────────────────────────────────────────── // FakeQR — stable per-seed ornamental QR // ───────────────────────────────────────────────────────────── function FakeQR({ size = 60, fg = '#000', seed = 'x' }) { const N = 19; // deterministic pseudo-random from seed let s = 0; for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) & 0xffff; const rnd = () => { s = (s * 9301 + 49297) & 0xffff; return (s & 0xff) / 255; }; const cells = []; for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) { cells.push({ x, y, on: rnd() > 0.5 }); } const cell = size / N; const isFinder = (x, y) => { const inBox = (ox, oy) => x >= ox && x < ox + 7 && y >= oy && y < oy + 7; return inBox(0, 0) || inBox(N - 7, 0) || inBox(0, N - 7); }; const isFinderInner = (x, y) => { const inBox = (ox, oy) => x >= ox + 2 && x < ox + 5 && y >= oy + 2 && y < oy + 5; return inBox(0, 0) || inBox(N - 7, 0) || inBox(0, N - 7); }; return ( {cells.map((c, i) => { if (isFinder(c.x, c.y)) return null; return c.on && ; })} {/* three finder boxes */} {[[0,0], [N-7,0], [0,N-7]].map(([ox, oy], i) => ( ))} ); } Object.assign(window, { CarimbouLogo, CarimbouWordmark, LoyaltyCard, WalletPass, FakeQR, BUSINESSES, buildStampGrid, StampIcon, });