feat: add increase generation limit options (#5388)

* wip: limit increase options * feat: add increase AI limit options * fix: overflow issue * UI Updates * UI for bypassing limits * Refactor bypass limit --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
2025-08-21 08:31:50 +02:00 · 2024-03-26 21:40:26 +06:00
parent e6bea59ab5
commit 18deef46db
12 changed files with 575 additions and 148 deletions
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -16,6 +16,7 @@ import {
  getOpenAIKey,
  isLoggedIn,
  removeAuthToken,
+  setAIReferralCode,
  visitAIRoadmap,
 } from '../../lib/jwt';
 import { RoadmapSearch } from './RoadmapSearch.tsx';
@@ -38,6 +39,7 @@ import { OpenAISettings } from './OpenAISettings.tsx';
 import { IS_KEY_ONLY_ROADMAP_GENERATION } from '../../lib/ai.ts';
 import { AITermSuggestionInput } from './AITermSuggestionInput.tsx';
 import { useParams } from '../../hooks/use-params.ts';
+import { IncreaseRoadmapLimit } from './IncreaseRoadmapLimit.tsx';
 import { AuthenticationForm } from '../AuthenticationFlow/AuthenticationForm.tsx';

 export type GetAIRoadmapLimitResponse = {
@@ -88,7 +90,10 @@ type GetAIRoadmapResponse = {
 export function GenerateRoadmap() {
  const roadmapContainerRef = useRef<HTMLDivElement>(null);

-  const { id: roadmapId } = getUrlParams() as { id: string };
+  const { id: roadmapId, rc: referralCode } = getUrlParams() as {
+    id: string;
+    rc?: string;
+  };
  const toast = useToast();

  const [hasSubmitted, setHasSubmitted] = useState<boolean>(false);
@@ -108,7 +113,7 @@ export function GenerateRoadmap() {
  const [roadmapTopicLimitUsed, setRoadmapTopicLimitUsed] = useState(0);
  const [isConfiguring, setIsConfiguring] = useState(false);

-  const openAPIKey = getOpenAIKey();
+  const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(getOpenAIKey());
  const isKeyOnly = IS_KEY_ONLY_ROADMAP_GENERATION;
  const isAuthenticatedUser = isLoggedIn();

@@ -362,6 +367,17 @@ export function GenerateRoadmap() {
    loadAIRoadmapLimit().finally(() => {});
  }, []);

+  useEffect(() => {
+    if (!referralCode || isLoggedIn()) {
+      deleteUrlParam('rc');
+      return;
+    }
+
+    setAIReferralCode(referralCode);
+    deleteUrlParam('rc');
+    showLoginPopup();
+  }, []);
+
  useEffect(() => {
    if (!roadmapId || roadmapId === currentRoadmap?.id) {
      return;
@@ -393,13 +409,13 @@ export function GenerateRoadmap() {

  const pageUrl = `https://roadmap.sh/ai?id=${roadmapId}`;
  const canGenerateMore = roadmapLimitUsed < roadmapLimit;
-  const isLoggedInUser = isLoggedIn();

  return (
    <>
      {isConfiguring && (
-        <OpenAISettings
+        <IncreaseRoadmapLimit
          onClose={() => {
+            setOpenAPIKey(getOpenAIKey());
            setIsConfiguring(false);
            loadAIRoadmapLimit().finally(() => null);
          }}
@@ -488,10 +504,8 @@ export function GenerateRoadmap() {
                      onClick={() => setIsConfiguring(true)}
                      className="rounded-xl border border-current px-2 py-0.5 text-left text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
                    >
-                      By-pass all limits by{' '}
-                      <span className="font-semibold">
-                        adding your own OpenAI API key
-                      </span>
+                      Need to generate more?{' '}
+                      <span className="font-semibold">Click here.</span>
                    </button>
                  )}

--- a/src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx
+++ b/src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { cn } from '../../lib/classname';
+import { ChevronUp } from 'lucide-react';
+import { Modal } from '../Modal';
+import { ReferYourFriend } from './ReferYourFriend';
+import { OpenAISettings } from './OpenAISettings';
+import { PayToBypass } from './PayToBypass';
+import { PickLimitOption } from './PickLimitOption';
+import { getOpenAIKey } from '../../lib/jwt.ts';
+
+export type IncreaseTab = 'api-key' | 'refer-friends' | 'payment';
+
+export const increaseLimitTabs: {
+  key: IncreaseTab;
+  title: string;
+}[] = [
+  { key: 'api-key', title: 'Add your own API Key' },
+  { key: 'refer-friends', title: 'Refer your Friends' },
+  { key: 'payment', title: 'Pay to Bypass the limit' },
+];
+
+type IncreaseRoadmapLimitProps = {
+  onClose: () => void;
+};
+export function IncreaseRoadmapLimit(props: IncreaseRoadmapLimitProps) {
+  const { onClose } = props;
+
+  const openAPIKey = getOpenAIKey();
+  const [activeTab, setActiveTab] = useState<IncreaseTab | null>(
+    openAPIKey ? 'api-key' : null,
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      overlayClassName={cn(
+        'overscroll-contain',
+        activeTab === 'payment' && 'block',
+      )}
+      wrapperClassName="max-w-lg mx-auto"
+      bodyClassName={cn('h-auto pt-px', !activeTab && 'overflow-hidden')}
+    >
+      {!activeTab && (
+        <PickLimitOption activeTab={activeTab} setActiveTab={setActiveTab} />
+      )}
+
+      {activeTab === 'api-key' && (
+        <OpenAISettings
+          onClose={() => {
+            onClose();
+          }}
+          onBack={() => setActiveTab(null)}
+        />
+      )}
+      {activeTab === 'refer-friends' && (
+        <ReferYourFriend onBack={() => setActiveTab(null)} />
+      )}
+      {activeTab === 'payment' && (
+        <PayToBypass
+          onBack={() => setActiveTab(null)}
+          onClose={() => {
+            onClose();
+          }}
+        />
+      )}
+    </Modal>
+  );
+}
--- a/src/components/GenerateRoadmap/OpenAISettings.tsx
+++ b/src/components/GenerateRoadmap/OpenAISettings.tsx
@@ -5,13 +5,15 @@ import { cn } from '../../lib/classname.ts';
 import { CloseIcon } from '../ReactIcons/CloseIcon.tsx';
 import { useToast } from '../../hooks/use-toast.ts';
 import { httpPost } from '../../lib/http.ts';
+import { ChevronLeft } from 'lucide-react';

 type OpenAISettingsProps = {
  onClose: () => void;
+  onBack: () => void;
 };

 export function OpenAISettings(props: OpenAISettingsProps) {
-  const { onClose } = props;
+  const { onClose, onBack } = props;

  const [defaultOpenAIKey, setDefaultOpenAIKey] = useState('');

@@ -28,23 +30,27 @@ export function OpenAISettings(props: OpenAISettingsProps) {
  }, []);

  return (
-    <Modal onClose={onClose}>
-      <div className="p-5">
-        <h2 className="text-xl font-medium text-gray-800">OpenAI Settings</h2>
-        <div className="mt-4">
-          <p className="text-gray-700">
-            AI Roadmap generator uses OpenAI's GPT-4 model to generate roadmaps.
-          </p>
+    <div className="p-4">
+      <button
+        onClick={onBack}
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+      >
+        <ChevronLeft size={16} />
+        Back to options
+      </button>

-          <p className="mt-2">
+      <h2 className="text-xl font-semibold text-gray-800">OpenAI Settings</h2>
+      <p className="mt-2 text-sm leading-normal text-gray-500">
+        Add your OpenAI API key below to bypass the roadmap generation limits.
+        You can use your existing key or{' '}
        <a
-              className="font-semibold underline underline-offset-2"
+          className="underline underline-offset-2 hover:text-gray-900"
          href={'https://platform.openai.com/signup'}
          target="_blank"
        >
-              Create an account on OpenAI
-            </a>{' '}
-            and enter your API key below to enable the AI Roadmap generator
+          create a new one here
+        </a>
+        .
      </p>

      <form
@@ -142,7 +148,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
            onClick={() => {
              onClose();
            }}
-                className="mt-1 w-full rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-black hover:bg-red-700"
+            className="mt-1 w-full rounded-md border border-red-500 px-4 py-2 text-sm text-red-600 transition-colors hover:bg-red-700 hover:text-white"
          >
            Cancel
          </button>
@@ -155,14 +161,12 @@ export function OpenAISettings(props: OpenAISettingsProps) {
              onClose();
              toast.success('OpenAI API key removed');
            }}
-                className="mt-1 w-full rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-black hover:bg-red-700"
+            className="mt-1 w-full rounded-md border border-red-500 px-4 py-2 text-sm text-red-600 transition-colors hover:bg-red-700 hover:text-white"
          >
-                Reset to Default Key
+            Remove API Key
          </button>
        )}
      </form>
    </div>
-      </div>
-    </Modal>
  );
 }
--- a/src/components/GenerateRoadmap/PayToBypass.tsx
+++ b/src/components/GenerateRoadmap/PayToBypass.tsx
@@ -0,0 +1,164 @@
+import { ChevronLeft } from 'lucide-react';
+import { useAuth } from '../../hooks/use-auth';
+
+type PayToBypassProps = {
+  onBack: () => void;
+  onClose: () => void;
+};
+
+export function PayToBypass(props: PayToBypassProps) {
+  const { onBack, onClose } = props;
+  const user = useAuth();
+
+  const userId = 'entry.1665642993';
+  const nameId = 'entry.527005328';
+  const emailId = 'entry.982906376';
+  const amountId = 'entry.1826002937';
+  const roadmapCountId = 'entry.1161404075';
+  const usageId = 'entry.535914744';
+  const feedbackId = 'entry.1024388959';
+
+  return (
+    <div className="p-4">
+      <button
+        onClick={onBack}
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+      >
+        <ChevronLeft size={16} />
+        Back to options
+      </button>
+
+      <h2 className="text-xl font-semibold text-gray-800">Pay to Bypass</h2>
+      <p className="mt-2 text-sm leading-normal text-gray-500">
+        Tell us more about how you will be using this.
+      </p>
+
+      <form
+        className="mt-4 flex flex-col gap-3"
+        action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeec1oboTc9vCWHxmoKsC5NIbACpQEk7erp8wBKJMz-nzC7LQ/formResponse"
+        target="_blank"
+      >
+        <div className="sr-only" aria-hidden="true">
+          <label htmlFor={userId} className="sr-only">
+            User Id
+          </label>
+          <input
+            id={userId}
+            name={userId}
+            type="text"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            value={user?.id}
+            readOnly
+          />
+        </div>
+        <div className="sr-only" aria-hidden="true">
+          <label htmlFor={nameId} className="sr-only">
+            Name
+          </label>
+          <input
+            id={nameId}
+            name={nameId}
+            type="text"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            value={user?.name}
+            readOnly
+          />
+        </div>
+        <div className="sr-only" aria-hidden="true">
+          <label htmlFor={emailId} className="sr-only">
+            Email
+          </label>
+          <input
+            id={emailId}
+            name={emailId}
+            type="email"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            value={user?.email}
+            readOnly
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor={amountId}
+            className="mb-2 block text-sm font-semibold"
+          >
+            How much are you willing to pay for this?
+          </label>
+          <input
+            id={amountId}
+            name={amountId}
+            type="text"
+            required
+            className="block w-full rounded-lg border p-3 py-2 shadow-sm outline-none placeholder:text-sm placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="How much are you willing to pay for this?"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor={roadmapCountId}
+            className="mb-2 block text-sm font-semibold"
+          >
+            How many roadmaps you will be generating (daily, or monthly)?
+          </label>
+          <textarea
+            id={roadmapCountId}
+            name={roadmapCountId}
+            required
+            className="placeholder-text-gray-400 block  w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="How many roadmaps you will be generating (daily, or monthly)?"
+          />
+        </div>
+        <div>
+          <label htmlFor={usageId} className="mb-2 block text-sm font-semibold">
+            How will you be using this?
+          </label>
+          <textarea
+            id={usageId}
+            name={usageId}
+            required
+            className="placeholder-text-gray-400 block  w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="How will you be using this"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor={feedbackId}
+            className="mb-2 block text-sm font-semibold"
+          >
+            Do you have any feedback?
+          </label>
+          <textarea
+            id={feedbackId}
+            name={feedbackId}
+            className="placeholder-text-gray-400 block  w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="Do you have any feedback?"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            className="disbaled:opacity-60 w-full rounded-lg border border-gray-300 py-2 text-sm hover:bg-gray-100 disabled:cursor-not-allowed"
+            onClick={() => {
+              onClose();
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="disbaled:opacity-60 w-full rounded-lg bg-gray-900 py-2 text-sm text-white hover:bg-gray-800 disabled:cursor-not-allowed"
+            onClick={() => {
+              setTimeout(() => {
+                onClose();
+              }, 100);
+            }}
+          >
+            Submit
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
--- a/src/components/GenerateRoadmap/PickLimitOption.tsx
+++ b/src/components/GenerateRoadmap/PickLimitOption.tsx
@@ -0,0 +1,50 @@
+import { ChevronRight, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { increaseLimitTabs, type IncreaseTab } from './IncreaseRoadmapLimit';
+
+type PickLimitOptionProps = {
+  activeTab: IncreaseTab | null;
+  setActiveTab: (tab: IncreaseTab | null) => void;
+};
+
+export function PickLimitOption(props: PickLimitOptionProps) {
+  const { activeTab, setActiveTab } = props;
+
+  return (
+    <>
+      <div className="p-4">
+        <h2 className="text-xl font-semibold text-gray-800">
+          Generate more Roadmaps
+        </h2>
+        <p className="mt-2 text-sm text-gray-700">
+          Pick one of the options below to increase your roadmap limit.
+        </p>
+      </div>
+
+      <div className="flex w-full flex-col gap-1 px-3 pb-4">
+        {increaseLimitTabs.map((tab) => {
+          const isActive = tab.key === activeTab;
+
+          return (
+            <button
+              key={tab.key}
+              onClick={() => {
+                setActiveTab(isActive ? null : tab.key);
+              }}
+              className={cn(
+                'flex w-full items-center justify-between gap-2 rounded-md border-t py-2 text-sm font-medium pl-3 pr-3',
+                {
+                  'bg-gray-100 text-gray-800': isActive,
+                  'bg-gray-200 hover:bg-gray-300 transition-colors text-black': !isActive,
+                },
+              )}
+            >
+              {tab.title}
+              <ChevronRight size={16} />
+            </button>
+          );
+        })}
+      </div>
+    </>
+  );
+}
--- a/src/components/GenerateRoadmap/ReferYourFriend.tsx
+++ b/src/components/GenerateRoadmap/ReferYourFriend.tsx
@@ -0,0 +1,84 @@
+import { Check, ChevronLeft, Clipboard } from 'lucide-react';
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { useToast } from '../../hooks/use-toast';
+import { useRef } from 'react';
+import { cn } from '../../lib/classname.ts';
+
+type ReferYourFriendProps = {
+  onBack: () => void;
+};
+
+export function ReferYourFriend(props: ReferYourFriendProps) {
+  const { onBack } = props;
+
+  const user = useAuth();
+  const toast = useToast();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { copyText, isCopied } = useCopyText();
+  const referralLink = new URL(
+    `/ai?rc=${user?.id}`,
+    import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh',
+  ).toString();
+
+  const handleCopy = () => {
+    inputRef.current?.select();
+    copyText(referralLink);
+    toast.success('Copied to clipboard');
+  };
+
+  return (
+    <div className="p-4">
+      <button
+        onClick={onBack}
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+      >
+        <ChevronLeft size={16} />
+        Back to options
+      </button>
+
+      <h2 className="text-xl font-semibold text-gray-800">
+        Refer your Friends
+      </h2>
+      <p className="mt-2 text-sm text-gray-500">
+        Share the URL below with your friends. When they sign up with your link,
+        you will get extra roadmap generation credits.
+      </p>
+
+      <label className="mt-4 flex flex-col gap-2">
+        <input
+          ref={inputRef}
+          className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-none"
+          value={referralLink}
+          readOnly={true}
+          onClick={handleCopy}
+        />
+
+        <button
+          className={cn(
+            'flex h-10 items-center justify-center gap-1.5 rounded-md p-2 px-2.5 text-sm',
+            {
+              'bg-green-500 text-black transition-colors': isCopied,
+              'bg-black text-white rounded-md': !isCopied,
+            },
+          )}
+          onClick={handleCopy}
+          disabled={isCopied}
+        >
+          {isCopied ? (
+            <>
+              <Check className="h-4 w-4" />
+              Copied to Clipboard
+            </>
+          ) : (
+            <>
+              <Clipboard className="h-4 w-4" />
+              Copy URL
+            </>
+          )}
+        </button>
+      </label>
+    </div>
+  );
+}
--- a/src/components/GenerateRoadmap/RoadmapSearch.tsx
+++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx
@@ -6,6 +6,7 @@ import { showLoginPopup } from '../../lib/popup';
 import { cn } from '../../lib/classname.ts';
 import { OpenAISettings } from './OpenAISettings.tsx';
 import { AITermSuggestionInput } from './AITermSuggestionInput.tsx';
+import { IncreaseRoadmapLimit } from './IncreaseRoadmapLimit.tsx';

 type RoadmapSearchProps = {
  roadmapTerm: string;
@@ -46,8 +47,9 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
  return (
    <div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6">
      {isConfiguring && (
-        <OpenAISettings
+        <IncreaseRoadmapLimit
          onClose={() => {
+            setOpenAPIKey(getOpenAIKey()!);
            setIsConfiguring(false);
            loadAIRoadmapLimit();
          }}
@@ -262,10 +264,8 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
                  onClick={() => setIsConfiguring(true)}
                  className="rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
                >
-                  By-pass all limits by{' '}
-                  <span className="font-semibold">
-                    adding your own OpenAI API key
-                  </span>
+                  Need to generate more?{' '}
+                  <span className="font-semibold">Click here.</span>
                </button>
              )}

--- a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
+++ b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
@@ -161,8 +161,8 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
              className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center"
              onClick={onConfigureOpenAI}
            >
-              By-pass all limits by{' '}
-              <span className="font-semibold">adding your own OpenAI Key</span>
+              Need to generate more?{' '}
+              <span className="font-semibold">Click here.</span>
            </button>
          )}
          {isLoggedIn() && openAIKey && (
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -6,12 +6,19 @@ import { cn } from '../lib/classname';
 type ModalProps = {
  onClose: () => void;
  children: ReactNode;
+  overlayClassName?: string;
  bodyClassName?: string;
  wrapperClassName?: string;
 };

 export function Modal(props: ModalProps) {
-  const { onClose, children, bodyClassName, wrapperClassName } = props;
+  const {
+    onClose,
+    children,
+    bodyClassName,
+    wrapperClassName,
+    overlayClassName,
+  } = props;

  const popupBodyEl = useRef<HTMLDivElement>(null);

@@ -24,18 +31,23 @@ export function Modal(props: ModalProps) {
  });

  return (
-    <div className="popup fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+    <div
+      className={cn(
+        'popup fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
+        overlayClassName,
+      )}
+    >
      <div
        className={cn(
          'relative h-full w-full max-w-md p-4 md:h-auto',
-          wrapperClassName
+          wrapperClassName,
        )}
      >
        <div
          ref={popupBodyEl}
          className={cn(
            'popup-body relative h-full rounded-lg bg-white shadow',
-            bodyClassName
+            bodyClassName,
          )}
        >
          {children}
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

 interface ImportMetaEnv {
--- a/src/lib/jwt.ts
+++ b/src/lib/jwt.ts
@@ -40,6 +40,7 @@ export function setAuthToken(token: string) {
    secure: true,
    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
  });
+  removeAIReferralCode();
 }

 export function removeAuthToken() {
@@ -84,3 +85,27 @@ export function saveOpenAIKey(apiKey: string) {
 export function getOpenAIKey() {
  return Cookies.get('oak');
 }
+
+const AI_REFERRAL_COOKIE_NAME = 'referral_code';
+
+export function setAIReferralCode(code: string) {
+  const alreadyExist = Cookies.get(AI_REFERRAL_COOKIE_NAME);
+  if (alreadyExist) {
+    return;
+  }
+
+  Cookies.set(AI_REFERRAL_COOKIE_NAME, code, {
+    path: '/',
+    expires: 365,
+    sameSite: 'lax',
+    secure: true,
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}
+
+export function removeAIReferralCode() {
+  Cookies.remove(AI_REFERRAL_COOKIE_NAME, {
+    path: '/',
+    domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh',
+  });
+}