`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_299":300,"_301":302},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_226":-5,"_20":227,"_22":228,"_229":230,"_231":232,"_26":233,"_24":234,"_235":-5,"_236":-5,"_237":51,"_238":239,"_240":43,"_241":-5,"_242":-5,"_243":244},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","affordableapartmentsusa","name","rental-application-portal","branchName","main","version","path","README.md","project",{"_33":168,"_13":14,"_44":169,"_170":-5,"_171":51,"_172":173,"_174":173,"_175":176,"_177":-5,"_178":179,"_180":61,"_181":43,"_182":-5,"_183":-5,"_184":79,"_185":186,"_187":188,"_189":190,"_191":192,"_193":-5,"_194":195,"_196":195,"_197":198,"_199":198,"_200":198,"_201":195,"_202":195,"_203":204,"_205":206,"_207":208,"_209":51},"tree",[54,55,56,57,58],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","84760436-d497-4753-bde3-6c459c1411cd","fileId","01a06052-104c-72e8-a1d5-0a972ea6ca14","parentId","branchId","392759fc-a1c2-4a5f-8a9f-b134443946a9","branchVersion",22,"latest",true,"createdAt",["D",1788322863389],2,"fileType","content","# Affordable Apartments USA — Rental Application Portal\n\nA responsive, WCAG-compliant single-page rental application portal for\nAffordable Apartments USA. Applicants apply either as a **Standard Applicant**\nor a **Housing Voucher / Section 8 Applicant**, pay the **$35.00 application\nfee** online through Stripe, and the portal emails notifications to your team.\n\n👉 **Try it live:** [https://rental-application.val.run](https://rental-application.val.run)\n\n## Features\n\n- **Application-type toggle** — selecting *Section 8* reveals Housing\n Authority, voucher amount, approved bedroom count, and caseworker contact\n fields (and hides them again for Standard applicants).\n- **Six form sections**: Property Info · Applicant Personal Details ·\n Rental History · Financial Details · Disclosures & Accessibility ·\n Application Fee & Authorization.\n- **Online payment** — after submitting, the applicant is offered a secure\n **\"Pay $35.00 Now\"** button that opens a Stripe Checkout page. A completed\n payment is verified via Stripe webhook and the application is marked paid.\n- **Email notifications** — your team gets an email when an application is\n submitted and again when the fee is paid; applicants get a confirmation.\n- **Executive palette** — Navy `#1a365d`, Slate `#4a5568`, soft accent `#ebf8ff`.\n- **Accessibility (WCAG)** — real `` pairs, `aria-invalid`,\n `role=\"alert\"` validation, visible focus rings, keyboard-friendly controls,\n fully mobile responsive.\n- **Validation** — required-field checks, email/phone/SSN masking (last-4-only\n display), conditional validation, digital-signature requirement.\n- **Persistence** — applications + payment status stored in the val's SQLite DB.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves HTML| Root[\"frontend/root.tsx\"]\n Root -->|loads module| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Form[\"ApplicationForm.tsx\"]\n Form -->|\"POST /api/application\"| Hono\n Hono -->|INSERT| DB[(\"SQLite
applications\")]\n Form -->|\"POST /api/checkout/:id\"| Hono\n Hono -->|creates session| Stripe[(\"Stripe Checkout\")]\n Stripe -->|webhook| Hono\n Hono -->|payment status| DB\n Hono -->|std/email| Mail[\"Team + applicant email\"]\n```\n\n## Environment variables\n\n| Variable | Required | Description |\n| --- | --- | --- |\n| `NOTIFY_EMAIL` | always (has default) | Inbox notified of new applications & payments. Defaults to `Cynthiawilliamshouse@gmail.com`. |\n| `STRIPE_SECRET_KEY` | for payments | Stripe API secret key (`sk_test_…` or `sk_live_…`) |\n| `STRIPE_WEBHOOK_SECRET` | for payments | Stripe webhook signing secret (`whsec_…`) |\n\n### Enable payments (2 steps)\n\n1. Create a Stripe account (or connect to an existing one), then grab the API\n secret key — Restrict API key access: \n2. Add the two Stripe variables and then register the webhook so Stripe can\n confirm payments:\n - Endpoint: `https://rental-application.val.run/api/stripe-webhook`\n - Subscribe to the **`checkout.session.completed`** event.\n - After saving, copy the `whsec_…` signing secret into `STRIPE_WEBHOOK_SECRET`.\n\n 👉 Add STRIPE_SECRET_KEY here: https://www.val.town/x/affordableapartmentsusa/rental-application-portal/environment-variables?key=STRIPE_SECRET_KEY\n 👉 Add STRIPE_WEBHOOK_SECRET here: https://www.val.town/x/affordableapartmentsusa/rental-application-portal/environment-variables?key=STRIPE_WEBHOOK_SECRET\n\n For testing, use Stripe test keys (`sk_test_…`) and their test card\n `4242 4242 4242 4242`. Switch to live keys when you're ready to collect\n real payments.\n\n### Notifications & the free-tier caveat\n\nNotifications are sent through Val Town's built-in `std/email`. **The Free\nplan only allows sending email to the account owner's own address** — external\nrecipients (Cynthia's inbox or applicants' inboxes) require the **Pro** or\n**Business** plan. If you stay on Free, submissions and payments still work;\nthe notification sends are attempted, logged, and safely ignored on failure.\nEmails are always wrapped so a delivery problem never breaks the application\nflow.\n\n## API\n\n| Method | Route | Description |\n| --- | --- | --- |\n| `GET` | `/` | The application portal UI |\n| `POST` | `/api/application` | Store an application (`ApplicationFormData` JSON) |\n| `GET` | `/api/application/:id` | Fetch a single application (used on the paid confirmation page) |\n| `POST` | `/api/checkout/:id` | Create a Stripe Checkout session for the `$35` fee |\n| `POST` | `/api/stripe-webhook` | Stripe webhook — marks an application paid & emails notifications |\n| `GET` | `/api/applications` | List the 50 most recent applications (internal) |\n\n## Running it\n\nThe val is deployed automatically on save. To build or extend:\n\n- Tweak the palette and form fields in `frontend/components/`.\n- Adjust business rules (fees, validation) in `frontend/components/ApplicationForm.tsx`.\n- The fee is set by `APPLICATION_FEE_CENTS = 3500` in `index.ts`.\n\nView the source at any time from the **View source** link in the footer.\n","deleted",false,"label",[19],{"_33":101,"_13":102,"_35":103,"_37":-5,"_38":39,"_40":77,"_42":43,"_44":104,"_17":79,"_47":87,"_48":-5,"_50":51,"_52":-5,"_68":105,"_18":106},{"_33":83,"_13":84,"_35":85,"_37":-5,"_38":39,"_40":46,"_42":43,"_44":86,"_17":79,"_47":87,"_48":-5,"_50":51,"_52":-5,"_68":88,"_18":89},{"_33":74,"_13":75,"_35":76,"_37":-5,"_38":39,"_40":77,"_42":43,"_44":78,"_17":79,"_47":24,"_48":80,"_50":51,"_52":-5,"_68":81,"_18":82},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":71,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_68":72,"_18":73},{"_33":59,"_13":60,"_35":61,"_37":-5,"_38":39,"_40":62,"_42":43,"_44":63,"_17":64,"_47":65,"_48":66,"_50":51,"_52":67,"_68":69,"_18":70},"52622a33-cd57-469b-a77d-05ac6a8e9786","index.ts","01a06052-104d-753e-80ba-e7da2b70f9da",43,["D",1788324604023],11,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport { Stripe } from \"npm:stripe\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport type { ApplicationFormData, DocumentUpload, StoredApplication } from \"./lib/types.ts\";\n\n// ---------------------------------------------------------------------------\n// Configuration\n// ---------------------------------------------------------------------------\n// Stripe secret keys. If unset, payment routes return a friendly error but the\n// rest of the portal still works so you can launch with payments off.\n// Accepts either STRIPE_SECRET or STRIPE_SECRET_KEY for the API key.\nconst STRIPE_KEY = Deno.env.get(\"STRIPE_SECRET\") || Deno.env.get(\"STRIPE_SECRET_KEY\");\nconst STRIPE_WEBHOOK_SECRET = Deno.env.get(\"STRIPE_WEBHOOK_SECRET\");\n// Where application/payment notifications are emailed.\nconst NOTIFY_EMAIL = Deno.env.get(\"NOTIFY_EMAIL\") || \"Cynthiawilliamshouse@gmail.com\";\n\n// The standard, default application fee. Tenants may pay this OR choose to pay\n// more (deposit/rent) via the flexible payment step.\nconst DEFAULT_FEE_CENTS = 3500; // $35.00\nconst MIN_PAYMENT_CENTS = 100; // $1.00\n// Upload limits (the free tier gives 10 MB of blob storage total).\nconst MAX_FILE_BYTES = 3 * 1024 * 1024; // 3 MB per file\nconst MAX_FILES = 3;\n\nconst stripe = STRIPE_KEY ? new Stripe(STRIPE_KEY) : null;\n\n// getStripe() builds the client lazily so it always reads the current env var.\n// (A module-load-time instance could be cached from before the key was set.)\nfunction getStripe(): Stripe | null {\n if (stripe) return stripe;\n const key = Deno.env.get(\"STRIPE_SECRET\") || Deno.env.get(\"STRIPE_SECRET_KEY\");\n return key ? new Stripe(key) : null;\n}\n\nconst app = new Hono();\n\n// ---------------------------------------------------------------------------\n// Data layer\n// ---------------------------------------------------------------------------\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS applications (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n application_type TEXT NOT NULL,\n legal_first_name TEXT NOT NULL,\n legal_last_name TEXT NOT NULL,\n email TEXT NOT NULL,\n property_address TEXT NOT NULL,\n submitted_at TEXT NOT NULL,\n data TEXT NOT NULL\n)`);\n\n// Migrations (idempotent — safe to run on an already-migrated table).\nfor (const stmt of [\n `ALTER TABLE applications ADD COLUMN payment_status TEXT NOT NULL DEFAULT 'unpaid'`,\n `ALTER TABLE applications ADD COLUMN stripe_session_id TEXT`,\n `ALTER TABLE applications ADD COLUMN paid_at TEXT`,\n `ALTER TABLE applications ADD COLUMN paid_amount_cents INTEGER`,\n `ALTER TABLE applications ADD COLUMN documents TEXT`,\n]) {\n try {\n await sqlite.execute(stmt);\n } catch {\n // column already exists — ignore\n }\n}\n\ntype Row = Record;\n\nfunction toApplication(row: Row, data?: ApplicationFormData): StoredApplication {\n const parsed: ApplicationFormData | null = (() => {\n try {\n return JSON.parse(row.data as string);\n } catch {\n return null;\n }\n })();\n return {\n id: row.id as number,\n applicationType: row.application_type as ApplicationFormData[\"applicationType\"],\n legalFirstName: row.legal_first_name as string,\n legalLastName: row.legal_last_name as string,\n email: row.email as string,\n propertyAddress: row.property_address as string,\n submittedAt: row.submitted_at as string,\n paid: (row.payment_status as string) === \"paid\",\n paidAmountCents: row.paid_amount_cents ? Number(row.paid_amount_cents) : undefined,\n data: data ?? parsed ?? emptyData(),\n };\n}\n\n// Documents are stored in their own column (JSON array), kept separate from the\n// form `data` because the client can't know blob keys until after submit.\nfunction getDocuments(raw: unknown): DocumentUpload[] {\n if (!raw) return [];\n try {\n const arr = JSON.parse(raw as string);\n return Array.isArray(arr) ? arr : [];\n } catch {\n return [];\n }\n}\n\nfunction emptyData(): ApplicationFormData {\n return {\n applicationType: \"standard\",\n property: { propertyAddress: \"\", moveInDate: \"\", proposedRent: \"\" },\n personal: {\n legalFirstName: \"\", legalLastName: \"\", dob: \"\", phone: \"\", email: \"\",\n ssnItin: \"\", photoIdType: \"\", photoIdNumber: \"\", photoIdIssuer: \"\",\n },\n rental: { currentAddress: \"\", datesLived: \"\", landlordContact: \"\" },\n financial: { incomeSource: \"\", monthlyNetIncome: \"\", employerName: \"\", employerContact: \"\" },\n disclosures: { evictionHistory: \"no\", evictionDetails: \"\", pets: \"no\", petDetails: \"\", accessibilityRequests: \"\" },\n authorization: { feeAgreed: false, termsReleaseAgreed: false, digitalSignature: \"\", signatureDate: \"\", copyEmail: \"\" },\n section8: null,\n documents: [],\n };\n}\n\nasync function getApplication(id: number): Promise {\n const res = await sqlite.execute(\n `SELECT id, application_type, legal_first_name, legal_last_name, email,\n property_address, submitted_at, payment_status, paid_at, paid_amount_cents, data, documents\n FROM applications WHERE id = ?`,\n [id],\n );\n const row = res.rows[0] as Row | undefined;\n if (!row) return null;\n const app = toApplication(row);\n app.data.documents = getDocuments(row.documents);\n return app;\n}\n\n// ---------------------------------------------------------------------------\n// Notifications & tenant-copy email (std/email)\n// ---------------------------------------------------------------------------\n// NOTE: On the Val Town FREE tier std/email can only reach the account owner's\n// own address. Sending to external inboxes requires Pro/Business (or a\n// third-party email service). Every send is wrapped so a failure never breaks\n// the app.\nasync function sendMail(to: string, subject: string, html: string, text: string, replyTo?: string) {\n try {\n await email({ to, subject, html, text, replyTo });\n console.log(`email queued for ${to}: \"${subject}\"`);\n } catch (e) {\n console.error(`Email failed for ${to}:`, e instanceof Error ? e.message : e);\n }\n}\n\nconst money = (cents: number) => (cents / 100).toLocaleString(\"en-US\", { style: \"currency\", currency: \"USD\" });\n\nfunction notifyNewApplication(a: StoredApplication) {\n const name = `${a.legalFirstName} ${a.legalLastName}`;\n const docs = a.data.documents.length\n ? a.data.documents.map((d) => `

${d.name} (${(d.size / 1024).toFixed(0)} KB)

`).join(\"\")\n : \"

None

\";\n const html =\n `

` +\n `

New Rental Application

` +\n `` +\n `` +\n `` +\n `` +\n `` +\n `` +\n `` +\n `

Name	${name}
Type	${a.applicationType === \"section8\" ? \"Housing Voucher / Section 8\" : \"Standard\"}
Email	${a.email}
Property	${a.propertyAddress}
Submitted	${new Date(a.submittedAt).toLocaleString()}
Documents	${docs}

Reply to this email to reach the applicant.

`;\n return sendMail(\n NOTIFY_EMAIL,\n `New Rental Application — ${name}`,\n html,\n `New application from ${name} (${a.email}) for ${a.propertyAddress}. ${a.data.documents.length} document(s) attached.`,\n a.email,\n );\n}\n\nfunction notifyPayment(a: StoredApplication) {\n const name = `${a.legalFirstName} ${a.legalLastName}`;\n const amt = money(a.paidAmountCents ?? DEFAULT_FEE_CENTS);\n const html =\n `

` +\n `

Payment Received 💳

` +\n `

${name} made a payment of ${amt}.

` +\n `

Applicant email: ${a.email}
Property: ${a.propertyAddress}

`;\n return sendMail(\n NOTIFY_EMAIL,\n `Payment Received ${amt} — ${name}`,\n html,\n `${name} (${a.email}) paid ${amt}.`,\n a.email,\n );\n}\n\nfunction applicantConfirmation(a: StoredApplication) {\n const name = `${a.legalFirstName} ${a.legalLastName}`;\n return sendMail(\n a.email,\n \"We received your rental application\",\n `

Thank you, ${name}!

` +\n `

We have received your application for ${a.propertyAddress}. Our team will review it and follow up within 2 business days.

`,\n `Thank you for applying! We received your application for ${a.propertyAddress}.`,\n NOTIFY_EMAIL,\n );\n}\n\n/** Sends the tenant a copy of their completed submission. */\nfunction tenantCopy(a: StoredApplication) {\n const copyTo = a.data.authorization.copyEmail.trim() || a.email;\n const d = a.data;\n const name = `${d.personal.legalFirstName} ${d.personal.legalLastName}`;\n const rows: [string, string][] = [\n [\"Application #\", `#APP-${a.id}`],\n [\"Application type\", a.applicationType === \"section8\" ? \"Housing Voucher / Section 8\" : \"Standard\"],\n [\"Legal name\", name],\n [\"Email\", d.personal.email],\n [\"Phone\", d.personal.phone],\n [\"Property\", d.property.propertyAddress],\n [\"Desired move-in\", d.property.moveInDate],\n [\"Proposed rent / share\", d.property.proposedRent ? `$${d.property.proposedRent}` : \"—\"],\n [\"Income source\", d.financial.incomeSource],\n [\"Monthly net income\", d.financial.monthlyNetIncome ? `$${d.financial.monthlyNetIncome}` : \"—\"],\n [\"Employer\", d.financial.employerName],\n [\"Eviction history\", d.disclosures.evictionHistory === \"yes\" ? \"Yes\" : \"No\"],\n [\"Pets\", d.disclosures.pets === \"yes\" ? \"Yes\" : \"No\"],\n ];\n if (a.applicationType === \"section8\" && d.section8) {\n rows.push(\n [\"Housing authority\", d.section8.housingAuthority],\n [\"Voucher amount\", d.section8.voucherAmount ? `$${d.section8.voucherAmount}` : \"—\"],\n [\"Bedroom count\", d.section8.bedroomCount],\n [\"Caseworker\", d.section8.caseworkerName],\n );\n }\n const table = rows\n .map(([k, v]) => `${k}${v}`)\n .join(\"\");\n const files = a.data.documents.length\n ? a.data.documents.map((f) => `

${f.name} (${(f.size / 1024).toFixed(0)} KB)

`).join(\"\")\n : \"

None

\";\n const html =\n `

` +\n `

Your Rental Application — Affordable Apartments USA

` +\n `

Thank you for applying online. Here is a copy of your submission for your records.

` +\n `${table}

` +\n `

Documents uploaded:

${files}` +\n `

Our team will review your application and contact you within 2 business days.

`;\n const text =\n `Your Rental Application — Affordable Apartments USA\\n\\n` +\n rows.map(([k, v]) => `${k}: ${v}`).join(\"\\n\") +\n `\\n\\nDocuments uploaded: ${a.data.documents.length}\\n\\nThank you for applying online.`;\n return sendMail(copyTo, `Your Rental Application Copy — #APP-${a.id}`, html, text, NOTIFY_EMAIL);\n}\n\n// ---------------------------------------------------------------------------\n// Routes — UI + API\n// ---------------------------------------------------------------------------\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nconst sanitize = (s: string) => (s || \"file\").replace(/[^a-zA-Z0-9._-]/g, \"_\").slice(0, 80);\n\n/**\n * POST /api/application\n * Accepts either a JSON body (ApplicationFormData) or a multipart request with\n * a `payload` JSON field plus `documents` file fields. Files are stored in the\n * val's blob storage and recorded on the application.\n */\napp.post(\"/api/application\", async (c) => {\n const contentType = c.req.header(\"content-type\") ?? \"\";\n let body: ApplicationFormData;\n const files: File[] = [];\n\n if (contentType.includes(\"multipart/form-data\")) {\n const fd = await c.req.formData();\n const payload = fd.get(\"payload\");\n if (typeof payload !== \"string\") {\n return c.json({ ok: false, error: \"Missing application payload.\" }, 400);\n }\n try {\n body = JSON.parse(payload);\n } catch {\n return c.json({ ok: false, error: \"Invalid application payload.\" }, 400);\n }\n for (const f of fd.getAll(\"documents\")) if (f instanceof File) files.push(f);\n } else {\n body = await c.req.json().catch(() => null as unknown as ApplicationFormData);\n if (!body) return c.json({ ok: false, error: \"Invalid JSON body.\" }, 400);\n }\n\n if (\n !body.personal ||\n !body.property ||\n !body.authorization ||\n body.authorization.digitalSignature.trim() === \"\" ||\n !body.authorization.termsReleaseAgreed\n ) {\n return c.json({ ok: false, error: \"Required fields are missing. Please review and resubmit.\" }, 400);\n }\n\n if (files.length > MAX_FILES) {\n return c.json({ ok: false, error: `You may upload at most ${MAX_FILES} documents.` }, 400);\n }\n if (files.some((f) => f.size > MAX_FILE_BYTES)) {\n return c.json({ ok: false, error: \"Each document must be 3 MB or smaller.\" }, 400);\n }\n\n const now = new Date().toISOString();\n const result = await sqlite.execute(\n `INSERT INTO applications\n (application_type, legal_first_name, legal_last_name, email, property_address, submitted_at, data)\n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [\n body.applicationType,\n body.personal.legalFirstName,\n body.personal.legalLastName,\n body.personal.email,\n body.property.propertyAddress,\n now,\n JSON.stringify(body),\n ],\n );\n const id = Number(result.lastInsertRowid);\n\n // Store uploaded files in blob storage and record their metadata.\n const documents: DocumentUpload[] = [];\n for (const file of files) {\n const key = `apps/${id}/${sanitize(file.name)}`;\n await blob.set(key, file);\n documents.push({ name: file.name, size: file.size, key });\n }\n if (documents.length) {\n await sqlite.execute(`UPDATE applications SET documents = ? WHERE id = ?`, [JSON.stringify(documents), id]);\n }\n\n const stored = await getApplication(id);\n if (stored) {\n // Fire-and-forget notifications — these never block the response.\n notifyNewApplication(stored);\n applicantConfirmation(stored);\n tenantCopy(stored);\n }\n\n return c.json(\n {\n ok: true,\n id,\n documents: documents.length,\n message:\n \"Application received! Our team will review your submission and contact you within 2 business days.\",\n },\n 201,\n );\n});\n\n/** GET /api/application/:id/:fileKey — download an uploaded document. */\napp.get(\"/api/application/:id/documents/:fileKey\", async (c) => {\n const stored = await getApplication(Number(c.req.param(\"id\")));\n if (!stored) return c.json({ ok: false, error: \"Application not found.\" }, 404);\n const fileKey = c.req.param(\"fileKey\");\n const doc = stored.data.documents.find((d) => d.key === fileKey || d.key.split(\"/\").pop() === fileKey);\n if (!doc) return c.json({ ok: false, error: \"Document not found.\" }, 404);\n try {\n const res = await blob.get(doc.key);\n const bytes = await res.arrayBuffer();\n return new Response(bytes, {\n headers: { \"Content-Type\": \"application/octet-stream\", \"Content-Disposition\": `attachment; filename=\"${doc.name}\"` },\n });\n } catch {\n return c.json({ ok: false, error: \"Document unavailable.\" }, 404);\n }\n});\n\n/**\n * POST /api/checkout/:id\n * Creates a Stripe Checkout session for the application fee. Accepts an\n * optional `{ amount }` (USD) so tenants can pay more than the $35 fee\n * (e.g. a deposit or rent). Defaults to the $35.00 application fee.\n */\napp.post(\"/api/checkout/:id\", async (c) => {\n const s = getStripe();\n if (!s) {\n return c.json({ ok: false, error: \"Payments are not configured yet. Please try again later.\" }, 500);\n }\n const id = Number(c.req.param(\"id\"));\n const stored = await getApplication(id);\n if (!stored) return c.json({ ok: false, error: \"Application not found.\" }, 404);\n\n let amountCents = DEFAULT_FEE_CENTS;\n const reqBody = await c.req.json<{ amount?: number }>().catch(() => null);\n if (reqBody && typeof reqBody.amount === \"number\" && isFinite(reqBody.amount) && reqBody.amount > 0) {\n amountCents = Math.max(MIN_PAYMENT_CENTS, Math.round(reqBody.amount * 100));\n }\n const totalCents = amountCents; // flat fee per payment\n\n const origin = new URL(c.req.url).origin;\n // Build the Checkout session with a direct Stripe API call. (The npm Stripe\n // SDK fails to attach the API key on outbound requests in this sandbox, even\n // though plain fetch works — so we call the REST API directly.)\n const productName = amountCents === DEFAULT_FEE_CENTS\n ? `Rental Application Fee — ${stored.legalFirstName} ${stored.legalLastName}`\n : `Rental Payment — ${stored.legalFirstName} ${stored.legalLastName}`;\n const productDesc = amountCents === DEFAULT_FEE_CENTS\n ? `$35.00 application fee for ${stored.propertyAddress}.`\n : `Payment of ${money(totalCents)} on application for ${stored.propertyAddress}.`;\n\n const form = new URLSearchParams({\n mode: \"payment\",\n success_url: `${origin}/?paid=${id}`,\n cancel_url: `${origin}/?status=pay-later`,\n \"customer_email\": stored.email,\n \"line_items[0][quantity]\": \"1\",\n \"line_items[0][price_data][currency]\": \"usd\",\n \"line_items[0][price_data][unit_amount]\": String(totalCents),\n \"line_items[0][price_data][product_data][name]\": productName,\n \"line_items[0][price_data][product_data][description]\": productDesc,\n \"metadata[applicationId]\": String(id),\n });\n\n const apiKey = Deno.env.get(\"STRIPE_SECRET\") || Deno.env.get(\"STRIPE_SECRET_KEY\") || \"\";\n const sres = await fetch(\"https://api.stripe.com/v1/checkout/sessions\", {\n method: \"POST\",\n headers: { Authorization: `Bearer ${apiKey}`, \"Content-Type\": \"application/x-www-form-urlencoded\" },\n body: form.toString(),\n });\n const sdata = await sres.json();\n if (!sres.ok) {\n return c.json({ ok: false, error: `Stripe error: ${sdata.error?.message ?? \"unknown\"}` }, 502);\n }\n\n await sqlite.execute(`UPDATE applications SET stripe_session_id = ? WHERE id = ?`, [sdata.id, id]);\n return c.json({ ok: true, url: sdata.url });\n});\n\n/** GET /api/application/:id — fetch a single application (used after payment). */\napp.get(\"/api/application/:id\", async (c) => {\n const stored = await getApplication(Number(c.req.param(\"id\")));\n if (!stored) return c.json({ ok: false, error: \"Application not found.\" }, 404);\n return c.json({ ok: true, application: stored });\n});\n\n/**\n * POST /api/stripe-webhook\n * Stripe notifies us when a checkout session completes; we mark the application\n * paid, record the amount, and email notifications.\n */\napp.post(\"/api/stripe-webhook\", async (c) => {\n const s = getStripe();\n if (!s || !STRIPE_WEBHOOK_SECRET) {\n return c.json({ ok: false, error: \"Webhook not configured.\" }, 500);\n }\n const sig = c.req.header(\"stripe-signature\") ?? \"\";\n const body = await c.req.text();\n\n let event;\n try {\n event = await s.webhooks.constructEventAsync(body, sig, STRIPE_WEBHOOK_SECRET);\n } catch (e) {\n return c.json({ ok: false, error: `Webhook signature verification failed: ${(e as Error).message}` }, 400);\n }\n\n if (event.type === \"checkout.session.completed\") {\n const session = event.data.object as { metadata?: Record; amount_total?: number };\n const applicationId = Number(session.metadata?.applicationId);\n if (applicationId) {\n await sqlite.execute(\n `UPDATE applications SET payment_status = 'paid', paid_at = ?, paid_amount_cents = ? WHERE id = ?`,\n [new Date().toISOString(), session.amount_total ?? DEFAULT_FEE_CENTS, applicationId],\n );\n const stored = await getApplication(applicationId);\n if (stored) {\n notifyPayment(stored);\n applicantConfirmation(stored);\n }\n }\n }\n\n return c.json({ received: true });\n});\n\n/** GET /api/applications — internal list of the 50 most recent applications. */\napp.get(\"/api/applications\", async (c) => {\n const res = await sqlite.execute(\n `SELECT id, application_type, legal_first_name, legal_last_name, email,\n property_address, submitted_at, payment_status, paid_at, paid_amount_cents, data, documents\n FROM applications ORDER BY id DESC LIMIT 50`,\n );\n const rows: StoredApplication[] = (res.rows as Row[]).map((r) => {\n const a = toApplication(r);\n a.data.documents = getDocuments(r.documents);\n return a;\n });\n return c.json({ ok: true, applications: rows });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","rental-application","children",[],[60],["D",1788322863389],[],[19],"f0b3b817-3bb0-427a-9b1f-91531de91263","CHANGELOG.md","01a06052-104c-72e8-a1d5-06113a94aa4d",1,["D",1788322385929],0,"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n