[TOOL-2808] Add back freewallets announcement banner + hide it after 31st Dec 2024

apps/dashboard/src/app/layout.tsx

@@ -7,6 +7,7 @@ import PlausibleProvider from "next-plausible";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Suspense } from "react";
+import { UnlimitedWalletsBanner } from "../components/notices/AnnouncementBanner";
 import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
 import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
 import { PostHogProvider } from "./components/root-providers";
@@ -71,7 +72,7 @@ export default function RootLayout({
             fontSans.variable,
           )}
         >
-          {/* Banner goes here */}
+          <UnlimitedWalletsBanner />
           <AppRouterProviders>
             {children}
             <Suspense fallback={null}>

apps/dashboard/src/components/notices/AnnouncementBanner.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { isAfter } from "date-fns";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ChevronRightIcon, XIcon } from "lucide-react";
 import { useSelectedLayoutSegment } from "next/navigation";
@@ -56,3 +57,20 @@ export function AnnouncementBanner(props: {
     </div>
   );
 }
+
+export function UnlimitedWalletsBanner() {
+  // hide banner after 31st December 2024
+  const shouldHideBanner = isAfter(new Date(), new Date("31 Dec 2024"));
+
+  if (shouldHideBanner) {
+    return null;
+  }
+
+  return (
+    <AnnouncementBanner
+      href="/team/~/~/settings/billing?coupon=FREEWALLETS24"
+      label='Claim 12 months of free in-app wallets. Use code "FREEWALLETS24". Redeem offer by December 31st!'
+      trackingLabel="unlimited-wallets"
+    />
+  );
+}

apps/dashboard/src/pages/_app.tsx

@@ -22,6 +22,7 @@ import type { ThirdwebNextPage } from "utils/types";
 import chakraTheme from "../theme";
 import "@/styles/globals.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
+import { UnlimitedWalletsBanner } from "../components/notices/AnnouncementBanner";
 
 const inter = interConstructor({
   subsets: ["latin"],
@@ -259,7 +260,7 @@ const ConsoleApp = memo(function ConsoleApp({
       />
 
       <DashboardRouterTopProgressBar />
-      {/* Banner goes here */}
+      <UnlimitedWalletsBanner />
 
       <TailwindTheme>
         <ChakraProvider theme={chakraThemeWithFonts}>