feat: implement paywall feature with donation modal and related components

Author: medyo

src/assets/App.css

@@ -68,6 +68,15 @@ a {
   z-index: 1;
 }
 
+.AppHeader .upgradeButton {
+  font-weight: bold;
+  background-color: var(--tab-positive-button-background) !important;
+  color: white !important;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .AppFooter {
   display: flex;
   flex-direction: row;

src/components/Layout/Header.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx'
 import { useCallback, useEffect, useState } from 'react'
 import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
+import { FaCrown } from 'react-icons/fa'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
 import { RiDashboardHorizontalFill } from 'react-icons/ri'
@@ -13,19 +14,25 @@ import HackertabLogo from 'src/assets/logo.svg?react'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { useAuth } from 'src/features/auth'
 import { Changelog } from 'src/features/changelog'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import {
   identifyUserTheme,
   trackDNDDisable,
   trackDisplayTypeChange,
   trackThemeSelect,
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
+import { lazyImport } from 'src/utils/lazyImport'
 import { Button, CircleButton } from '../Elements'
 import { SearchEngineBar } from '../Elements/SearchBar/SearchEngineBar'
+const { DonateModal } = lazyImport(() => import('src/features/donate'), 'DonateModal')
+
 export const Header = () => {
   const { openAuthModal, user, isConnected, isConnecting } = useAuth()
 
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
+  const [openDonateModal, setOpenDonateModal] = useState(false)
+  const { paywall } = useRemoteConfigStore()
   const { theme, setTheme, setDNDDuration, isDNDModeActive, layout, setLayout } =
     useUserPreferences()
   const navigate = useNavigate()
@@ -68,6 +75,10 @@ export const Header = () => {
     setDNDDuration('never')
   }, [setDNDDuration])
 
+  const onUpgradeClicked = useCallback(() => {
+    setOpenDonateModal(true)
+  }, [])
+
   return (
     <>
       <header className="AppHeader">
@@ -129,7 +140,14 @@ export const Header = () => {
               <AvatarPlaceholder className="avatarPlaceholder" />
             )}
           </CircleButton>
+          {paywall?.enabled && (
+            <Button onClick={onUpgradeClicked} className="upgradeButton">
+              <FaCrown />
+              {paywall.headerCta}
+            </Button>
+          )}
         </div>
+        {openDonateModal && <DonateModal setModalOpen={setOpenDonateModal} />}
         {location.pathname === '/' && <UserTags />}
       </header>
     </>

src/features/MarketingBanner/components/MarketingBanner.tsx

@@ -18,8 +18,8 @@ import { Campaign, MarketingConfig } from '../types'
 
 export const MarketingBanner = () => {
   const { setCampaignClosed, closedCampaigns } = useMarketingConfigStore()
-  const { isConnected } = useAuth()
-  const { userSelectedTags, cards, firstSeenDate, advStatus } = useUserPreferences()
+  const { isConnected, user } = useAuth()
+  const { userSelectedTags, cards, firstSeenDate } = useUserPreferences()
   const [availableCampaigns, setAvailableCampaigns] = useState<Campaign[]>([])
   const { data: marketingConfig } = useGetMarketingConfig({
     config: {
@@ -39,11 +39,11 @@ export const MarketingBanner = () => {
       userTags: userSelectedTags.map((tag) => tag.label),
       cards: cards.map((card) => card.name),
       firstSeenDate,
-      adv: advStatus,
       isConnected,
+      isSupported: user?.isSupporter || false,
       usageInDays: diffBetweenTwoDatesInDays(firstSeenDate, Date.now()),
     }
-  }, [userSelectedTags, firstSeenDate, cards, advStatus])
+  }, [userSelectedTags, firstSeenDate, cards, user])
 
   useEffect(() => {
     if (marketingConfig && marketingConfig.version === 1) {

src/features/adv/api/getAd.ts

@@ -5,7 +5,7 @@ import { Ad } from '../types'
 
 const getAd = async (keywords: string[], feed: boolean = false): Promise<Ad | null> => {
   let params = { keywords: keywords.join(','), feed: feed ? 'true' : 'false' }
-  return axios.get('/engine/ads/', { params })
+  return axios.get('/engine/ads/adaptive', { params })
 }
 
 type QueryFnType = typeof getAd
@@ -18,7 +18,7 @@ type UseGetAdOptions = {
 export const useGetAd = ({ keywords, feed, config }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
-    queryKey: ['ad', keywords.join(',')],
+    queryKey: ['ad', 'v2', keywords.join(',')],
     queryFn: () => getAd(keywords, feed),
   })
 }

src/features/adv/components/AdvBanner.css

@@ -285,3 +285,21 @@
 .advFeed:has(.banneradv) .rowDetails {
   margin-left: auto;
 }
+
+.houseBanner {
+  max-width: none;
+  width: 100%;
+  img {
+    border-radius: 8px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+  a {
+    width: 100%;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

src/features/adv/components/AdvBanner.tsx

@@ -1,10 +1,8 @@
 import { useEffect } from 'react'
 import { AdPlaceholder } from 'src/components/placeholders'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
+import { trackMarketingCampaignOpen } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { isWebOrExtensionVersion } from 'src/utils/Environment'
 import { useGetAd } from '../api/getAd'
-import { useDelayedFlag } from '../hooks/useDelayedFlag'
 import { Ad } from '../types'
 import './AdvBanner.css'
 
@@ -14,12 +12,8 @@ type AdvBannerProps = {
   loadingState?: React.ReactNode
 }
 
-export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: AdvBannerProps) => {
+export const AdvBanner = ({ loadingState, onAdLoaded }: AdvBannerProps) => {
   const { userSelectedTags } = useUserPreferences()
-  const adsFetchDelayMs = useRemoteConfigStore((s) => s.adsFetchDelayMs)
-  const delay = isWebOrExtensionVersion() === 'extension' ? adsFetchDelayMs : undefined
-  const isReady = useDelayedFlag(delay)
-
   const {
     isSuccess,
     data: ad,
@@ -31,7 +25,6 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
     config: {
       cacheTime: 0,
       staleTime: 0,
-      enabled: isReady,
       useErrorBoundary: false,
     },
   })
@@ -50,85 +43,22 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
     return null
   }
 
-  if (ad.largeImage) {
+  const onAdClick = () => {
+    if (ad?.id) {
+      trackMarketingCampaignOpen(ad.id, {
+        source: 'card',
+      })
+    }
+  }
+  if (ad.type === 'house-ad-banner') {
     return (
-      <>
-        <div
-          className="carbonCoverTarget"
-          style={
-            {
-              '--ad-dynamic-bg-image': `url(${ad.largeImage})`,
-              '--ad-gradient-color': ad.backgroundColor,
-            } as React.CSSProperties
-          }>
-          <a href={ad.link} className="carbonCover">
-            <img className="carbonCoverImage" src={ad.largeImage} />
-            <div className="carbonCoverMain">
-              <img className="carbonCoverLogo" src={ad.logo} />
-              <div className="carbonCoverTagline">{ad.companyTagline}</div>
-              <div className="carbonCoverDescription">{ad.description}</div>
-              <div className="carbonCoverButton">{ad.callToAction + ' ↗'}</div>
-            </div>
-          </a>
-        </div>
-        {ad.viewUrl &&
-          ad.viewUrl
-            .split('||')
-            .map((viewUrl, i) => (
-              <img
-                key={i}
-                src={viewUrl.replace('[timestamp]', `${Math.round(Date.now() / 10000) | 0}`)}
-                className="hidden"
-                alt=""
-              />
-            ))}
-      </>
+      <div className="houseBanner">
+        <a onClick={onAdClick} href={ad.link} target="_blank" title={ad.title}>
+          <img src={ad.imageUrl} alt={ad.title} />
+        </a>
+      </div>
     )
   }
 
-  return (
-    <>
-      <div className="banneradv">
-        <a
-          href={ad.link}
-          className="img"
-          target="_blank"
-          rel="noopener sponsored noreferrer"
-          title={ad.title}>
-          <img
-            src={ad.imageUrl}
-            alt={ad.title}
-            height={!feedDisplay ? '120' : '200'}
-            width={!feedDisplay ? '156' : '260'}
-            style={{ border: 0 }}
-          />
-        </a>
-
-        <a href={ad.link} className="text" target="_blank" rel="noopener sponsored noreferrer">
-          {ad.description}
-        </a>
-
-        {!feedDisplay && (
-          <a
-            href={ad.provider.link}
-            className="poweredby"
-            target="_blank"
-            rel="noopener sponsored noreferrer">
-            {ad.provider.title}
-          </a>
-        )}
-      </div>
-      {ad.viewUrl &&
-        ad.viewUrl
-          .split('||')
-          .map((viewUrl, i) => (
-            <img
-              key={i}
-              src={viewUrl.replace('[timestamp]', `${Math.round(Date.now() / 10000) | 0}`)}
-              className="hidden"
-              alt=""
-            />
-          ))}
-    </>
-  )
+  return null
 }

src/features/adv/types/index.ts

@@ -9,7 +9,11 @@ type NextAdType = {
   interval: number
 }
 
-export type Ad = {
+export type Ad = DefaultAd | HouseAdBanner
+
+export type DefaultAd = {
+  id?: string
+  type?: string
   title?: string
   description: string
   imageUrl: string
@@ -25,3 +29,11 @@ export type Ad = {
   callToAction?: string
   company?: string
 }
+export type HouseAdBanner = {
+  type: 'house-ad-banner'
+  id: string
+  title: string
+  description: string
+  link: string
+  imageUrl: string
+}

src/features/donate/components/DonateModal.tsx

@@ -0,0 +1,26 @@
+import ReactModal from 'react-modal'
+import { DonateView } from './DonateView'
+import './donate.css'
+
+type DonateModalProps = {
+  setModalOpen: (open: boolean) => void
+}
+export const DonateModal = ({ setModalOpen }: DonateModalProps) => {
+  return (
+    <ReactModal
+      isOpen={true}
+      ariaHideApp={false}
+      shouldCloseOnEsc={false}
+      shouldCloseOnOverlayClick={false}
+      shouldFocusAfterRender={false}
+      className="Modal scrollable donateModal"
+      style={{
+        overlay: {
+          zIndex: 3,
+        },
+      }}
+      overlayClassName="Overlay">
+      <DonateView setModalOpen={setModalOpen} />
+    </ReactModal>
+  )
+}

src/features/donate/components/DonateView.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react'
+import { FaCrown } from 'react-icons/fa'
+import { TbCheck } from 'react-icons/tb'
+import { Button } from 'src/components/Elements'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
+import { trackMarketingCampaignOpen, trackMarketingCampaignView } from 'src/lib/analytics'
+
+type DonateViewProps = {
+  setModalOpen: (open: boolean) => void
+}
+export const DonateView = ({ setModalOpen }: DonateViewProps) => {
+  const { paywall } = useRemoteConfigStore()
+
+  useEffect(() => {
+    if (paywall?.id) {
+      trackMarketingCampaignView(paywall.id, {
+        source: 'modal',
+      })
+    }
+  }, [paywall?.id])
+
+  if (!paywall) {
+    return null
+  }
+  const { headerImage, ctaUrl, cta, leadDescription, caption, features } = paywall
+  return (
+    <div className="donateView">
+      <header>
+        <img src={headerImage} alt="Header img" />
+      </header>
+      <div className="body">
+        <p className="leadDescription">{leadDescription}</p>
+        <p className="description">
+          <b>What you get</b>
+          <ul className="features">
+            {features.map((feature, index) => {
+              return (
+                <li key={index}>
+                  <TbCheck className="checkIcon" /> {feature}
+                </li>
+              )
+            }) || []}
+          </ul>
+        </p>
+        <div className="buttonsWrapper">
+          <Button size="medium" className="cancelButton" onClick={() => setModalOpen(false)}>
+            Cancel
+          </Button>
+
+          <Button
+            size="medium"
+            className="upgradeButton"
+            startIcon={<FaCrown />}
+            onClick={() => {
+              window.open(ctaUrl, '_blank')
+              trackMarketingCampaignOpen(paywall.id, {
+                source: 'modal',
+              })
+              setModalOpen(false)
+            }}>
+            {cta}
+          </Button>
+        </div>
+        <p className="caption">{caption}</p>
+      </div>
+    </div>
+  )
+}