`, 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

${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",[],[184],"84760436-d497-4753-bde3-6c459c1411cd","README.md","01a06052-104c-72e8-a1d5-0a972ea6ca14",22,["D",1788322863389],2,"# 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",[],[195],"f0b3b817-3bb0-427a-9b1f-91531de91263","CHANGELOG.md","01a06052-104c-72e8-a1d5-06113a94aa4d",["D",1788322385929],"# 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

History · index.tsx