feat: add Google Maps → Email pipeline (Tab 4)
- New Maps page with keyword + region chips, German city presets, query preview, enrichment toggle - Google Maps Places API (New) service with pagination and deduplication - maps-enrich job route: Maps search → store raw leads → optional Anymailfinder bulk enrichment - Settings: Google Maps API key credential card with Places API instructions - Sidebar: MapPin nav item + googlemaps credential status indicator - Results: maps job type with MapPin icon (text-green-400) - Credentials API: added googlemaps to SERVICES array and test endpoint Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { encrypt, decrypt } from "@/lib/utils/encryption";
|
||||
|
||||
const SERVICES = ["anymailfinder", "apify", "vayne", "airscale"] as const;
|
||||
const SERVICES = ["anymailfinder", "apify", "vayne", "airscale", "googlemaps"] as const;
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
@@ -14,7 +14,7 @@ export async function GET() {
|
||||
return NextResponse.json(result);
|
||||
} catch (err) {
|
||||
console.error("GET /api/credentials error:", err);
|
||||
return NextResponse.json({ anymailfinder: false, apify: false, vayne: false, airscale: false });
|
||||
return NextResponse.json({ anymailfinder: false, apify: false, vayne: false, airscale: false, googlemaps: false });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -38,6 +38,21 @@ export async function GET(req: NextRequest) {
|
||||
});
|
||||
return NextResponse.json({ ok: res.status === 200 });
|
||||
}
|
||||
case "googlemaps": {
|
||||
const res = await axios.post(
|
||||
"https://places.googleapis.com/v1/places:searchText",
|
||||
{ textQuery: "restaurant", maxResultCount: 1 },
|
||||
{
|
||||
headers: {
|
||||
"X-Goog-Api-Key": key,
|
||||
"X-Goog-FieldMask": "places.id",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
timeout: 10000,
|
||||
}
|
||||
);
|
||||
return NextResponse.json({ ok: res.status === 200 });
|
||||
}
|
||||
default:
|
||||
return NextResponse.json({ ok: false, error: "Unknown service" });
|
||||
}
|
||||
|
||||
165
app/api/jobs/maps-enrich/route.ts
Normal file
165
app/api/jobs/maps-enrich/route.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { decrypt } from "@/lib/utils/encryption";
|
||||
import { searchPlacesMultiQuery } from "@/lib/services/googlemaps";
|
||||
import { bulkSearchDomains, type DecisionMakerCategory } from "@/lib/services/anymailfinder";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const body = await req.json() as {
|
||||
queries: string[];
|
||||
maxResultsPerQuery: number;
|
||||
languageCode: string;
|
||||
categories: DecisionMakerCategory[];
|
||||
enrichEmails: boolean;
|
||||
};
|
||||
|
||||
const { queries, maxResultsPerQuery, languageCode, categories, enrichEmails } = body;
|
||||
|
||||
if (!queries?.length) {
|
||||
return NextResponse.json({ error: "No search queries provided" }, { status: 400 });
|
||||
}
|
||||
|
||||
const mapsCredential = await prisma.apiCredential.findUnique({ where: { service: "googlemaps" } });
|
||||
if (!mapsCredential?.value) {
|
||||
return NextResponse.json({ error: "Google Maps API key not configured" }, { status: 400 });
|
||||
}
|
||||
const mapsApiKey = decrypt(mapsCredential.value);
|
||||
|
||||
if (enrichEmails) {
|
||||
const anymailCred = await prisma.apiCredential.findUnique({ where: { service: "anymailfinder" } });
|
||||
if (!anymailCred?.value) {
|
||||
return NextResponse.json({ error: "Anymailfinder API key not configured" }, { status: 400 });
|
||||
}
|
||||
}
|
||||
|
||||
const job = await prisma.job.create({
|
||||
data: {
|
||||
type: "maps",
|
||||
status: "running",
|
||||
config: JSON.stringify({ queries, maxResultsPerQuery, languageCode, categories, enrichEmails }),
|
||||
totalLeads: 0,
|
||||
},
|
||||
});
|
||||
|
||||
runMapsEnrich(job.id, body, mapsApiKey).catch(console.error);
|
||||
|
||||
return NextResponse.json({ jobId: job.id });
|
||||
} catch (err) {
|
||||
console.error("POST /api/jobs/maps-enrich error:", err);
|
||||
return NextResponse.json({ error: "Failed to start job" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
async function runMapsEnrich(
|
||||
jobId: string,
|
||||
params: {
|
||||
queries: string[];
|
||||
maxResultsPerQuery: number;
|
||||
languageCode: string;
|
||||
categories: DecisionMakerCategory[];
|
||||
enrichEmails: boolean;
|
||||
},
|
||||
mapsApiKey: string
|
||||
) {
|
||||
try {
|
||||
// 1. Search Google Maps
|
||||
const places = await searchPlacesMultiQuery(
|
||||
params.queries,
|
||||
mapsApiKey,
|
||||
params.maxResultsPerQuery,
|
||||
params.languageCode,
|
||||
async (_done, _total) => {
|
||||
await prisma.job.update({ where: { id: jobId }, data: { totalLeads: _done } });
|
||||
}
|
||||
);
|
||||
|
||||
await prisma.job.update({
|
||||
where: { id: jobId },
|
||||
data: { totalLeads: places.length },
|
||||
});
|
||||
|
||||
// 2. Store raw Google Maps results immediately
|
||||
for (const place of places) {
|
||||
await prisma.leadResult.create({
|
||||
data: {
|
||||
jobId,
|
||||
companyName: place.name || null,
|
||||
domain: place.domain || null,
|
||||
source: JSON.stringify({
|
||||
address: place.address,
|
||||
phone: place.phone,
|
||||
website: place.website,
|
||||
placeId: place.placeId,
|
||||
}),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Optionally enrich with Anymailfinder
|
||||
if (params.enrichEmails && places.length > 0) {
|
||||
const anymailCred = await prisma.apiCredential.findUnique({ where: { service: "anymailfinder" } });
|
||||
if (!anymailCred?.value) throw new Error("Anymailfinder key missing");
|
||||
|
||||
const anymailKey = decrypt(anymailCred.value);
|
||||
const domains = places.filter(p => p.domain).map(p => p.domain!);
|
||||
|
||||
// Map domain → placeId for updating results
|
||||
const domainToResultId = new Map<string, string>();
|
||||
const existingResults = await prisma.leadResult.findMany({
|
||||
where: { jobId },
|
||||
select: { id: true, domain: true },
|
||||
});
|
||||
for (const r of existingResults) {
|
||||
if (r.domain) domainToResultId.set(r.domain, r.id);
|
||||
}
|
||||
|
||||
let emailsFound = 0;
|
||||
const enrichResults = await bulkSearchDomains(
|
||||
domains,
|
||||
params.categories,
|
||||
anymailKey,
|
||||
async (_completed, total) => {
|
||||
await prisma.job.update({ where: { id: jobId }, data: { totalLeads: total } });
|
||||
}
|
||||
);
|
||||
|
||||
for (const result of enrichResults) {
|
||||
const hasEmail = !!result.valid_email;
|
||||
if (hasEmail) emailsFound++;
|
||||
|
||||
const resultId = domainToResultId.get(result.domain || "");
|
||||
if (!resultId) continue;
|
||||
|
||||
await prisma.leadResult.update({
|
||||
where: { id: resultId },
|
||||
data: {
|
||||
contactName: result.person_full_name || null,
|
||||
contactTitle: result.person_job_title || null,
|
||||
email: result.email || null,
|
||||
confidence: result.valid_email ? 1.0 : result.email_status === "risky" ? 0.5 : 0,
|
||||
linkedinUrl: result.person_linkedin_url || null,
|
||||
},
|
||||
});
|
||||
|
||||
await prisma.job.update({ where: { id: jobId }, data: { emailsFound } });
|
||||
}
|
||||
|
||||
await prisma.job.update({
|
||||
where: { id: jobId },
|
||||
data: { status: "complete", emailsFound, totalLeads: places.length },
|
||||
});
|
||||
} else {
|
||||
await prisma.job.update({
|
||||
where: { id: jobId },
|
||||
data: { status: "complete", totalLeads: places.length },
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err);
|
||||
await prisma.job.update({
|
||||
where: { id: jobId },
|
||||
data: { status: "failed", error: message },
|
||||
});
|
||||
}
|
||||
}
|
||||
445
app/maps/page.tsx
Normal file
445
app/maps/page.tsx
Normal file
@@ -0,0 +1,445 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ProgressCard } from "@/components/shared/ProgressCard";
|
||||
import { ResultsTable, type ResultRow } from "@/components/shared/ResultsTable";
|
||||
import { ExportButtons } from "@/components/shared/ExportButtons";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
import { toast } from "sonner";
|
||||
import { MapPin, ChevronRight, Plus, X, Info } from "lucide-react";
|
||||
import { useAppStore } from "@/lib/store";
|
||||
import type { DecisionMakerCategory } from "@/lib/services/anymailfinder";
|
||||
import type { ExportRow } from "@/lib/utils/csv";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const CATEGORY_OPTIONS: { value: DecisionMakerCategory; label: string }[] = [
|
||||
{ value: "ceo", label: "CEO / Owner / Founder" },
|
||||
{ value: "engineering", label: "Engineering" },
|
||||
{ value: "marketing", label: "Marketing" },
|
||||
{ value: "sales", label: "Sales" },
|
||||
{ value: "operations", label: "Operations" },
|
||||
{ value: "finance", label: "Finance" },
|
||||
{ value: "hr", label: "HR" },
|
||||
{ value: "it", label: "IT" },
|
||||
{ value: "buyer", label: "Procurement" },
|
||||
{ value: "logistics", label: "Logistics" },
|
||||
];
|
||||
|
||||
const RESULTS_OPTIONS = [
|
||||
{ value: "20", label: "20 per query" },
|
||||
{ value: "40", label: "40 per query" },
|
||||
{ value: "60", label: "60 per query (max)" },
|
||||
];
|
||||
|
||||
// Preset queries for common German solar use cases
|
||||
const PRESET_QUERIES = [
|
||||
"Solaranlage Installateur Deutschland",
|
||||
"Photovoltaik Montage",
|
||||
"Solar Handwerker",
|
||||
"Solarstrom Installation",
|
||||
];
|
||||
|
||||
const GERMAN_REGIONS = [
|
||||
"Bayern", "Baden-Württemberg", "Nordrhein-Westfalen", "Hessen",
|
||||
"Niedersachsen", "Sachsen", "Rheinland-Pfalz", "Brandenburg",
|
||||
"Berlin", "Hamburg", "München", "Frankfurt", "Stuttgart",
|
||||
"Düsseldorf", "Köln", "Leipzig", "Dresden",
|
||||
];
|
||||
|
||||
type Stage = "idle" | "running" | "done" | "failed";
|
||||
|
||||
export default function MapsPage() {
|
||||
const [keyword, setKeyword] = useState("Solaranlage Installateur");
|
||||
const [regions, setRegions] = useState<string[]>(["Bayern", "Baden-Württemberg"]);
|
||||
const [regionInput, setRegionInput] = useState("");
|
||||
const [maxResults, setMaxResults] = useState("60");
|
||||
const [enrichEmails, setEnrichEmails] = useState(true);
|
||||
const [categories, setCategories] = useState<DecisionMakerCategory[]>(["ceo"]);
|
||||
const [stage, setStage] = useState<Stage>("idle");
|
||||
const [jobId, setJobId] = useState<string | null>(null);
|
||||
const [progress, setProgress] = useState({ current: 0, total: 0, phase: "" });
|
||||
const [results, setResults] = useState<ResultRow[]>([]);
|
||||
const { addJob, updateJob, removeJob } = useAppStore();
|
||||
|
||||
// Build the final queries array: one per region
|
||||
const queries = regions.length > 0
|
||||
? regions.map(r => `${keyword} ${r}`)
|
||||
: [keyword];
|
||||
|
||||
const addRegion = (r: string) => {
|
||||
const trimmed = r.trim();
|
||||
if (trimmed && !regions.includes(trimmed)) {
|
||||
setRegions(prev => [...prev, trimmed]);
|
||||
}
|
||||
setRegionInput("");
|
||||
};
|
||||
|
||||
const removeRegion = (r: string) => setRegions(prev => prev.filter(x => x !== r));
|
||||
|
||||
const startJob = async () => {
|
||||
if (!keyword.trim()) return toast.error("Enter a search keyword");
|
||||
if (!categories.length && enrichEmails) return toast.error("Select at least one email category");
|
||||
|
||||
setStage("running");
|
||||
setResults([]);
|
||||
setProgress({ current: 0, total: queries.length, phase: "Searching Google Maps..." });
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/jobs/maps-enrich", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
queries,
|
||||
maxResultsPerQuery: Number(maxResults),
|
||||
languageCode: "de",
|
||||
categories,
|
||||
enrichEmails,
|
||||
}),
|
||||
});
|
||||
const data = await res.json() as { jobId?: string; error?: string };
|
||||
if (!res.ok || !data.jobId) throw new Error(data.error || "Failed");
|
||||
|
||||
setJobId(data.jobId);
|
||||
addJob({ id: data.jobId, type: "maps", status: "running", progress: 0, total: queries.length * Number(maxResults) });
|
||||
pollJob(data.jobId);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to start");
|
||||
setStage("failed");
|
||||
}
|
||||
};
|
||||
|
||||
const pollJob = (id: string) => {
|
||||
let phase = "Searching Google Maps...";
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/jobs/${id}/status`);
|
||||
const data = await res.json() as {
|
||||
status: string; totalLeads: number; emailsFound: number; results: ResultRow[];
|
||||
};
|
||||
|
||||
if (data.totalLeads > 0 && data.emailsFound === 0 && enrichEmails) {
|
||||
phase = "Enriching with Anymailfinder...";
|
||||
}
|
||||
if (data.emailsFound > 0) {
|
||||
phase = `Found ${data.emailsFound} emails so far...`;
|
||||
}
|
||||
|
||||
setProgress({
|
||||
current: enrichEmails ? data.emailsFound : data.totalLeads,
|
||||
total: enrichEmails ? data.totalLeads : queries.length * Number(maxResults),
|
||||
phase,
|
||||
});
|
||||
if (data.results?.length) setResults(data.results);
|
||||
updateJob(id, { status: data.status, progress: data.emailsFound, total: data.totalLeads });
|
||||
|
||||
if (data.status === "complete" || data.status === "failed") {
|
||||
clearInterval(interval);
|
||||
removeJob(id);
|
||||
setResults(data.results || []);
|
||||
if (data.status === "complete") {
|
||||
setStage("done");
|
||||
const msg = enrichEmails
|
||||
? `Done! ${data.totalLeads} companies found, ${data.emailsFound} emails enriched`
|
||||
: `Done! ${data.totalLeads} companies found`;
|
||||
toast.success(msg);
|
||||
} else {
|
||||
setStage("failed");
|
||||
toast.error("Job failed. Check your Google Maps API key in Settings.");
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
clearInterval(interval);
|
||||
setStage("failed");
|
||||
}
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const exportRows: ExportRow[] = results.map(r => ({
|
||||
company_name: r.companyName,
|
||||
domain: r.domain,
|
||||
contact_name: r.contactName,
|
||||
contact_title: r.contactTitle,
|
||||
email: r.email,
|
||||
confidence_score: r.confidence !== undefined ? Math.round(r.confidence * 100) : undefined,
|
||||
source_tab: "maps",
|
||||
job_id: jobId || "",
|
||||
found_at: new Date().toISOString(),
|
||||
}));
|
||||
|
||||
const emailsFound = results.filter(r => r.email).length;
|
||||
const hitRate = results.length > 0 ? Math.round((emailsFound / results.length) * 100) : 0;
|
||||
const totalExpected = queries.length * Number(maxResults);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-5xl">
|
||||
{/* Header */}
|
||||
<div className="relative rounded-2xl bg-gradient-to-r from-green-600/10 to-blue-600/10 border border-[#1e1e2e] p-6 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 text-sm text-green-400 mb-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>Tab 4</span>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
<span>Google Maps</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Google Maps → Email</h1>
|
||||
<p className="text-gray-400 mt-1 text-sm">
|
||||
Finde lokale Unternehmen über Google Maps und bereichere sie mit Entscheider-Emails.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info banner */}
|
||||
<div className="flex items-start gap-3 bg-blue-500/5 border border-blue-500/20 rounded-xl px-4 py-3">
|
||||
<Info className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-blue-300">
|
||||
Nutzt die Google Maps Places API (New). Max. 60 Ergebnisse pro Suchanfrage.
|
||||
Füge mehrere Regionen hinzu um mehr Ergebnisse zu erhalten.
|
||||
<span className="text-gray-400 ml-1">
|
||||
$200 Free Credit/Monat ≈ ~6.000 kostenlose Searches.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 1: Search config */}
|
||||
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-5">
|
||||
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-green-500/20 text-green-400 text-xs flex items-center justify-center font-bold">1</span>
|
||||
Suchanfrage konfigurieren
|
||||
</h2>
|
||||
|
||||
{/* Keyword */}
|
||||
<div>
|
||||
<Label className="text-gray-300 text-sm mb-1.5 block">Suchbegriff</Label>
|
||||
<Input
|
||||
placeholder="z.B. Solaranlage Installateur"
|
||||
value={keyword}
|
||||
onChange={e => setKeyword(e.target.value)}
|
||||
className="bg-[#0d0d18] border-[#2e2e3e] text-white placeholder:text-gray-600 focus:border-green-500"
|
||||
/>
|
||||
{/* Presets */}
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{PRESET_QUERIES.map(q => (
|
||||
<button
|
||||
key={q}
|
||||
onClick={() => setKeyword(q)}
|
||||
className={`text-xs px-2.5 py-1 rounded-md border transition-all ${
|
||||
keyword === q
|
||||
? "bg-green-500/20 text-green-300 border-green-500/40"
|
||||
: "bg-[#0d0d18] text-gray-500 border-[#2e2e3e] hover:border-green-500/30 hover:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{q}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Regions */}
|
||||
<div>
|
||||
<Label className="text-gray-300 text-sm mb-1.5 block">
|
||||
Regionen / Städte
|
||||
<span className="text-gray-500 font-normal ml-2">— je Region eine eigene Suchanfrage</span>
|
||||
</Label>
|
||||
|
||||
{/* Region chips */}
|
||||
<div className="min-h-[44px] flex flex-wrap gap-2 p-2.5 bg-[#0d0d18] border border-[#2e2e3e] rounded-lg focus-within:border-green-500 transition-colors mb-2">
|
||||
{regions.map(r => (
|
||||
<span
|
||||
key={r}
|
||||
className="flex items-center gap-1 bg-green-500/15 text-green-300 border border-green-500/25 rounded-md px-2.5 py-0.5 text-sm"
|
||||
>
|
||||
{r}
|
||||
<button onClick={() => removeRegion(r)} className="hover:text-white transition-colors">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
className="flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder:text-gray-600"
|
||||
placeholder="Region eingeben, Enter drücken..."
|
||||
value={regionInput}
|
||||
onChange={e => setRegionInput(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addRegion(regionInput); }
|
||||
}}
|
||||
onBlur={() => regionInput && addRegion(regionInput)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Region presets */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{GERMAN_REGIONS.filter(r => !regions.includes(r)).map(r => (
|
||||
<button
|
||||
key={r}
|
||||
onClick={() => addRegion(r)}
|
||||
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded border border-[#2e2e3e] text-gray-500 hover:border-green-500/30 hover:text-gray-300 transition-all"
|
||||
>
|
||||
<Plus className="w-2.5 h-2.5" /> {r}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Max results + language */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-gray-300 text-sm mb-1.5 block">Ergebnisse pro Region</Label>
|
||||
<Select value={maxResults} onValueChange={v => setMaxResults(v ?? "60")}>
|
||||
<SelectTrigger className="bg-[#0d0d18] border-[#2e2e3e] text-white">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#111118] border-[#2e2e3e]">
|
||||
{RESULTS_OPTIONS.map(o => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-gray-300">{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<p className="text-sm text-gray-500">
|
||||
= bis zu{" "}
|
||||
<span className="text-white font-semibold">{totalExpected.toLocaleString()}</span>{" "}
|
||||
Ergebnisse total ({queries.length} {queries.length === 1 ? "Query" : "Queries"})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview queries */}
|
||||
{queries.length > 0 && (
|
||||
<div className="bg-[#0d0d18] rounded-lg border border-[#1e1e2e] p-3">
|
||||
<p className="text-xs text-gray-500 mb-2">Suchanfragen die ausgeführt werden:</p>
|
||||
<div className="space-y-1">
|
||||
{queries.slice(0, 5).map((q, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs">
|
||||
<span className="w-4 h-4 rounded bg-green-500/20 text-green-400 flex items-center justify-center font-mono text-[10px]">{i+1}</span>
|
||||
<span className="text-gray-300 font-mono">"{q}"</span>
|
||||
</div>
|
||||
))}
|
||||
{queries.length > 5 && (
|
||||
<p className="text-xs text-gray-600 pl-6">+{queries.length - 5} weitere...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Step 2: Email enrichment */}
|
||||
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-4">
|
||||
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-green-500/20 text-green-400 text-xs flex items-center justify-center font-bold">2</span>
|
||||
Email Enrichment
|
||||
</h2>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Checkbox
|
||||
id="enrichEmails"
|
||||
checked={enrichEmails}
|
||||
onCheckedChange={v => setEnrichEmails(!!v)}
|
||||
className="border-[#2e2e3e] mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<label htmlFor="enrichEmails" className="text-sm text-gray-300 cursor-pointer font-medium">
|
||||
Direkt mit Anymailfinder anreichern
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
Entscheider-Emails für alle gefundenen Domains suchen (2 Credits/gültige Email)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{enrichEmails && (
|
||||
<div className="flex flex-wrap gap-2 pl-6">
|
||||
{CATEGORY_OPTIONS.map(opt => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setCategories(prev =>
|
||||
prev.includes(opt.value) ? prev.filter(c => c !== opt.value) : [...prev, opt.value]
|
||||
)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${
|
||||
categories.includes(opt.value)
|
||||
? "bg-green-500/20 text-green-300 border-green-500/40"
|
||||
: "bg-[#0d0d18] text-gray-400 border-[#2e2e3e] hover:border-green-500/30"
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Step 3: Run */}
|
||||
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-4">
|
||||
<h2 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<span className="w-6 h-6 rounded-full bg-green-500/20 text-green-400 text-xs flex items-center justify-center font-bold">3</span>
|
||||
Starten
|
||||
</h2>
|
||||
|
||||
{stage === "idle" || stage === "failed" ? (
|
||||
<Button
|
||||
onClick={startJob}
|
||||
disabled={!keyword.trim() || (!categories.length && enrichEmails)}
|
||||
className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-medium px-8 shadow-lg hover:shadow-green-500/25 transition-all"
|
||||
>
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
Google Maps durchsuchen
|
||||
</Button>
|
||||
) : stage === "running" ? (
|
||||
<ProgressCard
|
||||
title={progress.phase || "Läuft..."}
|
||||
current={progress.current}
|
||||
total={progress.total || totalExpected}
|
||||
subtitle={enrichEmails ? "Google Maps → Anymailfinder Bulk Enrichment" : "Google Maps Suche läuft..."}
|
||||
status="running"
|
||||
/>
|
||||
) : (
|
||||
<ProgressCard
|
||||
title="Fertig"
|
||||
current={enrichEmails ? emailsFound : results.length}
|
||||
total={results.length}
|
||||
subtitle={enrichEmails ? `Hit Rate: ${hitRate}%` : `${results.length} Unternehmen gefunden`}
|
||||
status="complete"
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Results */}
|
||||
{results.length > 0 && (
|
||||
<Card className="bg-[#111118] border-[#1e1e2e] p-6 space-y-4">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<h2 className="text-base font-semibold text-white">
|
||||
Ergebnisse ({results.length} Unternehmen{enrichEmails && emailsFound > 0 ? `, ${emailsFound} Emails` : ""})
|
||||
</h2>
|
||||
<ExportButtons
|
||||
rows={exportRows}
|
||||
filename={`maps-leads-${jobId?.slice(0, 8) || "export"}`}
|
||||
summary={enrichEmails ? `${emailsFound} Emails · ${hitRate}% Hit Rate` : `${results.length} Unternehmen`}
|
||||
/>
|
||||
</div>
|
||||
<ResultsTable
|
||||
rows={results}
|
||||
loading={stage === "running" && results.length === 0}
|
||||
extraColumns={[
|
||||
{ key: "address", label: "Adresse" },
|
||||
{ key: "phone", label: "Telefon" },
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{stage === "idle" && (
|
||||
<EmptyState
|
||||
icon={MapPin}
|
||||
title="Suchbegriff eingeben und starten"
|
||||
description="Gib einen Suchbegriff und Regionen ein um lokale Unternehmen über Google Maps zu finden und deren Entscheider-Emails anzureichern."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { EmptyState } from "@/components/shared/EmptyState";
|
||||
import { StatusBadge } from "@/components/shared/ProgressCard";
|
||||
import { toast } from "sonner";
|
||||
import { BarChart3, Building2, Linkedin, Search, Download, Trash2, RefreshCw } from "lucide-react";
|
||||
import { BarChart3, Building2, Linkedin, Search, MapPin, Download, Trash2, RefreshCw } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Job {
|
||||
@@ -32,6 +32,7 @@ const TYPE_CONFIG: Record<string, { icon: typeof Building2; label: string; color
|
||||
linkedin: { icon: Linkedin, label: "LinkedIn", color: "text-blue-500" },
|
||||
"linkedin-enrich": { icon: Linkedin, label: "LinkedIn Enrich", color: "text-blue-400" },
|
||||
serp: { icon: Search, label: "SERP", color: "text-purple-400" },
|
||||
maps: { icon: MapPin, label: "Google Maps", color: "text-green-400" },
|
||||
};
|
||||
|
||||
export default function ResultsPage() {
|
||||
|
||||
@@ -27,6 +27,14 @@ const CREDENTIALS: Credential[] = [
|
||||
link: "https://anymailfinder.com/account",
|
||||
linkLabel: "Get API key",
|
||||
},
|
||||
{
|
||||
service: "googlemaps",
|
||||
label: "Google Maps API Key",
|
||||
placeholder: "AIza...",
|
||||
link: "https://console.cloud.google.com/apis/credentials",
|
||||
linkLabel: "Google Cloud Console",
|
||||
instructions: 'Enable the "Places API (New)" in Google Cloud Console. Go to APIs & Services → Enable APIs → search "Places API (New)". Then create an API key under Credentials. Restrict the key to "Places API (New)" for security. Free tier: $200/month credit ≈ 6,000 searches.',
|
||||
},
|
||||
{
|
||||
service: "apify",
|
||||
label: "Apify API Token",
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Building2, Linkedin, Search, BarChart3, Settings, Zap, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Building2, Linkedin, Search, BarChart3, Settings, Zap, ChevronLeft, ChevronRight, MapPin } from "lucide-react";
|
||||
import { useAppStore } from "@/lib/store";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -11,7 +11,8 @@ const navItems = [
|
||||
{ href: "/airscale", icon: Building2, label: "AirScale → Email", color: "text-blue-400" },
|
||||
{ href: "/linkedin", icon: Linkedin, label: "LinkedIn → Email", color: "text-blue-500" },
|
||||
{ href: "/serp", icon: Search, label: "SERP → Email", color: "text-purple-400" },
|
||||
{ href: "/results", icon: BarChart3, label: "Results & History", color: "text-green-400" },
|
||||
{ href: "/maps", icon: MapPin, label: "Maps → Email", color: "text-green-400" },
|
||||
{ href: "/results", icon: BarChart3, label: "Results & History", color: "text-yellow-400" },
|
||||
{ href: "/settings", icon: Settings, label: "Settings", color: "text-gray-400" },
|
||||
];
|
||||
|
||||
@@ -19,12 +20,13 @@ interface CredentialStatus {
|
||||
anymailfinder: boolean;
|
||||
apify: boolean;
|
||||
vayne: boolean;
|
||||
googlemaps: boolean;
|
||||
}
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const { sidebarCollapsed, setSidebarCollapsed } = useAppStore();
|
||||
const [creds, setCreds] = useState<CredentialStatus>({ anymailfinder: false, apify: false, vayne: false });
|
||||
const [creds, setCreds] = useState<CredentialStatus>({ anymailfinder: false, apify: false, vayne: false, googlemaps: false });
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/credentials")
|
||||
@@ -80,6 +82,7 @@ export function Sidebar() {
|
||||
{ key: "anymailfinder", label: "Anymailfinder" },
|
||||
{ key: "apify", label: "Apify" },
|
||||
{ key: "vayne", label: "Vayne" },
|
||||
{ key: "googlemaps", label: "Google Maps" },
|
||||
].map(({ key, label }) => (
|
||||
<div key={key} className="flex items-center gap-2">
|
||||
<span className={cn("w-2 h-2 rounded-full flex-shrink-0", creds[key as keyof CredentialStatus] ? "bg-green-500" : "bg-red-500")} />
|
||||
|
||||
@@ -8,6 +8,7 @@ const BREADCRUMBS: Record<string, string> = {
|
||||
"/airscale": "AirScale → Email",
|
||||
"/linkedin": "LinkedIn → Email",
|
||||
"/serp": "SERP → Email",
|
||||
"/maps": "Google Maps → Email",
|
||||
"/results": "Results & History",
|
||||
"/settings": "Settings",
|
||||
};
|
||||
|
||||
143
lib/services/googlemaps.ts
Normal file
143
lib/services/googlemaps.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
// Google Maps Places API (New)
|
||||
// Docs: https://developers.google.com/maps/documentation/places/web-service/text-search
|
||||
// Auth: X-Goog-Api-Key header
|
||||
// Pricing: $32/1,000 requests — $200 free credit/month ≈ 6,250 free searches
|
||||
//
|
||||
// Text Search returns up to 20 results per page, max 3 pages (60 results) per query.
|
||||
// Use multiple queries (different cities) to exceed 60 results.
|
||||
|
||||
import axios from "axios";
|
||||
import { extractDomainFromUrl } from "@/lib/utils/domains";
|
||||
|
||||
const BASE_URL = "https://places.googleapis.com/v1/places:searchText";
|
||||
|
||||
// Fields we need — only request what we use to minimize billing
|
||||
const FIELD_MASK = [
|
||||
"places.id",
|
||||
"places.displayName",
|
||||
"places.websiteUri",
|
||||
"places.formattedAddress",
|
||||
"places.nationalPhoneNumber",
|
||||
"places.businessStatus",
|
||||
"nextPageToken",
|
||||
].join(",");
|
||||
|
||||
export interface PlaceResult {
|
||||
placeId: string;
|
||||
name: string;
|
||||
website: string | null;
|
||||
domain: string | null;
|
||||
address: string;
|
||||
phone: string | null;
|
||||
}
|
||||
|
||||
interface PlacesApiResponse {
|
||||
places?: Array<{
|
||||
id: string;
|
||||
displayName?: { text: string };
|
||||
websiteUri?: string;
|
||||
formattedAddress?: string;
|
||||
nationalPhoneNumber?: string;
|
||||
businessStatus?: string;
|
||||
}>;
|
||||
nextPageToken?: string;
|
||||
}
|
||||
|
||||
export async function searchPlaces(
|
||||
textQuery: string,
|
||||
apiKey: string,
|
||||
maxResults = 60,
|
||||
languageCode = "de"
|
||||
): Promise<PlaceResult[]> {
|
||||
const results: PlaceResult[] = [];
|
||||
let pageToken: string | undefined;
|
||||
|
||||
do {
|
||||
const body: Record<string, unknown> = {
|
||||
textQuery,
|
||||
pageSize: 20,
|
||||
languageCode,
|
||||
};
|
||||
if (pageToken) body.pageToken = pageToken;
|
||||
|
||||
const response = await axios.post<PlacesApiResponse>(BASE_URL, body, {
|
||||
headers: {
|
||||
"X-Goog-Api-Key": apiKey,
|
||||
"X-Goog-FieldMask": FIELD_MASK,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
timeout: 15000,
|
||||
});
|
||||
|
||||
const data = response.data;
|
||||
const places = data.places || [];
|
||||
|
||||
for (const place of places) {
|
||||
if (place.businessStatus && place.businessStatus !== "OPERATIONAL") continue;
|
||||
|
||||
const website = place.websiteUri || null;
|
||||
const domain = website ? extractDomainFromUrl(website) : null;
|
||||
|
||||
results.push({
|
||||
placeId: place.id,
|
||||
name: place.displayName?.text || "",
|
||||
website,
|
||||
domain,
|
||||
address: place.formattedAddress || "",
|
||||
phone: place.nationalPhoneNumber || null,
|
||||
});
|
||||
}
|
||||
|
||||
pageToken = data.nextPageToken;
|
||||
|
||||
// Respect Google's recommendation: wait briefly between paginated requests
|
||||
if (pageToken && results.length < maxResults) {
|
||||
await sleep(500);
|
||||
}
|
||||
} while (pageToken && results.length < maxResults);
|
||||
|
||||
return results.slice(0, maxResults);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search across multiple queries (e.g., different cities) and deduplicate by domain.
|
||||
*/
|
||||
export async function searchPlacesMultiQuery(
|
||||
queries: string[],
|
||||
apiKey: string,
|
||||
maxResultsPerQuery = 60,
|
||||
languageCode = "de",
|
||||
onProgress?: (done: number, total: number) => void
|
||||
): Promise<PlaceResult[]> {
|
||||
const seenDomains = new Set<string>();
|
||||
const seenPlaceIds = new Set<string>();
|
||||
const allResults: PlaceResult[] = [];
|
||||
|
||||
for (let i = 0; i < queries.length; i++) {
|
||||
try {
|
||||
const results = await searchPlaces(queries[i], apiKey, maxResultsPerQuery, languageCode);
|
||||
|
||||
for (const r of results) {
|
||||
if (seenPlaceIds.has(r.placeId)) continue;
|
||||
if (r.domain && seenDomains.has(r.domain)) continue;
|
||||
|
||||
seenPlaceIds.add(r.placeId);
|
||||
if (r.domain) seenDomains.add(r.domain);
|
||||
allResults.push(r);
|
||||
}
|
||||
|
||||
onProgress?.(i + 1, queries.length);
|
||||
|
||||
// Avoid hammering the API between queries
|
||||
if (i < queries.length - 1) await sleep(300);
|
||||
} catch (err) {
|
||||
console.error(`Google Maps search error for query "${queries[i]}":`, err);
|
||||
}
|
||||
}
|
||||
|
||||
return allResults;
|
||||
}
|
||||
|
||||
function sleep(ms: number) {
|
||||
return new Promise(r => setTimeout(r, ms));
|
||||
}
|
||||
Reference in New Issue
Block a user