Add billing modal

Author: mxvsh

apps/web/src/components/layout/BillingModal.tsx

@@ -0,0 +1,43 @@
+import { Modal } from "@heroui/react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { CreditCardIcon } from "@hugeicons/core-free-icons";
+import { useAuthStore } from "@/stores/auth";
+import { planLabel, PLANS } from "@livedot/shared/plans";
+
+interface Props {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function BillingModal({ isOpen, onOpenChange }: Props) {
+  const { user } = useAuthStore();
+  const plan = user?.plan ?? "free";
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <Modal.Backdrop>
+        <Modal.Container>
+          <Modal.Dialog className="sm:max-w-[400px]">
+            <Modal.CloseTrigger />
+            <Modal.Header>
+              <Modal.Icon className="bg-default text-foreground">
+                <HugeiconsIcon icon={CreditCardIcon} size={20} />
+              </Modal.Icon>
+              <Modal.Heading>Billing</Modal.Heading>
+            </Modal.Header>
+            <Modal.Body>
+              <div className="flex flex-col items-center text-center py-4 gap-3">
+                <span className="text-xs font-medium uppercase tracking-wider px-2 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.08] text-muted">
+                  {planLabel(plan)}
+                </span>
+                <p className="text-sm text-muted">
+                  Plan upgrades and billing management are coming soon.
+                </p>
+              </div>
+            </Modal.Body>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal>
+  );
+}

apps/web/src/components/layout/Navbar.tsx

@@ -7,11 +7,13 @@ import {
   Settings01Icon,
   UserIcon,
   HelpCircleIcon,
+  CreditCardIcon,
   Github,
 } from "@hugeicons/core-free-icons";
 import { useAuthStore } from "@/stores/auth";
 import { planLabel } from "@livedot/shared/plans";
 import ProfileModal from "./ProfileModal";
+import BillingModal from "./BillingModal";
 
 function getInitials(username: string) {
   return username.slice(0, 2).toUpperCase();
@@ -21,6 +23,7 @@ export default function Navbar() {
   const navigate = useNavigate();
   const { user, logout } = useAuthStore();
   const [profileOpen, setProfileOpen] = useState(false);
+  const [billingOpen, setBillingOpen] = useState(false);
 
   return (
     <>
@@ -69,6 +72,7 @@ export default function Navbar() {
             <Dropdown.Menu
               onAction={async (key) => {
                 if (key === "profile") setProfileOpen(true);
+                if (key === "billing") setBillingOpen(true);
                 if (key === "logout") {
                   await logout();
                   navigate({ to: "/auth/login" });
@@ -80,6 +84,12 @@ export default function Navbar() {
                   <HugeiconsIcon icon={UserIcon} size={16} />
                   My Account
                 </Dropdown.Item>
+                {user?.plan !== "ce" && (
+                  <Dropdown.Item id="billing" textValue="Billing">
+                    <HugeiconsIcon icon={CreditCardIcon} size={16} />
+                    Billing
+                  </Dropdown.Item>
+                )}
                 <Dropdown.Item id="settings" textValue="Settings">
                   <HugeiconsIcon icon={Settings01Icon} size={16} />
                   Settings
@@ -104,6 +114,7 @@ export default function Navbar() {
     </nav>
 
     <ProfileModal isOpen={profileOpen} onOpenChange={setProfileOpen} />
+    <BillingModal isOpen={billingOpen} onOpenChange={setBillingOpen} />
     </>
   );
 }