diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx index 1f44fa3a2..1d563319a 100644 --- a/src/components/PageSponsor.tsx +++ b/src/components/PageSponsor.tsx @@ -5,6 +5,7 @@ import { useStore } from '@nanostores/react'; import { X } from 'lucide-react'; import { setViewSponsorCookie } from '../lib/jwt'; import { isMobile } from '../lib/is-mobile'; +import Cookies from 'js-cookie'; export type PageSponsorType = { company: string; @@ -26,6 +27,22 @@ type PageSponsorProps = { gaPageIdentifier?: string; }; +const CLOSE_SPONSOR_KEY = 'sponsorClosed'; + +function markSponsorHidden(sponsorId: string) { + Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', { + path: '/', + expires: 1, + sameSite: 'lax', + secure: true, + domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh', + }); +} + +function isSponsorMarkedHidden(sponsorId: string) { + return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1'; +} + export function PageSponsor(props: PageSponsorProps) { const { gaPageIdentifier } = props; const $isSponsorHidden = useStore(sponsorHidden); @@ -60,12 +77,16 @@ export function PageSponsor(props: PageSponsorProps) { return; } - if (!response?.sponsor) { + if ( + !response?.sponsor || + !response.id || + isSponsorMarkedHidden(response.id) + ) { return; } setSponsor(response.sponsor); - setSponsorId(response?.id || null); + setSponsorId(response.id); window.fireEvent({ category: 'SponsorImpression', @@ -84,7 +105,7 @@ export function PageSponsor(props: PageSponsorProps) { const { response, error } = await httpPatch<{ status: 'ok' }>( clickUrl.toString(), { - mobile: isMobile() ? true : false, + mobile: isMobile(), }, ); @@ -111,7 +132,7 @@ export function PageSponsor(props: PageSponsorProps) { href={url} target="_blank" rel="noopener sponsored nofollow" - className="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent" + className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]" onClick={async () => { window.fireEvent({ category: 'SponsorClick', @@ -122,26 +143,32 @@ export function PageSponsor(props: PageSponsorProps) { }} > { e.preventDefault(); + markSponsorHidden(sponsorId || ''); sponsorHidden.set(true); }} > - + - Sponsor Banner - + + Sponsor Banner + + {title} {description} - Partner Content + Partner Content + + Partner Content + ); diff --git a/src/styles/global.css b/src/styles/global.css index 7f5977e73..29e4c65dd 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -61,7 +61,6 @@ a > code:before { letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 10px; - display: block; background: repeating-linear-gradient( -45deg, transparent,