Merge pull request #409 from Merit-Systems/br/free-tier-conversion

[Feature] Update your Free Tier with your Echo Balance

Author: zdql

packages/app/control/prisma/migrations/20250916152300_add_balance_enum/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "public"."EnumPaymentSource" ADD VALUE 'balance';

packages/app/control/prisma/schema.prisma

@@ -283,6 +283,7 @@ enum EnumPaymentSource {
   stripe
   admin
   signUpGift
+  balance
 }
 
 model Transaction {

packages/app/control/src/app/(app)/(home)/credits/_components/balance/add-credits.tsx

@@ -5,11 +5,12 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { MoneyInput } from '@/components/ui/money-input';
 
-import { Check, Loader2 } from 'lucide-react';
+import { AlertCircle, Check, Loader2 } from 'lucide-react';
 import { api } from '@/trpc/client';
 
 export const AddCredits = () => {
   const [amount, setAmount] = useState<number>();
+  const [error, setError] = useState<string | null>(null);
 
   const {
     mutate: createPaymentLink,
@@ -19,6 +20,9 @@ export const AddCredits = () => {
     onSuccess: data => {
       window.location.href = data.paymentLink.url;
     },
+    onError: error => {
+      setError(error.message || 'Failed to create payment link');
+    },
   });
 
   const onAddCredits = () => {
@@ -37,6 +41,12 @@ export const AddCredits = () => {
         min="1"
         step="0.01"
       />
+      {error && (
+        <div className="flex items-center gap-2 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+          <AlertCircle className="size-4 flex-shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
       <Button
         onClick={onAddCredits}
         disabled={isPending || !amount || amount <= 0 || isSuccess}

packages/app/control/src/app/(app)/app/[id]/(overview)/_components/header/index.tsx

@@ -35,13 +35,16 @@ export const HeaderCard: React.FC<Props> = ({ appId }) => {
       <div className="grid grid-cols-1 md:grid-cols-7">
         <div className="flex flex-col gap-4 p-4 pt-12 md:pt-14 col-span-5">
           <div className="">
-            <h1 className="text-3xl font-bold">{app.name}</h1>
+            <h1 className="text-3xl font-bold break-words line-clamp-2">
+              {app.name}
+            </h1>
             <p
-              className={
+              className={cn(
+                'break-words line-clamp-2',
                 app.description
                   ? 'text-muted-foreground'
                   : 'text-muted-foreground/40'
-              }
+              )}
             >
               {app.description ?? 'No description'}
             </p>

packages/app/control/src/app/(app)/app/[id]/free-tier/_components/balance/add-credits.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { MoneyInput } from '@/components/ui/money-input';
 
-import { Check, Loader2 } from 'lucide-react';
+import { Check, Loader2, AlertCircle } from 'lucide-react';
 import { api } from '@/trpc/client';
 
 interface Props {
@@ -14,24 +14,69 @@ interface Props {
 
 export const AddCredits: React.FC<Props> = ({ appId }) => {
   const [amount, setAmount] = useState<number>();
+  const [error, setError] = useState<string | null>(null);
+  const [isSuccessFromBalance, setIsSuccessFromBalance] =
+    useState<boolean>(false);
+
+  const utils = api.useUtils();
 
   const {
     mutate: createPaymentLink,
     isPending,
     isSuccess,
   } = api.apps.app.freeTier.payments.create.useMutation({
     onSuccess: data => {
+      setError(null);
       window.location.href = data.paymentLink.url;
     },
+    onError: error => {
+      setError(error.message || 'Failed to create payment link');
+    },
+  });
+
+  const {
+    mutate: createPaymentFromBalance,
+    isPending: isPendingFromBalance,
+    error: balancePaymentError,
+  } = api.apps.app.freeTier.payments.createFromBalance.useMutation({
+    onSuccess: data => {
+      if (!data.success) {
+        setError(data.error_message || 'Payment failed');
+        return;
+      }
+      setError(null);
+      setIsSuccessFromBalance(true);
+
+      // Invalidate balance queries
+      utils.user.balance.get.invalidate();
+      utils.user.balance.app.free.invalidate({ appId });
+      utils.apps.app.freeTier.get.invalidate({ appId });
+    },
+    onError: error => {
+      setError(error.message || 'Failed to process payment from balance');
+    },
   });
 
   const onAddCredits = () => {
-    if (!amount) {
-      throw new Error('Amount is required');
+    if (!amount || amount <= 0) {
+      setError('Please enter a valid amount');
+      return;
     }
+    setError(null);
     createPaymentLink({ appId, amount });
   };
 
+  const onAddCreditsFromBalance = () => {
+    if (!amount || amount <= 0) {
+      setError('Please enter a valid amount');
+      return;
+    }
+    setError(null);
+    createPaymentFromBalance({ appId, amountInDollars: amount });
+  };
+
+  const [currentUserBalance] = api.user.balance.get.useSuspenseQuery();
+
   return (
     <div className="flex flex-col w-full gap-4">
       <MoneyInput
@@ -41,20 +86,52 @@ export const AddCredits: React.FC<Props> = ({ appId }) => {
         min="1"
         step="0.01"
       />
-      <Button
-        onClick={onAddCredits}
-        disabled={isPending || !amount || amount <= 0 || isSuccess}
-        size="lg"
-        variant="turbo"
-      >
-        {isPending ? (
-          <Loader2 className="size-4 animate-spin" />
-        ) : isSuccess ? (
-          <Check className="size-4" />
-        ) : (
-          'Add Credits'
-        )}
-      </Button>
+
+      {error && (
+        <div className="flex items-center gap-2 p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+          <AlertCircle className="size-4 flex-shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      <div className="flex gap-3">
+        <Button
+          onClick={onAddCredits}
+          disabled={isPending || !amount || amount < 1 || isSuccess}
+          size="lg"
+          variant="turboSecondary"
+          className="flex-1"
+        >
+          {isPending ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : isSuccess ? (
+            <Check className="size-4" />
+          ) : (
+            'Add Credits'
+          )}
+        </Button>
+        <Button
+          onClick={onAddCreditsFromBalance}
+          disabled={
+            isPendingFromBalance ||
+            !amount ||
+            amount < 0 ||
+            isSuccessFromBalance ||
+            currentUserBalance.balance < amount
+          }
+          size="lg"
+          variant="turbo"
+          className="flex-1"
+        >
+          {isPendingFromBalance ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : isSuccessFromBalance && !balancePaymentError ? (
+            <Check className="size-4" />
+          ) : (
+            'Add Credits From Balance'
+          )}
+        </Button>
+      </div>
     </div>
   );
 };

packages/app/control/src/app/(app)/app/[id]/free-tier/_components/balance/index.tsx

@@ -13,8 +13,10 @@ import {
   DialogTitle,
   DialogDescription,
   DialogTrigger,
+  DialogFooter,
 } from '@/components/ui/dialog';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Balance as BalanceDisplay } from '@/app/(app)/_components/layout/header/balance/balance-display';
 
 import { AddCredits } from './add-credits';
 
@@ -29,7 +31,9 @@ interface Props {
 const BalanceContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <Card className="border rounded-lg overflow-hidden flex flex-col gap-2 p-4">
-      <h1 className="text-lg font-semibold text-muted-foreground">Balance</h1>
+      <h1 className="text-lg font-semibold text-muted-foreground">
+        Free Tier Balance
+      </h1>
       <div className="flex items-center gap-4 w-full">{children}</div>
     </Card>
   );
@@ -58,6 +62,12 @@ export const Balance: React.FC<Props> = ({ appId }) => {
               Your users will be able to use free tier credits before they have
               to buy credits and spend their Echo balance.
             </DialogDescription>
+            <DialogFooter>
+              <span className="text-sm font-semibold text-muted-foreground">
+                Current Balance:
+              </span>
+              <BalanceDisplay />
+            </DialogFooter>
           </DialogHeader>
           <AddCredits appId={appId} />
         </DialogContent>

packages/app/control/src/components/ui/button.tsx

@@ -32,6 +32,15 @@ const buttonVariants = cva(
           'before:content-[""] before:absolute before:w-full before:h-full before:rounded-md before:pointer-events-none',
           'before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:animate-shimmer'
         ),
+        turboSecondary: cn(
+          'bg-gradient-to-br from-gray-400 via-gray-500 to-gray-600 text-white hover:opacity-90',
+          'shadow-[0_2px_6px_color-mix(in_oklab,theme(colors.gray.500)_70%,transparent)]',
+          'hover:shadow-[0_2px_4px_color-mix(in_oklab,theme(colors.gray.500)_70%,transparent)]',
+          'inset-ring-2 inset-ring-inset inset-ring-border/50',
+          'relative overflow-hidden',
+          'before:content-[""] before:absolute before:w-full before:h-full before:rounded-md before:pointer-events-none',
+          'before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:animate-shimmer'
+        ),
         unstyled: '',
       },
       size: {