diff --git a/src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx b/src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx index 9c41dc8c9..6b2bbc8aa 100644 --- a/src/components/GenerateRoadmap/IncreaseRoadmapLimit.tsx +++ b/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( - 'refer-friends', - ); + const user = useAuth(); + const toast = useToast(); + const inputRef = useRef(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 ( - {!activeTab && ( - - )} - - {activeTab === 'refer-friends' && ( - setActiveTab(null)} /> - )} - {activeTab === 'payment' && ( - setActiveTab(null)} - onClose={() => { - onClose(); - }} - /> - )} +
+

+ Refer your Friends +

+

+ Share the URL below with your friends. When they sign up with your + link, you will get extra roadmap generation credits. +

+ + +
); } diff --git a/src/components/GenerateRoadmap/PickLimitOption.tsx b/src/components/GenerateRoadmap/PickLimitOption.tsx deleted file mode 100644 index 9ed9a0d1a..000000000 --- a/src/components/GenerateRoadmap/PickLimitOption.tsx +++ /dev/null @@ -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 ( - <> -
-

- Generate more Roadmaps -

-

- Pick one of the options below to increase your roadmap limit. -

-
- -
- {increaseLimitTabs.map((tab) => { - const isActive = tab.key === activeTab; - - return ( - - ); - })} -
- - ); -} diff --git a/src/components/GenerateRoadmap/ReferYourFriend.tsx b/src/components/GenerateRoadmap/ReferYourFriend.tsx index 045188e14..a97d5f946 100644 --- a/src/components/GenerateRoadmap/ReferYourFriend.tsx +++ b/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 (
- -

Refer your Friends