feat: shop promotion banner (#449)

* add spif shop banner and popup

* disable ad dialog for spif shop

src/renderer/app/app.tsx

@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { Header } from "@/app/header/header";
 import { LoginDialog } from "@/app/header/login_dialog";
 import type { MenuItem } from "@/app/header/main_menu";
+import { AdDialog } from "@/components/ad_dialog";
 import { AuthGuard } from "@/components/auth_guard";
 import { PersistentNotification } from "@/components/persistent_notification";
 
@@ -44,6 +45,7 @@ export const App = React.memo(({ menuItems }: { menuItems: readonly MainMenuItem
       </div>
       <LoginDialog />
       <PersistentNotification />
+      <AdDialog />
     </div>
   );
 });

src/renderer/components/ad_dialog.tsx

@@ -0,0 +1,95 @@
+import { css } from "@emotion/react";
+import CloseIcon from "@mui/icons-material/Close";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useState } from "react";
+
+import { ExternalLink as A } from "@/components/external_link";
+
+// import spifShopImage from "@/styles/images/ads/spif-slippi-shop-full-size.png";
+
+const getActiveCampaign = ():
+  | {
+      image: string;
+      seenKey: string;
+    }
+  | undefined => {
+  // const now = new Date();
+
+  // // I'm disabling this because the banner by itself is probably enough. This feels quite heavy.
+  // const start = new Date("2024-12-25");
+  // const end = new Date("2025-01-12");
+  // if (now >= start && now <= end) {
+  //   return { image: spifShopImage, seenKey: "SPIF_SHOP_SEEN" };
+  // }
+
+  return undefined;
+};
+
+export const AdDialog = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const campaign = getActiveCampaign();
+
+  const [modalOpen, setModalOpen] = useState(Boolean(campaign));
+
+  const defaultSeen = campaign && localStorage.getItem(campaign.seenKey) === "true";
+  const [seenNotice, setSeenNotice] = useState(defaultSeen);
+
+  const closeModal = () => {
+    if (campaign) {
+      localStorage.setItem(campaign.seenKey, "true");
+      setSeenNotice(true);
+    }
+    setModalOpen(false);
+  };
+
+  if (!campaign || seenNotice) {
+    return null;
+  }
+
+  return (
+    <Dialog open={modalOpen} onClose={closeModal} fullWidth={true} fullScreen={fullScreen}>
+      <IconButton
+        aria-label="close"
+        onClick={closeModal}
+        sx={(theme) => ({
+          position: "absolute",
+          right: 8,
+          top: 8,
+          color: theme.palette.grey[500],
+        })}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent
+        css={css`
+          padding-left: 60px;
+          padding-right: 60px;
+        `}
+      >
+        <A
+          href="https://spif.space/pages/spif-x-slippi"
+          css={css`
+            display: inline-block;
+          `}
+        >
+          <img
+            src={campaign.image}
+            alt="Spif Shop"
+            css={css`
+              width: 100%;
+              height: auto;
+              margin: -10px 0;
+              border-radius: 5px;
+            `}
+          />
+        </A>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/renderer/pages/home/news_feed/ad_banner.tsx

@@ -0,0 +1,60 @@
+import { css } from "@emotion/react";
+
+import { ExternalLink as A } from "@/components/external_link";
+import spifShopBanner from "@/styles/images/ads/spif-shop-banner.png";
+
+const getActiveBanner = () => {
+  const now = new Date();
+  const start = new Date("2024-12-25");
+  const end = new Date("2025-01-12");
+
+  if (now >= start && now <= end) {
+    return { image: spifShopBanner, url: "https://spif.space/pages/spif-x-slippi" };
+  }
+
+  return undefined;
+};
+
+export const AdBanner = () => {
+  const banner = getActiveBanner();
+
+  if (!banner) {
+    return null;
+  }
+
+  return (
+    <div
+      css={css`
+        position: absolute;
+        bottom: 10px;
+        width: calc(100% - 40px);
+        margin-left: -6px;
+        text-align: center;
+        overflow: hidden;
+      `}
+    >
+      <A
+        href={banner.url}
+        css={css`
+          display: inline-block;
+        `}
+      >
+        <img
+          src={banner.image}
+          css={css`
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            min-width: 500px;
+            max-width: 800px;
+            width: 100%;
+            border-width: 1px;
+            border-style: solid;
+            border-color: black;
+            box-shadow: 0 0 10px 5px rgb(0 0 0 / 25%);
+          `}
+        />
+      </A>
+    </div>
+  );
+};

src/renderer/pages/home/news_feed/news_feed.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "react-query";
 
 import { LoadingScreen } from "@/components/loading_screen";
 
+import { AdBanner } from "./ad_banner";
 import { NewsArticle } from "./news_article/news_article";
 
 const ITEMS_TO_SHOW = 7;
@@ -65,6 +66,7 @@ export const NewsFeed = React.memo(function NewsFeedContainer() {
           </Button>
         </div>
       )}
+      <AdBanner />
     </div>
   );
 });