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>

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}

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{' '}
+                      Need to generate more?{' '}
-                      <span className="font-semibold">
+                      <span className="font-semibold">Click here.</span>
-                        adding your own OpenAI API key
-                      </span>
                     </button>
                   )}
 

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>
+  );
+}

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,141 +30,143 @@ export function OpenAISettings(props: OpenAISettingsProps) {
   }, []);
 
   return (
-    <Modal onClose={onClose}>
+    <div className="p-4">
-      <div className="p-5">
+      <button
-        <h2 className="text-xl font-medium text-gray-800">OpenAI Settings</h2>
+        onClick={onBack}
-        <div className="mt-4">
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
-          <p className="text-gray-700">
+      >
-            AI Roadmap generator uses OpenAI's GPT-4 model to generate roadmaps.
+        <ChevronLeft size={16} />
-          </p>
+        Back to options
+      </button>
 
-          <p className="mt-2">
+      <h2 className="text-xl font-semibold text-gray-800">OpenAI Settings</h2>
-            <a
+      <p className="mt-2 text-sm leading-normal text-gray-500">
-              className="font-semibold underline underline-offset-2"
+        Add your OpenAI API key below to bypass the roadmap generation limits.
-              href={'https://platform.openai.com/signup'}
+        You can use your existing key or{' '}
-              target="_blank"
+        <a
-            >
+          className="underline underline-offset-2 hover:text-gray-900"
-              Create an account on OpenAI
+          href={'https://platform.openai.com/signup'}
-            </a>{' '}
+          target="_blank"
-            and enter your API key below to enable the AI Roadmap generator
+        >
-          </p>
+          create a new one here
+        </a>
+        .
+      </p>
 
-          <form
+      <form
-            className="mt-4"
+        className="mt-4"
-            onSubmit={async (e) => {
+        onSubmit={async (e) => {
-              e.preventDefault();
+          e.preventDefault();
+          setHasError(false);
+
+          const normalizedKey = openaiApiKey.trim();
+          if (!normalizedKey) {
+            deleteOpenAIKey();
+            toast.success('OpenAI API key removed');
+            onClose();
+            return;
+          }
+
+          if (!normalizedKey.startsWith('sk-')) {
+            setHasError(true);
+            return;
+          }
+
+          setIsLoading(true);
+          const { response, error } = await httpPost(
+            `${import.meta.env.PUBLIC_API_URL}/v1-validate-openai-key`,
+            {
+              key: normalizedKey,
+            },
+          );
+
+          if (error) {
+            setHasError(true);
+            setIsLoading(false);
+            return;
+          }
+
+          // Save the API key to cookies
+          saveOpenAIKey(normalizedKey);
+          toast.success('OpenAI API key saved');
+          onClose();
+        }}
+      >
+        <div className="relative">
+          <input
+            type="text"
+            name="openai-api-key"
+            id="openai-api-key"
+            className={cn(
+              'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none',
+              {
+                'border-red-500 bg-red-100 focus:border-red-500': hasError,
+              },
+            )}
+            placeholder="Enter your OpenAI API key"
+            value={openaiApiKey}
+            onChange={(e) => {
               setHasError(false);
+              setOpenaiApiKey((e.target as HTMLInputElement).value);
+            }}
+          />
 
-              const normalizedKey = openaiApiKey.trim();
+          {openaiApiKey && (
-              if (!normalizedKey) {
+            <button
-                deleteOpenAIKey();
+              type={'button'}
-                toast.success('OpenAI API key removed');
+              onClick={() => {
-                onClose();
+                setOpenaiApiKey('');
-                return;
+              }}
-              }
+              className="absolute right-2 top-1/2 flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-600"
+            >
+              <CloseIcon className="h-[13px] w-[13px] stroke-[3.5]" />
+            </button>
+          )}
+        </div>
+        <p className={'mb-2 mt-1 text-xs text-gray-500'}>
+          We do not store your API key on our servers.
+        </p>
 
-              if (!normalizedKey.startsWith('sk-')) {
+        {hasError && (
-                setHasError(true);
+          <p className="mt-2 text-sm text-red-500">
-                return;
+            Please enter a valid OpenAI API key
-              }
+          </p>
-
+        )}
-              setIsLoading(true);
+        <button
-              const { response, error } = await httpPost(
+          disabled={isLoading}
-                `${import.meta.env.PUBLIC_API_URL}/v1-validate-openai-key`,
+          type="submit"
-                {
+          className={
-                  key: normalizedKey,
+            'mt-2 w-full rounded-md bg-gray-700 px-4 py-2 text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:opacity-50'
-                },
+          }
-              );
+        >
-
+          {!isLoading && 'Save'}
-              if (error) {
+          {isLoading && 'Validating ..'}
-                setHasError(true);
+        </button>
-                setIsLoading(false);
+        {!defaultOpenAIKey && (
-                return;
+          <button
-              }
+            type="button"
-
+            onClick={() => {
-              // Save the API key to cookies
-              saveOpenAIKey(normalizedKey);
-              toast.success('OpenAI API key saved');
               onClose();
             }}
+            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"
           >
-            <div className="relative">
+            Cancel
-              <input
+          </button>
-                type="text"
+        )}
-                name="openai-api-key"
+        {defaultOpenAIKey && (
-                id="openai-api-key"
+          <button
-                className={cn(
+            type="button"
-                  'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none',
+            onClick={() => {
-                  {
+              deleteOpenAIKey();
-                    'border-red-500 bg-red-100 focus:border-red-500': hasError,
+              onClose();
-                  },
+              toast.success('OpenAI API key removed');
-                )}
+            }}
-                placeholder="Enter your OpenAI API key"
+            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"
-                value={openaiApiKey}
+          >
-                onChange={(e) => {
+            Remove API Key
-                  setHasError(false);
+          </button>
-                  setOpenaiApiKey((e.target as HTMLInputElement).value);
+        )}
-                }}
+      </form>
-              />
+    </div>
-
-              {openaiApiKey && (
-                <button
-                  type={'button'}
-                  onClick={() => {
-                    setOpenaiApiKey('');
-                  }}
-                  className="absolute right-2 top-1/2 flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-600"
-                >
-                  <CloseIcon className="h-[13px] w-[13px] stroke-[3.5]" />
-                </button>
-              )}
-            </div>
-            <p className={'mb-2 mt-1 text-xs text-gray-500'}>
-              We do not store your API key on our servers.
-            </p>
-
-            {hasError && (
-              <p className="mt-2 text-sm text-red-500">
-                Please enter a valid OpenAI API key
-              </p>
-            )}
-            <button
-              disabled={isLoading}
-              type="submit"
-              className={
-                'mt-2 w-full rounded-md bg-gray-700 px-4 py-2 text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:opacity-50'
-              }
-            >
-              {!isLoading && 'Save'}
-              {isLoading && 'Validating ..'}
-            </button>
-            {!defaultOpenAIKey && (
-              <button
-                type="button"
-                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"
-              >
-                Cancel
-              </button>
-            )}
-            {defaultOpenAIKey && (
-              <button
-                type="button"
-                onClick={() => {
-                  deleteOpenAIKey();
-                  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"
-              >
-                Reset to Default Key
-              </button>
-            )}
-          </form>
-        </div>
-      </div>
-    </Modal>
   );
 }

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>
+  );
+}

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>
+    </>
+  );
+}

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>
+  );
+}

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{' '}
+                  Need to generate more?{' '}
-                  <span className="font-semibold">
+                  <span className="font-semibold">Click here.</span>
-                    adding your own OpenAI API key
-                  </span>
                 </button>
               )}
 

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{' '}
+              Need to generate more?{' '}
-              <span className="font-semibold">adding your own OpenAI Key</span>
+              <span className="font-semibold">Click here.</span>
             </button>
           )}
           {isLoggedIn() && openAIKey && (

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}

src/env.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {

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',
+  });
+}