Alert after user does not upgrade after 7 days

@web/components/subscription-card.tsx

@@ -1,5 +1,6 @@
 import type { Subscription } from '@api/lib/subscription'
 import { Button } from '@web/components/ui/button'
+import { useLifetimeAccessSubscription } from '@web/hooks/use-lifetime-access-subscription'
 import { Tenant, useTenant } from '@web/lib/auth'
 import { env } from '@web/lib/env'
 import { trpc } from '@web/lib/trpc'
@@ -19,21 +20,7 @@ const teamFeatures = [...personalFeatures, 'Unlimited members']
 export function SubscriptionCard() {
   const tenant = useTenant()
 
-  const subscription = match(tenant.type)
-    .with('user', () => {
-      return tenant.publicMetadata.subscriptions.find(
-        (s) =>
-          s.variantId === env.LEMONSQUEEZY_PERSONAL_LIFETIME_ACCESS_VARIANT_ID &&
-          s.expiresAt === null,
-      )
-    })
-    .with('organization', () => {
-      return tenant.publicMetadata.subscriptions.find(
-        (s) =>
-          s.variantId === env.LEMONSQUEEZY_TEAM_LIFETIME_ACCESS_VARIANT_ID && s.expiresAt === null,
-      )
-    })
-    .exhaustive()
+  const subscription = useLifetimeAccessSubscription()
 
   return (
     <div>

@web/hooks/use-lifetime-access-subscription.ts

@@ -0,0 +1,23 @@
+import { useTenant } from '@web/lib/auth'
+import { env } from '@web/lib/env'
+import { match } from 'ts-pattern'
+
+export function useLifetimeAccessSubscription() {
+  const tenant = useTenant()
+
+  return match(tenant.type)
+    .with('user', () => {
+      return tenant.publicMetadata.subscriptions.find(
+        (s) =>
+          s.variantId === env.LEMONSQUEEZY_PERSONAL_LIFETIME_ACCESS_VARIANT_ID &&
+          s.expiresAt === null,
+      )
+    })
+    .with('organization', () => {
+      return tenant.publicMetadata.subscriptions.find(
+        (s) =>
+          s.variantId === env.LEMONSQUEEZY_TEAM_LIFETIME_ACCESS_VARIANT_ID && s.expiresAt === null,
+      )
+    })
+    .exhaustive()
+}

@web/layouts/auth.tsx

@@ -1,4 +1,5 @@
 import { RedirectToSignIn, SignedIn, SignedOut } from '@clerk/clerk-react'
+import { BillingProvider } from '@web/providers/billing'
 import { Outlet } from 'react-router-dom'
 
 export function AuthLayout() {
@@ -16,7 +17,9 @@ export function AuthLayout() {
         />
       </SignedOut>
       <SignedIn>
-        <Outlet />
+        <BillingProvider>
+          <Outlet />
+        </BillingProvider>
       </SignedIn>
     </>
   )

@web/lib/auth.ts

@@ -17,6 +17,7 @@ export function useAuthedUser() {
 }
 
 export type Tenant = BaseTenant & {
+  createdAt: Date | null | undefined
   publicMetadata: TenantPublicMetadata
 }
 
@@ -36,6 +37,7 @@ export function useTenant(): Tenant {
         .with('org:admin', () => 'admin' as const)
         .with('org:member', () => 'member' as const)
         .exhaustive(),
+      createdAt: organization?.createdAt,
       publicMetadata: tenantPublicMetadataSchema.parse(organization?.publicMetadata),
     }
   }
@@ -44,6 +46,7 @@ export function useTenant(): Tenant {
     type: 'user',
     id: auth.userId,
     role: 'admin',
+    createdAt: user.createdAt,
     publicMetadata: tenantPublicMetadataSchema.parse(user.publicMetadata),
   }
 }

@web/providers/billing.tsx

@@ -0,0 +1,57 @@
+import { SubscriptionCard } from '@web/components/subscription-card'
+import { Dialog, DialogContent } from '@web/components/ui/dialog'
+import { ScrollArea } from '@web/components/ui/scroll-area'
+import { useLifetimeAccessSubscription } from '@web/hooks/use-lifetime-access-subscription'
+import { useListenToTRPCMutation } from '@web/hooks/use-listen-to-trpc-mutation'
+import { useTenant } from '@web/lib/auth'
+import { trpc } from '@web/lib/trpc'
+import { useEffect, useRef, useState } from 'react'
+
+export function BillingProvider(props: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+  const lastCheckoutAt = useRef<Date | null>(null)
+
+  useListenToTRPCMutation(trpc.billing.checkout, {
+    onSuccess() {
+      lastCheckoutAt.current = new Date()
+      setOpen(false)
+    },
+  })
+
+  const subscription = useLifetimeAccessSubscription()
+  const tenant = useTenant()
+
+  useEffect(() => {
+    if (subscription) return
+
+    const id = window.setInterval(() => {
+      if (lastCheckoutAt.current && lastCheckoutAt.current.getTime() > Date.now() - 1000 * 60 * 5) {
+        return
+      }
+
+      if (tenant.createdAt && tenant.createdAt.getTime() > Date.now() - 1000 * 60 * 60 * 24 * 7) {
+        return
+      }
+
+      setOpen(true)
+    }, 1000 * 60)
+
+    return () => {
+      window.clearInterval(id)
+    }
+  }, [subscription, tenant])
+
+  return (
+    <>
+      {props.children}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-6xl max-h-screen overflow-auto flex">
+          <ScrollArea className="flex-1 pt-8">
+            <SubscriptionCard />
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}