From 6510198d4f66211f71b8ed3054463616d0c3aeb5 Mon Sep 17 00:00:00 2001
From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com>
Date: Tue, 3 Dec 2024 20:51:11 -0500
Subject: [PATCH] fix: only show banner when user doesn't have managed wallet

---
 .../src/components/layout/Layout.tsx          |  4 ++--
 .../src/hooks/useHasCreditCardBanner.ts       | 22 +++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/deploy-web/src/components/layout/Layout.tsx b/apps/deploy-web/src/components/layout/Layout.tsx
index 397f7531b..15edbabc1 100644
--- a/apps/deploy-web/src/components/layout/Layout.tsx
+++ b/apps/deploy-web/src/components/layout/Layout.tsx
@@ -53,7 +53,7 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
   const [isNavOpen, setIsNavOpen] = useState(true);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const { refreshNodeStatuses, isSettingsInit } = useSettings();
-  const { isWalletLoaded } = useWallet();
+  const { isWalletLoaded, hasManagedWallet } = useWallet();
   const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
   const hasCreditCardBanner = useHasCreditCardBanner();
 
@@ -94,7 +94,7 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
           <div className="fixed top-0 flex h-[40px] w-full items-center justify-center space-x-4 bg-primary px-3 py-2">
             <span className="text-sm font-semibold text-white">Credit Card payments are now available!</span>
 
-            <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" size="sm" />
+            {!hasManagedWallet && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" size="sm" />}
           </div>
           <style jsx global>{`
             body {
diff --git a/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts b/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
index 57782b52c..bdad8cc8f 100644
--- a/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
+++ b/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
@@ -1,10 +1,28 @@
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
+import { useEffect, useMemo, useState } from "react";
+import { useUser } from "./useUser";
 
 const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
 
 export function useHasCreditCardBanner() {
-  const { hasManagedWallet, isTrialing } = useWallet();
+  const user = useUser();
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const { hasManagedWallet, isWalletLoading } = useWallet();
+  const shouldShowBanner = useMemo(() => isInitialized && withBilling && !hasManagedWallet && !isWalletLoading, [isInitialized, hasManagedWallet, isWalletLoading]);
 
-  return withBilling && !hasManagedWallet && !isTrialing;
+  useEffect(() => {
+    if (user?.id) {
+      setIsInitialized(true);
+    }
+  }, [user?.id]);
+
+  useEffect(() => {
+    if (shouldShowBanner) {
+      setIsBannerVisible(true);
+    }
+  }, [shouldShowBanner]);
+
+  return isBannerVisible;
 }