Dont show the link if not the org owner

src/components/LayoutSidebar.tsx

@@ -129,9 +129,7 @@ export function LayoutSidebar({
         user.serverAdmin || Boolean(currentOrg?.isOwner || currentOrg?.isAdmin);
 
     const showTrial =
-        build === "saas" &&
-        Boolean(orgId) &&
-        subscriptionContext?.isTrial;
+        build === "saas" && Boolean(orgId) && subscriptionContext?.isTrial;
 
     return (
         <div
@@ -240,11 +238,16 @@ export function LayoutSidebar({
                     <div className="px-4">
                         <ProductUpdates isCollapsed={isSidebarCollapsed} />
                     </div>
-                ) : <div className="mt-0.2"></div>}
+                ) : (
+                    <div className="mt-0.2"></div>
+                )}
 
                 {showTrial && (
                     <div className="px-4">
-                        <ShowTrialCard isCollapsed={isSidebarCollapsed} />
+                        <ShowTrialCard
+                            isCollapsed={isSidebarCollapsed}
+                            isOwner={Boolean(currentOrg?.isOwner)}
+                        />
                     </div>
                 )}
 

src/components/ShowTrialCard.tsx

@@ -17,9 +17,11 @@ import { useTranslations } from "next-intl";
 const TRIAL_DURATION_DAYS = 10;
 
 export default function ShowTrialCard({
-    isCollapsed
+    isCollapsed,
+    isOwner = false
 }: {
     isCollapsed?: boolean;
+    isOwner?: boolean;
 }) {
     const context = useSubscriptionStatusContext();
     const params = useParams();
@@ -47,16 +49,13 @@ export default function ShowTrialCard({
     const billingHref = orgId ? `/${orgId}/settings/billing` : "/";
 
     if (isCollapsed) {
-        return (
+        const icon = (
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger asChild>
-                        <Link
-                            href={billingHref}
-                            className="flex items-center justify-center rounded-md p-2 text-muted-foreground"
-                        >
+                        <span className="flex items-center justify-center rounded-md p-2 text-muted-foreground">
                             <ClockIcon className="h-4 w-4 flex-none" />
-                        </Link>
+                        </span>
                     </TooltipTrigger>
                     <TooltipContent side="right" sideOffset={8}>
                         <p>
@@ -70,16 +69,16 @@ export default function ShowTrialCard({
                 </Tooltip>
             </TooltipProvider>
         );
+
+        if (isOwner) {
+            return <Link href={billingHref}>{icon}</Link>;
+        }
+
+        return icon;
     }
 
-    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"
-            )}
-        >
+    const cardContent = (
+        <>
             <div className="flex items-center gap-2">
                 <ClockIcon className="flex-none size-4 text-muted-foreground" />
                 <p className="font-medium flex-1 leading-tight">
@@ -93,11 +92,37 @@ export default function ShowTrialCard({
                         ? t("trialHasEnded")
                         : t("trialDaysRemaining", { count: remainingDays })}
                 </small>
-                <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
-                    <span>{t("trialGoToBilling")}</span>
-                    <ArrowRight className="flex-none size-3" />
-                </div>
+                {isOwner && (
+                    <div className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                        <span>{t("trialGoToBilling")}</span>
+                        <ArrowRight className="flex-none size-3" />
+                    </div>
+                )}
             </div>
-        </Link>
+        </>
+    );
+
+    if (isOwner) {
+        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"
+                )}
+            >
+                {cardContent}
+            </Link>
+        );
+    }
+
+    return (
+        <div
+            className={cn(
+                "rounded-md border bg-secondary p-2 py-3 w-full flex flex-col gap-2 text-sm"
+            )}
+        >
+            {cardContent}
+        </div>
     );
 }