@wopr-network/platform-ui-core 1.0.0

package/src/components/billing/auto-topup-card.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { CreditCardIcon, InfoIcon, Loader2Icon } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import type { AutoTopupInterval, AutoTopupSettings } from "@/lib/api";
+import { getAutoTopupSettings, updateAutoTopupSettings } from "@/lib/api";
+
+const THRESHOLD_OPTIONS = [
+  { value: "200", label: "$2" },
+  { value: "500", label: "$5" },
+  { value: "1000", label: "$10" },
+];
+
+const AMOUNT_OPTIONS = [
+  { value: "500", label: "$5" },
+  { value: "1000", label: "$10" },
+  { value: "2000", label: "$20" },
+  { value: "5000", label: "$50" },
+];
+
+const INTERVAL_OPTIONS: { value: AutoTopupInterval; label: string }[] = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+];
+
+function dividendTip(interval: AutoTopupInterval): string {
+  if (interval === "monthly") {
+    return "Tip: scheduled top-ups keep you in the dividend pool for 7 days each month.";
+  }
+  return "Tip: scheduled top-ups keep you in the dividend pool automatically.";
+}
+
+function formatNextCharge(dateStr: string | null): string {
+  if (!dateStr) return "";
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+}
+
+export function AutoTopupCard() {
+  const [settings, setSettings] = useState<AutoTopupSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getAutoTopupSettings();
+      setSettings(data);
+    } catch {
+      setError("Failed to load auto-topup settings.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function save(
+    update: Parameters<typeof updateAutoTopupSettings>[0],
+    prevSettings: AutoTopupSettings,
+  ) {
+    setSaving(true);
+    setError(null);
+    try {
+      const updated = await updateAutoTopupSettings(update);
+      setSettings(updated);
+    } catch {
+      setSettings(prevSettings);
+      setError("Failed to save settings. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleUsageToggle(enabled: boolean) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const optimistic = {
+      ...settings,
+      usageBased: { ...settings.usageBased, enabled },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        usageBased: {
+          enabled,
+          thresholdCents: settings.usageBased.thresholdCents,
+          topupAmountCents: settings.usageBased.topupAmountCents,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  function handleUsageThreshold(value: string) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const thresholdCents = Number(value);
+    const optimistic = {
+      ...settings,
+      usageBased: { ...settings.usageBased, thresholdCents },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        usageBased: {
+          enabled: settings.usageBased.enabled,
+          thresholdCents,
+          topupAmountCents: settings.usageBased.topupAmountCents,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  function handleUsageAmount(value: string) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const topupAmountCents = Number(value);
+    const optimistic = {
+      ...settings,
+      usageBased: { ...settings.usageBased, topupAmountCents },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        usageBased: {
+          enabled: settings.usageBased.enabled,
+          thresholdCents: settings.usageBased.thresholdCents,
+          topupAmountCents,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  function handleScheduleToggle(enabled: boolean) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const optimistic = {
+      ...settings,
+      scheduled: { ...settings.scheduled, enabled },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        scheduled: {
+          enabled,
+          amountCents: settings.scheduled.amountCents,
+          interval: settings.scheduled.interval,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  function handleScheduleAmount(value: string) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const amountCents = Number(value);
+    const optimistic = {
+      ...settings,
+      scheduled: { ...settings.scheduled, amountCents },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        scheduled: {
+          enabled: settings.scheduled.enabled,
+          amountCents,
+          interval: settings.scheduled.interval,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  function handleScheduleInterval(value: string) {
+    if (!settings) return;
+    const prevSettings = settings;
+    const interval = value as AutoTopupInterval;
+    const optimistic = {
+      ...settings,
+      scheduled: { ...settings.scheduled, interval },
+    };
+    setSettings(optimistic);
+    save(
+      {
+        scheduled: {
+          enabled: settings.scheduled.enabled,
+          amountCents: settings.scheduled.amountCents,
+          interval,
+        },
+      },
+      prevSettings,
+    );
+  }
+
+  // --- Loading skeleton ---
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle role="heading" aria-level={2}>
+            Auto-topup
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-10" />
+          </div>
+          <Skeleton className="h-4 w-64" />
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-20" />
+            <Skeleton className="h-5 w-10" />
+          </div>
+          <Skeleton className="h-4 w-48" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // --- Error with no data ---
+  if (error && !settings) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle role="heading" aria-level={2}>
+            Auto-topup
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex h-20 flex-col items-center justify-center gap-2 text-muted-foreground">
+            <p>{error}</p>
+            <Button type="button" variant="link" size="sm" onClick={load} className="h-auto p-0">
+              Retry
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!settings) return null;
+
+  const hasPaymentMethod = settings.paymentMethodLast4 !== null;
+
+  // --- No payment method state ---
+  if (!hasPaymentMethod) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle role="heading" aria-level={2}>
+            Auto-topup
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-3 text-sm text-muted-foreground">
+            <CreditCardIcon className="size-4 shrink-0" />
+            <p>Add a payment method to enable auto-topup.</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // --- Main UI ---
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+    >
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle role="heading" aria-level={2}>
+              Auto-topup
+            </CardTitle>
+            {saving && <Loader2Icon className="size-4 animate-spin text-muted-foreground" />}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* --- Usage-based section --- */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="usage-toggle" className="text-sm font-medium">
+                Usage-based
+              </Label>
+              <Switch
+                id="usage-toggle"
+                checked={settings.usageBased.enabled}
+                onCheckedChange={handleUsageToggle}
+                disabled={saving}
+              />
+            </div>
+            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <span>When balance drops below</span>
+              <Select
+                value={String(settings.usageBased.thresholdCents)}
+                onValueChange={handleUsageThreshold}
+                disabled={saving || !settings.usageBased.enabled}
+              >
+                <SelectTrigger size="sm" className="w-[72px]" aria-label="Threshold amount">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {THRESHOLD_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span>add</span>
+              <Select
+                value={String(settings.usageBased.topupAmountCents)}
+                onValueChange={handleUsageAmount}
+                disabled={saving || !settings.usageBased.enabled}
+              >
+                <SelectTrigger size="sm" className="w-[72px]" aria-label="Top-up amount">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {AMOUNT_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* --- Scheduled section --- */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="schedule-toggle" className="text-sm font-medium">
+                Scheduled
+              </Label>
+              <Switch
+                id="schedule-toggle"
+                checked={settings.scheduled.enabled}
+                onCheckedChange={handleScheduleToggle}
+                disabled={saving}
+              />
+            </div>
+            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <span>Add</span>
+              <Select
+                value={String(settings.scheduled.amountCents)}
+                onValueChange={handleScheduleAmount}
+                disabled={saving || !settings.scheduled.enabled}
+              >
+                <SelectTrigger size="sm" className="w-[72px]" aria-label="Scheduled amount">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {AMOUNT_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span>every</span>
+              <Select
+                value={settings.scheduled.interval}
+                onValueChange={handleScheduleInterval}
+                disabled={saving || !settings.scheduled.enabled}
+              >
+                <SelectTrigger size="sm" className="w-[100px]" aria-label="Schedule interval">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {INTERVAL_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {settings.scheduled.enabled && settings.scheduled.nextChargeDate && (
+              <p className="text-xs text-muted-foreground">
+                Next charge: {formatNextCharge(settings.scheduled.nextChargeDate)}
+              </p>
+            )}
+          </div>
+
+          {/* --- Footer: card on file + tip --- */}
+          <div className="space-y-2 border-t pt-4">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <CreditCardIcon className="size-3.5" />
+              <span>
+                Charged to {settings.paymentMethodBrand} .... {settings.paymentMethodLast4}
+              </span>
+            </div>
+            {settings.scheduled.enabled && (
+              <div className="flex items-start gap-2 text-xs text-muted-foreground">
+                <InfoIcon className="mt-0.5 size-3.5 shrink-0" />
+                <span>{dividendTip(settings.scheduled.interval)}</span>
+              </div>
+            )}
+          </div>
+
+          {/* --- Inline error --- */}
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

package/src/components/billing/buy-credits-panel.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { CreditOption } from "@/lib/api";
+import { createCreditCheckout, getCreditOptions } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { isAllowedRedirectUrl } from "@/lib/validate-redirect-url";
+
+export function BuyCreditsPanel() {
+  const [tiers, setTiers] = useState<CreditOption[]>([]);
+  const [tiersLoading, setTiersLoading] = useState(true);
+  const [loadError, setLoadError] = useState(false);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadTiers = useCallback(() => {
+    setTiersLoading(true);
+    setLoadError(false);
+    getCreditOptions()
+      .then((options) => {
+        setTiers(options);
+        setTiersLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to load credit options:", err);
+        setLoadError(true);
+        setTiersLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setTiersLoading(true);
+    setLoadError(false);
+    getCreditOptions()
+      .then((options) => {
+        if (!cancelled) {
+          setTiers(options);
+          setTiersLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          console.error("Failed to load credit options:", err);
+          setLoadError(true);
+          setTiersLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function handleCheckout() {
+    if (selected === null) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const { checkoutUrl } = await createCreditCheckout(selected);
+      if (!isAllowedRedirectUrl(checkoutUrl)) {
+        setError("Unexpected checkout URL.");
+        setLoading(false);
+        return;
+      }
+      window.location.href = checkoutUrl;
+    } catch {
+      setError("Checkout failed. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  if (tiersLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Buy Credits</CardTitle>
+          <p className="text-xs text-muted-foreground">
+            Every purchase resets your 7-day dividend window
+          </p>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
+            {Array.from({ length: 5 }, (_, i) => `tier-sk-${i}`).map((id) => (
+              <Skeleton key={id} className="h-16 w-full rounded-md" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (loadError) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Buy Credits</CardTitle>
+          <p className="text-xs text-muted-foreground">
+            Every purchase resets your 7-day dividend window
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <p className="text-sm text-destructive">Failed to load credit packages.</p>
+          <Button variant="outline" onClick={loadTiers}>
+            Try again
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (tiers.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Buy Credits</CardTitle>
+          <p className="text-xs text-muted-foreground">
+            Every purchase resets your 7-day dividend window
+          </p>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Credit purchases are not available at this time.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Buy Credits</CardTitle>
+        <p className="text-xs text-muted-foreground">
+          Every purchase resets your 7-day dividend window
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
+          {tiers.map((tier) => (
+            <motion.button
+              key={tier.priceId}
+              type="button"
+              onClick={() => setSelected(tier.priceId)}
+              whileHover={{ scale: 1.03 }}
+              whileTap={{ scale: 0.98 }}
+              transition={{ type: "spring", stiffness: 400, damping: 25 }}
+              className={cn(
+                "relative flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
+                selected === tier.priceId
+                  ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
+                  : "border-border",
+              )}
+            >
+              <span className="text-lg font-bold">{tier.label}</span>
+              {tier.bonusPercent > 0 && (
+                <Badge className="bg-primary/15 text-primary border-primary/25 text-xs">
+                  +{tier.bonusPercent}%
+                </Badge>
+              )}
+            </motion.button>
+          ))}
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <Button
+          onClick={handleCheckout}
+          disabled={selected === null || loading}
+          className="w-full sm:w-auto"
+        >
+          {loading ? "Redirecting..." : "Buy credits"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/billing/buy-crypto-credits-panel.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Bitcoin } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { createCryptoCheckout } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { isAllowedRedirectUrl } from "@/lib/validate-redirect-url";
+
+const CRYPTO_AMOUNTS = [
+  { value: 10, label: "$10" },
+  { value: 25, label: "$25" },
+  { value: 50, label: "$50" },
+  { value: 100, label: "$100" },
+];
+
+export function BuyCryptoCreditPanel() {
+  const [selected, setSelected] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleCheckout() {
+    if (selected === null) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const { url } = await createCryptoCheckout(selected);
+      if (!isAllowedRedirectUrl(url)) {
+        setError("Unexpected checkout URL. Please contact support.");
+        setLoading(false);
+        return;
+      }
+      window.location.href = url;
+    } catch {
+      setError("Checkout failed. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut", delay: 0.1 }}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Bitcoin className="h-4 w-4 text-amber-500" />
+            Pay with Crypto
+          </CardTitle>
+          <p className="text-xs text-muted-foreground">
+            Pay with ETH, USDC, USDT, or other cryptocurrencies via PayRam. Minimum $10.
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            {CRYPTO_AMOUNTS.map((amt) => (
+              <motion.button
+                key={amt.value}
+                type="button"
+                onClick={() => setSelected(amt.value)}
+                whileHover={{ scale: 1.03 }}
+                whileTap={{ scale: 0.98 }}
+                transition={{
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 25,
+                }}
+                className={cn(
+                  "flex flex-col items-center gap-1 rounded-md border p-3 text-sm font-medium transition-colors hover:bg-accent",
+                  selected === amt.value
+                    ? "border-primary bg-primary/5 ring-1 ring-primary shadow-[0_0_15px_rgba(0,255,65,0.3)]"
+                    : "border-border",
+                )}
+              >
+                <span className="text-lg font-bold">{amt.label}</span>
+              </motion.button>
+            ))}
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          <Button
+            onClick={handleCheckout}
+            disabled={selected === null || loading}
+            variant="outline"
+            className="w-full sm:w-auto"
+          >
+            {loading ? "Opening PayRam..." : "Pay with crypto"}
+          </Button>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}