@wopr-network/platform-ui-core 1.0.0

package/src/components/pricing/dividend-stats.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { fetchDividendStats } from "@/lib/api";
+import { toUserMessage } from "@/lib/errors";
+import { formatCreditStandard } from "@/lib/format-credit";
+
+function useCountUp(target: number, duration = 1200) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    if (target === 0) {
+      setValue(0);
+      return;
+    }
+    // Respect prefers-reduced-motion: skip animation, set immediately
+    if (
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      setValue(target);
+      return;
+    }
+    const start = performance.now();
+    let raf: number;
+    function tick(now: number) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      // ease-out cubic
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(eased * target);
+      if (progress < 1) raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+  return value;
+}
+
+function formatDollars(n: number): string {
+  return formatCreditStandard(n);
+}
+
+export function DividendStats() {
+  const [pool, setPool] = useState(0);
+  const [users, setUsers] = useState(0);
+  const [dividend, setDividend] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchDividendStats()
+      .then((data) => {
+        if (cancelled) return;
+        if (data) {
+          setPool(data.poolAmountDollars);
+          setUsers(data.activeUsers);
+          setDividend(data.projectedDailyDividend);
+        }
+        setLoaded(true);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(toUserMessage(err, "Failed to load dividend stats"));
+        setLoaded(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const animatedPool = useCountUp(pool);
+  const animatedUsers = useCountUp(users);
+  const animatedDividend = useCountUp(dividend);
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-3">
+      {error && <p className="col-span-full text-center text-sm text-red-500">{error}</p>}
+      <Card className="border-terminal/30">
+        <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">
+            Today&apos;s community pool
+          </p>
+          <p className="text-3xl font-bold text-terminal sm:text-4xl" data-testid="pool-amount">
+            {loaded && pool > 0 ? formatDollars(animatedPool) : "--"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-terminal/30">
+        <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">
+            Active users in pool
+          </p>
+          <p className="text-3xl font-bold text-terminal sm:text-4xl" data-testid="active-users">
+            {loaded && users > 0 ? Math.round(animatedUsers).toLocaleString() : "--"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-terminal/30">
+        <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">
+            Your projected daily dividend
+          </p>
+          <p
+            className="text-3xl font-bold text-terminal sm:text-4xl"
+            data-testid="projected-dividend"
+          >
+            {loaded && dividend > 0 ? `~${formatCreditStandard(animatedDividend)}` : "--"}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/pricing/pricing-page.tsx

@@ -0,0 +1,229 @@
+import { BotIcon, ImageIcon, MicIcon, SmartphoneIcon } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { fetchPublicPricing } from "@/lib/api";
+import { brandName, getBrandConfig } from "@/lib/brand-config";
+import { formatCreditDetailed } from "@/lib/format-credit";
+import { mergeApiRates, type PricingCapability, pricingData } from "@/lib/pricing-data";
+import { DividendCalculator } from "./dividend-calculator";
+import { DividendStats } from "./dividend-stats";
+
+const iconMap = {
+  bot: BotIcon,
+  mic: MicIcon,
+  image: ImageIcon,
+  smartphone: SmartphoneIcon,
+} as const;
+
+function formatPrice(price: number): string {
+  return formatCreditDetailed(price);
+}
+
+export async function PricingPage() {
+  let capabilities: PricingCapability[];
+  const apiData = await fetchPublicPricing();
+  if (apiData) {
+    capabilities = mergeApiRates(apiData.rates);
+  } else {
+    capabilities = pricingData.capabilities.map((c) => ({
+      category: c.category,
+      icon: c.icon,
+      models: c.models.map((m) => ({ name: m.name, unit: m.unit, price: m.price })),
+    }));
+  }
+
+  return (
+    <div className="bg-background text-foreground">
+      {/* --- Dividend Hero --- */}
+      <section className="flex min-h-[60dvh] flex-col items-center justify-center px-6 text-center">
+        <Badge variant="terminal" className="mb-8">
+          Community dividend
+        </Badge>
+
+        <h1 className="max-w-3xl text-3xl font-bold leading-[1.1] tracking-tight sm:text-5xl md:text-6xl">
+          {brandName()} pays for itself.
+        </h1>
+
+        <p className="mt-6 max-w-xl text-lg text-muted-foreground">
+          Every day, the platform distributes credits back to active users from its own margin. The
+          bigger the community grows, the more you receive. Early users get the most.
+        </p>
+
+        <p className="mt-4 max-w-lg text-sm text-muted-foreground">
+          At scale, the daily dividend covers your entire credit spend. You&apos;re not paying to
+          run your bots. {brandName()} is.
+        </p>
+      </section>
+
+      {/* --- Live Pool Stats --- */}
+      <section className="mx-auto max-w-3xl px-6 pb-16">
+        <DividendStats />
+      </section>
+
+      {/* --- Dividend Math --- */}
+      <section className="px-6 pb-24">
+        <DividendCalculator />
+      </section>
+
+      {/* --- Credit Tiers (reframed) --- */}
+      <section className="flex flex-col items-center justify-center px-6 pb-12 text-center">
+        <h2 className="mb-4 text-2xl font-bold tracking-tight sm:text-3xl">Stay in the pool.</h2>
+        <p className="mb-8 max-w-lg text-muted-foreground">
+          Your bot is{" "}
+          <span className="font-semibold text-terminal">
+            ${pricingData.bot_price.amount}/{pricingData.bot_price.period}
+          </span>
+          . That&apos;s the minimum to be eligible for the daily dividend. Usage is billed at cost
+          from credits.
+        </p>
+
+        <Card className="w-full max-w-md border-terminal">
+          <CardHeader className="items-center text-center">
+            <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">
+              Pool eligibility
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col items-center gap-4">
+            <p className="text-5xl font-bold text-terminal sm:text-6xl" data-testid="bot-price">
+              ${pricingData.bot_price.amount}
+              <span className="text-xl font-normal text-muted-foreground">
+                /{pricingData.bot_price.period}
+              </span>
+            </p>
+            <p className="text-muted-foreground">Minimum spend to stay in the dividend pool.</p>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* --- Capability Pricing --- */}
+      <section className="mx-auto max-w-4xl px-6 pb-24">
+        <h2 className="mb-12 text-center text-2xl font-bold tracking-tight sm:text-3xl">
+          Usage rates. Nothing hidden.
+        </h2>
+
+        <div className="flex flex-col gap-12">
+          {capabilities.map((capability) => {
+            const Icon = iconMap[capability.icon];
+            return (
+              <div key={capability.category}>
+                <div className="mb-4 flex items-center gap-3">
+                  <Icon className="size-5 text-terminal" />
+                  <h3 className="text-lg font-semibold">{capability.category}</h3>
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {capability.models.map((model) => (
+                    <Card key={model.name} className="border-border">
+                      <CardContent className="flex items-center justify-between py-4">
+                        <div>
+                          <p className="font-medium">{model.name}</p>
+                          <p className="text-sm text-muted-foreground">per {model.unit}</p>
+                        </div>
+                        <p className="text-lg font-bold text-terminal">
+                          {formatPrice(model.price)}
+                        </p>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* --- VPS Tier --- */}
+      <section className="mx-auto max-w-4xl px-6 pb-24">
+        <h2 className="mb-4 text-center text-2xl font-bold tracking-tight sm:text-3xl">
+          Need a dedicated machine?
+        </h2>
+        <p className="mb-8 text-center text-muted-foreground">
+          The VPS tier gives your bot a persistent container with fixed monthly pricing — no
+          per-credit billing for compute.
+        </p>
+        <div className="mx-auto max-w-sm">
+          <Card className="border-terminal/50">
+            <CardHeader className="items-center text-center">
+              <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">
+                VPS tier
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-col items-center gap-4">
+              <p className="text-5xl font-bold text-terminal sm:text-6xl">
+                $15
+                <span className="text-xl font-normal text-muted-foreground">/mo</span>
+              </p>
+              <ul className="w-full space-y-1 text-sm text-muted-foreground">
+                <li className="flex items-center gap-2">
+                  <span className="text-terminal">✓</span> 2 GB RAM / 2 vCPU / 20 GB SSD
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-terminal">✓</span> Persistent container — data survives
+                  restarts
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-terminal">✓</span> Dedicated hostname
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-terminal">✓</span> SSH access via Cloudflare Tunnel
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-terminal">✓</span> Flat monthly price — no metered compute
+                </li>
+              </ul>
+              <Button
+                data-onboarding-id="pricing.subscribe.vps"
+                variant="terminal"
+                className="w-full"
+                asChild
+              >
+                <Link href="/signup">Get started</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* --- Credits Explainer --- */}
+      <section className="flex flex-col items-center justify-center gap-6 px-6 pb-24 text-center">
+        <p className="max-w-lg text-lg text-muted-foreground">
+          Your bot is ${pricingData.bot_price.amount}/mo. Usage is billed from credits. Free tier
+          includes ${pricingData.signup_credit} signup credit.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Credits in, dividend back. The community grows, your costs shrink.
+        </p>
+      </section>
+
+      {/* --- CTA --- */}
+      <section className="flex min-h-[40dvh] flex-col items-center justify-center gap-8 px-6 text-center">
+        <h2 className="max-w-2xl text-2xl font-bold leading-[1.1] tracking-tight sm:text-4xl">
+          Join early. The math rewards you.
+        </h2>
+
+        <Button data-onboarding-id="pricing.subscribe.cta" variant="terminal" size="lg" asChild>
+          <Link href="/signup">Get Started</Link>
+        </Button>
+
+        <span className="mt-4 text-sm text-muted-foreground opacity-60">
+          {getBrandConfig().domain}
+        </span>
+      </section>
+
+      {/* --- Footer --- */}
+      <footer className="flex justify-center gap-6 px-6 pb-8 text-sm text-muted-foreground">
+        <Link href="/" className="underline underline-offset-4 hover:text-foreground">
+          Home
+        </Link>
+        <Link href="/terms" className="underline underline-offset-4 hover:text-foreground">
+          Terms
+        </Link>
+        <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
+          Privacy
+        </Link>
+      </footer>
+    </div>
+  );
+}

package/src/components/settings/create-org-wizard.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { BuildingIcon, CheckCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type FormEvent, useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { createOrganization } from "@/lib/org-api";
+
+function toSlug(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+type Step = "name" | "confirm" | "done";
+
+export default function CreateOrgWizard() {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState<Step>("name");
+  const [orgName, setOrgName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const reset = useCallback(() => {
+    setStep("name");
+    setOrgName("");
+    setSlug("");
+    setSlugTouched(false);
+    setCreating(false);
+    setError(null);
+  }, []);
+
+  function handleNameChange(value: string) {
+    setOrgName(value);
+    if (!slugTouched) {
+      setSlug(toSlug(value));
+    }
+  }
+
+  function handleSlugChange(value: string) {
+    setSlugTouched(true);
+    setSlug(toSlug(value));
+  }
+
+  function handleNext(e: FormEvent) {
+    e.preventDefault();
+    if (!orgName.trim() || !slug.trim()) return;
+    setError(null);
+    setStep("confirm");
+  }
+
+  async function handleCreate() {
+    setCreating(true);
+    setError(null);
+    try {
+      await createOrganization({ name: orgName.trim(), slug: slug.trim() });
+      setStep("done");
+    } catch (err) {
+      const message =
+        err instanceof Error && err.message.includes("409")
+          ? "This slug is already taken. Go back and choose a different one."
+          : "Failed to create organization. Please try again.";
+      setError(message);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  function handleOpenChange(v: boolean) {
+    setOpen(v);
+    if (v) reset();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="terminal">
+          <BuildingIcon className="mr-2 size-4" />
+          Create organization
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <AnimatePresence mode="wait">
+          {step === "name" && (
+            <motion.div
+              key="name"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <DialogHeader>
+                <DialogTitle>Name your organization</DialogTitle>
+                <DialogDescription>Choose a name and URL slug for your team.</DialogDescription>
+              </DialogHeader>
+              <form onSubmit={handleNext} className="mt-4 flex flex-col gap-4">
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="org-wizard-name">Organization name</Label>
+                  <Input
+                    id="org-wizard-name"
+                    placeholder="Acme Corp"
+                    value={orgName}
+                    onChange={(e) => handleNameChange(e.target.value)}
+                    required
+                    autoFocus
+                  />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="org-wizard-slug">Slug</Label>
+                  <Input
+                    id="org-wizard-slug"
+                    placeholder="acme-corp"
+                    value={slug}
+                    onChange={(e) => handleSlugChange(e.target.value)}
+                    required
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Used in URLs. Lowercase letters, numbers, and hyphens only.
+                  </p>
+                </div>
+                <DialogFooter>
+                  <Button type="submit" disabled={!orgName.trim() || !slug.trim()}>
+                    Next
+                  </Button>
+                </DialogFooter>
+              </form>
+            </motion.div>
+          )}
+
+          {step === "confirm" && (
+            <motion.div
+              key="confirm"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.15 }}
+            >
+              <DialogHeader>
+                <DialogTitle>Confirm</DialogTitle>
+                <DialogDescription>
+                  You{"'"}ll be the admin. You can invite members after setup.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="mt-4 space-y-3">
+                <div className="rounded-md border px-4 py-3 text-sm">
+                  <p>
+                    <span className="text-muted-foreground">Name:</span> <strong>{orgName}</strong>
+                  </p>
+                  <p>
+                    <span className="text-muted-foreground">Slug:</span>{" "}
+                    <code className="text-xs">{slug}</code>
+                  </p>
+                </div>
+                {error && <p className="text-sm text-destructive">{error}</p>}
+              </div>
+              <DialogFooter className="mt-4 gap-2 sm:gap-0">
+                <Button
+                  variant="outline"
+                  type="button"
+                  onClick={() => {
+                    setStep("name");
+                    setError(null);
+                  }}
+                >
+                  Back
+                </Button>
+                <Button variant="terminal" onClick={handleCreate} disabled={creating}>
+                  {creating ? "Creating..." : "Create"}
+                </Button>
+              </DialogFooter>
+            </motion.div>
+          )}
+
+          {step === "done" && (
+            <motion.div
+              key="done"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2 }}
+            >
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <CheckCircleIcon className="size-5 text-terminal" />
+                  Organization created
+                </DialogTitle>
+                <DialogDescription>
+                  Your organization is ready. You can now invite members and configure settings.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter className="mt-4">
+                <Button
+                  variant="terminal"
+                  onClick={() => {
+                    setOpen(false);
+                    router.push("/settings/org");
+                  }}
+                >
+                  Go to organization settings
+                </Button>
+              </DialogFooter>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </DialogContent>
+    </Dialog>
+  );
+}