Skip to content

Commit 796d0b7

Browse files
vrtndvrtnd
committed
split subscription page
1 parent bc849b2 commit 796d0b7

File tree

5 files changed

+164
-85
lines changed

5 files changed

+164
-85
lines changed

‎src/components/Nav/Account.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export const Account = memo(function Account() {
2626
const isAccountLoading = loaders?.userLoading || (isAuthenticated && isSubscriptionLoading)
2727

2828
const userHandle = resolveUserHandle(user)
29+
const hasActiveSubscription = subscription?.status === 'active'
30+
const accountLink = hasActiveSubscription ? '/user' : '/subscription'
2931

3032
return (
3133
<>
@@ -42,7 +44,7 @@ export const Account = memo(function Account() {
4244
<div className="flex flex-col gap-1.5">
4345
{user && (
4446
<BasicLink
45-
href="/subscription"
47+
href={accountLink}
4648
className="flex items-center gap-1.5 truncate text-sm font-medium text-(--text-label) hover:text-(--link-text) hover:underline"
4749
>
4850
<Icon name="users" className="h-4 w-4 shrink-0" />

‎src/containers/Subscribtion/AccountInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const AccountInfo = () => {
8787
Please sign in to view and manage your account information and subscription details.
8888
</p>
8989
<button
90-
onClick={() => (window.location.href = '/subscribe')}
90+
onClick={() => (window.location.href = '/subscription')}
9191
className="group relative mx-auto flex items-center gap-2 overflow-hidden rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#4335A8] px-5 py-2.5 text-sm text-white shadow-[0_4px_20px_rgba(92,92,249,0.25)] transition-all duration-300 hover:from-[#4A4AF0] hover:to-[#3925A0] sm:px-6 sm:py-3"
9292
>
9393
<div className="animate-shimmer absolute inset-0 h-full w-full bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.1)_50%,transparent_75%)] bg-size-[250%_250%] opacity-0 transition-opacity group-hover:opacity-100"></div>

‎src/containers/Subscribtion/Home.tsx‎

Lines changed: 97 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import { FormEvent, useEffect, useRef, useState } from 'react'
22
import { useQueryClient } from '@tanstack/react-query'
33
import { Icon } from '~/components/Icon'
44
import { LocalLoader } from '~/components/Loaders'
5+
import { BasicLink } from '~/components/Link'
56
import { FreeCard } from '~/components/SubscribeCards/FreeCard'
67
import { SubscribeAPICard } from '~/components/SubscribeCards/SubscribeAPICard'
78
import { SubscribeEnterpriseCard } from '~/components/SubscribeCards/SubscribeEnterpriseCard'
89
import { SubscribeProCard } from '~/components/SubscribeCards/SubscribeProCard'
910
import { useAuthContext } from '~/containers/Subscribtion/auth'
1011
import { useSubscribe } from '~/hooks/useSubscribe'
11-
import { AccountInfo } from './AccountInfo'
1212
import { AccountStatus } from './components/AccountStatus'
1313
import { EmailChangeModal } from './components/EmailChangeModal'
1414
import { EmailVerificationWarning } from './components/EmailVerificationWarning'
@@ -237,15 +237,13 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
237237
</div>
238238
)}
239239

240-
{isAuthenticated && isSubscribed ? null : (
241-
<div
242-
className="relative -bottom-15 z-0 mx-auto -mb-[45px] h-[64px] w-[90%] rounded-[50%]"
243-
style={{
244-
filter: 'blur(64px)',
245-
background: 'linear-gradient(90deg, #5C5EFC 0%, #462A92 100%)'
246-
}}
247-
/>
248-
)}
240+
<div
241+
className="relative -bottom-15 z-0 mx-auto -mb-[45px] h-[64px] w-[90%] rounded-[50%]"
242+
style={{
243+
filter: 'blur(64px)',
244+
background: 'linear-gradient(90deg, #5C5EFC 0%, #462A92 100%)'
245+
}}
246+
/>
249247

250248
<EmailChangeModal
251249
isOpen={showEmailForm}
@@ -256,91 +254,107 @@ export function SubscribeHome({ returnUrl, isTrial }: { returnUrl?: string; isTr
256254
isLoading={isWalletUser ? loaders.addEmail : loaders.changeEmail}
257255
isWalletUser={isWalletUser}
258256
/>
259-
{isAuthenticated && isSubscribed ? (
260-
<div className="mx-auto mt-6 w-full max-w-[1200px]">
261-
<AccountInfo />
262-
</div>
263-
) : (
264-
<div className="relative">
265-
<div className="relative z-10 mb-6 flex items-center justify-center">
266-
<div className="relative inline-flex items-center rounded-xl bg-[#22242930] p-1 backdrop-blur-sm">
267-
<button
268-
onClick={() => setBillingInterval('month')}
269-
className={`relative z-10 rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
270-
billingInterval === 'month'
271-
? 'bg-[#5C5CF9] text-white shadow-lg shadow-[#5C5CF9]/20'
272-
: 'text-[#8a8c90] hover:text-white'
273-
}`}
274-
>
275-
Monthly
276-
</button>
277-
<button
278-
onClick={() => setBillingInterval('year')}
279-
className={`relative z-10 flex items-center gap-2 rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
280-
billingInterval === 'year'
281-
? 'bg-[#5C5CF9] text-white shadow-lg shadow-[#5C5CF9]/20'
282-
: 'text-[#8a8c90] hover:text-white'
283-
}`}
284-
>
285-
Yearly
286-
<span className="rounded-md bg-[#7B7BFF] px-2 py-0.5 text-xs font-semibold text-white">
287-
2 months free
288-
</span>
289-
</button>
290-
</div>
291-
</div>
292-
<div ref={pricingContainer} className="relative z-10 grid grid-cols-1 gap-4 lg:grid-cols-3">
293-
<div
294-
data-plan="pro"
295-
className={`relative flex flex-col overflow-hidden rounded-xl border-2 border-[#5C5CF9]/50 bg-[#22242930] px-4 py-6 shadow-lg shadow-[#5C5CF9]/20 backdrop-blur-md transition-all duration-300 lg:order-2 lg:py-8 lg:hover:scale-[1.02] ${isAuthenticated ? 'order-1' : 'order-2'}`}
257+
<div className="relative">
258+
<div className="relative z-10 mb-6 flex items-center justify-center">
259+
<div className="relative inline-flex items-center rounded-xl bg-[#22242930] p-1 backdrop-blur-sm">
260+
<button
261+
onClick={() => setBillingInterval('month')}
262+
className={`relative z-10 rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
263+
billingInterval === 'month'
264+
? 'bg-[#5C5CF9] text-white shadow-lg shadow-[#5C5CF9]/20'
265+
: 'text-[#8a8c90] hover:text-white'
266+
}`}
296267
>
297-
<SubscribeProCard
298-
context="page"
299-
active={
300-
subscription?.status === 'active' &&
301-
subscription?.type === 'llamafeed' &&
302-
subscription?.provider !== 'trial'
303-
}
304-
billingInterval={billingInterval}
305-
/>
306-
</div>
307-
<div
308-
className={`relative flex flex-col overflow-hidden rounded-xl border border-[#4a4a50] bg-[#22242930] px-4 py-6 shadow-md backdrop-blur-md transition-all duration-300 lg:order-1 lg:py-8 lg:hover:scale-[1.02] ${isAuthenticated ? 'order-2' : 'order-1'}`}
268+
Monthly
269+
</button>
270+
<button
271+
onClick={() => setBillingInterval('year')}
272+
className={`relative z-10 flex items-center gap-2 rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
273+
billingInterval === 'year'
274+
? 'bg-[#5C5CF9] text-white shadow-lg shadow-[#5C5CF9]/20'
275+
: 'text-[#8a8c90] hover:text-white'
276+
}`}
309277
>
310-
<FreeCard />
311-
</div>
312-
<div className="relative order-3 flex flex-col overflow-hidden rounded-xl border border-[#4a4a50] bg-[#22242930] px-4 py-6 shadow-md backdrop-blur-md transition-all duration-300 lg:py-8 lg:hover:scale-[1.02]">
313-
<SubscribeAPICard
314-
context="page"
315-
isLegacyActive={apiSubscription?.status === 'active' && apiSubscription?.provider === 'legacy'}
316-
billingInterval={billingInterval}
317-
/>
318-
</div>
278+
Yearly
279+
<span className="rounded-md bg-[#7B7BFF] px-2 py-0.5 text-xs font-semibold text-white">
280+
2 months free
281+
</span>
282+
</button>
319283
</div>
320-
<div className="relative z-10 mt-4 rounded-xl border border-[#4a4a50] bg-[#22242930] px-5 py-8 shadow-md backdrop-blur-md transition-all duration-300 hover:scale-[1.02]">
321-
<span className="mx-auto flex w-full flex-col md:w-auto md:max-w-[400px]">
322-
<h2 className="text-center text-[2rem] font-extrabold whitespace-nowrap">Enterprise</h2>
323-
<SubscribeEnterpriseCard />
324-
</span>
284+
</div>
285+
<div ref={pricingContainer} className="relative z-10 grid grid-cols-1 gap-4 lg:grid-cols-3">
286+
<div
287+
data-plan="pro"
288+
className={`relative flex flex-col overflow-hidden rounded-xl border-2 border-[#5C5CF9]/50 bg-[#22242930] px-4 py-6 shadow-lg shadow-[#5C5CF9]/20 backdrop-blur-md transition-all duration-300 lg:order-2 lg:py-8 lg:hover:scale-[1.02] ${isAuthenticated ? 'order-1' : 'order-2'}`}
289+
>
290+
<SubscribeProCard
291+
context="page"
292+
active={
293+
subscription?.status === 'active' &&
294+
subscription?.type === 'llamafeed' &&
295+
subscription?.provider !== 'trial'
296+
}
297+
billingInterval={billingInterval}
298+
/>
299+
</div>
300+
<div
301+
className={`relative flex flex-col overflow-hidden rounded-xl border border-[#4a4a50] bg-[#22242930] px-4 py-6 shadow-md backdrop-blur-md transition-all duration-300 lg:order-1 lg:py-8 lg:hover:scale-[1.02] ${isAuthenticated ? 'order-2' : 'order-1'}`}
302+
>
303+
<FreeCard />
325304
</div>
305+
<div className="relative order-3 flex flex-col overflow-hidden rounded-xl border border-[#4a4a50] bg-[#22242930] px-4 py-6 shadow-md backdrop-blur-md transition-all duration-300 lg:py-8 lg:hover:scale-[1.02]">
306+
<SubscribeAPICard
307+
context="page"
308+
isLegacyActive={apiSubscription?.status === 'active' && apiSubscription?.provider === 'legacy'}
309+
billingInterval={billingInterval}
310+
/>
311+
</div>
312+
</div>
313+
<div className="relative z-10 mt-4 rounded-xl border border-[#4a4a50] bg-[#22242930] px-5 py-8 shadow-md backdrop-blur-md transition-all duration-300 hover:scale-[1.02]">
314+
<span className="mx-auto flex w-full flex-col md:w-auto md:max-w-[400px]">
315+
<h2 className="text-center text-[2rem] font-extrabold whitespace-nowrap">Enterprise</h2>
316+
<SubscribeEnterpriseCard />
317+
</span>
318+
</div>
326319

327-
{isAuthenticated && !isSubscribed && (
328-
<div className="relative z-10 mt-8 w-full">
329-
<h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-white">
330-
<Icon name="users" height={18} width={18} className="text-[#5C5CF9]" />
331-
Manage Account
332-
</h3>
320+
{isAuthenticated && (
321+
<div className="relative z-10 mt-8 w-full">
322+
<h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-white">
323+
<Icon name="users" height={18} width={18} className="text-[#5C5CF9]" />
324+
Manage Account
325+
</h3>
326+
{isSubscribed ? (
327+
<div className="overflow-hidden rounded-xl border border-[#39393E]/30 bg-linear-to-r from-[#1a1b1f]/90 to-[#1a1b1f]/70 shadow-[0_4px_20px_rgba(0,0,0,0.2)] backdrop-blur-md backdrop-filter transition-shadow duration-300 hover:shadow-[0_8px_30px_rgba(92,92,249,0.1)]">
328+
<div className="p-5">
329+
<div className="mb-4 flex items-center justify-between">
330+
<div>
331+
<p className="text-sm text-[#8a8c90] mb-1">Subscription Status</p>
332+
<p className="text-lg font-semibold text-white">
333+
{subscription?.type === 'llamafeed' ? 'Pro' : 'API'} Plan Active
334+
</p>
335+
</div>
336+
<BasicLink
337+
href="/user"
338+
className="flex items-center gap-2 rounded-lg bg-linear-to-r from-[#5C5CF9] to-[#6E6EFA] px-6 py-2.5 font-semibold text-white shadow-lg transition-all duration-200 hover:from-[#4A4AF0] hover:to-[#5A5AF5] hover:shadow-[#5C5CF9]/30"
339+
>
340+
<Icon name="arrow-right" height={16} width={16} />
341+
Manage Account
342+
</BasicLink>
343+
</div>
344+
</div>
345+
</div>
346+
) : (
333347
<AccountStatus
334348
user={user}
335349
isVerified={user?.verified}
336350
isSubscribed={isSubscribed}
337351
subscription={subscription}
338352
onEmailChange={() => setShowEmailForm(true)}
339353
/>
340-
</div>
341-
)}
342-
</div>
343-
)}
354+
)}
355+
</div>
356+
)}
357+
</div>
344358
</div>
345359
<div className="mx-auto mb-[64px] flex w-full max-w-6xl flex-col items-center justify-center gap-[64px] px-5 xl:max-w-7xl 2xl:max-w-[1440px]">
346360
<h2 className="text-[32px] font-extrabold">They trust us</h2>

‎src/containers/Subscribtion/UserAccountPage.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { useEffect, useState } from 'react'
2+
import { useRouter } from 'next/router'
3+
import { AccountInfo } from './AccountInfo'
4+
import { LocalLoader } from '~/components/Loaders'
5+
import { useAuthContext } from './auth'
6+
import { useSubscribe } from '~/hooks/useSubscribe'
7+
8+
export function UserAccountPage({ returnUrl }: { returnUrl?: string }) {
9+
const { isAuthenticated, loaders } = useAuthContext()
10+
const { isSubscriptionFetching } = useSubscribe()
11+
const router = useRouter()
12+
const [isClient, setIsClient] = useState(false)
13+
14+
useEffect(() => {
15+
setIsClient(true)
16+
}, [])
17+
18+
useEffect(() => {
19+
if (isClient && !isAuthenticated && !loaders.userLoading) {
20+
const redirectUrl = returnUrl ? `/subscription?returnUrl=${encodeURIComponent(returnUrl)}` : '/subscription'
21+
router.push(redirectUrl)
22+
}
23+
}, [isClient, isAuthenticated, loaders.userLoading, returnUrl, router])
24+
25+
if (loaders && (loaders.userLoading || loaders.userFetching || isSubscriptionFetching)) {
26+
return (
27+
<div className="flex h-[60dvh] items-center justify-center">
28+
<LocalLoader />
29+
</div>
30+
)
31+
}
32+
33+
if (!isAuthenticated) {
34+
return null
35+
}
36+
37+
return (
38+
<div className="relative mx-auto flex w-full max-w-6xl flex-col gap-3 px-5 pb-[64px] xl:max-w-7xl 2xl:max-w-[1440px]">
39+
<div className="mx-auto mt-6 w-full max-w-[1200px]">
40+
<AccountInfo />
41+
</div>
42+
</div>
43+
)
44+
}
45+

‎src/pages/user.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useRouter } from 'next/router'
2+
import { UserAccountPage } from '~/containers/Subscribtion/UserAccountPage'
3+
import { SubscribeLayout } from '~/containers/Subscribtion/Layout'
4+
import { WalletProvider } from '~/layout/WalletProvider'
5+
6+
export default function User() {
7+
const router = useRouter()
8+
const returnUrl = router.query.returnUrl as string | undefined
9+
10+
return (
11+
<WalletProvider>
12+
<SubscribeLayout>
13+
<UserAccountPage returnUrl={returnUrl} />
14+
</SubscribeLayout>
15+
</WalletProvider>
16+
)
17+
}
18+

0 commit comments

Comments
 (0)