feat: implement sponsor (#5480)

* feat: implement sponsor

* wip: add view cookie

* Update src/lib/jwt.ts

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/components/PageSponsor.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
-import { httpGet } from '../lib/http';
+import { httpGet, httpPatch, httpPost } from '../lib/http';
 import { sponsorHidden } from '../stores/page';
 import { useStore } from '@nanostores/react';
 import { X } from 'lucide-react';
+import { setViewSponsorCookie } from '../lib/jwt';
 
 export type PageSponsorType = {
   company: string;
@@ -15,6 +16,7 @@ export type PageSponsorType = {
 };
 
 type V1GetSponsorResponse = {
+  id?: string;
   href?: string;
   sponsor?: PageSponsorType;
 };
@@ -26,6 +28,8 @@ type PageSponsorProps = {
 export function PageSponsor(props: PageSponsorProps) {
   const { gaPageIdentifier } = props;
   const $isSponsorHidden = useStore(sponsorHidden);
+
+  const [sponsorId, setSponsorId] = useState<string | null>(null);
   const [sponsor, setSponsor] = useState<PageSponsorType>();
 
   const loadSponsor = async () => {
@@ -59,6 +63,7 @@ export function PageSponsor(props: PageSponsorProps) {
     }
 
     setSponsor(response.sponsor);
+    setSponsorId(response?.id || null);
 
     window.fireEvent({
       category: 'SponsorImpression',
@@ -69,6 +74,20 @@ export function PageSponsor(props: PageSponsorProps) {
     });
   };
 
+  const clickSponsor = async (sponsorId: string) => {
+    const { response, error } = await httpPatch<{ status: 'ok' }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-view-sponsor/${sponsorId}`,
+      {},
+    );
+
+    if (error || !response) {
+      console.error(error);
+      return;
+    }
+
+    setViewSponsorCookie(sponsorId);
+  };
+
   useEffect(() => {
     window.setTimeout(loadSponsor);
   }, []);
@@ -85,12 +104,13 @@ export function PageSponsor(props: PageSponsorProps) {
       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"
-      onClick={() => {
+      onClick={async () => {
         window.fireEvent({
           category: 'SponsorClick',
           action: `${company} Redirect`,
           label: gaLabel || `${gaPageIdentifier} / ${company} Link`,
         });
+        await clickSponsor(sponsorId || '');
       }}
     >
       <span

src/lib/jwt.ts

@@ -109,3 +109,19 @@ export function removeAIReferralCode() {
     domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
   });
 }
+
+export function setViewSponsorCookie(sponsorId: string) {
+  const key = `vsc-${sponsorId}`;
+  const alreadyExist = Cookies.get(key);
+  if (alreadyExist) {
+    return;
+  }
+
+  Cookies.set(key, '1', {
+    path: '/',
+    expires: 1,
+    sameSite: 'lax',
+    secure: true,
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}