From 1bf7f7ae62cb4ddb735603b9e38c8b5aeefd8c9d Mon Sep 17 00:00:00 2001
From: ogous <oguzxan.ali@gmail.com>
Date: Thu, 29 Aug 2024 17:14:15 +0300
Subject: [PATCH] feat: banner display with page map

---
 web/src/components/Banners/BottomBanner.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Banners/BottomBanner.tsx b/web/src/components/Banners/BottomBanner.tsx
index 2251fab9..14992b64 100644
--- a/web/src/components/Banners/BottomBanner.tsx
+++ b/web/src/components/Banners/BottomBanner.tsx
@@ -3,6 +3,8 @@ import { graphql, useFragment } from "@/gql";
 import { useFeatureFlag } from "@/hooks/useFeatureFlag";
 import { useGraphqlUser } from "@/hooks/useGraphql";
 import { cn } from "@/lib/utils";
+import { useWelcomeStore } from "@/stores/useWelcomeStore";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 const NotesFragment = graphql(`
   fragment NotesFragment on Note {
@@ -10,15 +12,24 @@ const NotesFragment = graphql(`
     placement
   }
 `);
-
+const pagesWithBanner = ["/", "/stake/pool", "/swap/confirm"];
 export default function BottomBanner() {
+  const pathname = usePathname();
+  const renderBanner = pagesWithBanner.includes(pathname);
   const { data } = useGraphqlUser();
   const notes = useFragment(NotesFragment, data?.notes);
   const bottomNote = notes?.find((item) => item.placement.includes("bottom"));
-  const showBanners = useFeatureFlag("ui show banners");
+  const featureEnabled = useFeatureFlag("ui show banners");
   const [isBannerClosed, setIsBannerClosed] = useState(false);
+  const welcome = useWelcomeStore((state) => state.welcome);
+  const dontRenderBanner =
+    !bottomNote ||
+    !featureEnabled ||
+    isBannerClosed ||
+    !renderBanner ||
+    welcome;
 
-  if (!bottomNote || !showBanners || isBannerClosed) return null;
+  if (dontRenderBanner) return null;
 
   const isLeftBanner = bottomNote.placement.includes("left");
   return (