From a600d47d6cfc505e590b2791fa1edf814bb2ff20 Mon Sep 17 00:00:00 2001
From: sadmann7 <sadmann898@gmail.com>
Date: Sun, 10 Mar 2024 19:36:36 +0600
Subject: [PATCH] feat: rete-limit store and product creation

---
 .../_components/dashboard-sidebar.tsx         |  30 +--
 .../dashboard/_components/store-switcher.tsx  | 123 ++++++------
 .../dashboard/billing/_components/billing.tsx |  16 +-
 .../billing/_components/usage-card.tsx        |  32 ++--
 .../(dashboard)/dashboard/billing/page.tsx    |   3 +-
 src/app/(dashboard)/dashboard/layout.tsx      |  27 ++-
 .../(dashboard)/dashboard/purchases/page.tsx  |   2 +-
 .../dashboard/stores/[storeId]/layout.tsx     |   2 +-
 .../stores/_components/add-store-dialog.tsx   | 175 +++++++++++++-----
 src/app/(dashboard)/dashboard/stores/page.tsx |  10 +-
 src/components/cards/empty-card.tsx           |   9 +-
 .../manage-subscription-form.tsx              |   0
 src/components/ui/command.tsx                 |  12 +-
 src/components/ui/dialog.tsx                  |   2 +-
 src/lib/actions/auth.ts                       |  20 --
 src/lib/actions/store.ts                      |  26 ---
 src/lib/actions/user.ts                       |  93 ++++++++++
 src/lib/subscription.ts                       |  50 ++---
 18 files changed, 363 insertions(+), 269 deletions(-)
 rename src/{app/(dashboard)/dashboard/billing/_components => components}/manage-subscription-form.tsx (100%)
 delete mode 100644 src/lib/actions/auth.ts
 create mode 100644 src/lib/actions/user.ts

diff --git a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
index 05f9d192..45b08721 100644
--- a/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
+++ b/src/app/(dashboard)/dashboard/_components/dashboard-sidebar.tsx
@@ -1,45 +1,23 @@
-"use client"
-
 import * as React from "react"
-import { useParams } from "next/navigation"
 
 import { dashboardConfig } from "@/config/dashboard"
-import { type getStoresByUserId } from "@/lib/actions/store"
-import { type getSubscriptionPlan } from "@/lib/actions/stripe"
 import { cn } from "@/lib/utils"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { SidebarNav } from "@/components/layouts/sidebar-nav"
 
-import { StoreSwitcher } from "./store-switcher"
-
 interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
-  promises: Promise<{
-    stores: Awaited<ReturnType<typeof getStoresByUserId>>
-    subscriptionPlan: Awaited<ReturnType<typeof getSubscriptionPlan>>
-  }>
+  children: React.ReactNode
 }
 
 export function DashboardSidebar({
-  promises,
+  children,
   className,
   ...props
 }: DashboardSidebarProps) {
-  const { stores, subscriptionPlan } = React.use(promises)
-
-  const { storeId } = useParams<{ storeId: string }>()
-
-  const currentStore = stores.find((store) => store.id === storeId)
-
   return (
     <aside className={cn("w-full", className)} {...props}>
-      <div className="pr-6 pt-4 lg:pt-6">
-        <StoreSwitcher
-          currentStore={currentStore}
-          stores={stores}
-          subscriptionPlan={subscriptionPlan}
-        />
-      </div>
-      <ScrollArea className="h-[calc(100vh-8rem)] py-4 pr-6">
+      <div className="pr-6 pt-4 lg:pt-6">{children}</div>
+      <ScrollArea className="h-[calc(100vh-8rem)] py-2.5 pr-6">
         <SidebarNav items={dashboardConfig.sidebarNav} className="p-1 pt-4" />
       </ScrollArea>
     </aside>
diff --git a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
index a6f4b630..f8f43ee3 100644
--- a/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
+++ b/src/app/(dashboard)/dashboard/_components/store-switcher.tsx
@@ -1,9 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { usePathname, useRouter } from "next/navigation"
-import { type Store } from "@/db/schema"
-import type { UserSubscriptionPlan } from "@/types"
+import { useParams, usePathname, useRouter } from "next/navigation"
 import {
   CaretSortIcon,
   CheckIcon,
@@ -11,7 +9,8 @@ import {
   PlusCircledIcon,
 } from "@radix-ui/react-icons"
 
-import type { getStoresByUserId } from "@/lib/actions/store"
+import { type getStoresByUserId } from "@/lib/actions/store"
+import { type getProgress } from "@/lib/actions/user"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -23,52 +22,62 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command"
-import { Dialog, DialogTrigger } from "@/components/ui/dialog"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
 
+import { AddStoreDialog } from "../stores/_components/add-store-dialog"
+
 interface StoreSwitcherProps
   extends React.ComponentPropsWithoutRef<typeof PopoverTrigger> {
-  currentStore?: Awaited<ReturnType<typeof getStoresByUserId>>[number]
-  stores: Pick<Store, "id" | "name">[]
-  subscriptionPlan: UserSubscriptionPlan | null
+  userId: string
+  storesPromise: ReturnType<typeof getStoresByUserId>
+  progressPromise: ReturnType<typeof getProgress>
 }
 
 export function StoreSwitcher({
-  currentStore,
-  stores,
-  subscriptionPlan,
+  userId,
+  storesPromise,
+  progressPromise,
   className,
   ...props
 }: StoreSwitcherProps) {
+  const { storeId } = useParams<{ storeId: string }>()
   const router = useRouter()
   const pathname = usePathname()
   const [open, setOpen] = React.useState(false)
-  const [showStoreDialog, setShowStoreDialog] = React.useState(false)
+  const [showNewStoreDialog, setShowNewStoreDialog] = React.useState(false)
+
+  const stores = React.use(storesPromise)
+
+  const selectedStore = stores.find((store) => store.id === storeId)
 
   return (
-    <Dialog open={showStoreDialog} onOpenChange={setShowStoreDialog}>
+    <>
+      <AddStoreDialog
+        userId={userId}
+        progressPromise={progressPromise}
+        open={showNewStoreDialog}
+        onOpenChange={setShowNewStoreDialog}
+        showTrigger={false}
+      />
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className={cn("w-full justify-between px-3", className)}
+            aria-label="Select a team"
+            className={cn("w-full justify-between", className)}
             {...props}
           >
-            <CircleIcon className="mr-2 size-4" aria-hidden="true" />
-            <span className="line-clamp-1">
-              {currentStore?.name ? currentStore?.name : "Select a store"}
-            </span>
+            {selectedStore?.name ?? "Select a store"}
             <CaretSortIcon
               className="ml-auto size-4 shrink-0 opacity-50"
               aria-hidden="true"
             />
-            <span className="sr-only">Select a store</span>
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
@@ -76,58 +85,46 @@ export function StoreSwitcher({
             <CommandList>
               <CommandInput placeholder="Search store..." />
               <CommandEmpty>No store found.</CommandEmpty>
-              <CommandGroup>
-                {stores.map((store) => (
-                  <CommandItem
-                    key={store.id}
-                    onSelect={() => {
-                      router.push(
-                        pathname.replace(
-                          String(currentStore?.id),
-                          String(store.id)
-                        )
-                      )
-                      setOpen(false)
-                    }}
-                    className="text-sm"
-                  >
-                    <CircleIcon className="mr-2 size-4" aria-hidden="true" />
-                    <span className="line-clamp-1">{store.name}</span>
-                    <CheckIcon
-                      className={cn(
-                        "ml-auto size-4",
-                        currentStore?.id === store.id
-                          ? "opacity-100"
-                          : "opacity-0"
-                      )}
-                      aria-hidden="true"
-                    />
-                  </CommandItem>
-                ))}
-              </CommandGroup>
+              {stores.map((store) => (
+                <CommandItem
+                  key={store.id}
+                  onSelect={() => {
+                    setOpen(false)
+                    router.push(`/dashboard/stores/${store.id}`)
+                  }}
+                  className="text-sm"
+                >
+                  <CircleIcon className="mr-2 size-5" aria-hidden="true" />
+                  {store.name}
+                  <CheckIcon
+                    className={cn(
+                      "ml-auto size-4",
+                      selectedStore?.id === store.id
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                    aria-hidden="true"
+                  />
+                </CommandItem>
+              ))}
             </CommandList>
             <CommandSeparator />
             <CommandList>
               <CommandGroup>
-                <DialogTrigger asChild>
-                  <CommandItem
-                    onSelect={() => {
-                      setOpen(false)
-                      setShowStoreDialog(true)
-                    }}
-                  >
-                    <PlusCircledIcon
-                      className="mr-2 size-4"
-                      aria-hidden="true"
-                    />
-                    Create store
-                  </CommandItem>
-                </DialogTrigger>
+                <CommandItem
+                  onSelect={() => {
+                    setOpen(false)
+                    setShowNewStoreDialog(true)
+                  }}
+                >
+                  <PlusCircledIcon className="mr-2 size-5" aria-hidden="true" />
+                  Create store
+                </CommandItem>
               </CommandGroup>
             </CommandList>
           </Command>
         </PopoverContent>
       </Popover>
-    </Dialog>
+    </>
   )
 }
diff --git a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
index d6a194df..899c4688 100644
--- a/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
+++ b/src/app/(dashboard)/dashboard/billing/_components/billing.tsx
@@ -2,7 +2,7 @@ import Link from "next/link"
 import type { SubscriptionPlanWithPrice, UserSubscriptionPlan } from "@/types"
 import { CheckIcon } from "@radix-ui/react-icons"
 
-import { getPlanLimits } from "@/lib/subscription"
+import { getUsageWithProgress } from "@/lib/subscription"
 import { cn, formatDate } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -14,8 +14,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
+import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
 
-import { ManageSubscriptionForm } from "./manage-subscription-form"
 import { UsageCard } from "./usage-card"
 
 interface BillingProps {
@@ -38,12 +38,12 @@ export async function Billing({
     usagePromise,
   ])
 
-  const { storeLimit, productLimit } = getPlanLimits({
-    planTitle: subscriptionPlan?.title ?? "free",
-  })
-
-  const storeProgress = Math.floor((usage.storeCount / storeLimit) * 100)
-  const productProgress = Math.floor((usage.productCount / productLimit) * 100)
+  const { storeLimit, storeProgress, productLimit, productProgress } =
+    getUsageWithProgress({
+      planTitle: subscriptionPlan?.title ?? "free",
+      storeCount: usage.storeCount,
+      productCount: usage.productCount,
+    })
 
   return (
     <>
diff --git a/src/app/(dashboard)/dashboard/billing/_components/usage-card.tsx b/src/app/(dashboard)/dashboard/billing/_components/usage-card.tsx
index 90a0977d..1288445d 100644
--- a/src/app/(dashboard)/dashboard/billing/_components/usage-card.tsx
+++ b/src/app/(dashboard)/dashboard/billing/_components/usage-card.tsx
@@ -20,7 +20,7 @@ interface UsageCardProps {
   usage: number
   limit: number
   progress: number
-  moreInfo: string
+  moreInfo?: string
 }
 
 export function UsageCard({
@@ -33,21 +33,23 @@ export function UsageCard({
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           <CardTitle>{title}</CardTitle>
-          <HoverCard>
-            <HoverCardTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-4">
-                <QuestionMarkCircledIcon
-                  className="size-full"
-                  aria-hidden="true"
-                />
-              </Button>
-            </HoverCardTrigger>
-            <HoverCardContent className="w-80" sideOffset={8}>
-              <p className="text-sm">{moreInfo}</p>
-            </HoverCardContent>
-          </HoverCard>
+          {moreInfo && (
+            <HoverCard>
+              <HoverCardTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-4">
+                  <QuestionMarkCircledIcon
+                    className="size-full"
+                    aria-hidden="true"
+                  />
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent className="w-80" sideOffset={8}>
+                <p className="text-sm">{moreInfo}</p>
+              </HoverCardContent>
+            </HoverCard>
+          )}
         </div>
         <CardDescription>
           {usage} / {limit} stores ({progress}%)
diff --git a/src/app/(dashboard)/dashboard/billing/page.tsx b/src/app/(dashboard)/dashboard/billing/page.tsx
index c3113fdd..af4b0a0d 100644
--- a/src/app/(dashboard)/dashboard/billing/page.tsx
+++ b/src/app/(dashboard)/dashboard/billing/page.tsx
@@ -4,9 +4,8 @@ import { redirect } from "next/navigation"
 import { env } from "@/env.js"
 import { RocketIcon } from "@radix-ui/react-icons"
 
-import { getCacheduser } from "@/lib/actions/auth"
-import { getUsage } from "@/lib/actions/store"
 import { getSubscriptionPlan, getSubscriptionPlans } from "@/lib/actions/stripe"
+import { getCacheduser, getUsage } from "@/lib/actions/user"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import {
   PageHeader,
diff --git a/src/app/(dashboard)/dashboard/layout.tsx b/src/app/(dashboard)/dashboard/layout.tsx
index 82eed067..0a7b4ccc 100644
--- a/src/app/(dashboard)/dashboard/layout.tsx
+++ b/src/app/(dashboard)/dashboard/layout.tsx
@@ -1,14 +1,14 @@
 import { redirect } from "next/navigation"
 
-import { getCacheduser } from "@/lib/actions/auth"
 import { getStoresByUserId } from "@/lib/actions/store"
-import { getSubscriptionPlan } from "@/lib/actions/stripe"
+import { getCacheduser, getProgress } from "@/lib/actions/user"
 import { SiteFooter } from "@/components/layouts/site-footer"
 
 import { DashboardHeader } from "./_components/dashboard-header"
 import { DashboardSidebar } from "./_components/dashboard-sidebar"
 import { DashboardSidebarSheet } from "./_components/dashboard-sidebar-sheet"
 import { SidebarProvider } from "./_components/sidebar-provider"
+import { StoreSwitcher } from "./_components/store-switcher"
 
 export default async function DashboardLayout({
   children,
@@ -19,25 +19,34 @@ export default async function DashboardLayout({
     redirect("/signin")
   }
 
-  const promises = Promise.all([
-    getStoresByUserId({ userId: user.id }),
-    getSubscriptionPlan({ userId: user.id }),
-  ]).then(([stores, subscriptionPlan]) => ({ stores, subscriptionPlan }))
+  const storesPromise = getStoresByUserId({ userId: user.id })
+  const progressPromise = getProgress({ userId: user.id })
 
   return (
     <SidebarProvider>
       <div className="flex min-h-screen flex-col">
         <DashboardHeader user={user}>
           <DashboardSidebarSheet className="lg:hidden">
-            <DashboardSidebar className="pl-4" promises={promises} />
+            <DashboardSidebar className="pl-4">
+              <StoreSwitcher
+                userId={user.id}
+                storesPromise={storesPromise}
+                progressPromise={progressPromise}
+              />
+            </DashboardSidebar>
           </DashboardSidebarSheet>
         </DashboardHeader>
         <div className="container flex-1 items-start lg:grid lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
           <DashboardSidebar
             // the top-16 class is used for the dashboard-header of h-16, added extra 0.1rem to fix the sticky layout shift issue
             className="top-[calc(theme('spacing.16')_+_0.1rem)] z-30 hidden border-r lg:sticky lg:block"
-            promises={promises}
-          />
+          >
+            <StoreSwitcher
+              userId={user.id}
+              storesPromise={storesPromise}
+              progressPromise={progressPromise}
+            />
+          </DashboardSidebar>
           <main className="flex min-h-[200vh] w-full flex-col overflow-hidden">
             {children}
           </main>
diff --git a/src/app/(dashboard)/dashboard/purchases/page.tsx b/src/app/(dashboard)/dashboard/purchases/page.tsx
index 008d2c31..30b0743b 100644
--- a/src/app/(dashboard)/dashboard/purchases/page.tsx
+++ b/src/app/(dashboard)/dashboard/purchases/page.tsx
@@ -7,7 +7,7 @@ import { env } from "@/env.js"
 import type { SearchParams } from "@/types"
 import { and, asc, desc, eq, inArray, like, sql } from "drizzle-orm"
 
-import { getCacheduser } from "@/lib/actions/auth"
+import { getCacheduser } from "@/lib/actions/user"
 import { getUserEmail } from "@/lib/utils"
 import { purchasesSearchParamsSchema } from "@/lib/validations/params"
 import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
diff --git a/src/app/(dashboard)/dashboard/stores/[storeId]/layout.tsx b/src/app/(dashboard)/dashboard/stores/[storeId]/layout.tsx
index 2e5cc134..814c70ff 100644
--- a/src/app/(dashboard)/dashboard/stores/[storeId]/layout.tsx
+++ b/src/app/(dashboard)/dashboard/stores/[storeId]/layout.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation"
 
-import { getCacheduser } from "@/lib/actions/auth"
+import { getCacheduser } from "@/lib/actions/user"
 import {
   PageHeader,
   PageHeaderDescription,
diff --git a/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx b/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx
index d71a2080..7da7dc09 100644
--- a/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx
+++ b/src/app/(dashboard)/dashboard/stores/_components/add-store-dialog.tsx
@@ -8,7 +8,7 @@ import { toast } from "sonner"
 import type { z } from "zod"
 
 import { addStore } from "@/lib/actions/store"
-import { type getSubscriptionPlan } from "@/lib/actions/stripe"
+import { type getProgress } from "@/lib/actions/user"
 import { cn } from "@/lib/utils"
 import { addStoreSchema } from "@/lib/validations/store"
 import { useMediaQuery } from "@/hooks/use-media-query"
@@ -39,30 +39,39 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Icons } from "@/components/icons"
+import { ManageSubscriptionForm } from "@/components/manage-subscription-form"
 
 interface AddStoreDialogProps
-  extends React.ComponentPropsWithRef<typeof Dialog> {
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
   userId: string
-  subscriptionPlanPromise: ReturnType<typeof getSubscriptionPlan>
+  progressPromise: ReturnType<typeof getProgress>
+  showTrigger?: boolean
 }
 
 type Inputs = z.infer<typeof addStoreSchema>
 
 export function AddStoreDialog({
   userId,
-  subscriptionPlanPromise,
+  progressPromise,
+  onOpenChange,
+  showTrigger = true,
   ...props
 }: AddStoreDialogProps) {
-  const subscriptionPlan = React.use(subscriptionPlanPromise)
-
   const router = useRouter()
   const [open, setOpen] = React.useState(false)
   const [loading, setLoading] = React.useState(false)
   const isDesktop = useMediaQuery("(min-width: 640px)")
 
+  const progress = React.use(progressPromise)
+
   // react-hook-form
   const form = useForm<Inputs>({
     resolver: zodResolver(addStoreSchema),
@@ -104,12 +113,15 @@ export function AddStoreDialog({
             form.reset()
           }
           setOpen(open)
+          onOpenChange?.(open)
         }}
         {...props}
       >
-        <DialogTrigger asChild>
-          <Button>Create store</Button>
-        </DialogTrigger>
+        <DynamicTrigger
+          showTrigger={showTrigger}
+          isDesktop={isDesktop}
+          progress={progress}
+        />
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle>Create a new store</DialogTitle>
@@ -119,22 +131,7 @@ export function AddStoreDialog({
           </DialogHeader>
           <AddStoreForm form={form} onSubmit={onSubmit}>
             <DialogFooter>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={loading}>
-                {loading && (
-                  <Icons.spinner
-                    className="mr-2 size-4 animate-spin"
-                    aria-hidden="true"
-                  />
-                )}
-                Add store
-              </Button>
+              <FormFooter loading={loading} setOpen={setOpen} />
             </DialogFooter>
           </AddStoreForm>
         </DialogContent>
@@ -150,12 +147,15 @@ export function AddStoreDialog({
           form.reset()
         }
         setOpen(open)
+        onOpenChange?.(open)
       }}
       {...props}
     >
-      <DrawerTrigger asChild>
-        <Button>Create store</Button>
-      </DrawerTrigger>
+      <DynamicTrigger
+        showTrigger={showTrigger}
+        isDesktop={isDesktop}
+        progress={progress}
+      />
       <DrawerContent>
         <DrawerHeader className="text-left">
           <DrawerTitle>Create a new store</DrawerTitle>
@@ -165,22 +165,7 @@ export function AddStoreDialog({
         </DrawerHeader>
         <AddStoreForm form={form} onSubmit={onSubmit} className="px-4">
           <DrawerFooter className="flex-col-reverse px-0">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" disabled={loading}>
-              {loading && (
-                <Icons.spinner
-                  className="mr-2 size-4 animate-spin"
-                  aria-hidden="true"
-                />
-              )}
-              Add store
-            </Button>
+            <FormFooter loading={loading} setOpen={setOpen} />
           </DrawerFooter>
         </AddStoreForm>
       </DrawerContent>
@@ -244,3 +229,105 @@ function AddStoreForm({
     </Form>
   )
 }
+
+interface FormFooterProps {
+  loading: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+function FormFooter({ loading, setOpen }: FormFooterProps) {
+  return (
+    <>
+      <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+        Cancel
+      </Button>
+      <Button type="submit" disabled={loading}>
+        {loading && (
+          <Icons.spinner
+            className="mr-2 size-4 animate-spin"
+            aria-hidden="true"
+          />
+        )}
+        Add store
+      </Button>
+    </>
+  )
+}
+
+interface DynamicTriggerProps {
+  isDesktop: boolean
+  showTrigger?: boolean
+  progress: Awaited<ReturnType<typeof getProgress>>
+}
+
+function DynamicTrigger({
+  showTrigger,
+  isDesktop,
+  progress,
+}: DynamicTriggerProps) {
+  if (!showTrigger) return null
+
+  const {
+    storeLimit,
+    storeProgress,
+    productLimit,
+    productProgress,
+    subscriptionPlan,
+  } = progress
+
+  const limtReached = storeProgress === 100 || productProgress === 100
+
+  if (limtReached) {
+    return (
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button className="cursor-not-allowed opacity-50 hover:bg-primary">
+            Create store
+          </Button>
+        </HoverCardTrigger>
+        <HoverCardContent
+          className="w-80 space-y-2.5"
+          align="end"
+          sideOffset={8}
+        >
+          {storeProgress === 100 ? (
+            <div className="text-sm text-muted-foreground">
+              You can only create upto{" "}
+              <span className="font-bold">{storeLimit}</span> stores in your
+              current plan.
+            </div>
+          ) : productProgress === 100 ? (
+            <div className="text-sm text-muted-foreground">
+              You can only create upto{" "}
+              <span className="font-bold">{productLimit}</span> products in your
+              current plan.
+            </div>
+          ) : null}
+          {subscriptionPlan && subscriptionPlan.title !== "pro" ? (
+            <ManageSubscriptionForm
+              stripePriceId={subscriptionPlan.stripePriceId}
+              stripeCustomerId={subscriptionPlan.stripeCustomerId}
+              stripeSubscriptionId={subscriptionPlan.stripeSubscriptionId}
+              isSubscribed={subscriptionPlan.isSubscribed ?? false}
+              isCurrentPlan={subscriptionPlan.title === "standard"}
+            />
+          ) : null}
+        </HoverCardContent>
+      </HoverCard>
+    )
+  }
+
+  if (isDesktop) {
+    return (
+      <DialogTrigger>
+        <Button>Create store</Button>
+      </DialogTrigger>
+    )
+  }
+
+  return (
+    <DrawerTrigger asChild>
+      <Button>Create store</Button>
+    </DrawerTrigger>
+  )
+}
diff --git a/src/app/(dashboard)/dashboard/stores/page.tsx b/src/app/(dashboard)/dashboard/stores/page.tsx
index a822a650..b0deb730 100644
--- a/src/app/(dashboard)/dashboard/stores/page.tsx
+++ b/src/app/(dashboard)/dashboard/stores/page.tsx
@@ -3,9 +3,8 @@ import type { Metadata } from "next"
 import { redirect } from "next/navigation"
 import { env } from "@/env.js"
 
-import { getCacheduser } from "@/lib/actions/auth"
 import { getStoresByUserId } from "@/lib/actions/store"
-import { getSubscriptionPlan } from "@/lib/actions/stripe"
+import { getCacheduser, getProgress } from "@/lib/actions/user"
 import {
   PageHeader,
   PageHeaderDescription,
@@ -31,7 +30,7 @@ export default async function StoresPage() {
   }
 
   const storesPromise = getStoresByUserId({ userId: user.id })
-  const subscriptionPlanPromise = getSubscriptionPlan({ userId: user.id })
+  const progressPromise = getProgress({ userId: user.id })
 
   return (
     <Shell variant="sidebar">
@@ -40,10 +39,7 @@ export default async function StoresPage() {
           <PageHeaderHeading size="sm" className="flex-1">
             Stores
           </PageHeaderHeading>
-          <AddStoreDialog
-            userId={user.id}
-            subscriptionPlanPromise={subscriptionPlanPromise}
-          />
+          <AddStoreDialog userId={user.id} progressPromise={progressPromise} />
         </div>
         <PageHeaderDescription size="sm">
           Manage your stores
diff --git a/src/components/cards/empty-card.tsx b/src/components/cards/empty-card.tsx
index 9908a1cd..2f2454fe 100644
--- a/src/components/cards/empty-card.tsx
+++ b/src/components/cards/empty-card.tsx
@@ -10,6 +10,7 @@ import { Icons } from "@/components/icons"
 interface EmptyCardProps extends React.ComponentPropsWithoutRef<typeof Card> {
   title: string
   description?: string
+  action?: React.ReactNode
   icon?: keyof typeof Icons
 }
 
@@ -17,6 +18,7 @@ export function EmptyCard({
   title,
   description,
   icon = "placeholder",
+  action,
   className,
   ...props
 }: EmptyCardProps) {
@@ -25,7 +27,7 @@ export function EmptyCard({
   return (
     <Card
       className={cn(
-        "flex w-full flex-col items-center justify-center space-y-6 bg-transparent p-12",
+        "flex w-full flex-col items-center justify-center space-y-6 bg-transparent p-16",
         className
       )}
       {...props}
@@ -33,10 +35,11 @@ export function EmptyCard({
       <div className="mr-4 shrink-0 rounded-full border border-dashed p-4">
         <Icon className="size-8 text-muted-foreground" aria-hidden="true" />
       </div>
-      <CardHeader className="items-center p-0">
+      <CardHeader className="items-center gap-1.5 space-y-0 p-0">
         <CardTitle>{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
+        {description ? <CardDescription>{description}</CardDescription> : null}
       </CardHeader>
+      {action ? action : null}
     </Card>
   )
 }
diff --git a/src/app/(dashboard)/dashboard/billing/_components/manage-subscription-form.tsx b/src/components/manage-subscription-form.tsx
similarity index 100%
rename from src/app/(dashboard)/dashboard/billing/_components/manage-subscription-form.tsx
rename to src/components/manage-subscription-form.tsx
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 64dc9e2b..65661a52 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -23,18 +23,12 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {
-  className?: string
-}
+interface CommandDialogProps extends DialogProps {}
 
-const CommandDialog = ({
-  children,
-  className,
-  ...props
-}: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className={cn("overflow-hidden p-0", className)}>
+      <DialogContent className="overflow-hidden p-0">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 81131449..10f1f513 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
diff --git a/src/lib/actions/auth.ts b/src/lib/actions/auth.ts
deleted file mode 100644
index 9308ac58..00000000
--- a/src/lib/actions/auth.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import "server-only"
-
-import { cache } from "react"
-import { unstable_noStore as noStore } from "next/cache"
-import { currentUser } from "@clerk/nextjs"
-
-/**
- * Cache is used with a data-fetching function like fetch to share a data snapshot between components.
- * It ensures a single request is made for multiple identical data fetches, with the returned data cached and shared across components during the server render.
- * @see https://react.dev/reference/react/cache#reference
- */
-export const getCacheduser = cache(async () => {
-  noStore()
-  try {
-    return await currentUser()
-  } catch (err) {
-    console.error(err)
-    return null
-  }
-})
diff --git a/src/lib/actions/store.ts b/src/lib/actions/store.ts
index e793c668..2b865aa9 100644
--- a/src/lib/actions/store.ts
+++ b/src/lib/actions/store.ts
@@ -164,32 +164,6 @@ export async function getStores(input: SearchParams) {
   }
 }
 
-export async function getUsage(input: { userId: string }) {
-  noStore()
-  try {
-    const data = await db
-      .select({
-        storeCount: count(stores.id),
-        productCount: count(products.id),
-      })
-      .from(stores)
-      .leftJoin(products, eq(products.storeId, stores.id))
-      .where(eq(stores.userId, input.userId))
-      .execute()
-      .then((res) => res[0])
-
-    return {
-      storeCount: data?.storeCount ?? 0,
-      productCount: data?.productCount ?? 0,
-    }
-  } catch (err) {
-    return {
-      storeCount: 0,
-      productCount: 0,
-    }
-  }
-}
-
 export async function addStore(
   input: z.infer<typeof addStoreSchema> & { userId: string }
 ) {
diff --git a/src/lib/actions/user.ts b/src/lib/actions/user.ts
new file mode 100644
index 00000000..f1aa4559
--- /dev/null
+++ b/src/lib/actions/user.ts
@@ -0,0 +1,93 @@
+import "server-only"
+
+import { cache } from "react"
+import { unstable_noStore as noStore } from "next/cache"
+import { db } from "@/db"
+import { products, stores } from "@/db/schema"
+import { currentUser } from "@clerk/nextjs"
+import { count, eq } from "drizzle-orm"
+
+import { getPlanLimits } from "../subscription"
+import { getSubscriptionPlan } from "./stripe"
+
+/**
+ * Cache is used with a data-fetching function like fetch to share a data snapshot between components.
+ * It ensures a single request is made for multiple identical data fetches, with the returned data cached and shared across components during the server render.
+ * @see https://react.dev/reference/react/cache#reference
+ */
+export const getCacheduser = cache(async () => {
+  noStore()
+  try {
+    return await currentUser()
+  } catch (err) {
+    console.error(err)
+    return null
+  }
+})
+
+export async function getUsage(input: { userId: string }) {
+  noStore()
+  try {
+    const data = await db
+      .select({
+        storeCount: count(stores.id),
+        productCount: count(products.id),
+      })
+      .from(stores)
+      .leftJoin(products, eq(products.storeId, stores.id))
+      .where(eq(stores.userId, input.userId))
+      .execute()
+      .then((res) => res[0])
+
+    return {
+      storeCount: data?.storeCount ?? 0,
+      productCount: data?.productCount ?? 0,
+    }
+  } catch (err) {
+    return {
+      storeCount: 0,
+      productCount: 0,
+    }
+  }
+}
+
+export async function getProgress(input: { userId: string }) {
+  noStore()
+
+  const fallback = {
+    storeLimit: 0,
+    storeProgress: 0,
+    productLimit: 0,
+    productProgress: 0,
+    subscriptionPlan: null,
+  }
+
+  try {
+    const subscriptionPlan = await getSubscriptionPlan({ userId: input.userId })
+
+    if (!subscriptionPlan) {
+      return fallback
+    }
+
+    const { storeCount, productCount } = await getUsage({
+      userId: input.userId,
+    })
+
+    const { storeLimit, productLimit } = getPlanLimits({
+      planTitle: subscriptionPlan.title,
+    })
+
+    const storeProgress = Math.floor((storeCount / storeLimit) * 100)
+    const productProgress = Math.floor((productCount / productLimit) * 100)
+
+    return {
+      storeLimit,
+      storeProgress,
+      productLimit,
+      productProgress,
+      subscriptionPlan,
+    }
+  } catch (err) {
+    return fallback
+  }
+}
diff --git a/src/lib/subscription.ts b/src/lib/subscription.ts
index 257c7955..a59f81b6 100644
--- a/src/lib/subscription.ts
+++ b/src/lib/subscription.ts
@@ -1,25 +1,7 @@
-import type { SubscriptionPlan, UserSubscriptionPlan } from "@/types"
+import type { SubscriptionPlan } from "@/types"
 
 import { subscriptionConfig } from "@/config/subscription"
 
-export function getPlanFeatures(title: SubscriptionPlan["title"]) {
-  const plan = Object.values(subscriptionConfig.plans).find(
-    (plan) => plan.title === title
-  )
-  const features = plan?.features.map((feature) => feature.split(",")).flat()
-
-  const maxStoreCount =
-    features?.find((feature) => feature.match(/store/i))?.match(/\d+/) ?? 0
-
-  const maxProductCount =
-    features?.find((feature) => feature.match(/product/i))?.match(/\d+/) ?? 0
-
-  return {
-    maxStoreCount,
-    maxProductCount,
-  }
-}
-
 export function getPlanLimits({
   planTitle,
 }: {
@@ -35,22 +17,22 @@ export function getPlanLimits({
   return { storeLimit: storeLimit ?? 0, productLimit: productLimit ?? 0 }
 }
 
-export function getDashboardRedirectPath(input: {
+export function getUsageWithProgress(input: {
+  planTitle: SubscriptionPlan["title"]
   storeCount: number
-  subscriptionPlan: UserSubscriptionPlan | null
-}): string {
-  const { storeCount, subscriptionPlan } = input
-
-  const minStoresWithProductCount = {
-    free: 1,
-    standard: 2,
-    pro: 3,
-  }[subscriptionPlan?.title ?? "free"]
+  productCount: number
+}) {
+  const { storeLimit, productLimit } = getPlanLimits({
+    planTitle: input.planTitle,
+  })
 
-  const isActive = subscriptionPlan?.isActive ?? false
-  const hasEnoughStores = storeCount >= minStoresWithProductCount
+  const storeProgress = Math.floor((input.storeCount / storeLimit) * 100)
+  const productProgress = Math.floor((input.productCount / productLimit) * 100)
 
-  return isActive && hasEnoughStores
-    ? "/dashboard/billing"
-    : "/dashboard/stores/new"
+  return {
+    storeLimit,
+    storeProgress,
+    productLimit,
+    productProgress,
+  }
 }