fix: add info for apps without budgets (#524)

Co-authored-by: Roland Bewick <[email protected]>
getAlby · Jun 28, 2024 · 3206b62 · 3206b62
1 parent b54ed57
commit 3206b62
Showing 1 changed file with 38 additions and 1 deletion.
diff --git a/frontend/src/components/connections/AppCardConnectionInfo.tsx b/frontend/src/components/connections/AppCardConnectionInfo.tsx
@@ -1,4 +1,6 @@
 import dayjs from "dayjs";
+import { PlusCircle } from "lucide-react";
+import { Button } from "src/components/ui/button";
 import { Progress } from "src/components/ui/progress";
 import { formatAmount } from "src/lib/utils";
 import { App } from "src/types";
@@ -12,7 +14,7 @@ export function AppCardConnectionInfo({
 }: AppCardConnectionInfoProps) {
   return (
     <>
-      {connection.maxAmount > 0 && (
+      {connection.maxAmount > 0 ? (
         <>
           <div className="flex flex-row justify-between">
             <div className="mb-2">
@@ -53,6 +55,41 @@ export function AppCardConnectionInfo({
             </div>
           )}
         </>
+      ) : connection.requestMethods.indexOf("pay_invoice") > -1 ? (
+        <>
+          <div className="flex flex-row justify-between">
+            <div className="mb-2">
+              <p className="text-xs text-secondary-foreground font-medium">
+                You've spent
+              </p>
+              <p className="text-xl font-medium">
+                {new Intl.NumberFormat().format(connection.budgetUsage)} sats
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-row justify-end items-center">
+            <Button variant="outline">
+              <PlusCircle className="w-4 h-4 mr-2" />
+              Set Budget
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-row justify-between h-full">
+            <div className="mb-2">
+              <p className="text-xs text-secondary-foreground font-medium">
+                Read only
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-1 flex-row justify-end items-center">
+            <Button variant="outline">
+              <PlusCircle className="w-4 h-4 mr-2" />
+              Enable Payments
+            </Button>
+          </div>
+        </>
       )}
     </>
   );