Add close event support to marketing banner

Author: medyo

src/App.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import 'src/assets/App.css'
 import { Footer, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
-import { MarketingBanner } from 'src/components/Elements'
+import { MarketingBanner } from 'src/features/MarketingBanner'
 import { ScrollCardsNavigator } from './components/Layout'
 import { AppContentLayout } from './components/Layout'
 import 'react-contexify/dist/ReactContexify.css'
@@ -22,20 +22,22 @@ function App() {
   }, [])
 
   return (
-    <div className="App">
-      <Header
-        setShowSideBar={setShowSideBar}
-        showSideBar={showSideBar}
-        showSettings={showSettings}
-        setShowSettings={setShowSettings}
-      />
-      <ScrollCardsNavigator />
+    <>
       <MarketingBanner {...marketingBannerConfig} />
-      <AppContentLayout setShowSettings={setShowSettings} />
-      <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
+      <div className="App">
+        <Header
+          setShowSideBar={setShowSideBar}
+          showSideBar={showSideBar}
+          showSettings={showSettings}
+          setShowSettings={setShowSettings}
+        />
+        <ScrollCardsNavigator />
+        <AppContentLayout setShowSettings={setShowSettings} />
+        <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
 
-      <Footer />
-    </div>
+        <Footer />
+      </div>
+    </>
   )
 }
 

src/components/Elements/MarketingBanner/MarketingBanner.tsx

@@ -1,6 +1,5 @@
 export * from "./ColoredLanguagesBadges"
 export * from "./Card"
-export * from "./MarketingBanner"
 export * from "./SearchBar"
 export * from "./UserTags"
 export * from "./BottomNavigation"

src/components/Elements/index.ts

@@ -0,0 +1,30 @@
+import DOMPurify from 'dompurify'
+import { useMarketingBanner } from '../stores/marketingBanner'
+
+type MarketingBannerProps = {
+  show: boolean
+  campaign_name: string
+  htmlContent: string
+}
+export const MarketingBanner = ({ campaign_name, show, htmlContent }: MarketingBannerProps) => {
+  const { setCampaignClosed, closedCampaigns } = useMarketingBanner()
+
+  if (!show || closedCampaigns.includes(campaign_name)) {
+    return null
+  }
+
+  let cleanHtmlContent = DOMPurify.sanitize(htmlContent)
+
+  const onBannerClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (e.target instanceof Element) {
+      const closeButton = e.target.closest('.close')
+      if (closeButton && e.currentTarget.contains(closeButton)) {
+        setCampaignClosed(campaign_name)
+      }
+    }
+  }
+
+  return (
+    <div onClick={(e) => onBannerClick(e)} dangerouslySetInnerHTML={{ __html: cleanHtmlContent }} />
+  )
+}

src/features/MarketingBanner/components/MarketingBanner.tsx

@@ -0,0 +1 @@
+export * from "./components"

…onents/Elements/MarketingBanner/index.ts …ures/MarketingBanner/components/index.tssrc/components/Elements/MarketingBanner/index.ts renamed to src/features/MarketingBanner/components/index.ts src/components/Elements/MarketingBanner/index.ts renamed to src/features/MarketingBanner/components/index.ts

@@ -0,0 +1,17 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware'
+
+type MarketingBannerStore = {
+  closedCampaigns: string[];
+  setCampaignClosed: (compaignName: string) => void;
+};
+
+export const useMarketingBanner = create(persist<MarketingBannerStore>((set) => ({
+  closedCampaigns: [],
+  setCampaignClosed: (compaignName: string) =>
+    set((state) => ({
+      closedCampaigns: [...state.closedCampaigns, compaignName]
+    })),
+}), {
+  name: 'ht_marketing_storage',
+}));