prep for the nook

2026-08-26 17:41:57 -04:00
parent 898c891bd5
commit e4a9be4899
27 changed files with 1234 additions and 20 deletions
--- a/src/routes/nook/checkout.tsx
+++ b/src/routes/nook/checkout.tsx
@@ -0,0 +1,110 @@
+import { createSignal, onMount } from "solid-js";
+import { PageHead } from "~/components/PageHead";
+import SubdomainHeader from "~/components/SubdomainHeader";
+import Button from "~/components/ui/Button";
+import { env } from "~/env/client";
+import { useSite } from "~/context/SiteContext";
+import { useDarkMode } from "~/context/darkMode";
+
+export default function NookCheckout() {
+  const site = useSite();
+  const { isDark } = useDarkMode();
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal("");
+  const [turnstileToken, setTurnstileToken] = createSignal("");
+
+  const brandColor = () =>
+    isDark() ? (site().brandColorDark ?? site().brandColor) : site().brandColor;
+
+  onMount(() => {
+    const script = document.createElement("script");
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      const container = document.getElementById("turnstile-widget-nook");
+      if (container && (window as any).turnstile) {
+        (window as any).turnstile.render(container, {
+          sitekey: env.VITE_TURNSTILE_SITE_KEY,
+          theme: isDark() ? "dark" : "light",
+          callback: (token: string) => setTurnstileToken(token),
+          "expired-callback": () => setTurnstileToken("")
+        });
+      }
+    };
+    document.head.appendChild(script);
+  });
+
+  const buy = async () => {
+    if (loading()) return;
+    if (!turnstileToken()) {
+      setError("Complete the security check to continue.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/the-nook/checkout", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ turnstileToken: turnstileToken() })
+      });
+      const data = (await res.json()) as { checkoutUrl?: string; error?: string };
+      if (!res.ok || !data.checkoutUrl) {
+        setError(data.error ?? "Unable to start checkout. Please try again.");
+        return;
+      }
+      window.location.href = data.checkoutUrl;
+    } catch {
+      setError("Unable to start checkout. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <PageHead
+        title="Checkout"
+        description="Buy a The Nook license — $10 one-time for up to 3 devices."
+      />
+      <SubdomainHeader />
+
+      <div class="bg-base mx-auto max-w-lg px-4 py-16">
+        <div class="border-overlay0 bg-surface0 rounded-xl border p-8 shadow-2xl">
+          <h1 class="text-text mb-1 text-3xl font-bold">The Nook</h1>
+          <p class="text-subtext0 mb-6">Lifetime License — 3 devices</p>
+
+          <div class="text-text mb-6 text-4xl font-extrabold">
+            $10<span class="text-subtext0 text-base font-normal"> one-time</span>
+          </div>
+          <ul class="text-subtext0 mb-6 space-y-2 text-sm">
+            <li>• Activate on up to 3 of your own Macs</li>
+            <li>• No subscription, ever</li>
+            <li>• Key delivered by email + on this page</li>
+          </ul>
+
+          <div id="turnstile-widget-nook" class="mb-4" />
+
+          <Button
+            variant="download"
+            size="lg"
+            color={brandColor()}
+            fullWidth
+            loading={loading()}
+            onClick={buy}
+          >
+            Pay $10
+          </Button>
+
+          {error() && (
+            <p class="text-red mt-4 text-sm">{error()}</p>
+          )}
+          <p class="text-subtext1 mt-4 text-xs">
+            Billed once through Stripe. License delivered immediately after payment.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}