feat(landing): enhance CTAModal routing and add new paths
Landing frontend enhancements: - Extend useModalRouting hook with additional routing logic - Update CTAModal types with new properties - Add new route paths for expanded functionality - Add new dependency to package.json 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
eb002ecfaa
commit
a54d17896a
4 changed files with 37 additions and 4 deletions
|
|
@ -68,6 +68,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@lilith/config": "workspace:*",
|
||||
"@transquinnftw/configs": "^1.0.0",
|
||||
"@lilith/test-utils": "workspace:*",
|
||||
"@playwright/test": "^1.56.1",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import type { CTAContext } from '../types'
|
|||
const MODAL_PATTERNS = {
|
||||
info: '/info/:userType',
|
||||
register: '/register/:userType?',
|
||||
login: '/login/:userType?',
|
||||
invest: '/invest',
|
||||
contact: '/contact',
|
||||
newsletter: '/newsletter',
|
||||
|
|
@ -30,7 +31,8 @@ interface UseModalRoutingReturn {
|
|||
context: CTAContext | null
|
||||
closeModal: () => void
|
||||
openInfo: (userType: UserType) => void
|
||||
openRegister: (userType: UserType) => void
|
||||
openRegister: (userType?: UserType) => void
|
||||
openLogin: (userType?: UserType) => void
|
||||
openInvest: () => void
|
||||
openContact: (inquiryType?: string) => void
|
||||
openNewsletter: () => void
|
||||
|
|
@ -68,6 +70,20 @@ export function useModalRouting(): UseModalRoutingReturn {
|
|||
return { type: 'register' as const, userType: undefined }
|
||||
}
|
||||
|
||||
// Check login route
|
||||
const loginMatch = matchPath(MODAL_PATTERNS.login, location.pathname)
|
||||
if (loginMatch) {
|
||||
const userType = loginMatch.params.userType as UserType | undefined
|
||||
|
||||
// Validate user type if provided
|
||||
if (userType && VALID_USER_TYPES.includes(userType as typeof VALID_USER_TYPES[number])) {
|
||||
return { type: 'login' as const, userType }
|
||||
}
|
||||
|
||||
// No user type specified - default login
|
||||
return { type: 'login' as const, userType: undefined }
|
||||
}
|
||||
|
||||
// Check invest route
|
||||
if (matchPath(MODAL_PATTERNS.invest, location.pathname)) {
|
||||
return { type: 'investor' as const }
|
||||
|
|
@ -102,6 +118,10 @@ export function useModalRouting(): UseModalRoutingReturn {
|
|||
if (!modalMatch.userType) return null
|
||||
return { type: 'register', userType: modalMatch.userType }
|
||||
|
||||
case 'login':
|
||||
// Login works with or without userType
|
||||
return { type: 'login', userType: modalMatch.userType }
|
||||
|
||||
case 'investor':
|
||||
return { type: 'investor' }
|
||||
|
||||
|
|
@ -132,8 +152,13 @@ export function useModalRouting(): UseModalRoutingReturn {
|
|||
}, [navigate])
|
||||
|
||||
// Open registration modal
|
||||
const openRegister = useCallback((userType: UserType) => {
|
||||
navigate(`/register/${userType}`)
|
||||
const openRegister = useCallback((userType?: UserType) => {
|
||||
navigate(userType ? `/register/${userType}` : '/register')
|
||||
}, [navigate])
|
||||
|
||||
// Open login modal
|
||||
const openLogin = useCallback((userType?: UserType) => {
|
||||
navigate(userType ? `/login/${userType}` : '/login')
|
||||
}, [navigate])
|
||||
|
||||
// Open investor modal
|
||||
|
|
@ -158,6 +183,7 @@ export function useModalRouting(): UseModalRoutingReturn {
|
|||
closeModal,
|
||||
openInfo,
|
||||
openRegister,
|
||||
openLogin,
|
||||
openInvest,
|
||||
openContact,
|
||||
openNewsletter,
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ export interface FormConfig {
|
|||
export type CTAContext =
|
||||
| { type: 'info'; userType: UserType }
|
||||
| { type: 'register'; userType: UserType }
|
||||
| { type: 'login'; userType?: UserType }
|
||||
| { type: 'investor' }
|
||||
| { type: 'contact'; inquiryType?: string }
|
||||
| { type: 'newsletter' }
|
||||
|
|
@ -70,7 +71,7 @@ export type CTAContext =
|
|||
/**
|
||||
* CTA modal type identifier
|
||||
*/
|
||||
export type CTAModalType = 'info' | 'register' | 'investor' | 'contact' | 'newsletter'
|
||||
export type CTAModalType = 'info' | 'register' | 'login' | 'investor' | 'contact' | 'newsletter'
|
||||
|
||||
/**
|
||||
* Info panel configuration (no form, just description + action buttons)
|
||||
|
|
|
|||
|
|
@ -78,6 +78,10 @@ function register(userType?: string): string {
|
|||
return userType ? `/register/${userType}` : '/register'
|
||||
}
|
||||
|
||||
function login(userType?: string): string {
|
||||
return userType ? `/login/${userType}` : '/login'
|
||||
}
|
||||
|
||||
function invest(): string {
|
||||
return '/invest'
|
||||
}
|
||||
|
|
@ -148,6 +152,7 @@ export const Routes = {
|
|||
profileAddType,
|
||||
info,
|
||||
register,
|
||||
login,
|
||||
invest,
|
||||
contact,
|
||||
newsletter,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue