fix: demo

apps/start/src/components/organization/feedback-prompt.tsx

@@ -1,19 +1,18 @@
+import { useEffect, useMemo } from 'react';
 import { PromptCard } from '@/components/organization/prompt-card';
 import { Button } from '@/components/ui/button';
 import { useAppContext } from '@/hooks/use-app-context';
 import { useCookieStore } from '@/hooks/use-cookie-store';
 import { op } from '@/utils/op';
-import { MessageSquareIcon } from 'lucide-react';
-import { useEffect, useMemo } from 'react';
 
 const THIRTY_DAYS_IN_SECONDS = 60 * 60 * 24 * 30;
 
 export default function FeedbackPrompt() {
-  const { isSelfHosted } = useAppContext();
+  const { isSelfHosted, isDemo } = useAppContext();
   const [feedbackPromptSeen, setFeedbackPromptSeen] = useCookieStore(
     'feedback-prompt-seen',
     '',
-    { maxAge: THIRTY_DAYS_IN_SECONDS },
+    { maxAge: THIRTY_DAYS_IN_SECONDS }
   );
 
   const shouldShow = useMemo(() => {
@@ -21,6 +20,10 @@ export default function FeedbackPrompt() {
       return false;
     }
 
+    if (isDemo) {
+      return false;
+    }
+
     if (!feedbackPromptSeen) {
       return true;
     }
@@ -36,7 +39,7 @@ export default function FeedbackPrompt() {
       // If date parsing fails, show the prompt
       return true;
     }
-  }, [isSelfHosted, feedbackPromptSeen]);
+  }, [isDemo, isSelfHosted, feedbackPromptSeen]);
 
   const handleGiveFeedback = () => {
     // Open userjot widget
@@ -61,14 +64,14 @@ export default function FeedbackPrompt() {
 
   return (
     <PromptCard
-      title="Share Your Feedback"
-      subtitle="Help us improve OpenPanel with your insights"
+      gradientColor="rgb(59 130 246)"
       onClose={handleClose}
       show={shouldShow}
-      gradientColor="rgb(59 130 246)"
+      subtitle="Help us improve OpenPanel with your insights"
+      title="Share Your Feedback"
     >
-      <div className="px-6 col gap-4">
-        <p className="text-sm text-foreground leading-normal">
+      <div className="col gap-4 px-6">
+        <p className="text-foreground text-sm leading-normal">
           Your feedback helps us build features you actually need. Share your
           thoughts, report bugs, or suggest improvements
         </p>

apps/start/src/components/organization/supporter-prompt.tsx

@@ -1,7 +1,3 @@
-import { PromptCard } from '@/components/organization/prompt-card';
-import { LinkButton } from '@/components/ui/button';
-import { useAppContext } from '@/hooks/use-app-context';
-import { useCookieStore } from '@/hooks/use-cookie-store';
 import {
   AwardIcon,
   HeartIcon,
@@ -11,6 +7,10 @@ import {
   SparklesIcon,
   ZapIcon,
 } from 'lucide-react';
+import { PromptCard } from '@/components/organization/prompt-card';
+import { LinkButton } from '@/components/ui/button';
+import { useAppContext } from '@/hooks/use-app-context';
+import { useCookieStore } from '@/hooks/use-cookie-store';
 
 const PERKS = [
   {
@@ -55,42 +55,42 @@ function PerkPoint({
   description: string;
 }) {
   return (
-    <div className="row gap-4 items-center">
+    <div className="row items-center gap-4">
       <Icon className="size-4" />
-      <div className="flex-1 min-w-0 col gap-1.5">
+      <div className="col min-w-0 flex-1 gap-1.5">
         <h3 className="font-medium text-sm">{text}</h3>
-        <p className="text-xs text-muted-foreground">{description}</p>
+        <p className="text-muted-foreground text-xs">{description}</p>
       </div>
     </div>
   );
 }
 
 export default function SupporterPrompt() {
-  const { isSelfHosted } = useAppContext();
+  const { isSelfHosted, isDemo } = useAppContext();
   const [supporterPromptClosed, setSupporterPromptClosed] = useCookieStore(
     'supporter-prompt-closed',
-    false,
+    false
   );
 
-  if (!isSelfHosted) {
+  if (!isSelfHosted || isDemo) {
     return null;
   }
 
   return (
     <PromptCard
-      title="Support OpenPanel"
-      subtitle="Help us build the future of open analytics"
+      gradientColor="rgb(16 185 129)"
       onClose={() => setSupporterPromptClosed(true)}
       show={!supporterPromptClosed}
-      gradientColor="rgb(16 185 129)"
+      subtitle="Help us build the future of open analytics"
+      title="Support OpenPanel"
     >
       <div className="col gap-3 px-6">
         {PERKS.map((perk) => (
           <PerkPoint
-            key={perk.text}
-            icon={perk.icon}
-            text={perk.text}
             description={perk.description}
+            icon={perk.icon}
+            key={perk.text}
+            text={perk.text}
           />
         ))}
       </div>
@@ -102,13 +102,13 @@ export default function SupporterPrompt() {
         >
           Become a Supporter
         </LinkButton>
-        <p className="text-xs text-muted-foreground text-center mt-4">
+        <p className="mt-4 text-center text-muted-foreground text-xs">
           Starting at $20/month • Cancel anytime •{' '}
           <a
-            href="https://openpanel.dev/supporter"
-            target="_blank"
-            rel="noreferrer"
             className="text-primary underline-offset-4 hover:underline"
+            href="https://openpanel.dev/supporter"
+            rel="noreferrer"
+            target="_blank"
           >
             Learn more
           </a>

apps/start/src/hooks/use-app-context.ts

@@ -6,8 +6,7 @@ export function useAppContext() {
   });
 
   if (
-    !params.apiUrl ||
-    !params.dashboardUrl ||
+    !(params.apiUrl && params.dashboardUrl) ||
     typeof params.isSelfHosted === 'undefined'
   ) {
     throw new Error('API URL or dashboard URL is not set');
@@ -18,5 +17,6 @@ export function useAppContext() {
     dashboardUrl: params.dashboardUrl,
     isSelfHosted: params.isSelfHosted,
     isMaintenance: params.isMaintenance ?? false,
+    isDemo: params.isDemo ?? false,
   };
 }