fix: improve test logic and show upgrade modal logic, update upgrade copy

studio/components/interfaces/Settings/Logs/Logs.utils.ts

@@ -173,11 +173,11 @@ export const genSingleLogQuery = (table: LogsTableName, id: string) =>
  */
 export const maybeShowUpgradePrompt = (
   from: string | null | undefined,
-  tier: StripeSubscription['tier']
+  tierKey?: StripeSubscription['tier']["key"]
 ) => {
   const day = Math.abs(dayjs().diff(dayjs(from), 'day'))
 
-  return day > 1 && tier?.key === 'FREE'
+  return (day > 1 && tierKey === 'FREE') || (day > 7 && tierKey === 'PRO') || day > 90 && tierKey === 'ENTERPRISE'
 }
 
 export const genCountQuery = (table: string): string => `SELECT count(*) as count FROM ${table}`
@@ -222,11 +222,10 @@ SELECT
 FROM
   ${table} t
   cross join unnest(t.metadata) as metadata
-  ${
-    where
+  ${where
       ? where + ` and t.timestamp > '${startOffset.toISOString()}'`
       : `where t.timestamp > '${startOffset.toISOString()}'`
-  }
+    }
 GROUP BY
 timestamp
 ORDER BY

studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -80,7 +80,7 @@ export const LogsPreviewer: React.FC<Props> = ({
   // Show the prompt on page load based on query params
   useEffect(() => {
     if (its) {
-      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(its as string, tier as StripeProduct)
+      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(its as string, tier?.key)
       if (shouldShowUpgradePrompt) {
         setShowUpgradePrompt(!showUpgradePrompt)
       }
@@ -129,7 +129,7 @@ export const LogsPreviewer: React.FC<Props> = ({
         },
       })
     } else if (event === 'datepicker-change') {
-      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier as StripeProduct)
+      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier?.key)
 
       if (shouldShowUpgradePrompt) {
         setShowUpgradePrompt(!showUpgradePrompt)

studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx

@@ -27,8 +27,7 @@ const UpgradePrompt: React.FC<Props> = ({ show, setShowUpgradePrompt }) => {
           <div className="space-y-4">
             <p className="text-sm">
               Logs can be retained up to a duration of 3 months depending on the plan that your
-              project is on. The table below shows an overview of the duration for which your logs
-              will be retained for based on each plan.
+              project is on.
             </p>
             <div className="border-scale-600 bg-scale-500 rounded border">
               <div className="flex items-center px-4 pt-2 pb-1">

studio/hooks/misc/useUpgradePrompt.tsx

@@ -11,7 +11,7 @@ export const useUpgradePrompt = (from: string) => {
   const tier = subscription?.tier
   const [showUpgradePrompt, setShowUpgradePrompt] = useState(false)
 
-  const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier as StripeProduct)
+  const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier?.key)
 
   useEffect(() => {
     if (shouldShowUpgradePrompt) {

studio/pages/project/[ref]/logs-explorer/index.tsx

@@ -77,7 +77,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
   // Show the prompt on page load based on query params
   useEffect(() => {
     if (its) {
-      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(its as string, tier as StripeProduct)
+      const shouldShowUpgradePrompt = maybeShowUpgradePrompt(its as string, tier?.key)
       if (shouldShowUpgradePrompt) {
         setShowUpgradePrompt(!showUpgradePrompt)
       }
@@ -129,7 +129,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
   }
 
   const handleDateChange = ({ to, from }: DatePickerToFrom) => {
-    const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier as StripeProduct)
+    const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, tier?.key)
 
     if (shouldShowUpgradePrompt) {
       setShowUpgradePrompt(!showUpgradePrompt)

studio/tests/pages/projects/logs-query.test.js

@@ -152,42 +152,41 @@ test('query warnings', async () => {
   await screen.findByText('1 warning')
 })
 
-describe.each(['tier_free', 'tier_pro', 'tier_enterprise'])(
-  'upgrade modal for %s',
-  (supabase_prod_id) => {
-    beforeEach(() => {
-      useProjectSubscription.mockReturnValue({
-        subscription: {
-          tier: {
-            supabase_prod_id,
-          },
+describe.each(['FREE', 'PRO', 'ENTERPRISE'])('upgrade modal for %s', (key) => {
+  beforeEach(() => {
+    useProjectSubscription.mockReturnValue({
+      subscription: {
+        tier: {
+          supabase_prod_id: `tier_${key.toLocaleLowerCase()}`,
+          key,
         },
-      })
+      },
     })
-    test.only('based on query params', async () => {
-      const router = defaultRouterMock()
-      router.query = {
-        ...router.query,
-        q: 'some_query',
-        its: dayjs().subtract(4, 'months').toISOString(),
-        ite: dayjs().toISOString(),
-      }
-      useRouter.mockReturnValue(router)
-      render(<LogsExplorerPage />)
+  })
+  test('based on query params', async () => {
+    const router = defaultRouterMock()
+    router.query = {
+      ...router.query,
+      q: 'some_query',
+      its: dayjs().subtract(5, 'month').toISOString(),
+      ite: dayjs().toISOString(),
+    }
+    useRouter.mockReturnValue(router)
+    render(<LogsExplorerPage />)
+    await screen.findByText(/Log retention/) // assert modal title is present
+  })
 
+  test('based on datepicker helpers', async () => {
+    render(<LogsExplorerPage />)
+    // click on the dropdown
+    clickDropdown(await screen.findByText('Last 24 hours'))
+    userEvent.click(await screen.findByText('Last 3 days'))
+
+    // only free tier will show modal
+    if (key === 'FREE') {
       await screen.findByText('Log retention') // assert modal title is present
-    })
-
-    test.only('based on datepicker helpers', async () => {
-      render(<LogsExplorerPage />)
-      // click on the dropdown
-      clickDropdown(await screen.findByText('Last 24 hours'))
-      userEvent.click(await screen.findByText('Last 3 days'))
-
-      // only free tier will show modal
-      if (supabase_prod_id === 'tier_free') {
-        await screen.findByText('Log retention') // assert modal title is present
-      }
-    })
-  }
-)
+    } else {
+      await expect(screen.findByText('Log retention')).rejects.toThrow()
+    }
+  })
+})