feat(frontend): Fix wordings for auto top-up feature (#9419)

### Changes

Make the auto top-up wordings clearer: 

<img width="547" alt="Screenshot 2025-02-05 at 1 38 16 AM"
src="https://github.com/user-attachments/assets/9a902442-1815-4a38-af39-d7d4b0e120f0"
/>

<img width="555" alt="Screenshot 2025-02-05 at 1 40 29 AM"
src="https://github.com/user-attachments/assets/4c9c9cdc-2d73-45f2-8a8d-f7ae7f97541b"
/>
es 🏗️

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

autogpt_platform/backend/backend/server/routers/v1.py

@@ -177,7 +177,7 @@ async def configure_user_auto_top_up(
 ) -> str:
     if request.threshold < 0:
         raise ValueError("Threshold must be greater than 0")
-    if request.amount < 500:
+    if request.amount < 500 and request.amount != 0:
         raise ValueError("Amount must be greater than or equal to 500")
     if request.amount < request.threshold:
         raise ValueError("Amount must be greater than or equal to threshold")

autogpt_platform/frontend/src/app/marketplace/(user)/credits/page.tsx

@@ -108,7 +108,7 @@ export default function CreditsPage() {
                 htmlFor="topUpAmount"
                 className="mb-1 block text-neutral-700"
               >
-                Top-up Amount (Credits, Minimum 500 = 5 USD)
+                Amount, minimum 500 credits = 5 USD:
               </label>
               <input
                 type="number"
@@ -130,41 +130,21 @@ export default function CreditsPage() {
 
           {/* Auto Top-up Form */}
           <form onSubmit={submitAutoTopUpConfig} className="mt-6 space-y-4">
-            <h3 className="text-lg font-medium">Auto Top-up Configuration</h3>
-
-            <div>
-              <label
-                htmlFor="autoTopUpAmount"
-                className="mb-1 block text-neutral-700"
-              >
-                Auto Top-up Amount (Credits, Minimum 500 = 5 USD)
-              </label>
-              <input
-                type="number"
-                id="autoTopUpAmount"
-                name="topUpAmount"
-                defaultValue={autoTopUpConfig?.amount || ""}
-                placeholder="Enter auto top-up amount"
-                min="500"
-                step="100"
-                className="w-full rounded-md border border-slate-200 px-4 py-2 dark:border-slate-700 dark:bg-slate-800"
-                required
-              />
-            </div>
+            <h3 className="text-lg font-medium">Automatic Refill Settings</h3>
 
             <div>
               <label
                 htmlFor="threshold"
                 className="mb-1 block text-neutral-700"
               >
-                Threshold (Credits)
+                When my balance goes below this amount:
               </label>
               <input
                 type="number"
                 id="threshold"
                 name="threshold"
                 defaultValue={autoTopUpConfig?.threshold || ""}
-                placeholder="Enter threshold value"
+                placeholder="Amount, minimum 500 credits = 5 USD"
                 min="500"
                 step="100"
                 className="w-full rounded-md border border-slate-200 px-4 py-2 dark:border-slate-700 dark:bg-slate-800"
@@ -172,9 +152,48 @@ export default function CreditsPage() {
               />
             </div>
 
-            <Button type="submit" className="w-full">
-              Save
-            </Button>
+            <div>
+              <label
+                htmlFor="autoTopUpAmount"
+                className="mb-1 block text-neutral-700"
+              >
+                Automatically refill my balance with this amount:
+              </label>
+              <input
+                type="number"
+                id="autoTopUpAmount"
+                name="topUpAmount"
+                defaultValue={autoTopUpConfig?.amount || ""}
+                placeholder="Amount, minimum 500 credits = 5 USD"
+                min="500"
+                step="100"
+                className="w-full rounded-md border border-slate-200 px-4 py-2 dark:border-slate-700 dark:bg-slate-800"
+                required
+              />
+            </div>
+
+            {autoTopUpConfig?.amount ? (
+              <>
+                <Button type="submit" className="w-full">
+                  Save Changes
+                </Button>
+                <Button
+                  className="w-full"
+                  variant="destructive"
+                  onClick={() =>
+                    updateAutoTopUpConfig(0, 0).then(() => {
+                      toast({ title: "Auto top-up config disabled! 🎉" });
+                    })
+                  }
+                >
+                  Disable Auto-Refill
+                </Button>
+              </>
+            ) : (
+              <Button type="submit" className="w-full">
+                Enable Auto-Refill
+              </Button>
+            )}
           </form>
         </div>