Improve limits page

src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx

@@ -1,55 +1,84 @@
-import { useState } from 'react';
+import { Check, Clipboard } from 'lucide-react';
+import { useRef } from 'react';
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { useToast } from '../../hooks/use-toast';
 import { cn } from '../../lib/classname';
 import { Modal } from '../Modal';
-import { ReferYourFriend } from './ReferYourFriend';
-import { PayToBypass } from './PayToBypass';
-import { PickLimitOption } from './PickLimitOption';
-
-export type IncreaseTab = 'refer-friends' | 'payment';
-
-export const increaseLimitTabs: {
-  key: IncreaseTab;
-  title: string;
-}[] = [
-  { 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 [activeTab, setActiveTab] = useState<IncreaseTab | null>(
-    'refer-friends',
-  );
+  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 (
     <Modal
       onClose={onClose}
-      overlayClassName={cn(
-        'overscroll-contain',
-        activeTab === 'payment' && 'block',
-      )}
+      overlayClassName={cn('overscroll-contain')}
       wrapperClassName="max-w-lg mx-auto"
-      bodyClassName={cn('h-auto pt-px', !activeTab && 'overflow-hidden')}
+      bodyClassName={cn('h-auto pt-px')}
     >
-      {!activeTab && (
-        <PickLimitOption activeTab={activeTab} setActiveTab={setActiveTab} />
-      )}
+      <div className="p-4">
+        <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>
 
-      {activeTab === 'refer-friends' && (
-        <ReferYourFriend onBack={() => setActiveTab(null)} />
-      )}
-      {activeTab === 'payment' && (
-        <PayToBypass
-          onBack={() => setActiveTab(null)}
-          onClose={() => {
-            onClose();
-          }}
-        />
-      )}
+        <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,
+                'rounded-md bg-black text-white': !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>
     </Modal>
   );
 }

src/components/GenerateRoadmap/PickLimitOption.tsx

@@ -1,50 +0,0 @@
-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

@@ -1,4 +1,4 @@
-import { Check, ChevronLeft, Clipboard } from 'lucide-react';
+import { Check, Clipboard } from 'lucide-react';
 import { useAuth } from '../../hooks/use-auth';
 import { useCopyText } from '../../hooks/use-copy-text';
 import { useToast } from '../../hooks/use-toast';
@@ -30,14 +30,6 @@ export function ReferYourFriend(props: ReferYourFriendProps) {
 
   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>