/* WPSiteBeam Scanner — Contact Tab
Auto-split from Scanner.jsx.
*/
(function () {
'use strict';
const ScanEmptyState = window.ScanEmptyState;
const Icon = window.Icon;
function ScannerContactTab({ data, payloads }) {
const { useState } = React;
/* 2026-05-18 v3 per Jordan: format phone numbers from raw +1XXXXXXXXXX
E.164 to readable "(XXX) XXX-XXXX". Was "bad display format (coding)" —
showing the raw "+17855796146" instead of "(785) 579-6146". Handles US
10-digit (with or without leading +1) and falls back to original string
for non-US/non-10-digit numbers. */
const formatPhone = (raw) => {
if (!raw) return '';
const digits = String(raw).replace(/\D/g, '');
// US 11-digit (with leading 1)
if (digits.length === 11 && digits.startsWith('1')) {
return `(${digits.slice(1,4)}) ${digits.slice(4,7)}-${digits.slice(7)}`;
}
// US 10-digit
if (digits.length === 10) {
return `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`;
}
return String(raw);
};
/* Session A defensive reading: server.js may return contact as either
legacy bare strings ("sales@foo.com") OR labeled objects ({email, label}).
Normalize both shapes to the same internal rendering shape so the UI
works regardless of which server version is deployed. */
const normEmail = (e) => {
if (!e) return null;
if (typeof e === 'object') return { addr: e.email || e.value || '', label: e.label || 'Email' };
return { addr: String(e), label: 'Email' };
};
const normPhone = (p) => {
if (!p) return null;
if (typeof p === 'object') return { num: p.number || p.value || '', label: p.label || p.type || 'Phone', type: p.type || 'Phone' };
return { num: String(p), label: 'Phone', type: 'Phone' };
};
/* Placeholder detection — strips out fake/example phone numbers that
creep in from form placeholder attributes ("(999) 999-9999"),
tutorial copy, or tel: links pointing at sample numbers. We only
filter if the digit pattern is OBVIOUSLY fake — all same digit
(1111111111), sequential (1234567890), or a known tutorial number
(555-prefixed in US/Canada is reserved for fictional use). */
const isPlaceholderPhone = (numStr) => {
if (!numStr) return false;
const digits = String(numStr).replace(/\D/g, '');
if (digits.length < 7) return true; /* Too short to be real */
/* All same digit */
if (/^(\d)\1+$/.test(digits)) return true;
/* Sequential ascending: 1234567890, 0123456789 */
if (/^0?12345678/.test(digits) || /^1234567890$/.test(digits)) return true;
/* US 555-prefix in area code OR exchange (reserved for fiction) */
/* Normalize to 10-digit US format if leading 1 */
const normalized = digits.length === 11 && digits.startsWith('1') ? digits.slice(1) : digits;
if (normalized.length === 10) {
const exchange = normalized.slice(3, 6);
if (exchange === '555') return true; /* (xxx) 555-xxxx is fictional */
}
return false;
};
const emails = (data?.contact?.emails || []).map(normEmail).filter(x => x && x.addr);
/* Phones: primary filter happens upstream in ScannerData.normalizeScanData.
Apply isPlaceholderPhone here too as defensive backstop in case
legacy/cached data slipped through. */
const phones = (data?.contact?.phones || [])
.map(normPhone)
.filter(x => x && x.num)
.filter(x => !isPlaceholderPhone(x.num));
const socials = (data?.contact?.socials || data?.contact?.social || []);
const address = data?.contact?.address || null;
/* Multi-location TABS (2026-05-18 v2 per Jordan):
Replaces v1 grouped-sections render. When ≥2 distinct phone labels exist
(e.g. KPCHC with "Junction City", "Manhattan", "Pharmacy" × 2, "After Hours Care"),
render a vertical tab strip on the left + filtered location content on the right.
Primary address is paired with the location tab whose label matches the city
(best-effort string match). Falls back to flat single-card view when there's
only one phone or one label (single-location site). */
const locationTabs = (() => {
if (phones.length < 2) return null;
const groups = new Map();
for (const p of phones) {
const key = (p.label || 'Phone').trim();
if (!groups.has(key)) groups.set(key, []);
groups.get(key).push(p);
}
if (groups.size < 2) return null;
// Try to match primary address city to a location label
const primaryAddr = data?.contact?.address || '';
const addrLower = primaryAddr.toLowerCase();
const tabs = [
{ key: '__all__', label: 'All', phones, addressForLoc: primaryAddr || null, isAll: true },
];
for (const [label, locPhones] of groups.entries()) {
// Address pairs with a location tab if the address text contains the label
// (e.g. "Junction City" tab matches "361 Grant Ave Junction City, KS 66441")
const matchesAddr = primaryAddr && addrLower.includes(label.toLowerCase());
tabs.push({
key: label,
label,
phones: locPhones,
addressForLoc: matchesAddr ? primaryAddr : null,
isAll: false,
});
}
return tabs;
})();
const [selectedLocKey, setSelectedLocKey] = useState('__all__');
const activeTab = locationTabs ? (locationTabs.find(t => t.key === selectedLocKey) || locationTabs[0]) : null;
const hasContact = emails.length > 0 || phones.length > 0 || socials.length > 0 || !!address;
if (!hasContact) {
return ;
}
return (
{/* LEFT 50%: Contact Info — consolidated emails + phones + address.
Previously 3 separate cards (emails & phones, address, social full-width);
merged into one "Contact Info" card so users scan one block for everything
a CRM needs, and Social gets its own 50% card on the right. */}
No emails, phone numbers, or address found in this site's HTML.
)}
{/* MULTI-LOCATION VERTICAL TABS (2026-05-18 v2 per Jordan).
Renders left-rail location tabs + filtered content on the right
when ≥2 phone labels exist. Single-location sites fall through to
the flat rendering below this block. */}
{locationTabs && activeTab && (
{/* 2026-05-18 v3 per Jordan: heading row at top of the right pane
showing the active location's name + count summary + a link
to the site's actual contact page (since the scanner can
miss locations / addresses — Jordan flagged Chapman missing
+ only Junction City had an address). The "View source" link
gives the user a fast escape hatch to verify against the
real page. */}
{/* On "All" tab, show emails section; on other tabs, suppress (most sites share one email across locations) */}
{activeTab.isAll && emails.map((e, i) => (
No address extracted for {activeTab.label}.
The scanner may have missed it — check the source page link above, or see the Embedded Maps section below for location coordinates.
))}
{/* Addresses — flat */}
{(() => {
const addr = data.contact.address;
const extras = (data.contact.city_state_zip || [])
.filter(x => x && x !== addr)
.filter(x => !addr || !addr.includes(x));
const all = [];
if (addr) all.push(addr);
extras.forEach(x => { if (!all.includes(x)) all.push(x); });
if (all.length === 0) return null;
return all.map((a, i) => (
{i === 0 ? 'ADDRESS' : 'ADDITIONAL LOCATION'}
{a}
));
})()}
)}
{/* RIGHT 50%: Social channels — moved from full-width to 50% to balance
with Contact Info. If there are many socials, scroll inside card.
Each row gets a small colored brand-letter badge in the Platform
column for visual scannability — e.g. blue F for Facebook, dark
IG for Instagram. Colors are the platform's official brand color
where well-known; falls back to neutral gray for unknown
platforms. Pure inline styling — no Icon component dependency. */}