6e38e2d270
- Updated multiple components to utilize useAuthQuery instead of useQuery for fetching user-related data, enhancing authentication management. - Adjusted balance and subscription queries across various components including InitUser, ManageSubscription, PricingCards, CreditDisplay, and others to ensure consistent authentication checks. - Improved overall code maintainability by centralizing authentication logic in the new hook.
115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useMutation } from "convex/react";
|
|
import { useAuthQuery } from "@/hooks/use-auth-query";
|
|
import { api } from "@/convex/_generated/api";
|
|
import { Coins } from "lucide-react";
|
|
import { toast } from "@/lib/toast";
|
|
import { msg } from "@/lib/toast-messages";
|
|
|
|
const TIER_LABELS: Record<string, string> = {
|
|
free: "Free",
|
|
starter: "Starter",
|
|
pro: "Pro",
|
|
max: "Max",
|
|
business: "Business",
|
|
};
|
|
|
|
const TIER_COLORS: Record<string, string> = {
|
|
free: "text-muted-foreground",
|
|
starter: "text-blue-500",
|
|
pro: "text-purple-500",
|
|
max: "text-amber-500",
|
|
business: "text-amber-500",
|
|
};
|
|
|
|
const showTestCreditGrant =
|
|
typeof process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "string" &&
|
|
process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "true";
|
|
|
|
export function CreditDisplay() {
|
|
const balance = useAuthQuery(api.credits.getBalance);
|
|
const subscription = useAuthQuery(api.credits.getSubscription);
|
|
const grantTestCredits = useMutation(api.credits.grantTestCredits);
|
|
|
|
if (balance === undefined || subscription === undefined) {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-1.5 animate-pulse">
|
|
<Coins className="h-4 w-4 text-muted-foreground" />
|
|
<div className="h-4 w-16 rounded bg-muted" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const available = balance.balance - balance.reserved;
|
|
const tier = subscription.tier;
|
|
const tierLabel = TIER_LABELS[tier] ?? tier;
|
|
const tierColor = TIER_COLORS[tier] ?? "text-muted-foreground";
|
|
|
|
const isLow = available < 10;
|
|
const isEmpty = available <= 0;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`flex items-center gap-2 rounded-lg px-3 py-1.5 transition-colors ${
|
|
isEmpty
|
|
? "bg-destructive/10"
|
|
: isLow
|
|
? "bg-amber-500/10"
|
|
: "bg-muted/50"
|
|
}`}
|
|
>
|
|
<Coins
|
|
className={`h-4 w-4 ${
|
|
isEmpty
|
|
? "text-destructive"
|
|
: isLow
|
|
? "text-amber-500"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
/>
|
|
<span
|
|
className={`text-sm font-medium tabular-nums ${
|
|
isEmpty ? "text-destructive" : isLow ? "text-amber-500" : "text-foreground"
|
|
}`}
|
|
>
|
|
{available.toLocaleString("de-DE")} Cr
|
|
</span>
|
|
{balance.reserved > 0 && (
|
|
<span className="text-xs text-muted-foreground/70">
|
|
({balance.reserved} reserved)
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-muted-foreground/70">·</span>
|
|
<span className={`text-xs font-medium ${tierColor}`}>{tierLabel}</span>
|
|
</div>
|
|
{showTestCreditGrant && (
|
|
<button
|
|
type="button"
|
|
title="Testphase: +2000 Cr"
|
|
className="rounded-md border border-dashed border-border px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
onClick={() => {
|
|
void grantTestCredits({ amount: 2000 })
|
|
.then((r) => {
|
|
const { title, desc } = msg.billing.creditsAdded(2000);
|
|
toast.success(
|
|
title,
|
|
`${desc} — Stand: ${r.newBalance.toLocaleString("de-DE")}`,
|
|
);
|
|
})
|
|
.catch((e: unknown) => {
|
|
toast.error(
|
|
msg.billing.testGrantFailed.title,
|
|
e instanceof Error ? e.message : undefined,
|
|
);
|
|
});
|
|
}}
|
|
>
|
|
Test +2000
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|