Order Canceled

\n \n

\n Your iClicker preorder has been canceled.\n

\n \n

\n No charges have been made to your account. If you'd like to try again or have any questions,\n please feel free to return to the home page or contact me directly.\n

\n \n

\n If you have any questions, please contact me at wsm32@case.edu\n

\n \n \n Return to Home\n \n

\n );\n}",[],[252,258,273],{"_107":281,"_99":282,"_152":283,"_154":259,"_155":141,"_156":284,"_158":122,"_109":285,"_104":157,"_160":191,"_162":286,"_163":27,"_164":-5,"_165":287,"_102":288},"22f7b1ee-1d27-11f0-978d-569c3dd06744","HomePage.tsx","6732b59e-1d26-11f0-b330-569c3dd06744",126,["D",1745071437596],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Item {\n id: number;\n name: string;\n price: number;\n description: string;\n image: string;\n buyUrl: string;\n}\n\n// Default item to use if API fails\nconst DEFAULT_ITEM: Item = {\n id: 1,\n name: \"iClicker\",\n price: 4500, // $45.00\n description: \"iClicker for CWRU classes\",\n image: \"https://placehold.co/200x200?text=iClicker\",\n buyUrl: \"\"\n};\n\nexport function HomePage() {\n const [item, setItem] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n async function fetchItem() {\n try {\n const response = await fetch('/api/items');\n if (response.ok) {\n const data = await response.json();\n setItem(data);\n } else {\n // If API fails, use default item\n console.warn(\"Using default item data because API returned an error\");\n setItem(DEFAULT_ITEM);\n \n // Get error message\n try {\n const errorData = await response.json();\n setError(errorData.error || \"Failed to load item data\");\n } catch {\n setError(\"Failed to load item data\");\n }\n }\n } catch (error) {\n console.error('Error fetching item:', error);\n setItem(DEFAULT_ITEM);\n setError(\"Failed to connect to the server. Using default item data.\");\n } finally {\n setLoading(false);\n }\n }\n\n fetchItem();\n }, []);\n\n if (loading) {\n return

;\n }\n\n if (!item) {\n return (\n

Error Loading Product

{error || \"No items available\"}

Please try again later or contact support.

\n );\n }\n\n const InfoText = ({ text }: { text: string }) => (\n

{text}

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

\n {error && (\n

Note:

{error}

\n )}\n \n

\n \n

{item.name}

${(item.price / 100).toFixed(2)}

\n\n

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

\n\n \n Reserve an iClicker today!\n \n

\n );\n}",[],[252,258,282],{"_107":290,"_99":291,"_152":292,"_154":259,"_155":141,"_156":293,"_158":122,"_109":294,"_104":157,"_160":191,"_162":295,"_163":27,"_164":-5,"_165":296,"_102":297},"0e736e84-1d27-11f0-8a83-569c3dd06744","PurchasePage.tsx","74660504-1d26-11f0-94ab-569c3dd06744",125,["D",1745071403174],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function PurchasePage() {\n const [customerName, setCustomerName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [pickupLocation, setPickupLocation] = useState<\"Wade\" | \"Fribley\">(\"Wade\");\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n\n const validateEmail = (email: string): boolean => {\n const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n return re.test(email);\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n // Validate form\n if (!customerName.trim()) {\n setError(\"Please enter your name\");\n return;\n }\n \n if (!validateEmail(email)) {\n setError(\"Please enter a valid email address\");\n return;\n }\n \n setError(\"\");\n setIsSubmitting(true);\n \n try {\n const response = await fetch('/api/checkout', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n customerName, \n email, \n pickupLocation, \n productID: 1 // We'll get the actual ID from the database on the server\n }),\n });\n \n const data = await response.json();\n \n if (!response.ok) {\n throw new Error(data.error || \"Failed to create checkout session\");\n }\n \n // Check if we have a session ID\n if (!data.id) {\n throw new Error(\"No checkout session ID returned from server\");\n }\n \n // Redirect to Stripe checkout\n try {\n const stripe = await loadStripe();\n if (!stripe) {\n throw new Error(\"Stripe is not configured properly\");\n }\n \n const { error } = await stripe.redirectToCheckout({ sessionId: data.id });\n if (error) {\n throw error;\n }\n } catch (stripeError) {\n console.error(\"Stripe error:\", stripeError);\n throw new Error(\"Failed to redirect to payment page: \" + stripeError.message);\n }\n } catch (err) {\n console.error(\"Checkout error:\", err);\n setError(err.message || \"An error occurred during checkout\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n

Reserve your iClicker

\n \n {error && (\n

\n {error}\n

\n )}\n \n

\n \n Name\n \n setCustomerName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n required\n />\n

\n \n

\n \n Email\n \n setEmail(e.target.value)}\n placeholder=\"example32@case.edu\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n required\n />\n

\n \n

Pickup Location

\n \n setPickupLocation(\"Fribley\")}\n className=\"h-4 w-4 text-blue-600 focus:ring-blue-500\"\n />\n Fribley pickup. Best for Sophomores & upperclassmen\n \n \n setPickupLocation(\"Wade\")}\n className=\"h-4 w-4 text-blue-600 focus:ring-blue-500\"\n />\n Wade pickup. Best for First Years\n \n

\n \n \n {isSubmitting ? \"Processing...\" : \"Preorder iClicker!\"}\n \n \n

\n );\n}\n\n// Helper function to load Stripe\nasync function loadStripe() {\n try {\n const stripeKey = Deno.env.get(\"STRIPE_PUBLIC\");\n if (!stripeKey) {\n console.error(\"Stripe public key not configured\");\n return null;\n }\n \n const { loadStripe: loadStripeJs } = await import(\"https://esm.sh/@stripe/stripe-js@2.4.0\");\n return await loadStripeJs(stripeKey);\n } catch (error) {\n console.error(\"Failed to load Stripe:\", error);\n return null;\n }\n}",[],[252,258,291],{"_107":299,"_99":300,"_152":301,"_154":259,"_155":141,"_156":302,"_158":122,"_109":303,"_104":33,"_160":191,"_162":304,"_163":27,"_164":-5,"_165":305,"_102":306},"7b01ebda-1d26-11f0-a002-569c3dd06744","ThankYouPage.tsx","7b01ec7a-1d26-11f0-a002-569c3dd06744",115,["D",1745071155811],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function ThankYouPage() {\n return (\n

Thank You for Your Order!

\n \n

\n Your iClicker preorder has been confirmed! A $5 deposit has been received.\n

\n \n

\n You'll receive a confirmation email shortly with all the details about your order.\n

\n \n

\n I'll be distributing iClickers Tuesday evening the day after break, January 14th, at 9PM at Wade \n (stay tuned for Fribley pickup info), and will email with an exact time soon.\n

\n \n

\n If you have any questions, please contact me at wsm32@case.edu\n

\n \n \n Return to Home\n \n

\n );\n}",[],[252,258,300],[252,258],{"_107":309,"_99":310,"_152":311,"_154":253,"_155":141,"_156":312,"_158":122,"_109":313,"_104":157,"_160":180,"_162":314,"_163":27,"_164":-5,"_165":315,"_102":316},"5745b014-1d26-11f0-9c28-569c3dd06744","index.html","0a52108c-1d25-11f0-a6aa-569c3dd06744",110,["D",1745071095852],"\n\n \n \n \n Wolf's iClicker Shop\n \n \n \n \n \n

Wolf's iClicker Shop

\n \n \n \n",[],[252,310],{"_107":318,"_99":319,"_152":320,"_154":253,"_155":141,"_156":321,"_158":122,"_109":322,"_104":33,"_160":191,"_162":323,"_163":27,"_164":-5,"_165":324,"_102":325},"0a59802e-1d25-11f0-a4c4-569c3dd06744","index.tsx","0a5980f6-1d25-11f0-a4c4-569c3dd06744",7,["D",1745070537237],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[252,319],[252],{"_107":328,"_99":329,"_152":330,"_154":-5,"_155":141,"_156":331,"_158":122,"_109":332,"_104":33,"_160":180,"_162":70,"_163":27,"_164":-5,"_165":333,"_102":334},"808049a4-1d25-11f0-8967-569c3dd06744",".vtignore","80804a3a-1d25-11f0-8967-569c3dd06744",95,["D",1745070735006],[],[329],{"_107":336,"_99":176,"_152":337,"_154":-5,"_155":141,"_156":338,"_158":122,"_109":339,"_104":94,"_160":180,"_162":340,"_163":27,"_164":-5,"_165":341,"_102":342},"31c269ee-1d27-11f0-a7bd-569c3dd06744","0a5d5960-1d25-11f0-b3df-569c3dd06744",128,["D",1745071462415],"# iClickWolf - Val Town Edition\n\nThis app is a port of the iClickWolf Next.js application to Val Town, using SQLite for database storage.\n\n## Project Structure\n\n- **Backend**: `/backend/index.ts` - The main HTTP server that serves the frontend and API endpoints\n - `/backend/database/` - Contains SQLite database setup and queries\n - `/backend/routes/` - API routes for checkout, webhook, and items\n\n- **Frontend**: `/frontend/index.html` - The main HTML entry point\n - `/frontend/index.tsx` - The React entry point\n - `/frontend/components/` - React components for the application\n\n## Features\n\n- iClicker preordering system\n- Stripe integration for payments\n- Email notifications for order confirmations\n- SQLite database for storing items and preorders\n\n## Environment Variables\n\nThe following environment variables are required:\n\n- `STRIPE_SECRET` - Stripe API secret key\n- `STRIPE_PUBLIC` - Stripe publishable key (for frontend)\n- `STRIPE_WEBHOOK_SECRET` - Secret for verifying Stripe webhook events\n- `VAL_EMAIL_KEY` - API key for the email sending service\n\n## Error Handling\n\nThe application includes robust error handling:\n\n- If Stripe is not configured (missing API keys), appropriate error messages are shown\n- If the database fails to load items, default values are used as a fallback\n- All API errors are properly logged and user-friendly messages are displayed\n- Form validation prevents submission of invalid data\n\n## Database\n\nThe application uses Val Town's SQLite database with the following tables:\n\n- `iclickwolf_items_v1` - Stores product information\n- `iclickwolf_preorders_v1` - Stores customer preorder information\n\n## API Endpoints\n\n- `POST /api/checkout` - Creates a Stripe checkout session and preorder\n- `POST /api/webhook` - Handles Stripe webhook events\n- `GET /api/items` - Returns the first item (iClicker)",[],[176],{"_107":344,"_99":345,"_152":346,"_154":-5,"_155":141,"_156":347,"_158":122,"_109":348,"_104":33,"_160":180,"_162":349,"_163":27,"_164":-5,"_165":350,"_102":351},"460279d2-1d25-11f0-8fe3-569c3dd06744","deno.json","46027a5e-1d25-11f0-8fe3-569c3dd06744",48,["D",1745070637386],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[345],"files",[149,167,174,184,195,205,212,221,230,240,250,256,262,271,280,289,298,308,317,327,335,343],"counts",{"_356":33,"_357":157,"_358":33,"_359":190},"pulls","branches","forks","envVars","contents",[],{"_107":196,"_99":197,"_152":198,"_154":170,"_155":141,"_156":199,"_158":122,"_109":363,"_104":33,"_160":191,"_162":201,"_163":27,"_164":-5,"_102":364},["D",1745070953020],[151,169,197],"upstream","screenshots",{"_368":369,"_370":371},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=121&url=https%3A%2F%2Fwolf--0a4ebd1a1d2511f09565569c3dd06744.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=121&url=https%3A%2F%2Fwolf--0a4ebd1a1d2511f09565569c3dd06744.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":375,"_147":379,"_352":446,"_180":447,"_360":449,"_365":-5,"_450":27,"_451":-5},{"_107":108,"_99":100,"_109":376,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":120,"_121":122,"_123":124,"_125":33,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":27,"_21":377,"_138":378},["D",1745070536853],{"_97":98,"_136":137},{"_104":140,"_99":43,"_107":141,"_142":108,"_143":-5,"_144":-5,"_145":-5,"_146":-5},[380,410,437,440,443],{"_107":150,"_99":151,"_152":153,"_154":-5,"_155":141,"_156":157,"_158":122,"_109":159,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":381,"_102":409},[382,394,406],{"_107":168,"_99":169,"_152":170,"_154":153,"_155":141,"_156":171,"_158":122,"_109":172,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":383,"_102":393},[384,387,390],{"_107":175,"_99":176,"_152":177,"_154":170,"_155":141,"_156":178,"_158":122,"_109":179,"_104":33,"_160":180,"_162":181,"_163":27,"_164":-5,"_165":385,"_102":386},[],[151,169,176],{"_107":185,"_99":186,"_152":187,"_154":170,"_155":141,"_156":188,"_158":122,"_109":189,"_104":190,"_160":191,"_162":192,"_163":27,"_164":-5,"_165":388,"_102":389},[],[151,169,186],{"_107":196,"_99":197,"_152":198,"_154":170,"_155":141,"_156":199,"_158":122,"_109":200,"_104":33,"_160":191,"_162":201,"_163":27,"_164":-5,"_165":391,"_102":392},[],[151,169,197],[151,169],{"_107":206,"_99":207,"_152":208,"_154":153,"_155":141,"_156":209,"_158":122,"_109":210,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":395,"_102":405},[396,399,402],{"_107":213,"_99":214,"_152":215,"_154":208,"_155":141,"_156":216,"_158":122,"_109":217,"_104":157,"_160":191,"_162":218,"_163":27,"_164":-5,"_165":397,"_102":398},[],[151,207,214],{"_107":222,"_99":223,"_152":224,"_154":208,"_155":141,"_156":225,"_158":122,"_109":226,"_104":157,"_160":191,"_162":227,"_163":27,"_164":-5,"_165":400,"_102":401},[],[151,207,223],{"_107":231,"_99":232,"_152":233,"_154":208,"_155":141,"_156":234,"_158":122,"_109":235,"_104":157,"_160":191,"_162":236,"_163":27,"_164":-5,"_165":403,"_102":404},[],[151,207,232],[151,207],{"_107":241,"_99":242,"_152":120,"_154":153,"_155":141,"_156":124,"_158":122,"_109":243,"_104":190,"_160":244,"_162":245,"_163":27,"_164":246,"_165":407,"_102":408},[],[151,242],[151],{"_107":251,"_99":252,"_152":253,"_154":-5,"_155":141,"_156":94,"_158":122,"_109":254,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":411,"_102":436},[412,430,433],{"_107":257,"_99":258,"_152":259,"_154":253,"_155":141,"_156":190,"_158":122,"_109":260,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":413,"_102":429},[414,417,420,423,426],{"_107":263,"_99":264,"_152":265,"_154":259,"_155":141,"_156":266,"_158":122,"_109":267,"_104":157,"_160":191,"_162":268,"_163":27,"_164":-5,"_165":415,"_102":416},[],[252,258,264],{"_107":272,"_99":273,"_152":274,"_154":259,"_155":141,"_156":275,"_158":122,"_109":276,"_104":33,"_160":191,"_162":277,"_163":27,"_164":-5,"_165":418,"_102":419},[],[252,258,273],{"_107":281,"_99":282,"_152":283,"_154":259,"_155":141,"_156":284,"_158":122,"_109":285,"_104":157,"_160":191,"_162":286,"_163":27,"_164":-5,"_165":421,"_102":422},[],[252,258,282],{"_107":290,"_99":291,"_152":292,"_154":259,"_155":141,"_156":293,"_158":122,"_109":294,"_104":157,"_160":191,"_162":295,"_163":27,"_164":-5,"_165":424,"_102":425},[],[252,258,291],{"_107":299,"_99":300,"_152":301,"_154":259,"_155":141,"_156":302,"_158":122,"_109":303,"_104":33,"_160":191,"_162":304,"_163":27,"_164":-5,"_165":427,"_102":428},[],[252,258,300],[252,258],{"_107":309,"_99":310,"_152":311,"_154":253,"_155":141,"_156":312,"_158":122,"_109":313,"_104":157,"_160":180,"_162":314,"_163":27,"_164":-5,"_165":431,"_102":432},[],[252,310],{"_107":318,"_99":319,"_152":320,"_154":253,"_155":141,"_156":321,"_158":122,"_109":322,"_104":33,"_160":191,"_162":323,"_163":27,"_164":-5,"_165":434,"_102":435},[],[252,319],[252],{"_107":328,"_99":329,"_152":330,"_154":-5,"_155":141,"_156":331,"_158":122,"_109":332,"_104":33,"_160":180,"_162":70,"_163":27,"_164":-5,"_165":438,"_102":439},[],[329],{"_107":336,"_99":176,"_152":337,"_154":-5,"_155":141,"_156":338,"_158":122,"_109":339,"_104":94,"_160":180,"_162":340,"_163":27,"_164":-5,"_165":441,"_102":442},[],[176],{"_107":344,"_99":345,"_152":346,"_154":-5,"_155":141,"_156":347,"_158":122,"_109":348,"_104":33,"_160":180,"_162":349,"_163":27,"_164":-5,"_165":444,"_102":445},[],[345],[380,382,384,387,390,394,396,399,402,406,410,412,414,417,420,423,426,430,433,437,440,443],{"_107":196,"_99":197,"_152":198,"_154":170,"_155":141,"_156":199,"_158":122,"_109":363,"_104":33,"_160":191,"_162":201,"_163":27,"_164":-5,"_102":448},[151,169,197],[],"showCompareCallout","pull","routes/_app","actionData","errors"]