e2:"ExplicitChatIdProvider" e3:I[903690,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"$e2"] e4:I[838238,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"SWRDataProvider"] e5:T2276,[V0_FILE]typescriptreact:file="/components/room/contact-jon.tsx" 'use client' import { MessageCircle, Phone, X } from 'lucide-react' import { useEffect, useState } from 'react' import { createPortal } from 'react-dom' import { QRCodeSVG } from 'qrcode.react' import { TagMark } from '@/components/room/brand-mark' import { buildSmsHref, buildTelHref, JON } from '@/lib/room/jon' /* * THE SMART CONTACT BUTTON. On a phone, tapping "Text Jon" should open * Messages — and it does, via the sms: deeplink. On a DESKTOP the same link * does nothing (or worse, opens a broken handler), which silently kills the * site's primary conversion for every founder at a keyboard. So the device is * detected AT CLICK TIME: coarse pointers navigate straight to the deeplink, * fine pointers get a branded QR popup to scan with the phone that can * actually send the text. * * Anti-scrape law holds: the number never renders as text. It exists only * inside the deeplink, which only enters the DOM as a QR payload after a * deliberate click. */ function isPhoneDevice(): boolean { return ( window.matchMedia('(pointer: coarse)').matches || window.matchMedia('(max-width: 767px)').matches ) } export function ContactJon({ message, label = 'Text Jon directly', className = '', variant = 'primary', }: { message: string label?: string className?: string /* primary = filled CTA; quiet = ghost row; tag = the shelf-tag yellow button used on dark primary sections; inline = the compact h-11 pill the calculator uses; chip = the same rounded-full ghost pill as a decoder chip / next-step badge, for when this is one option among several under a reply rather than a standalone CTA. Display, radius and text size all live in the variant (never in the shared prefix) so two conflicting values of the same property never land in one class string. */ variant?: 'primary' | 'quiet' | 'tag' | 'inline' | 'chip' }) { const [qrOpen, setQrOpen] = useState(false) const styles = variant === 'primary' ? 'flex rounded-lg bg-primary px-4 py-3 text-[14px] text-primary-foreground hover:bg-primary-hover' : variant === 'tag' ? 'inline-flex rounded-lg bg-tag px-5 py-2.5 text-[14px] font-semibold text-tag-foreground transition-opacity hover:opacity-85' : variant === 'inline' ? 'inline-flex h-11 rounded-lg bg-primary px-5 text-[14px] text-primary-foreground hover:bg-primary-hover' : variant === 'chip' ? 'inline-flex rounded-full bg-card px-3.5 py-2.5 text-[12.5px] text-muted-foreground ring-1 ring-border hover:bg-secondary hover:text-foreground sm:py-1.5' : 'flex rounded-lg bg-card px-4 py-3 text-[14px] text-foreground ring-1 ring-border hover:bg-secondary' return ( <> {qrOpen && setQrOpen(false)} />} ) } /* * The QR popup — a small centered dialog on the whisper curve. Two modes, * Text and Call, because a desktop can do neither itself: both payloads are * deeplinks the founder's PHONE executes after a scan. * * MUST PORTAL TO document.body. This modal is invoked from deep inside the * scrolled message list (every ContactJon chip lives there), and a `fixed` * element takes its containing block from the nearest ancestor with a * transform/filter/will-change — which a long scrolled transcript full of * whisper-in entrance animations WILL have. Confirmed live: without the * portal, opening this from a verdict chip rendered the dialog at * getBoundingClientRect().top === -753, genuinely off-screen, not a timing * artifact. `canPortal` gates the portal on mount so SSR renders nothing * (no `document` on the server) and the first client paint doesn't fight * hydration. */ function ContactQrModal({ message, onClose }: { message: string; onClose: () => void }) { const [shown, setShown] = useState(false) const [mode, setMode] = useState<'text' | 'call'>('text') const [canPortal, setCanPortal] = useState(false) useEffect(() => { setCanPortal(true) const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true))) return () => cancelAnimationFrame(id) }, []) const requestClose = () => { setShown(false) window.setTimeout(onClose, 440) } useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') requestClose() } window.addEventListener('keydown', onKey) return () => window.removeEventListener('keydown', onKey) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const payload = mode === 'text' ? buildSmsHref(message) : buildTelHref() if (!canPortal) return null return createPortal(

Scan with your phone

{mode === 'text' ? 'Opens a text to Jon with the message already written. Edit it, hit send.' : `Rings ${JON.name}\u2019s actual phone. No switchboard.`}

{/* The QR itself, on a white well so any screen brightness scans. Level M keeps the module grid coarse enough for a webcam-distance scan even with a long prefilled message in the payload. */}

{/* Text / Call toggle — two honest deeplinks, one frame. */}

, document.body, ) }dc:["$","$Le3",null,{"chatId":"cc8IcCCEcnb","children":["$","$Le4",null,{"data":{"@\"active-block\",\"cc8IcCCEcnb\",":{"id":"b_XaUhEL8hW5i","messageId":"SOIK13XWrMOyuCRbvG0KjRn0WJWV8Lle","source":"$e5","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Closing createPortal call","taskNameComplete":"Closed createPortal call"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"cc8IcCCEcnb\",":true,"/chat/api/snapshots/proxy?blockId=b_XaUhEL8hW5i&v=v2":null},"children":"$Le6"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This