Add trial system

src/components/LayoutSidebar.tsx

@@ -13,6 +13,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useUserContext } from "@app/hooks/useUserContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
 import { cn } from "@app/lib/cn";
 import { approvalQueries } from "@app/lib/queries";
 import { build } from "@server/build";
@@ -31,6 +32,10 @@ const ProductUpdates = dynamic(() => import("./ProductUpdates"), {
     ssr: false
 });
 
+const ShowTrialCard = dynamic(() => import("./ShowTrialCard"), {
+    ssr: false
+});
+
 interface LayoutSidebarProps {
     orgId?: string;
     orgs?: ListUserOrgsResponse["orgs"];
@@ -55,6 +60,7 @@ export function LayoutSidebar({
     const { user } = useUserContext();
     const { isUnlocked, licenseStatus } = useLicenseStatusContext();
     const { env } = useEnvContext();
+    const subscriptionContext = useSubscriptionStatusContext();
     const t = useTranslations();
 
     // Fetch pending approval count if we have an orgId and it's not an admin page
@@ -122,6 +128,11 @@ export function LayoutSidebar({
     const canShowProductUpdates =
         user.serverAdmin || Boolean(currentOrg?.isOwner || currentOrg?.isAdmin);
 
+    const showTrial =
+        build === "saas" &&
+        Boolean(orgId) &&
+        subscriptionContext?.isTrial
+
     return (
         <div
             className={cn(
@@ -227,6 +238,12 @@ export function LayoutSidebar({
                     </div>
                 )}
 
+                {showTrial && (
+                    <div className="px-4">
+                        <ShowTrialCard isCollapsed={isSidebarCollapsed} />
+                    </div>
+                )}
+
                 {build === "enterprise" && (
                     <div className="px-4">
                         <SidebarLicenseButton
@@ -246,6 +263,7 @@ export function LayoutSidebar({
                         />
                     </div>
                 )}
+
                 {!isSidebarCollapsed && (
                     <div className="px-4 space-y-2 pb-4">
                         {loadFooterLinks() ? (