Add trial system

2026-05-09 22:04:16 +00:00 · 2026-04-18 13:40:50 -07:00
parent b2d5a1ffdf
commit 55989c2019
18 changed files with 631 additions and 20 deletions
--- a/src/components/ShowTrialCard.tsx
+++ b/src/components/ShowTrialCard.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { cn } from "@app/lib/cn";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { ClockIcon, ArrowRight } from "lucide-react";
+import { ProgressBackwards } from "@app/components/ui/progress-backwards";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
+import { useTranslations } from "next-intl";
+
+const TRIAL_DURATION_DAYS = 14;
+
+export default function ShowTrialCard({
+    isCollapsed
+}: {
+    isCollapsed?: boolean;
+}) {
+    const context = useSubscriptionStatusContext();
+    const params = useParams();
+    const orgId = params?.orgId as string | undefined;
+    const t = useTranslations();
+
+    const trialExpiresAt = context?.trialExpiresAt ?? null;
+
+    if (trialExpiresAt == null) return null;
+
+    const now = Date.now();
+    const remainingMs = trialExpiresAt - now;
+    const remainingDays = Math.max(0, Math.ceil(remainingMs / (1000 * 60 * 60 * 24)));
+    const totalMs = TRIAL_DURATION_DAYS * 24 * 60 * 60 * 1000;
+    const progressPct = Math.min(100, Math.max(0, ((now - (trialExpiresAt - totalMs)) / totalMs) * 100));
+    // Inverted: full bar at start, drains to empty as trial ends
+    const displayPct = 100 - progressPct;
+
+    const billingHref = orgId ? `/${orgId}/settings/billing` : "/";
+
+    if (isCollapsed) {
+        return (
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Link
+                            href={billingHref}
+                            className="flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 transition-colors"
+                        >
+                            <ClockIcon className="h-4 w-4 flex-none" />
+                        </Link>
+                    </TooltipTrigger>
+                    <TooltipContent side="right" sideOffset={8}>
+                        <p>
+                            {remainingDays === 0
+                                ? t("trialExpired")
+                                : t("trialDaysLeftShort", { days: remainingDays })}
+                        </p>
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        );
+    }
+
+    return (
+        <Link
+            href={billingHref}
+            className={cn(
+                "group cursor-pointer block",
+                "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm",
+                "transition duration-200 ease-in-out hover:bg-secondary/80 dark:hover:bg-secondary/60"
+            )}
+        >
+            <div className="flex items-center gap-2">
+                <ClockIcon className="flex-none size-4 text-muted-foreground" />
+                <p className="font-medium flex-1 leading-tight">
+                    {remainingDays === 0
+                        ? t("trialExpired")
+                        : t("trialActive")}
+                </p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+                <ProgressBackwards value={displayPct} className="h-1.5" />
+                <small className="text-muted-foreground">
+                    {remainingDays === 0
+                        ? t("trialHasEnded")
+                        : t("trialDaysRemaining", { count: remainingDays })}
+                </small>
+                <div className="inline-flex items-center gap-1 text-xs text-muted-foreground group-hover:text-foreground transition-colors">
+                    <span>{t("trialGoToBilling")}</span>
+                    <ArrowRight className="flex-none size-3" />
+                </div>
+            </div>
+        </Link>
+    );
+}