fix(frontend): Remove unused Stripe on frontend (#9536)

### Changes 🏗️

Remove Stripe on frontend.

### 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/frontend/.env.example

@@ -5,7 +5,6 @@ NEXT_PUBLIC_AGPT_MARKETPLACE_URL=http://localhost:8015/api/v1/market
 NEXT_PUBLIC_LAUNCHDARKLY_ENABLED=false
 NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID=
 NEXT_PUBLIC_APP_ENV=dev
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
 
 ## Locale settings
 

autogpt_platform/frontend/package.json

@@ -45,7 +45,6 @@
     "@radix-ui/react-toast": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.1.7",
     "@sentry/nextjs": "^8",
-    "@stripe/stripe-js": "^5.6.0",
     "@supabase/ssr": "^0.5.2",
     "@supabase/supabase-js": "^2.48.1",
     "@tanstack/react-table": "^8.20.6",
@@ -62,8 +61,8 @@
     "embla-carousel-react": "^8.5.2",
     "framer-motion": "^12.0.11",
     "geist": "^1.3.1",
-    "lodash.debounce": "^4.0.8",
     "launchdarkly-react-client-sdk": "^3.6.1",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.474.0",
     "moment": "^2.30.1",
     "next": "^14.2.21",

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

@@ -34,7 +34,6 @@ export default function CreditsPage() {
     fetchInitialAutoTopUpConfig: true,
     fetchInitialRefundRequests: true,
     fetchInitialTransactionHistory: true,
-    fetchTopUpLibrary: true,
   });
   const router = useRouter();
   const searchParams = useSearchParams();

autogpt_platform/frontend/src/components/agptui/Sidebar.tsx

@@ -23,10 +23,6 @@ interface SidebarProps {
 }
 
 export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
-  const stripeAvailable = Boolean(
-    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
-  );
-
   return (
     <>
       <Sheet>
@@ -54,7 +50,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
                   Creator dashboard
                 </div>
               </Link>
-              {stripeAvailable && (
               <Link
                 href="/profile/credits"
                 className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
@@ -64,7 +59,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
                   Billing
                 </div>
               </Link>
-              )}
               <Link
                 href="/profile/integrations"
                 className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
@@ -118,7 +112,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
                 Agent dashboard
               </div>
             </Link>
-            {stripeAvailable && (
             <Link
               href="/profile/credits"
               className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
@@ -128,7 +121,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
                 Billing
               </div>
             </Link>
-            )}
             <Link
               href="/profile/integrations"
               className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"

autogpt_platform/frontend/src/hooks/useCredits.ts

@@ -4,7 +4,6 @@ import {
   TransactionHistory,
 } from "@/lib/autogpt-server-api/types";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
 import { useRouter } from "next/navigation";
 
 export default function useCredits({
@@ -12,13 +11,11 @@ export default function useCredits({
   fetchInitialAutoTopUpConfig = false,
   fetchInitialTransactionHistory = false,
   fetchInitialRefundRequests = false,
-  fetchTopUpLibrary = false,
 }: {
   fetchInitialCredits?: boolean;
   fetchInitialAutoTopUpConfig?: boolean;
   fetchInitialTransactionHistory?: boolean;
   fetchInitialRefundRequests?: boolean;
-  fetchTopUpLibrary?: boolean;
 } = {}): {
   credits: number | null;
   fetchCredits: () => void;
@@ -38,7 +35,6 @@ export default function useCredits({
     amount: number;
     threshold: number;
   } | null>(null);
-  const [stripe, setStripe] = useState<Stripe | null>(null);
 
   const api = useMemo(() => new AutoGPTServerAPI(), []);
   const router = useRouter();
@@ -53,21 +49,6 @@ export default function useCredits({
     fetchCredits();
   }, [fetchCredits, fetchInitialCredits]);
 
-  useEffect(() => {
-    if (!fetchTopUpLibrary) return;
-    const fetchStripe = async () => {
-      if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim()) {
-        console.debug("Stripe publishable key is not set.");
-        return;
-      }
-      const stripe = await loadStripe(
-        process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
-      );
-      setStripe(stripe);
-    };
-    fetchStripe();
-  }, [fetchTopUpLibrary]);
-
   const fetchAutoTopUpConfig = useCallback(async () => {
     const response = await api.getAutoTopUpConfig();
     setAutoTopUpConfig(response);
@@ -88,18 +69,10 @@ export default function useCredits({
 
   const requestTopUp = useCallback(
     async (credit_amount: number) => {
-      if (!stripe) {
-        console.error(
-          "Trying to top-up failed because Stripe is not loaded." +
-            "Did you set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY?",
-        );
-        return;
-      }
-
       const response = await api.requestTopUp(credit_amount);
       router.push(response.checkout_url);
     },
-    [api, router, stripe],
+    [api, router],
   );
 
   const refundTopUp = useCallback(

autogpt_platform/frontend/yarn.lock

@@ -3281,11 +3281,6 @@
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.5.3.tgz#44462cc59a0ce66d2e714330399fae4672afda2e"
   integrity sha512-Jvzw+gT1HNarkJo21WZBq5pU89qDN8u/pD3woSh/1c2h5RS6UylWjQHotPFpcBIQiUSrDFtvCU9xugJm4MD0+w==
 
-"@stripe/stripe-js@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-5.6.0.tgz#cbb5b5f6110f870ca7de7e8ea3d189e9525a1019"
-  integrity sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw==
-
 "@supabase/auth-js@2.67.3":
   version "2.67.3"
   resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.67.3.tgz#a1f5eb22440b0cdbf87fe2ecae662a8dd8bb2028"