Skip to content

Commit 9c0a0d7

Browse files
BetrixDevBetrixDev
authored
success url Update Routes, Navigation, and Checkout for Payment Success Flow (#8)
2 parents 6fd65f2 + 89cb075 commit 9c0a0d7

File tree

8 files changed

+410
-127
lines changed

8 files changed

+410
-127
lines changed

‎app.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default defineConfig({
1212
server: {
1313
preset: "vercel",
1414
prerender: {
15-
routes: ["/", "/pricing"],
15+
routes: ["/", "/pricing", "/success", "/videos"],
1616
},
1717
},
1818
});

‎app/components/top-nav.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import { AccountTierText } from "./account-tier-text";
1717
import { Badge } from "./ui/badge";
1818
import { safeParseAccountTier, TIER_TO_TEXT } from "@/lib/utils";
1919

20-
export default function TopNav() {
20+
type TopNavProps = {
21+
showTierPill?: boolean;
22+
};
23+
24+
export default function TopNav({ showTierPill = true }: TopNavProps) {
2125
const { user } = useUser();
2226

2327
const accountTier = safeParseAccountTier(user?.publicMetadata?.accountTier);
@@ -142,14 +146,16 @@ export default function TopNav() {
142146
</SignedOut>
143147
<SignedIn>
144148
<span className="md:flex hidden items-center gap-2">
145-
<Badge variant="outline" className="h-8">
146-
<AccountTierText
147-
accountTier={accountTier}
148-
className="pointer-events-none"
149-
>
150-
{TIER_TO_TEXT[accountTier]} Tier
151-
</AccountTierText>
152-
</Badge>
149+
{showTierPill && (
150+
<Badge variant="outline" className="h-8">
151+
<AccountTierText
152+
accountTier={accountTier}
153+
className="pointer-events-none"
154+
>
155+
{TIER_TO_TEXT[accountTier]} Tier
156+
</AccountTierText>
157+
</Badge>
158+
)}
153159

154160
<UserButton />
155161
</span>

‎app/routeTree.gen.ts‎

Lines changed: 143 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -10,180 +10,202 @@
1010

1111
// Import Routes
1212

13-
import { Route as rootRoute } from "./routes/__root";
14-
import { Route as VideosImport } from "./routes/videos";
15-
import { Route as PricingImport } from "./routes/pricing";
16-
import { Route as IndexImport } from "./routes/index";
17-
import { Route as SignUpSplatImport } from "./routes/sign-up.$";
18-
import { Route as SignInSplatImport } from "./routes/sign-in.$";
19-
import { Route as PVideoIdImport } from "./routes/p.$videoId";
13+
import { Route as rootRoute } from './routes/__root'
14+
import { Route as VideosImport } from './routes/videos'
15+
import { Route as SuccessImport } from './routes/success'
16+
import { Route as PricingImport } from './routes/pricing'
17+
import { Route as IndexImport } from './routes/index'
18+
import { Route as SignUpSplatImport } from './routes/sign-up.$'
19+
import { Route as SignInSplatImport } from './routes/sign-in.$'
20+
import { Route as PVideoIdImport } from './routes/p.$videoId'
2021

2122
// Create/Update Routes
2223

2324
const VideosRoute = VideosImport.update({
24-
id: "/videos",
25-
path: "/videos",
25+
id: '/videos',
26+
path: '/videos',
2627
getParentRoute: () => rootRoute,
27-
} as any);
28+
} as any)
29+
30+
const SuccessRoute = SuccessImport.update({
31+
id: '/success',
32+
path: '/success',
33+
getParentRoute: () => rootRoute,
34+
} as any)
2835

2936
const PricingRoute = PricingImport.update({
30-
id: "/pricing",
31-
path: "/pricing",
37+
id: '/pricing',
38+
path: '/pricing',
3239
getParentRoute: () => rootRoute,
33-
} as any);
40+
} as any)
3441

3542
const IndexRoute = IndexImport.update({
36-
id: "/",
37-
path: "/",
43+
id: '/',
44+
path: '/',
3845
getParentRoute: () => rootRoute,
39-
} as any);
46+
} as any)
4047

4148
const SignUpSplatRoute = SignUpSplatImport.update({
42-
id: "/sign-up/$",
43-
path: "/sign-up/$",
49+
id: '/sign-up/$',
50+
path: '/sign-up/$',
4451
getParentRoute: () => rootRoute,
45-
} as any);
52+
} as any)
4653

4754
const SignInSplatRoute = SignInSplatImport.update({
48-
id: "/sign-in/$",
49-
path: "/sign-in/$",
55+
id: '/sign-in/$',
56+
path: '/sign-in/$',
5057
getParentRoute: () => rootRoute,
51-
} as any);
58+
} as any)
5259

5360
const PVideoIdRoute = PVideoIdImport.update({
54-
id: "/p/$videoId",
55-
path: "/p/$videoId",
61+
id: '/p/$videoId',
62+
path: '/p/$videoId',
5663
getParentRoute: () => rootRoute,
57-
} as any);
64+
} as any)
5865

5966
// Populate the FileRoutesByPath interface
6067

61-
declare module "@tanstack/react-router" {
68+
declare module '@tanstack/react-router' {
6269
interface FileRoutesByPath {
63-
"/": {
64-
id: "/";
65-
path: "/";
66-
fullPath: "/";
67-
preLoaderRoute: typeof IndexImport;
68-
parentRoute: typeof rootRoute;
69-
};
70-
"/pricing": {
71-
id: "/pricing";
72-
path: "/pricing";
73-
fullPath: "/pricing";
74-
preLoaderRoute: typeof PricingImport;
75-
parentRoute: typeof rootRoute;
76-
};
77-
"/videos": {
78-
id: "/videos";
79-
path: "/videos";
80-
fullPath: "/videos";
81-
preLoaderRoute: typeof VideosImport;
82-
parentRoute: typeof rootRoute;
83-
};
84-
"/p/$videoId": {
85-
id: "/p/$videoId";
86-
path: "/p/$videoId";
87-
fullPath: "/p/$videoId";
88-
preLoaderRoute: typeof PVideoIdImport;
89-
parentRoute: typeof rootRoute;
90-
};
91-
"/sign-in/$": {
92-
id: "/sign-in/$";
93-
path: "/sign-in/$";
94-
fullPath: "/sign-in/$";
95-
preLoaderRoute: typeof SignInSplatImport;
96-
parentRoute: typeof rootRoute;
97-
};
98-
"/sign-up/$": {
99-
id: "/sign-up/$";
100-
path: "/sign-up/$";
101-
fullPath: "/sign-up/$";
102-
preLoaderRoute: typeof SignUpSplatImport;
103-
parentRoute: typeof rootRoute;
104-
};
70+
'/': {
71+
id: '/'
72+
path: '/'
73+
fullPath: '/'
74+
preLoaderRoute: typeof IndexImport
75+
parentRoute: typeof rootRoute
76+
}
77+
'/pricing': {
78+
id: '/pricing'
79+
path: '/pricing'
80+
fullPath: '/pricing'
81+
preLoaderRoute: typeof PricingImport
82+
parentRoute: typeof rootRoute
83+
}
84+
'/success': {
85+
id: '/success'
86+
path: '/success'
87+
fullPath: '/success'
88+
preLoaderRoute: typeof SuccessImport
89+
parentRoute: typeof rootRoute
90+
}
91+
'/videos': {
92+
id: '/videos'
93+
path: '/videos'
94+
fullPath: '/videos'
95+
preLoaderRoute: typeof VideosImport
96+
parentRoute: typeof rootRoute
97+
}
98+
'/p/$videoId': {
99+
id: '/p/$videoId'
100+
path: '/p/$videoId'
101+
fullPath: '/p/$videoId'
102+
preLoaderRoute: typeof PVideoIdImport
103+
parentRoute: typeof rootRoute
104+
}
105+
'/sign-in/$': {
106+
id: '/sign-in/$'
107+
path: '/sign-in/$'
108+
fullPath: '/sign-in/$'
109+
preLoaderRoute: typeof SignInSplatImport
110+
parentRoute: typeof rootRoute
111+
}
112+
'/sign-up/$': {
113+
id: '/sign-up/$'
114+
path: '/sign-up/$'
115+
fullPath: '/sign-up/$'
116+
preLoaderRoute: typeof SignUpSplatImport
117+
parentRoute: typeof rootRoute
118+
}
105119
}
106120
}
107121

108122
// Create and export the route tree
109123

110124
export interface FileRoutesByFullPath {
111-
"/": typeof IndexRoute;
112-
"/pricing": typeof PricingRoute;
113-
"/videos": typeof VideosRoute;
114-
"/p/$videoId": typeof PVideoIdRoute;
115-
"/sign-in/$": typeof SignInSplatRoute;
116-
"/sign-up/$": typeof SignUpSplatRoute;
125+
'/': typeof IndexRoute
126+
'/pricing': typeof PricingRoute
127+
'/success': typeof SuccessRoute
128+
'/videos': typeof VideosRoute
129+
'/p/$videoId': typeof PVideoIdRoute
130+
'/sign-in/$': typeof SignInSplatRoute
131+
'/sign-up/$': typeof SignUpSplatRoute
117132
}
118133

119134
export interface FileRoutesByTo {
120-
"/": typeof IndexRoute;
121-
"/pricing": typeof PricingRoute;
122-
"/videos": typeof VideosRoute;
123-
"/p/$videoId": typeof PVideoIdRoute;
124-
"/sign-in/$": typeof SignInSplatRoute;
125-
"/sign-up/$": typeof SignUpSplatRoute;
135+
'/': typeof IndexRoute
136+
'/pricing': typeof PricingRoute
137+
'/success': typeof SuccessRoute
138+
'/videos': typeof VideosRoute
139+
'/p/$videoId': typeof PVideoIdRoute
140+
'/sign-in/$': typeof SignInSplatRoute
141+
'/sign-up/$': typeof SignUpSplatRoute
126142
}
127143

128144
export interface FileRoutesById {
129-
__root__: typeof rootRoute;
130-
"/": typeof IndexRoute;
131-
"/pricing": typeof PricingRoute;
132-
"/videos": typeof VideosRoute;
133-
"/p/$videoId": typeof PVideoIdRoute;
134-
"/sign-in/$": typeof SignInSplatRoute;
135-
"/sign-up/$": typeof SignUpSplatRoute;
145+
__root__: typeof rootRoute
146+
'/': typeof IndexRoute
147+
'/pricing': typeof PricingRoute
148+
'/success': typeof SuccessRoute
149+
'/videos': typeof VideosRoute
150+
'/p/$videoId': typeof PVideoIdRoute
151+
'/sign-in/$': typeof SignInSplatRoute
152+
'/sign-up/$': typeof SignUpSplatRoute
136153
}
137154

138155
export interface FileRouteTypes {
139-
fileRoutesByFullPath: FileRoutesByFullPath;
156+
fileRoutesByFullPath: FileRoutesByFullPath
140157
fullPaths:
141-
| "/"
142-
| "/pricing"
143-
| "/videos"
144-
| "/p/$videoId"
145-
| "/sign-in/$"
146-
| "/sign-up/$";
147-
fileRoutesByTo: FileRoutesByTo;
158+
| '/'
159+
| '/pricing'
160+
| '/success'
161+
| '/videos'
162+
| '/p/$videoId'
163+
| '/sign-in/$'
164+
| '/sign-up/$'
165+
fileRoutesByTo: FileRoutesByTo
148166
to:
149-
| "/"
150-
| "/pricing"
151-
| "/videos"
152-
| "/p/$videoId"
153-
| "/sign-in/$"
154-
| "/sign-up/$";
167+
| '/'
168+
| '/pricing'
169+
| '/success'
170+
| '/videos'
171+
| '/p/$videoId'
172+
| '/sign-in/$'
173+
| '/sign-up/$'
155174
id:
156-
| "__root__"
157-
| "/"
158-
| "/pricing"
159-
| "/videos"
160-
| "/p/$videoId"
161-
| "/sign-in/$"
162-
| "/sign-up/$";
163-
fileRoutesById: FileRoutesById;
175+
| '__root__'
176+
| '/'
177+
| '/pricing'
178+
| '/success'
179+
| '/videos'
180+
| '/p/$videoId'
181+
| '/sign-in/$'
182+
| '/sign-up/$'
183+
fileRoutesById: FileRoutesById
164184
}
165185

166186
export interface RootRouteChildren {
167-
IndexRoute: typeof IndexRoute;
168-
PricingRoute: typeof PricingRoute;
169-
VideosRoute: typeof VideosRoute;
170-
PVideoIdRoute: typeof PVideoIdRoute;
171-
SignInSplatRoute: typeof SignInSplatRoute;
172-
SignUpSplatRoute: typeof SignUpSplatRoute;
187+
IndexRoute: typeof IndexRoute
188+
PricingRoute: typeof PricingRoute
189+
SuccessRoute: typeof SuccessRoute
190+
VideosRoute: typeof VideosRoute
191+
PVideoIdRoute: typeof PVideoIdRoute
192+
SignInSplatRoute: typeof SignInSplatRoute
193+
SignUpSplatRoute: typeof SignUpSplatRoute
173194
}
174195

175196
const rootRouteChildren: RootRouteChildren = {
176197
IndexRoute: IndexRoute,
177198
PricingRoute: PricingRoute,
199+
SuccessRoute: SuccessRoute,
178200
VideosRoute: VideosRoute,
179201
PVideoIdRoute: PVideoIdRoute,
180202
SignInSplatRoute: SignInSplatRoute,
181203
SignUpSplatRoute: SignUpSplatRoute,
182-
};
204+
}
183205

184206
export const routeTree = rootRoute
185207
._addFileChildren(rootRouteChildren)
186-
._addFileTypes<FileRouteTypes>();
208+
._addFileTypes<FileRouteTypes>()
187209

188210
/* ROUTE_MANIFEST_START
189211
{
@@ -193,6 +215,7 @@ export const routeTree = rootRoute
193215
"children": [
194216
"/",
195217
"/pricing",
218+
"/success",
196219
"/videos",
197220
"/p/$videoId",
198221
"/sign-in/$",
@@ -205,6 +228,9 @@ export const routeTree = rootRoute
205228
"/pricing": {
206229
"filePath": "pricing.tsx"
207230
},
231+
"/success": {
232+
"filePath": "success.tsx"
233+
},
208234
"/videos": {
209235
"filePath": "videos.tsx"
210236
},

0 commit comments

Comments
 (0)