Spiro CRM — ${escapeHtml(contact.first_name)} ${escapeHtml(contact.last

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_104":85,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","build.ts","latestPath","fileId","58b2ad28-65b2-11f1-9994-1607ee4eb77e","name","fileType","script","content","import { CONTACTS, DEFAULT_EMAIL, type Contact } from \"./fixtures.ts\";\n\n// Map any input (email) onto a contact.\n// 1. No input → default contact (Tomas), matched=false.\n// 2. Exact email match (case-insensitive) → that contact, matched=true.\n// 3. Unknown email → default contact (Tomas), matched=false.\nexport function lookupContact(\n input?: string | null,\n): { contact: Contact; matched: boolean } {\n if (!input) return { contact: CONTACTS[DEFAULT_EMAIL], matched: false };\n const normalized = input.trim().toLowerCase();\n // Exact match\n const exact = CONTACTS[normalized];\n if (exact) return { contact: exact, matched: true };\n // Domain swap: demo customers often have both @gmail.com and @gorgias.com\n // variants. Try the alternate domain before falling back to default.\n let swapped: string | null = null;\n if (normalized.endsWith(\"@gorgias.com\")) {\n swapped = normalized.replace(\"@gorgias.com\", \"@gmail.com\");\n } else if (normalized.endsWith(\"@gmail.com\")) {\n swapped = normalized.replace(\"@gmail.com\", \"@gorgias.com\");\n }\n if (swapped && CONTACTS[swapped]) {\n return { contact: CONTACTS[swapped], matched: true };\n }\n return { contact: CONTACTS[DEFAULT_EMAIL], matched: false };\n}\n\nfunction escapeHtml(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nfunction formatCurrency(amount: number, currency: string): string {\n const symbol = currency === \"EUR\" ? \"€\" : currency === \"USD\" ? \"$\" : currency + \" \";\n return symbol + amount.toLocaleString(\"en-US\");\n}\n\nfunction lifecycleClass(stage: string): string {\n if (stage === \"Customer\") return \"lifecycle-customer\";\n if (stage === \"Qualified Lead\") return \"lifecycle-qualified\";\n if (stage === \"Lead\") return \"lifecycle-lead\";\n return \"lifecycle-other\";\n}\n\nfunction stageClass(stage: string): string {\n if (stage === \"Closed Won\") return \"stage-won\";\n if (stage === \"Closed Lost\") return \"stage-lost\";\n if (stage === \"Negotiation\" || stage === \"Proposal\") return \"stage-late\";\n if (stage === \"Qualified\") return \"stage-mid\";\n return \"stage-early\";\n}\n\nfunction activityIcon(type: string): string {\n if (type === \"Email\") return \"✉️\";\n if (type === \"Call\") return \"📞\";\n if (type === \"Meeting\") return \"🤝\";\n if (type === \"Note\") return \"📝\";\n return \"•\";\n}\n\n// ---- JSON payload (for Gorgias HTTP integration native renderer) ----\nexport function buildJsonResponse(email: string | null) {\n const { contact, matched } = lookupContact(email);\n const openOps = contact.opportunities.filter((o) => o.closed_at === null);\n const pipelineValue = openOps.reduce((sum, o) => sum + o.amount, 0);\n return {\n status: { code: 200, message: \"OK\" },\n _mock: {\n provider: \"spiro\",\n matched_fixture: matched,\n queried: email,\n note: \"Synthetic data for Gorgias demos. Not real Spiro CRM data.\",\n },\n contact: {\n id: contact.id,\n first_name: contact.first_name,\n last_name: contact.last_name,\n name: `${contact.first_name} ${contact.last_name}`,\n email: contact.email,\n phone: contact.phone,\n title: contact.title,\n lifecycle_stage: contact.lifecycle_stage,\n created_at: contact.created_at,\n last_contacted_at: contact.last_contacted_at,\n assigned_rep: contact.assigned_rep,\n },\n company: contact.company,\n opportunities: contact.opportunities,\n activities: contact.activities,\n reminders: contact.reminders,\n summary: {\n open_opportunities: openOps.length,\n pipeline_value: pipelineValue,\n pipeline_currency: contact.company.currency,\n closed_won_count: contact.opportunities.filter((o) => o.stage === \"Closed Won\").length,\n activities_last_30d: contact.activities.length,\n open_reminders: contact.reminders.filter((r) => r.status === \"Open\").length,\n },\n };\n}\n\n// ---- HTML widget (drop-in for Gorgias custom HTTP widget sidebar) ----\nexport function buildHtmlWidget(email: string | null): string {\n const { contact, matched } = lookupContact(email);\n const c = contact.company;\n const openOps = contact.opportunities.filter((o) => o.closed_at === null);\n const wonOps = contact.opportunities.filter((o) => o.stage === \"Closed Won\");\n const pipelineValue = openOps.reduce((sum, o) => sum + o.amount, 0);\n\n const css = `\n *{box-sizing:border-box}\n body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;color:#1a1a1a;background:#fff;font-size:13px;line-height:1.45}\n .spiro-widget{padding:14px}\n .header{padding-bottom:14px;border-bottom:1px solid #e5e7eb;margin-bottom:14px}\n .spiro-banner{background:linear-gradient(135deg,#14B8A6,#0D9488);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px;border-radius:8px;margin-bottom:14px;box-shadow:0 1px 3px rgba(13,148,136,0.25)}\n .spiro-icon{font-size:24px;line-height:1;flex-shrink:0}\n .spiro-text{display:flex;flex-direction:column;line-height:1.15;flex:1}\n .spiro-name{font-size:17px;font-weight:800;letter-spacing:0.5px}\n .spiro-tag{font-size:10px;font-weight:600;opacity:0.92;letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}\n .spiro-source{font-size:9px;opacity:0.7;letter-spacing:0.6px;text-transform:uppercase;font-weight:600}\n .contact-name{font-size:17px;font-weight:700;margin:10px 0 2px;color:#111827}\n .contact-title{font-size:12px;color:#6b7280;margin-bottom:6px}\n .company-row{display:flex;align-items:center;gap:8px;margin-top:8px}\n .company-name{font-size:13px;font-weight:600;color:#111827}\n .company-meta{font-size:11px;color:#6b7280;margin-top:3px}\n .lifecycle{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin-top:8px}\n .lifecycle-customer{background:#dcfce7;color:#15803d}\n .lifecycle-qualified{background:#dbeafe;color:#1d4ed8}\n .lifecycle-lead{background:#fef3c7;color:#92400e}\n .lifecycle-other{background:#f3f4f6;color:#6b7280}\n .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}\n .stat{background:#f9fafb;border:1px solid #f3f4f6;padding:8px 10px;border-radius:6px}\n .stat-label{font-size:10px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}\n .stat-value{font-size:16px;font-weight:700;color:#111827;margin-top:1px}\n .section{margin-bottom:16px}\n .section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#6b7280;margin-bottom:8px}\n .opp{border:1px solid #e5e7eb;border-radius:6px;padding:10px;margin-bottom:8px;background:#fff}\n .opp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}\n .opp-name{font-weight:600;font-size:13px;color:#111827;flex:1}\n .stage{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:700;white-space:nowrap}\n .stage-early{background:#f3f4f6;color:#6b7280}\n .stage-mid{background:#dbeafe;color:#1d4ed8}\n .stage-late{background:#fef3c7;color:#92400e}\n .stage-won{background:#dcfce7;color:#15803d}\n .stage-lost{background:#fee2e2;color:#991b1b}\n .opp-meta{font-size:11px;color:#6b7280;line-height:1.6;display:flex;justify-content:space-between;align-items:center;margin-top:6px}\n .opp-amount{font-weight:700;color:#111827;font-size:14px}\n .opp-probability{font-family:\"SF Mono\",Monaco,Consolas,monospace;font-size:10px;background:#f3f4f6;padding:1px 6px;border-radius:3px;color:#374151}\n .activity{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid #f3f4f6}\n .activity:last-child{border-bottom:none}\n .activity-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center}\n .activity-body{flex:1;font-size:12px;line-height:1.4}\n .activity-subject{color:#111827;margin-bottom:2px}\n .activity-meta{font-size:10px;color:#9ca3af}\n .reminder{background:#fef3c7;border-left:3px solid #f59e0b;padding:8px 10px;border-radius:3px;margin-bottom:6px;font-size:12px}\n .reminder-title{font-weight:600;color:#78350f}\n .reminder-due{font-size:10px;color:#92400e;margin-top:2px}\n .footer{margin-top:14px;padding-top:10px;border-top:1px solid #e5e7eb;font-size:10px;color:#9ca3af;text-align:center}\n .assigned{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#6b7280}\n .assigned-dot{width:6px;height:6px;border-radius:50%;background:#10b981}\n `;\n\n const oppHtml = contact.opportunities\n .map(\n (o) => `\n

${escapeHtml(o.name)}

\n ${escapeHtml(o.stage)}\n

\n ${formatCurrency(o.amount, o.currency)}\n ${o.closed_at ? \"\" : ` · Close: ${o.close_date}`}\n

\n ${o.closed_at ? \"\" : `${o.probability}%`}\n

`,\n )\n .join(\"\");\n\n const activityHtml = contact.activities\n .map(\n (a) => `\n

\n ${activityIcon(a.type)}\n

${escapeHtml(a.subject)}

${a.type}${a.direction ? ` · ${a.direction}` : \"\"} · ${a.occurred_at} · ${escapeHtml(a.user_name)}

`,\n )\n .join(\"\");\n\n const reminderHtml = contact.reminders\n .filter((r) => r.status === \"Open\")\n .map(\n (r) => `\n

⏰ ${escapeHtml(r.title)}

Due ${r.due_date}

`,\n )\n .join(\"\");\n\n return `\n\n\n\n\nSpiro CRM — ${escapeHtml(contact.first_name)} ${escapeHtml(contact.last_name)}\n\n\n\n

\n \n

${escapeHtml(contact.first_name)} ${escapeHtml(contact.last_name)}

${escapeHtml(contact.title)}

${escapeHtml(c.name)}

${escapeHtml(c.industry)} · ${c.employee_count} employees · ${formatCurrency(c.annual_revenue, c.currency)} revenue

${escapeHtml(c.billing_address)}

\n ${escapeHtml(contact.lifecycle_stage)}\n

Open Deals

${openOps.length}

Pipeline

${formatCurrency(pipelineValue, c.currency)}

Closed Won

${wonOps.length}

Last Contact

${contact.last_contacted_at}

Owner: ${escapeHtml(contact.assigned_rep)}

\n\n ${reminderHtml ? `

⏰ Open Reminders

${reminderHtml}

` : \"\"}\n\n ${oppHtml ? `

Opportunities (${contact.opportunities.length})

${oppHtml}

` : \"\"}\n\n ${activityHtml ? `

Recent Activity

${activityHtml}

` : \"\"}\n\n \n

\n\n`;\n}\n","import { CONTACTS, DEFAULT_EMAIL, type Contact } from \"./fixtures.ts\";\n\n// Map any input (email) onto a contact.\n// 1. No input → default contact (Tomas), matched=false.\n// 2. Exact email match (case-insensitive) → that contact, matched=true.\n// 3. Unknown email → default contact (Tomas), matched=false.\nexport function lookupContact(\n input?: string | null,\n): { contact: Contact; matched: boolean } {\n if (!input) return { contact: CONTACTS[DEFAULT_EMAIL], matched: false };\n const normalized = input.trim().toLowerCase();\n // Exact match\n const exact = CONTACTS[normalized];\n if (exact) return { contact: exact, matched: true };\n // Domain swap: demo customers often have both @gmail.com and @gorgias.com\n // variants. Try the alternate domain before falling back to default.\n let swapped: string | null = null;\n if (normalized.endsWith(\"@gorgias.com\")) {\n swapped = normalized.replace(\"@gorgias.com\", \"@gmail.com\");\n } else if (normalized.endsWith(\"@gmail.com\")) {\n swapped = normalized.replace(\"@gmail.com\", \"@gorgias.com\");\n }\n if (swapped && CONTACTS[swapped]) {\n return { contact: CONTACTS[swapped], matched: true };\n }\n return { contact: CONTACTS[DEFAULT_EMAIL], matched: false };\n}\n\nfunction escapeHtml(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nfunction formatCurrency(amount: number, currency: string): string {\n const symbol = currency === \"EUR\" ? \"€\" : currency === \"USD\" ? \"$\" : currency + \" \";\n return symbol + amount.toLocaleString(\"en-US\");\n}\n\nfunction lifecycleClass(stage: string): string {\n if (stage === \"Customer\") return \"lifecycle-customer\";\n if (stage === \"Qualified Lead\") return \"lifecycle-qualified\";\n if (stage === \"Lead\") return \"lifecycle-lead\";\n return \"lifecycle-other\";\n}\n\nfunction stageClass(stage: string): string {\n if (stage === \"Closed Won\") return \"stage-won\";\n if (stage === \"Closed Lost\") return \"stage-lost\";\n if (stage === \"Negotiation\" || stage === \"Proposal\") return \"stage-late\";\n if (stage === \"Qualified\") return \"stage-mid\";\n return \"stage-early\";\n}\n\nfunction activityIcon(type: string): string {\n if (type === \"Email\") return \"✉️\";\n if (type === \"Call\") return \"📞\";\n if (type === \"Meeting\") return \"🤝\";\n if (type === \"Note\") return \"📝\";\n return \"•\";\n}\n\n// ---- Flat JSON (FOR GORGIAS HTTP WIDGET — clean key-value rows in sidebar) ----\n// Gorgias custom HTTP widgets render each top-level JSON field as a row.\n// Keep values as strings/numbers — no nested objects or arrays here.\nexport function buildFlatResponse(email: string | null) {\n const { contact, matched } = lookupContact(email);\n const c = contact.company;\n const openOps = contact.opportunities.filter((o) => o.closed_at === null);\n const wonOps = contact.opportunities.filter((o) => o.stage === \"Closed Won\");\n const pipelineValue = openOps.reduce((sum, o) => sum + o.amount, 0);\n const topDeal = [...openOps].sort((a, b) => b.amount - a.amount)[0];\n const lastActivity = contact.activities[0];\n const openReminder = contact.reminders.find((r) => r.status === \"Open\");\n\n return {\n \"Contact\": `${contact.first_name} ${contact.last_name}`,\n \"Title\": contact.title,\n \"Phone\": contact.phone,\n \"Lifecycle Stage\": contact.lifecycle_stage,\n \"Account Owner\": contact.assigned_rep,\n \"Company\": c.name,\n \"Industry\": c.industry,\n \"Size\": `${c.employee_count} employees · ${formatCurrency(c.annual_revenue, c.currency)} revenue`,\n \"Address\": c.billing_address,\n \"Open Deals\": openOps.length,\n \"Pipeline Value\": formatCurrency(pipelineValue, c.currency),\n \"Top Open Deal\": topDeal\n ? `${topDeal.name} — ${formatCurrency(topDeal.amount, topDeal.currency)} · ${topDeal.stage} (${topDeal.probability}%)`\n : \"None\",\n \"Closed Won (lifetime)\": wonOps.length,\n \"Active Reminder\": openReminder\n ? `${openReminder.title} (due ${openReminder.due_date})`\n : \"None\",\n \"Latest Activity\": lastActivity\n ? `${lastActivity.type}: ${lastActivity.subject} (${lastActivity.occurred_at})`\n : \"None\",\n \"Last Contacted\": contact.last_contacted_at,\n \"_source\": matched\n ? `Spiro CRM — matched record for ${contact.email}`\n : \"Spiro CRM — default fixture (unknown email)\",\n };\n}\n\n// ---- Nested JSON payload (full structure, /raw endpoint) ----\nexport function buildJsonResponse(email: string | null) {\n const { contact, matched } = lookupContact(email);\n const openOps = contact.opportunities.filter((o) => o.closed_at === null);\n const pipelineValue = openOps.reduce((sum, o) => sum + o.amount, 0);\n return {\n status: { code: 200, message: \"OK\" },\n _mock: {\n provider: \"spiro\",\n matched_fixture: matched,\n queried: email,\n note: \"Synthetic data for Gorgias demos. Not real Spiro CRM data.\",\n },\n contact: {\n id: contact.id,\n first_name: contact.first_name,\n last_name: contact.last_name,\n name: `${contact.first_name} ${contact.last_name}`,\n email: contact.email,\n phone: contact.phone,\n title: contact.title,\n lifecycle_stage: contact.lifecycle_stage,\n created_at: contact.created_at,\n last_contacted_at: contact.last_contacted_at,\n assigned_rep: contact.assigned_rep,\n },\n company: contact.company,\n opportunities: contact.opportunities,\n activities: contact.activities,\n reminders: contact.reminders,\n summary: {\n open_opportunities: openOps.length,\n pipeline_value: pipelineValue,\n pipeline_currency: contact.company.currency,\n closed_won_count: contact.opportunities.filter((o) => o.stage === \"Closed Won\").length,\n activities_last_30d: contact.activities.length,\n open_reminders: contact.reminders.filter((r) => r.status === \"Open\").length,\n },\n };\n}\n\n// ---- HTML widget (drop-in for Gorgias custom HTTP widget sidebar) ----\nexport function buildHtmlWidget(email: string | null): string {\n const { contact, matched } = lookupContact(email);\n const c = contact.company;\n const openOps = contact.opportunities.filter((o) => o.closed_at === null);\n const wonOps = contact.opportunities.filter((o) => o.stage === \"Closed Won\");\n const pipelineValue = openOps.reduce((sum, o) => sum + o.amount, 0);\n\n const css = `\n *{box-sizing:border-box}\n body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;color:#1a1a1a;background:#fff;font-size:13px;line-height:1.45}\n .spiro-widget{padding:14px}\n .header{padding-bottom:14px;border-bottom:1px solid #e5e7eb;margin-bottom:14px}\n .spiro-banner{background:linear-gradient(135deg,#14B8A6,#0D9488);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px;border-radius:8px;margin-bottom:14px;box-shadow:0 1px 3px rgba(13,148,136,0.25)}\n .spiro-icon{font-size:24px;line-height:1;flex-shrink:0}\n .spiro-text{display:flex;flex-direction:column;line-height:1.15;flex:1}\n .spiro-name{font-size:17px;font-weight:800;letter-spacing:0.5px}\n .spiro-tag{font-size:10px;font-weight:600;opacity:0.92;letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}\n .spiro-source{font-size:9px;opacity:0.7;letter-spacing:0.6px;text-transform:uppercase;font-weight:600}\n .contact-name{font-size:17px;font-weight:700;margin:10px 0 2px;color:#111827}\n .contact-title{font-size:12px;color:#6b7280;margin-bottom:6px}\n .company-row{display:flex;align-items:center;gap:8px;margin-top:8px}\n .company-name{font-size:13px;font-weight:600;color:#111827}\n .company-meta{font-size:11px;color:#6b7280;margin-top:3px}\n .lifecycle{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin-top:8px}\n .lifecycle-customer{background:#dcfce7;color:#15803d}\n .lifecycle-qualified{background:#dbeafe;color:#1d4ed8}\n .lifecycle-lead{background:#fef3c7;color:#92400e}\n .lifecycle-other{background:#f3f4f6;color:#6b7280}\n .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}\n .stat{background:#f9fafb;border:1px solid #f3f4f6;padding:8px 10px;border-radius:6px}\n .stat-label{font-size:10px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}\n .stat-value{font-size:16px;font-weight:700;color:#111827;margin-top:1px}\n .section{margin-bottom:16px}\n .section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#6b7280;margin-bottom:8px}\n .opp{border:1px solid #e5e7eb;border-radius:6px;padding:10px;margin-bottom:8px;background:#fff}\n .opp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}\n .opp-name{font-weight:600;font-size:13px;color:#111827;flex:1}\n .stage{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:700;white-space:nowrap}\n .stage-early{background:#f3f4f6;color:#6b7280}\n .stage-mid{background:#dbeafe;color:#1d4ed8}\n .stage-late{background:#fef3c7;color:#92400e}\n .stage-won{background:#dcfce7;color:#15803d}\n .stage-lost{background:#fee2e2;color:#991b1b}\n .opp-meta{font-size:11px;color:#6b7280;line-height:1.6;display:flex;justify-content:space-between;align-items:center;margin-top:6px}\n .opp-amount{font-weight:700;color:#111827;font-size:14px}\n .opp-probability{font-family:\"SF Mono\",Monaco,Consolas,monospace;font-size:10px;background:#f3f4f6;padding:1px 6px;border-radius:3px;color:#374151}\n .activity{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid #f3f4f6}\n .activity:last-child{border-bottom:none}\n .activity-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center}\n .activity-body{flex:1;font-size:12px;line-height:1.4}\n .activity-subject{color:#111827;margin-bottom:2px}\n .activity-meta{font-size:10px;color:#9ca3af}\n .reminder{background:#fef3c7;border-left:3px solid #f59e0b;padding:8px 10px;border-radius:3px;margin-bottom:6px;font-size:12px}\n .reminder-title{font-weight:600;color:#78350f}\n .reminder-due{font-size:10px;color:#92400e;margin-top:2px}\n .footer{margin-top:14px;padding-top:10px;border-top:1px solid #e5e7eb;font-size:10px;color:#9ca3af;text-align:center}\n .assigned{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#6b7280}\n .assigned-dot{width:6px;height:6px;border-radius:50%;background:#10b981}\n `;\n\n const oppHtml = contact.opportunities\n .map(\n (o) => `\n

${escapeHtml(o.name)}

\n ${escapeHtml(o.stage)}\n

\n ${formatCurrency(o.amount, o.currency)}\n ${o.closed_at ? \"\" : ` · Close: ${o.close_date}`}\n

\n ${o.closed_at ? \"\" : `${o.probability}%`}\n

`,\n )\n .join(\"\");\n\n const activityHtml = contact.activities\n .map(\n (a) => `\n

\n ${activityIcon(a.type)}\n

${escapeHtml(a.subject)}

${a.type}${a.direction ? ` · ${a.direction}` : \"\"} · ${a.occurred_at} · ${escapeHtml(a.user_name)}

`,\n )\n .join(\"\");\n\n const reminderHtml = contact.reminders\n .filter((r) => r.status === \"Open\")\n .map(\n (r) => `\n

⏰ ${escapeHtml(r.title)}

Due ${r.due_date}

`,\n )\n .join(\"\");\n\n return `\n\n\n\n\nSpiro CRM — ${escapeHtml(contact.first_name)} ${escapeHtml(contact.last_name)}\n\n\n\n

\n \n

${escapeHtml(contact.first_name)} ${escapeHtml(contact.last_name)}

${escapeHtml(contact.title)}

${escapeHtml(c.name)}

${escapeHtml(c.industry)} · ${c.employee_count} employees · ${formatCurrency(c.annual_revenue, c.currency)} revenue

${escapeHtml(c.billing_address)}

\n ${escapeHtml(contact.lifecycle_stage)}\n

Open Deals

${openOps.length}

Pipeline

${formatCurrency(pipelineValue, c.currency)}

Closed Won

${wonOps.length}

Last Contact

${contact.last_contacted_at}

Owner: ${escapeHtml(contact.assigned_rep)}

\n\n ${reminderHtml ? `

⏰ Open Reminders

${reminderHtml}

` : \"\"}\n\n ${oppHtml ? `

Opportunities (${contact.opportunities.length})

${oppHtml}

` : \"\"}\n\n ${activityHtml ? `

Recent Activity

${activityHtml}

` : \"\"}\n\n \n

\n\n`;\n}\n","createdAt",["D",1781279181226],"branchVersion","branchId","2ec76ec9-08ab-4165-8aab-88b2ce7af512","id","ad59f25d-acb1-4da4-bda7-45703d056bea","spiro-mock-api",["D",1781195133914],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Mock Spiro CRM customer DB for Gorgias demos","imageUrl","742085bc-e2ba-4110-bb93-cce7bf4b0fe5","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019eb5c9-9533-734b-bc4b-3f0c36b2e8da","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","simontemmam","handle","displayName","Simon Temmam","avatar","https://lh3.googleusercontent.com/a/ACg8ocL7lj4b19yeTEB3PtiNRcXnPTMoeHAytozzU0IwChHQqiamn44=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":176,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":177,"_79":178,"_81":179,"_83":25},"tree",[163,164,165],"files",[163,164,165],"counts",{"_153":61,"_154":137,"_155":61,"_156":157,"_158":159},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":150,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":151,"_13":134,"_33":34,"_35":37,"_24":25,"_140":-5,"_27":152},{"_43":142,"_32":143,"_30":144,"_133":-5,"_41":42,"_40":145,"_135":122,"_38":146,"_13":147,"_33":34,"_35":148,"_24":25,"_140":-5,"_27":149},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":136,"_13":137,"_33":138,"_35":139,"_24":25,"_140":-5,"_27":141},"87b8c12f-abf9-4d6b-9aa7-5c204b4b2944","main.ts","2bd80870-65b2-11f1-a992-1607ee4eb77e","parentId",4,"latest",["D",1781195224652],1,"http","import { buildHtmlWidget, buildJsonResponse } from \"./build.ts\";\nimport { CONTACTS } from \"./fixtures.ts\";\n\nconst CORS_HEADERS = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"*\",\n};\n\nfunction json(body: unknown, status = 200) {\n return new Response(JSON.stringify(body, null, 2), {\n status,\n headers: { \"Content-Type\": \"application/json; charset=utf-8\", ...CORS_HEADERS },\n });\n}\n\nfunction html(body: string, status = 200) {\n return new Response(body, {\n status,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\", ...CORS_HEADERS },\n });\n}\n\nfunction getEmail(params: URLSearchParams): string | null {\n return (\n params.get(\"email\") ||\n params.get(\"customer_email\") ||\n params.get(\"contact_email\") ||\n params.get(\"id\") ||\n null\n );\n}\n\nexport default async function (req: Request): Promise {\n // CORS preflight\n if (req.method === \"OPTIONS\") {\n return new Response(null, { status: 204, headers: CORS_HEADERS });\n }\n\n const url = new URL(req.url);\n const email = getEmail(url.searchParams);\n\n // HTML widget path — drop-in for Gorgias custom HTTP widget sidebar.\n // Example: https://.web.val.run/widget?email={{ticket.customer.email}}\n if (url.pathname.startsWith(\"/widget\")) {\n return html(buildHtmlWidget(email));\n }\n\n // Bare URL with no params: self-documenting usage page.\n if (url.pathname === \"/\" && [...url.searchParams.keys()].length === 0) {\n return json({\n mock: \"Spiro CRM contact database — synthetic data for Gorgias demos\",\n endpoints: {\n json: `${url.origin}/?email=tomas.memmin@gmail.com`,\n widget_html: `${url.origin}/widget?email=tomas.memmin@gmail.com`,\n },\n accepts_any_of: [\"email\", \"customer_email\", \"contact_email\", \"id\"],\n available_fixture_emails: Object.keys(CONTACTS),\n note:\n \"Unknown emails fall back to the default (Tomas Memmin) so demos stay predictable. The /widget path returns a styled HTML page ready to embed in a Gorgias ticket-sidebar HTTP widget integration.\",\n });\n }\n\n // Default JSON endpoint — Gorgias HTTP integrations can map fields from this\n // payload directly, or you can hit /widget for a pre-rendered HTML view.\n return json(buildJsonResponse(email));\n}\n","label",[131],"61edcbd3-77c5-459a-b4d1-1b9785599aa4","fixtures.ts","3da2e8fe-65b2-11f1-b24b-1607ee4eb77e",6,["D",1781277502083],2,"// Two demo contacts for the Spiro CRM Gorgias widget demo.\n// Tailored for Julia (Food Service) — Spiro customers are restaurants / cafés\n// the brand supplies to, and pipeline data lives in Opportunities like new\n// supply contracts, menu rollouts, and location expansions.\n//\n// Tomas = established NYC bistro customer with Brooklyn expansion deal.\n// Naomi = small Williamsburg café in early discovery (qualified lead).\n// Unknown emails fall back to Tomas for predictable demos.\n\nexport type LifecycleStage =\n | \"Lead\"\n | \"Qualified Lead\"\n | \"Customer\"\n | \"Churned\";\n\nexport type OpportunityStage =\n | \"Discovery\"\n | \"Qualified\"\n | \"Proposal\"\n | \"Negotiation\"\n | \"Closed Won\"\n | \"Closed Lost\";\n\nexport type ActivityType = \"Email\" | \"Call\" | \"Meeting\" | \"Note\";\n\nexport interface Activity {\n id: number;\n type: ActivityType;\n subject: string;\n body?: string;\n occurred_at: string; // ISO date\n user_name: string; // sales rep\n direction?: \"Outbound\" | \"Inbound\";\n}\n\nexport interface Opportunity {\n id: number;\n name: string;\n amount: number; // major-units ($), not cents\n currency: string;\n stage: OpportunityStage;\n close_date: string; // ISO date\n probability: number; // 0-100\n created_at: string;\n closed_at: string | null;\n}\n\nexport interface Reminder {\n id: number;\n title: string;\n due_date: string;\n status: \"Open\" | \"Done\";\n}\n\nexport interface Company {\n id: number;\n name: string;\n website: string;\n industry: string;\n annual_revenue: number; // major-units ($)\n currency: string;\n employee_count: number;\n billing_address: string;\n account_type: \"Customer\" | \"Prospect\" | \"Partner\";\n}\n\nexport interface Contact {\n id: number;\n first_name: string;\n last_name: string;\n email: string;\n phone: string;\n title: string;\n lifecycle_stage: LifecycleStage;\n created_at: string;\n last_contacted_at: string;\n assigned_rep: string;\n company: Company;\n opportunities: Opportunity[];\n activities: Activity[]; // most-recent first\n reminders: Reminder[];\n}\n\nexport const CONTACTS: Record = {\n \"tomas.memmin@gmail.com\": {\n id: 871042,\n first_name: \"Tomas\",\n last_name: \"Memmin\",\n email: \"tomas.memmin@gmail.com\",\n phone: \"+1 (212) 555-0142\",\n title: \"Owner / Executive Chef\",\n lifecycle_stage: \"Customer\",\n created_at: \"2024-08-14\",\n last_contacted_at: \"2026-06-05\",\n assigned_rep: \"Marc Dubois\",\n company: {\n id: 410985,\n name: \"Bistro Memmin\",\n website: \"bistromemmin.com\",\n industry: \"Restaurant — French Bistro\",\n annual_revenue: 920_000,\n currency: \"USD\",\n employee_count: 14,\n billing_address: \"187 Bleecker St, New York, NY 10012\",\n account_type: \"Customer\",\n },\n opportunities: [\n {\n id: 902481,\n name: \"Brooklyn location — initial weekly supply contract\",\n amount: 45_000,\n currency: \"USD\",\n stage: \"Qualified\",\n close_date: \"2026-12-15\",\n probability: 35,\n created_at: \"2026-04-22\",\n closed_at: null,\n },\n {\n id: 902347,\n name: \"Autumn seasonal menu rollout — produce + dairy\",\n amount: 20_000,\n currency: \"USD\",\n stage: \"Proposal\",\n close_date: \"2026-08-30\",\n probability: 70,\n created_at: \"2026-03-08\",\n closed_at: null,\n },\n {\n id: 891204,\n name: \"Annual fresh produce contract renewal 2026\",\n amount: 40_000,\n currency: \"USD\",\n stage: \"Closed Won\",\n close_date: \"2025-11-12\",\n probability: 100,\n created_at: \"2025-09-01\",\n closed_at: \"2025-11-12\",\n },\n ],\n activities: [\n {\n id: 5512094,\n type: \"Call\",\n subject: \"Quarterly check-in re: Brooklyn supplier shortlist\",\n occurred_at: \"2026-06-05\",\n user_name: \"Marc Dubois\",\n direction: \"Outbound\",\n },\n {\n id: 5510338,\n type: \"Email\",\n subject: \"Re: Brooklyn location — supplier shortlist + sample crates\",\n occurred_at: \"2026-05-28\",\n user_name: \"Marc Dubois\",\n direction: \"Outbound\",\n },\n {\n id: 5508921,\n type: \"Meeting\",\n subject: \"Autumn menu tasting + supply planning (NYC office)\",\n occurred_at: \"2026-05-22\",\n user_name: \"Marc Dubois\",\n },\n {\n id: 5508922,\n type: \"Note\",\n subject: \"Tomas wants to trial an organic supplier for the new dessert line — flag for autumn planning\",\n occurred_at: \"2026-05-22\",\n user_name: \"Marc Dubois\",\n },\n ],\n reminders: [\n {\n id: 71204,\n title: \"Follow up on Brooklyn supplier shortlist signoff\",\n due_date: \"2026-06-18\",\n status: \"Open\",\n },\n ],\n },\n \"naomi.smet04@gmail.com\": {\n id: 905733,\n first_name: \"Naomi\",\n last_name: \"Smet\",\n email: \"naomi.smet04@gmail.com\",\n phone: \"+1 (718) 555-0834\",\n title: \"Co-owner / F&B Manager\",\n lifecycle_stage: \"Qualified Lead\",\n created_at: \"2026-04-30\",\n last_contacted_at: \"2026-06-02\",\n assigned_rep: \"Sophie Laurent\",\n company: {\n id: 423190,\n name: \"Café Smet\",\n website: \"cafesmet.com\",\n industry: \"Specialty Coffee Shop & Café\",\n annual_revenue: 380_000,\n currency: \"USD\",\n employee_count: 5,\n billing_address: \"247 Bedford Ave, Brooklyn, NY 11249\",\n account_type: \"Prospect\",\n },\n opportunities: [\n {\n id: 921458,\n name: \"Sample box trial → weekly produce + bakery contract\",\n amount: 12_500,\n currency: \"USD\",\n stage: \"Discovery\",\n close_date: \"2026-09-15\",\n probability: 25,\n created_at: \"2026-05-30\",\n closed_at: null,\n },\n ],\n activities: [\n {\n id: 5615044,\n type: \"Call\",\n subject: \"Discovery call — current supplier pain points (30 min)\",\n occurred_at: \"2026-06-02\",\n user_name: \"Sophie Laurent\",\n direction: \"Outbound\",\n },\n {\n id: 5615047,\n type: \"Email\",\n subject: \"Discovery follow-up + sample box catalog\",\n occurred_at: \"2026-06-02\",\n user_name: \"Sophie Laurent\",\n direction: \"Outbound\",\n },\n {\n id: 5615048,\n type: \"Note\",\n subject: \"Currently with Sysco — frustrated with delivery slots and produce freshness. Wants weekly micro-bakery + organic produce.\",\n occurred_at: \"2026-06-02\",\n user_name: \"Sophie Laurent\",\n },\n ],\n reminders: [\n {\n id: 71321,\n title: \"Send sample box scheduling + organic produce catalog\",\n due_date: \"2026-06-12\",\n status: \"Open\",\n },\n ],\n },\n};\n\n// Returned when no param is supplied OR when an unknown email is queried.\n// Always Tomas — keeps demos predictable.\nexport const DEFAULT_EMAIL = \"tomas.memmin@gmail.com\";\n",[143],"8b86090d-7e5c-4cba-ada8-4e2bd562845f",["D",1781279181226],[28],"pulls","branches","forks","envVars",{"_160":61,"_162":61},"connections",{"_160":61,"_161":61},"count","unfilledCount","emptyCount",{"_43":150,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_135":25,"_38":173,"_13":134,"_33":34,"_35":37,"_24":25,"_140":-5,"_167":174,"_27":175},{"_43":142,"_32":143,"_30":144,"_133":-5,"_41":42,"_40":145,"_135":122,"_38":170,"_13":147,"_33":34,"_35":148,"_24":25,"_140":-5,"_167":171,"_27":172},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":166,"_13":137,"_33":138,"_35":139,"_24":25,"_140":-5,"_167":168,"_27":169},["D",1781195224652],"children",[],[131],["D",1781277502083],[],[143],["D",1781279181226],[],[28],["D",1781195133914],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_124":213,"_214":215,"_216":217,"_218":25,"_219":25,"_220":25,"_221":122,"_222":-5,"_223":-7,"_224":-7,"_225":61,"_226":25,"_227":25,"_228":-5,"_229":25,"_230":25,"_231":25,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":85,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v10