;\n return

;\n};",[],[158,177],{"_102":187,"_95":188,"_159":189,"_161":160,"_162":140,"_163":190,"_165":116,"_104":191,"_99":192,"_168":182,"_170":193,"_171":22,"_172":-5,"_173":194,"_98":195},"8c028d10-29e0-11f0-9d42-569c3dd06744","embedIframe.tsx","e117bad6-2482-11f0-923d-569c3dd06744",1520,["D",1746470484679],30,"/** @jsxImportSource npm:hono@3/jsx */\nimport whackaghost from \"https://esm.town/v/Ttt/whackaghost?v=1\";\n\nexport const WhackAGhostEmbedIframe = async () => {\n const response = await whackaghost(new Request(\"https://example.com\"));\n const html = await response.text();\n\n return (\n \n {/* Inject the Glance script as a module */}\n {/* iframes need to have this script in order to appear during Glance screenshares */}\n {\n /* Note that this may not be needed; seems to work in cobrowsing without this script\n but that may be due to the allowed domains / safe list setting in Glance */\n }\n \n \n );\n};",[],[158,188],{"_102":197,"_95":198,"_159":199,"_161":160,"_162":140,"_163":200,"_165":116,"_104":201,"_99":202,"_168":182,"_170":203,"_171":22,"_172":-5,"_173":204,"_98":205},"bb69067e-2846-11f0-9f02-569c3dd06744","financeForm.tsx","1053b45e-22e8-11f0-81f3-569c3dd06744",1070,["D",1746294470541],9,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\n\nexport async function financeForm() {\n // Hardcoded current step for display purposes\n const currentStep = 1;\n\n // Styles for the form\n const styles = {\n container: {\n fontFamily: \"\\\"Roboto\\\", \\\"Helvetica Neue\\\", Arial, sans-serif\",\n maxWidth: \"800px\",\n margin: \"0 auto\",\n padding: \"30px\",\n color: \"#333\",\n backgroundColor: \"#fff\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n },\n header: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n logo: {\n fontSize: \"24px\",\n fontWeight: \"700\",\n color: \"#026666\", // finance-like teal color\n marginBottom: \"20px\",\n },\n tabs: {\n display: \"flex\",\n width: \"100%\",\n borderBottom: \"1px solid #e0e0e0\",\n marginBottom: \"30px\",\n },\n tab: {\n flex: \"1\",\n textAlign: \"center\",\n padding: \"12px 0\",\n position: \"relative\",\n cursor: \"default\",\n },\n activeTab: {\n borderBottom: \"3px solid #026666\",\n fontWeight: \"600\",\n },\n tabNumber: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"24px\",\n height: \"24px\",\n borderRadius: \"50%\",\n backgroundColor: \"#e0e0e0\",\n color: \"#666\",\n marginRight: \"8px\",\n fontSize: \"14px\",\n },\n activeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n completeTabNumber: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n formGroup: {\n marginBottom: \"20px\",\n },\n label: {\n display: \"block\",\n marginBottom: \"6px\",\n fontWeight: \"500\",\n fontSize: \"14px\",\n },\n input: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n boxSizing: \"border-box\",\n },\n select: {\n width: \"100%\",\n padding: \"12px\",\n fontSize: \"16px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n backgroundColor: \"#fff\",\n boxSizing: \"border-box\",\n },\n flexRow: {\n display: \"flex\",\n gap: \"15px\",\n },\n buttonContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n marginTop: \"30px\",\n },\n button: {\n padding: \"12px 24px\",\n fontSize: \"16px\",\n fontWeight: \"600\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n },\n primaryButton: {\n backgroundColor: \"#026666\",\n color: \"#fff\",\n },\n secondaryButton: {\n backgroundColor: \"#e0e0e0\",\n color: \"#333\",\n },\n checkboxLabel: {\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"14px\",\n cursor: \"pointer\",\n },\n checkbox: {\n marginRight: \"8px\",\n },\n formSection: {\n marginBottom: \"30px\",\n },\n sectionTitle: {\n fontSize: \"18px\",\n fontWeight: \"600\",\n marginBottom: \"15px\",\n color: \"#026666\",\n },\n infoText: {\n fontSize: \"14px\",\n color: \"#666\",\n marginBottom: \"15px\",\n },\n disclaimer: {\n fontSize: \"12px\",\n color: \"#666\",\n marginTop: \"20px\",\n padding: \"15px\",\n backgroundColor: \"#f8f8f8\",\n borderRadius: \"4px\",\n },\n };\n\n // Tabs rendering\n const renderTabs = () => {\n const steps = [\n \"Personal Information\",\n \"Address\",\n \"Employment\",\n \"Investment Profile\",\n \"Account Setup\",\n ];\n\n return (\n

\n {steps.map((step, index) => {\n const stepNumber = index + 1;\n const isActive = currentStep === stepNumber;\n const isComplete = currentStep > stepNumber;\n\n return (\n \n \n {isComplete ? \"✓\" : stepNumber}\n \n {step}\n

\n );\n })}\n

\n );\n };\n\n return (\n

FINANCIAL INVESTMENTS

\n {renderTabs()}\n

\n\n

\n {/* Personal Information */}\n

Personal Information

\n Please provide your personal details as they appear on your legal documents.\n

\n\n

\n First Name\n \n

\n\n

\n Middle Initial\n \n

\n\n

\n Last Name\n \n

\n\n

\n Date of Birth\n \n

\n\n

\n Social Security Number\n \n

\n\n

\n Email Address\n \n

\n\n

\n Phone Number\n \n

\n\n

\n Your personal information is protected by our security measures and privacy policy. We will never share your\n Social Security Number with third parties except as required by law.\n

\n\n {/* Sample of other tabs (normally would be conditionally rendered) */}\n

Residential Address

\n Street Address\n \n

\n\n

{/* Spacer for the first step */}\n \n Continue\n \n

\n\n {/* Additional elements that would be shown on other steps */}\n

Employment Information

\n Employment Status\n \n \n \n \n \n \n \n \n

\n\n

Investment Profile

\n Investment Goals (Select all that apply)\n

\n \n \n Retirement\n \n

\n\n

Account Setup

\n Account Type\n \n \n \n \n \n \n

\n\n

\n \n \n I agree to the Terms and Conditions, Privacy Policy, and confirm that I have reviewed the Account\n Agreement and Fee Schedule.\n \n

\n );\n}",[],[158,198],{"_102":207,"_95":208,"_159":209,"_161":160,"_162":140,"_163":210,"_165":116,"_104":211,"_99":212,"_168":182,"_170":213,"_171":22,"_172":-5,"_173":214,"_98":215},"55a3e138-2abc-11f0-b75b-569c3dd06744","generatePDF.tsx","757394ca-2a96-11f0-bb37-569c3dd06744",1769,["D",1746564882734],110,"export const generatePDF = async (options: {\n pageId: string;\n date: string;\n customerName: string;\n customerEmail: string;\n agentName: string;\n agentEmail: string;\n items: [];\n currencySymbol: string;\n}): Promise => {\n const { jsPDF } = await import(\"npm:jspdf\");\n const { applyPlugin } = await import(\"npm:jspdf-autotable\");\n\n applyPlugin(jsPDF);\n\n const doc = new jsPDF();\n const {\n pageId,\n date,\n customerName,\n customerEmail,\n agentName,\n agentEmail,\n items,\n currencySymbol,\n } = options;\n // variables for tabular content\n const keys = Object.keys(items[0]); // get column names\n const head = [keys];\n const tableBody = items.map(row => keys.map(k => row[k]));\n // Calculate total amount\n // const total = items.reduce(\n // (acc, item) => acc + item.quantity * item.price,\n // 0,\n // );\n\n // Set initial y position for content\n let y = 20;\n // Set invoice header\n doc.setFontSize(18);\n doc.text(\"Glancer demo receipt\", 20, y);\n y += 7;\n doc.setFontSize(12);\n doc.text(`Date: ${date}`, 20, y);\n // doc.text(`id: ${pageId}`, 20, y);\n y += 20;\n doc.text(`For:`, 20, y);\n doc.text(`From:`, 100, y);\n y += 5;\n doc.text(`${customerName}`, 20, y);\n doc.text(`${agentName}`, 100, y);\n y += 5;\n doc.text(`${customerEmail}`, 20, y);\n doc.text(`${agentEmail}`, 100, y);\n // Set customer information\n y += 20;\n doc.autoTable(\n {\n startY: y,\n head: head,\n body: tableBody,\n },\n );\n y = doc.lastAutoTable.finalY + 20; // add some spacing\n\n // doc.line(20, y, 180, y);\n // y += 10;\n doc.text(\"Notes:\", 20, y);\n y += 10;\n doc.text(\"Thanks for cobrowsing with me!\", 20, y);\n // https://help.glance.cx/glance-cobrowse/features/pdf_cobrowse/\n y += 10;\n doc.text(\"If you want to learn more about cobrowsing and PDFs, check out our Docs:\", 20, y);\n y += 5;\n doc.text(\"https://help.glance.cx/glance-cobrowse/features/pdf_cobrowse/\", 20, y);\n\n y += 10;\n doc.text(`- ${agentName}`, 20, y);\n\n // Set table headers\n // doc.setFont(undefined, \"bold\");\n // doc.text(\"Description\", 20, y);\n // doc.text(\"Quantity\", 100, y);\n // doc.text(\"Price\", 150, y);\n // y += 5;\n // // Draw table lines\n // doc.line(20, y, 180, y);\n // y += 5;\n // // Set table rows\n // doc.setFont(undefined, \"normal\");\n // items.forEach((item) => {\n // doc.text(item.description, 20, y);\n // doc.text(item.quantity.toString(), 100, y);\n // doc.text(item.price.toString(), 150, y);\n // y += 5;\n // });\n // Draw table lines\n // doc.line(20, y, 180, y);\n // y += 10;\n // Set total amount\n // doc.setFont(undefined, \"bold\");\n // doc.text(`Total: ${total}`, 150, y);\n return doc.output();\n};",[],[158,208],{"_102":217,"_95":218,"_159":219,"_161":160,"_162":140,"_163":220,"_165":116,"_104":221,"_99":212,"_168":182,"_170":222,"_171":22,"_172":-5,"_173":223,"_98":224},"253c54ec-2b68-11f0-81f4-569c3dd06744","servePDF.tsx","d2b00566-294b-11f0-9e91-569c3dd06744",2015,["D",1746638674963],"/** @jsxImportSource npm:hono@3/jsx */\n\n// approach borrowed from https://docs.val.town/guides/generate-pdfs/\nimport { generatePDF } from \"https://esm.town/v/bradnoble/Glancer/embeds/generatePDF.tsx\";\n\n// Generate and serve the PDF requested from the glancer endpoint\n// @param: the Notion page object, sent by the pdf link on the pdf endpoint\nexport const examplePDF = async (page: any) => {\n // get notion page details for each of the events in the relation property\n // note: the relation property generates a summary that we use here, rather than the relation property\n // the summary is a concatenated list of related events, separated by commas\n const events = page.properties[\"Interaction summary\"].rich_text[0].plain_text.split(\",\") || [\"setup-\" + new Date()];\n // build objects out of each item in the events array\n const eventsObjects = events.map((event) => {\n const row = event.split(\"-\");\n return {\n \"event\": row[0],\n \"date & time\": row[1],\n };\n });\n\n const invoicePDF = await generatePDF({\n pageId: page.id || \"001\",\n date: new Date().toDateString(),\n customerName: page.properties.Name.title[0].plain_text || \"Alice Bar\",\n customerEmail: page.properties.Email.email || \"alice@bar.com\",\n agentName: page.properties[\"Agent name\"].formula.string || \"Agent Smith\",\n agentEmail: page.properties[\"Agent email\"].email || \"agent@smith.com\",\n items: eventsObjects || [],\n currencySymbol: \"$\",\n });\n return new Response(invoicePDF, {\n headers: { \"Content-Type\": \"application/pdf\" },\n });\n};\n\n// export const pdf = async () => {\n// const test = { \"foo\": \"bar\" };\n// const response = await examplePDF(test);\n// const pdfBlob = await response.blob();\n// const reader = new FileReader();\n\n// return new Promise((resolve) => {\n// reader.onload = () => {\n// const dataUrl = reader.result as string;\n// resolve(\n// ,\n// );\n// };\n// reader.readAsDataURL(pdfBlob);\n// });\n// };\n\n// // This function returns an iframe that points to a PDF endpoint\n// export const pdf = async () => {\n// // Create a unique URL parameter to prevent caching issues\n// const timestamp = new Date().getTime();\n\n// return (\n// \n// {/* Inject the Glance script as a module */}\n// {/* iframes need to have this script in order to appear during Glance screenshares */}\n// \n// \n// );\n// };",[],[158,218],{"_102":226,"_95":227,"_159":228,"_161":160,"_162":140,"_163":229,"_165":116,"_104":230,"_99":231,"_168":182,"_170":232,"_171":22,"_172":-5,"_173":233,"_98":234},"bf93f704-2846-11f0-b3b6-569c3dd06744","stripeLikeCheckoutForm.tsx","1874ff28-22e1-11f0-9ee6-569c3dd06744",1071,["D",1746294477530],10,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\n\nexport async function StripeCheckoutForm() {\n const [cardNumber, setCardNumber] = \"\";\n const [expiry, setExpiry] = \"\";\n const [cvc, setCvc] = \"\";\n const [name, setName] = \"\";\n const [email, setEmail] = \"\";\n const [address, setAddress] = \"\";\n const [city, setCity] = \"\";\n const [state, setState] = \"\";\n const [zip, setZip] = \"\";\n const [country, setCountry] = \"US\";\n\n const handleSubmit = (e) => {\n e.preventDefault();\n console.log(\"Payment submitted\");\n };\n\n const formatCardNumber = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n // Add space after every 4 digits\n const formatted = digits.replace(/(\\d{4})(?=\\d)/g, \"$1 \");\n return formatted.slice(0, 19); // Limit to 16 digits + 3 spaces\n };\n\n const formatExpiry = (value) => {\n // Remove all non-digits\n const digits = value.replace(/\\D/g, \"\");\n if (digits.length > 2) {\n return `${digits.slice(0, 2)}/${digits.slice(2, 4)}`;\n }\n return digits;\n };\n\n return (\n \n \n \n Checkout\n \n \n $25.00\n \n \n\n

\n \n \n Email\n \n \n \n\n \n \n Card information\n \n \n \n \n \n \n setCvc(e.target.value.replace(/\\D/g, \"\").slice(0, 3))}\n placeholder=\"CVC\"\n required\n style={{\n width: \"50%\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"0 0 4px 0\",\n border: \"1px solid #e4e4e7\",\n borderLeft: \"none\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n \n Name on card\n \n \n \n\n \n \n Billing address\n \n \n \n \n \n \n \n \n setCity(e.target.value)}\n placeholder=\"City\"\n required\n style={{\n flex: \"1 1 auto\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n setZip(e.target.value)}\n placeholder=\"ZIP\"\n required\n style={{\n width: \"80px\",\n padding: \"10px 14px\",\n fontSize: \"16px\",\n borderRadius: \"4px\",\n border: \"1px solid #e4e4e7\",\n boxShadow: \"inset 0 1px 1px rgba(0, 0, 0, 0.03)\",\n transition: \"box-shadow 0.15s ease\",\n outline: \"none\",\n boxSizing: \"border-box\",\n }}\n />\n \n \n\n \n Pay $25.00\n \n\n \n \n \n \n Your payment information is secure\n \n \n \n );\n}",[],[158,227],[158],{"_102":237,"_95":238,"_159":239,"_161":-5,"_162":140,"_163":167,"_165":116,"_104":240,"_99":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":241,"_98":301},"e4f1deba-214a-11f0-9237-569c3dd06744","routes","6d95e43a-c17d-42ca-9bfc-9d3094a6cb92",["D",1745526600042],[242,253,263,273,283,293],{"_102":243,"_95":244,"_159":245,"_161":239,"_162":140,"_163":246,"_165":116,"_104":247,"_99":248,"_168":249,"_170":250,"_171":22,"_172":-5,"_173":251,"_98":252},"1aee8876-214e-11f0-b884-569c3dd06744","README.md","70f96722-7df0-4aac-a569-399cbbe92bd8",12,["D",1745527979136],2,"file","# Routes Directory\n\nThis directory contains all the route handlers for the webhookAPI application. Each file exports a Hono app that handles a specific route or group of related routes.\n\n## Structure\n\n- `auth.ts` - Authentication middleware\n- `example-database-page.ts` - Handles `/example/database/page` endpoint\n- `example-guest-welcome.ts` - Handles `/example/guest/welcome` endpoint\n- `glancer.ts` - Handles `/glancer` and `/glancer/:id` endpoints\n- `property-injections.ts` - Handles `/property/injections` endpoint\n- `test-routes.ts` - Handles `/asdf`, `/qwer/:id`, and `/test/:id` endpoints\n- `root.ts` - Handles the root `/` endpoint",[],[238,244],{"_102":254,"_95":255,"_159":256,"_161":239,"_162":140,"_163":257,"_165":116,"_104":258,"_99":259,"_168":182,"_170":260,"_171":22,"_172":-5,"_173":261,"_98":262},"f91043dc-2d9d-11f0-8922-569c3dd06744","auth.ts","94db79c3-abbd-40c6-9e91-f4db73486452",2028,["D",1746881696010],46,"export default async (c, next) => {\n const method = c.req.method;\n const origin = await c.req.header(\"sec-fetch-site\");\n const secret = c.req.header(\"x-api-key\"); // sent by Notion webhooks (POSTS)\n\n // if this is a GET request from a page in this project, allow it\n // (example: a GET that hits the API endpoint to check the cobrowse boolean to see if cobrowsing is enabled)\n // POSTs from Notion are automation webhooks that carry the x-api-header, which needs to match X_API_KEY in val.town\n if (origin !== \"same-origin\") {\n console.log(\"origin objection: request not from this project; origin: \", origin);\n if (secret !== Deno.env.get(\"X_API_KEY\") && method !== \"GET\") {\n return c.text(\"Unauthorized\", 401);\n }\n }\n await next();\n};",[],[238,255],{"_102":264,"_95":265,"_159":266,"_161":239,"_162":140,"_163":267,"_165":116,"_104":268,"_99":269,"_168":182,"_170":270,"_171":22,"_172":-5,"_173":271,"_98":272},"07d84410-2abe-11f0-84bb-569c3dd06744","embedTest.tsx","3029ad6c-2435-11f0-96e2-569c3dd06744",1771,["D",1746565611212],421,"/** @jsxImportSource npm:hono@3/jsx */\nimport { Hono } from \"npm:hono@3\";\nimport { examplePDF } from \"../embeds/servePDF.tsx\";\n\nconst app = new Hono();\n\n// Add a route to serve the PDF content directly\napp.get(\"/pdf-content\", async (c) => {\n return await examplePDF(c.req.raw);\n});\n\napp.get(\"/\", async (c) => {\n const pageId = \"1e0c2007-36c2-80fb-9acf-d4ca59d6e6b7\"; // this would normally be a GET param\n\n return c.html(\n \n \n \n \n \n {/* */}\n {/* */}\n\n \n \n \n \n

\n Glancer\n

\n\n

\n [example title goes here]\n

\n This area of the page features a custom iframe embed. Not only does the embedded iframe appear in the\n cobrowsing session, but also the agent can interact with it.\n

\n /* {await pdf()} */\n

\n\n

Having trouble?

This is setup content.

contact

\n {/*

confirmation

*/}\n

\n \n Cobrowse with an agent\n \n

\n\n

\n {/* set the pageId on the window so that imported scripts can access it */}\n \n {/* Inject the script properly using dangerouslySetInnerHTML */}\n \n \n \n

\n \n ,\n );\n});\n\nexport default app;\n\n{\n /* */\n}",[],[238,265],{"_102":274,"_95":275,"_159":276,"_161":239,"_162":140,"_163":277,"_165":116,"_104":278,"_99":279,"_168":182,"_170":280,"_171":22,"_172":-5,"_173":281,"_98":282},"0e0902d2-3245-11f0-be9f-569c3dd06744","glancer.tsx","b86762fa-214c-11f0-bdf2-569c3dd06744",2075,["D",1747393261800],997,"/** @jsxImportSource npm:hono@3/jsx */\nimport { blob } from \"https://esm.town/v/std/blob?v=12\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Client } from \"npm:@notionhq/client\";\nimport { Hono } from \"npm:hono@3\";\nimport { WhackAGhostEmbedIframe } from \"../embeds/embedIframe.tsx\";\nimport * as finance from \"../embeds/financeForm.tsx\";\nimport { examplePDF } from \"../embeds/servePDF.tsx\";\nimport * as checkout from \"../embeds/stripeLikeCheckoutForm.tsx\";\n\n// Initialize Notion client\nconst notion = new Client({\n auth: Deno.env.get(\"NOTION_API_KEY\"),\n});\n\nconst app = new Hono();\n\n// Add a route to serve the PDF content directly\n// this is called by the iframe embed in ../embeds/embedPDFIframe.tsx\n// app.get(\"/pdf-content.pdf\", async (c) => {\n// // console.log(c.req.raw);\n// // console.log(c.req.params);\n// return await examplePDF({ \"foo\": \"bar\" });\n// });\n\n// Add a route to serve the PDF content directly\napp.get(\"/:id/pdf-content.pdf\", async (c) => {\n // get id from params\n const id = c.req.param(\"id\");\n // get notion page with that id\n const page = await notion.pages.retrieve({\n page_id: id,\n });\n return await examplePDF(page);\n});\n\n// Glancer admins hit this when they click the checkbox in Notion that enables the cobrowsing session\n// this endpoint stores cobrowsing session state; the blob stores the visitor's page id and enabled: true or false\n// we use blob to avoid hitting Notion's API to check for the status of the cobrowse session\napp.post(\"/cobrowse\", async (c) => {\n // get page from notion\n const payload = await c.req.json();\n const pageId = payload?.data?.id;\n const host = c.req.header(\"host\");\n const enabled = payload?.data?.properties?.Cobrowse?.checkbox;\n const preference = payload?.data?.properties?.Preference?.select?.name.toLowerCase();\n const blobKey = [\n host,\n pageId,\n ].join(\"--\");\n const blobject = {\n \"enabled\": enabled,\n \"preference\": preference,\n id: pageId,\n date: new Date(),\n };\n const blobber = await blob.setJSON(blobKey, blobject);\n return c.json(blobber);\n});\n\n// visitor's page checks to see that the cobrowsing session is enabled\napp.get(\"/:id/cobrowse\", async (c) => {\n const pageId = c.req.param(\"id\");\n const host = c.req.header(\"host\");\n const blobKey = [\n host,\n pageId,\n ].join(\"--\");\n const blobject = await blob.getJSON(blobKey);\n return c.json(blobject);\n});\n\n// visitor's demo page\napp.get(\"/:id\", async (c) => {\n // get page from notion\n const pageId = c.req.param(\"id\");\n const page = await notion.pages.retrieve({\n page_id: pageId,\n });\n const props = page.properties;\n // console.log(props);\n const agent = {\n name: props[\"Agent name\"]?.formula?.string,\n email: props[\"Agent email\"]?.formula?.string,\n phone: (props[\"Agent phone\"]?.formula.string).replace(/(\\d{3})(\\d{3})(\\d{4})/, \"($1) $2-$3\"),\n };\n const preference = props?.Preference?.select?.name.toLowerCase();\n // console.log(\"preference\", preference);\n\n return c.html(\n \n \n \n \n \n \n \n \n \n

\n Glancer | A Glance cobrowse demo for\n {\" \"}\n {props.Name.title[0].text.content}\n

\n\n

\n {/* main content area */}\n

\n Pick a demo\n

\n\n {/* PICKER */}\n

\n \n 👻 iframe\n

\n \n ⚡️ PDF\n

\n \n 𝍔 Form\n

\n \n 🛒 Checkout\n

\n \n\n

\n \n

👻 iframe

\n While you can certainly play this game alone, with Glance cobrowse you can work with your Glance\n agent to clear the levels.\n

\n To see that in action, ask your agent to take over with Glance's{\" \"}\n Remote Assist, and then click \"Yes\" when prompted in the cobrowsing session.\n

\n {await WhackAGhostEmbedIframe()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n This area of the page includes an iframe embed. Not only does the embedded iframe appear in the\n cobrowsing session, but also the agent can interact with the content inside it.\n

\n To see that in action, ask the agent to take over with Glance's{\" \"}\n Remote Assist, and then click \"Yes\" when prompted in the cobrowsing session.\n

\n \n \n

⚡️ PDF

\n Cobrowse with an agent to review PDFs together. Those PDFs can even be dynamic, the contents\n configured on the fly while you work.\n

\n {/* TODO: add a screenshot here */}\n \n Try the Glance PDF viewer ↗︎\n \n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n

𝍔 Form

\n {await finance.financeForm()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n

🛒 Checkout

\n {await checkout.StripeCheckoutForm()}\n

\n \n \n \n \n For developers\n \n\n \n

How to Use This Page

\n This page demonstrates a simple two-column layout with Tailwind CSS.\n

Tip about implementation
Tip about implementation
Tip about implementation
Tip about implementation
Link to documentation

\n \n \n \n \n\n

\n Ready to cobrowse?\n

\n\n {/* hide request CTA if cobrowsing is enabled */}\n \n

Cobrowsing is disabled due to inactivity

\n \n Request a session\n \n

\n \n

\n Thanks, an agent has been contacted and cobrowsing will be enabled shortly. Stay here.\n

\n\n {/* hide contact CTA if cobrowsing is enabled */}\n \n

Cobrowsing is enabled

\n\n

Step 1: Call your agent

\n {agent.name}\n
\n {agent.phone}\n

Step 2: Cobrowse

\n \n Start a cobrowse session\n \n

\n \n \n \n \n \n \n {/* set the pageId on the window so that imported scripts can access it */}\n \n \n \n \n \n \n \n ,\n );\n});\n\n// visitor's page captures when a visitor clicks a cobrowse like\n// click stored in Notion\napp.post(\"/action\", async (c) => {\n const payload = await c.req.json();\n const pageId = payload?.id;\n const action = payload?.action;\n const date = new Date();\n\n console.log(\"record\");\n console.log(payload);\n\n // create a database page in the Notion metrics database\n // https://www.notion.so/bradnoble/1e0c200736c280d686b2f6d5dee15950?v=1e0c200736c28045aef4000c9d855817&pvs=4\n const record = await notion.pages.create({\n parent: {\n database_id: \"1e0c200736c280d686b2f6d5dee15950\",\n },\n properties: {\n \"Name\": {\n title: [\n {\n type: \"text\",\n text: {\n content: action,\n },\n },\n ],\n },\n \"Date\": {\n date: {\n start: date,\n },\n },\n \"Related page id\": {\n \"rich_text\": [\n {\n \"type\": \"text\",\n \"text\": {\n \"content\": pageId,\n },\n },\n ],\n },\n \"Glancer demo\": {\n // this is a Notion relation and assigns this interaction\n // to this demo\n relation: [\n {\n id: pageId,\n },\n ],\n },\n // \"Action\": {\n // \"rich_text\": [\n // {\n // \"type\": \"text\",\n // \"text\": {\n // \"content\": action,\n // },\n // },\n // ],\n // },\n },\n });\n\n return c.json({\n ok: true,\n });\n});\n\n// Glancer admins hit this to create the visitor's cobrowse demo page\napp.post(\"/\", async (c) => {\n // Extract data from request\n const payload = await c.req.json();\n const pageId = await payload.data?.id;\n const url = c.req.url + \"/\" + pageId; // the GET at this endpoint will build the interface with data from tne Notion page at with id\n\n // Glancer admins will share this link with visitors\n await notion.pages.update({\n page_id: pageId,\n properties: {\n \"URL\": {\n \"url\": url, // set the unique URL for each client and save it to Notion\n },\n },\n });\n\n // option: save a blob for cache\n // to prevent val.town / Notion connectivity issues\n return c.json({\n ok: true,\n });\n});\n\n// does nothing\napp.get(\"/\", async (c) => {\n return c.html(``);\n});\n\nexport default app;",[],[238,275],{"_102":284,"_95":285,"_159":286,"_161":239,"_162":140,"_163":287,"_165":116,"_104":288,"_99":289,"_168":182,"_170":290,"_171":22,"_172":-5,"_173":291,"_98":292},"22c5dcb6-2d47-11f0-bd40-569c3dd06744","root.ts","1f7ddec8-b436-4786-a28e-e16f750193e0",2022,["D",1746844399768],34,"import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const content = {\n headline: \"👋 Welcome to Glancer\",\n message: \"Soon there will be some detail in the README.\",\n };\n return c.json(content);\n});\n\nexport default app;",[],[238,285],{"_102":294,"_95":295,"_159":296,"_161":239,"_162":140,"_163":167,"_165":116,"_104":297,"_99":32,"_168":182,"_170":298,"_171":22,"_172":-5,"_173":299,"_98":300},"e4f1dcb2-214a-11f0-9237-569c3dd06744","test-routes.ts","27066704-49ee-4c99-a0fa-434e97633875",["D",1745526600042],"import { Hono } from \"npm:hono@3\";\n\nconst app = new Hono();\n\napp.post(\"/asdf\", async (c) => {\n const requestData = await c.req.json();\n console.log(requestData);\n return c.json({ ok: true });\n});\n\napp.post(\"/qwer/:id\", async (c) => {\n const action = c.req.param(\"id\");\n console.log({ action });\n return c.json({ action });\n});\n\napp.post(\"/test/:id\", async (c) => {\n const requestData = await c.req.json();\n const id = c.req.param(\"id\");\n\n // Make internal requests to other routes\n await app.request(\"/asdf\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestData),\n });\n\n await app.request(\"/qwer/\" + id, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestData),\n });\n \n return c.json({ ok: true, id });\n});\n\nexport default app;",[],[238,295],[238],{"_102":303,"_95":304,"_159":305,"_161":-5,"_162":140,"_163":167,"_165":116,"_104":306,"_99":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":307,"_98":356},"e4f222bc-214a-11f0-9237-569c3dd06744","utils","a2383670-cb8f-4ee1-b18b-dfdc63877006",["D",1745526600042],[308,318,327,337,347],{"_102":309,"_95":310,"_159":311,"_161":305,"_162":140,"_163":312,"_165":116,"_104":313,"_99":314,"_168":182,"_170":315,"_171":22,"_172":-5,"_173":316,"_98":317},"5027be6c-31ee-11f0-9b57-569c3dd06744","pollEnabledStatus.tsx","ae91e344-26bb-11f0-9946-569c3dd06744",2061,["D",1747356006516],53,"export async function pollEnabledStatus() {\n const cobrowseEl = document.getElementById(\"cta-cobrowse\") || null;\n const contactEl = document.getElementById(\"cta-contact\") || null;\n const confirmEl = document.getElementById(\"cta-cobrowse-request-confirmation\") || null;\n\n const interval = 1000; // 10000;\n\n console.log(import.meta.url);\n\n setInterval(async () => {\n // check the boolean to see if a Glancer has enabled the link to start a cobrowsing session\n console.log(\"Checking to see if this session has been enabled by a Glancer\");\n const resp = await fetch(\"https://glancer.val.run/glancer/\" + window.pageId + \"/cobrowse\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n const data = await resp.json() as any;\n // console.log({ data });\n if (data.enabled) {\n cobrowseEl.style.display = \"block\";\n contactEl.style.display = \"none\";\n // confirmEl.style.display = \"none\";\n } else {\n cobrowseEl.style.display = \"none\";\n contactEl.style.display = \"\";\n // confirmEl.style.display = \"block\";\n // document.getElementById(\"cta-cobrowse-request-button\").style.display = \"none\";\n }\n }, interval);\n}\nawait pollEnabledStatus();",[],[304,310],{"_102":319,"_95":320,"_159":321,"_161":305,"_162":140,"_163":139,"_165":116,"_104":322,"_99":323,"_168":182,"_170":324,"_171":22,"_172":-5,"_173":325,"_98":326},"bef1316c-328d-11f0-834f-569c3dd06744","recordClick.tsx","f1402834-2843-11f0-9ab9-569c3dd06744",["D",1747424482364],28,"export async function recordClick(action: string) {\n // Create data to store\n const clickData = {\n id: pageId,\n \"action\": action, // cobrowse_start || cobrowse_request\n };\n\n fetch(\"https://glancer.val.run/glancer/action\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(clickData),\n });\n\n if (action == \"cobrowse_request\") {\n document.getElementById(\"cta-cobrowse-request-confirmation\").style.display = \"block\";\n document.getElementById(\"cta-cobrowse-request-button\").style.display = \"none\";\n }\n}\nwindow.recordClick = recordClick;",[],[304,320],{"_102":328,"_95":329,"_159":330,"_161":305,"_162":140,"_163":331,"_165":116,"_104":332,"_99":333,"_168":182,"_170":334,"_171":22,"_172":-5,"_173":335,"_98":336},"a151e286-2848-11f0-ac3d-569c3dd06744","startSession.tsx","1bad47bc-2823-11f0-86a8-569c3dd06744",1079,["D",1746295285765],15,"export async function startSession() {\n GLANCE.Cobrowse.Visitor.startSession(\"GLANCE_KEYTYPE_RANDOM\");\n}\n// If you forget to add functions called by events\n// to the global scope (e.g., `onclick=\"startSession();\"`),\n// then those functions won't be in the global scope,\n// and the onclick will fail with Uncaught ReferenceError.\nwindow.startSession = startSession;",[],[304,329],{"_102":338,"_95":339,"_159":340,"_161":305,"_162":140,"_163":341,"_165":116,"_104":342,"_99":343,"_168":182,"_170":344,"_171":22,"_172":-5,"_173":345,"_98":346},"34f2a1ac-2b31-11f0-86d3-569c3dd06744","toggleContent.tsx","c0f2a2ea-29bc-11f0-a3aa-569c3dd06744",1979,["D",1746615079010],47,"export async function toggleContent(action: string) {\n // handle show/hide embeds\n const embeds = document.getElementsByClassName(\"embed\");\n const embed = document.getElementById(action);\n // id=\"toggle-game\"\n const buttonId = await \"toggle-\" + action;\n\n // change to display: none all of the embeds\n for (let i = 0; i < embeds.length; i++) {\n embeds[i].style.display = \"none\";\n }\n // change to display: block the embed with the id in the action param\n if (embed) {\n embed.style.display = \"block\";\n }\n\n // Remove selected class from all boxes\n await document.querySelectorAll(\".box-option\").forEach(box => {\n box.classList.add(\"bg-gray-50\");\n box.classList.remove(\"bg-amber-100\");\n });\n\n // Add selected class to clicked box\n await document.getElementById(buttonId).classList.remove(\"bg-gray-50\");\n await document.getElementById(buttonId).classList.add(\"bg-amber-100\");\n}\nwindow.toggleContent = toggleContent;",[],[304,339],{"_102":348,"_95":349,"_159":350,"_161":305,"_162":140,"_163":351,"_165":116,"_104":352,"_99":231,"_168":182,"_170":353,"_171":22,"_172":-5,"_173":354,"_98":355},"5b84b8c4-2aea-11f0-b88f-569c3dd06744","toggleHelp.tsx","f5b9d7fa-2ae8-11f0-a7e4-569c3dd06744",1928,["D",1746584649450],"export async function toggleHelp() {\n console.log(\"toggleHelp\");\n // var helpContent = document.getElementById(\"helpContent\");\n const helpers = document.getElementsByClassName(\"help\");\n for (let i = 0; i < helpers.length; i++) {\n // helpers[i].style.display = \"none\";\n if (helpers[i].style.display === \"none\") {\n helpers[i].style.display = \"block\";\n } else {\n helpers[i].style.display = \"none\";\n }\n }\n}\nwindow.toggleHelp = toggleHelp;",[],[304,349],[304],{"_102":358,"_95":244,"_159":359,"_161":-5,"_162":140,"_163":360,"_165":116,"_104":361,"_99":181,"_168":249,"_170":362,"_171":22,"_172":-5,"_173":363,"_98":364},"76f958e6-2b83-11f0-8687-569c3dd06744","6fc7b82d-7183-4b9b-9412-15b42390ffe8",2017,["D",1746650408511],"# Glancer",[],[244],{"_102":366,"_95":367,"_159":114,"_161":-5,"_162":140,"_163":119,"_165":116,"_104":368,"_99":369,"_168":370,"_170":371,"_171":22,"_172":372,"_173":373,"_98":374},"d3bca0d2-324b-11f0-9efa-569c3dd06744","index.tsx",["D",1747396170464],51,"http","import { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@3\";\n\n// Import route modules\nimport auth from \"./routes/auth.ts\";\nimport embed from \"./routes/embedTest.tsx\";\nimport glancer from \"./routes/glancer.tsx\";\nimport root from \"./routes/root.ts\";\nimport testRoutes from \"./routes/test-routes.ts\";\n\n// Create main app\nconst app = new Hono();\n\n// Mount root route\napp.route(\"/\", root);\n\n// Apply authentication middleware to all routes\napp.use(\"*\", auth);\n\n// Mount route modules\napp.route(\"/glancer\", glancer);\napp.route(\"/embed\", embed);\n\n// Serve all frontend javascript files out of /utils\n// this endpoint rewrites the src in script modules that are called from HTML\n// which enables people to remix this project into their account(s)\n// otherwise, src would be hardcoded and wouldn't work in remixes without intervention\napp.get(\"/utils/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Mount test routes - these include /asdf, /qwer/:id, and /test/:id\napp.route(\"/\", testRoutes);\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;","glancer-old",[],[367],"files",[156,175,186,196,206,216,225,236,242,253,263,273,283,293,302,308,318,327,337,347,357,365],"counts",{"_379":32,"_380":381,"_382":32,"_383":384},"pulls","branches",5,"forks","envVars",{"_385":248,"_386":32},"count","emptyCount","contents",[389,392,395,398,401],{"_102":157,"_95":158,"_159":160,"_161":-5,"_162":140,"_163":164,"_165":116,"_104":390,"_99":167,"_168":169,"_170":-5,"_171":22,"_172":-5,"_98":391},["D",1746294457678],[158],{"_102":237,"_95":238,"_159":239,"_161":-5,"_162":140,"_163":167,"_165":116,"_104":393,"_99":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_98":394},["D",1745526600042],[238],{"_102":303,"_95":304,"_159":305,"_161":-5,"_162":140,"_163":167,"_165":116,"_104":396,"_99":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_98":397},["D",1745526600042],[304],{"_102":358,"_95":244,"_159":359,"_161":-5,"_162":140,"_163":360,"_165":116,"_104":399,"_99":181,"_168":249,"_170":362,"_171":22,"_172":-5,"_98":400},["D",1746650408511],[244],{"_102":366,"_95":367,"_159":114,"_161":-5,"_162":140,"_163":119,"_165":116,"_104":402,"_99":369,"_168":370,"_170":371,"_171":22,"_172":372,"_98":403},["D",1747396170464],[367],"upstreamProject",{"_102":149,"_95":406,"_110":407,"_111":408,"_108":147,"_23":409},"ValTownForNotion","Augmenting Notion with webhooks and val.town.","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f25cb5fe-2b5b-4f08-5492-f088b3195400/square512",{"_93":94,"_132":133},"upstreamBranch",{"_102":143,"_104":412,"_413":414,"_95":43,"_141":149,"_99":145,"_142":-5,"_144":-5,"_415":416,"_106":-5,"_153":22,"_108":147,"_152":94,"_16":121,"_151":406},["D",1744293493384],"updatedAt",["D",1745504421946],"lockfileKey","1745504426655-esm.town_v_bradnoble_ValTownForNotion@1127-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branches",{"_93":94,"_95":96,"_100":423,"_380":428},{"_102":103,"_95":96,"_104":424,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":119,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":425,"_134":426,"_137":427,"_153":22},["D",1745526600042],{"_93":94,"_132":133},{"_93":94,"_136":133,"_14":112},{"_99":139,"_95":43,"_102":140,"_141":103,"_142":143,"_144":145,"_146":147,"_148":149,"_150":121,"_151":96,"_152":94},[429,433,440,448,454],{"_102":140,"_104":430,"_413":431,"_95":43,"_141":103,"_99":139,"_142":143,"_144":145,"_415":432,"_106":-5},["D",1745526600042],["D",1747424482364],"1747424483241-esm.town_v_bradnoble_Glancer@2085-main",{"_102":434,"_104":435,"_413":436,"_95":437,"_141":103,"_99":231,"_142":140,"_144":438,"_415":439,"_106":-5},"dd89fd80-29c7-11f0-812d-569c3dd06744",["D",1746459884051],["D",1746466669430],"pdf",1506,"1764217540053-esm.town_v_bradnoble_Glancer@10-pdf",{"_102":441,"_104":442,"_413":443,"_95":444,"_141":103,"_99":445,"_142":140,"_144":446,"_415":447,"_106":-5},"cbdc2b66-2694-11f0-b083-569c3dd06744",["D",1746108096569],["D",1746116744786],"server-side-strings",78,875,"1746116245459-esm.town_v_bradnoble_Glancer@77-server-side-strings",{"_102":449,"_104":450,"_413":451,"_95":452,"_141":103,"_99":181,"_142":140,"_144":453,"_415":-5,"_106":-5},"fa278b3c-21fd-11f0-beaf-569c3dd06744",["D",1745603515582],["D",1745603800993],"record-clicks",277,{"_102":455,"_104":456,"_413":457,"_95":458,"_141":103,"_99":167,"_142":140,"_144":459,"_415":460,"_106":-5},"bef964f8-21f9-11f0-9f18-569c3dd06744",["D",1745601698306],["D",1745601698317],"long-polling",274,"1745602060735-esm.town_v_bradnoble_Glancer@1-long-polling","actionData","errors"]

bradnoble

Glancer

Branches5

Branches
5