-
+
@@ -119,7 +119,7 @@ export default function Register() {
-
+
@@ -144,18 +144,18 @@ export default function Register() {
{isLoading ? (
<>
- Creating account...
+ {t('register.creating')}
) : (
- 'Sign up'
+ t('register.submit')
)}
- Already have an account?{' '}
+ {t('register.has_account')}{' '}
- Sign in
+ {t('register.login')}
diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
index 3aaa426..27a896b 100644
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@@ -1,11 +1,13 @@
import { useState, useEffect } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'
import { toast } from 'react-hot-toast'
+import { useTranslation } from 'react-i18next'
import { apiClient } from '../api/axios'
import type { ApiResponse } from '../types'
import { Mail, ShieldCheck, Loader2, AlertCircle, RefreshCw } from 'lucide-react'
export default function VerifyEmail() {
+ const { t } = useTranslation()
const [searchParams] = useSearchParams()
const email = searchParams.get('email') || ''
const [otp, setOtp] = useState('')
@@ -34,14 +36,14 @@ export default function VerifyEmail() {
const { data } = await apiClient.post
>('/auth/verify-email', { email, otp })
if (data.success) {
setSuccess(true)
- toast.success('Email verified! You can now sign in.')
+ toast.success(t('verify_email.success_title') + ' ' + t('verify_email.success_subtitle'))
setTimeout(() => navigate('/login'), 2000)
} else {
- setError(data.message || 'Verification failed')
+ setError(data.message || t('verify_email.error_default'))
}
} catch (err: any) {
- setError(err.response?.data?.message || 'Invalid or expired OTP. Please try again.')
- toast.error('Verification failed')
+ setError(err.response?.data?.message || t('verify_email.error_default'))
+ toast.error(t('verify_email.error_default'))
} finally {
setIsLoading(false)
}
@@ -53,10 +55,10 @@ export default function VerifyEmail() {
setIsResending(true)
try {
await apiClient.post>('/auth/resend-otp', { email })
- toast.success('New verification code sent!')
+ toast.success(t('verify_email.resend_success'))
setCooldown(60)
} catch (err: any) {
- toast.error(err.response?.data?.message || 'Failed to resend code')
+ toast.error(err.response?.data?.message || t('common.error'))
} finally {
setIsResending(false)
}
@@ -68,8 +70,8 @@ export default function VerifyEmail() {
- Email Verified!
- Redirecting to sign in...
+ {t('verify_email.success_title')}
+ {t('verify_email.success_subtitle')}
)
}
@@ -80,9 +82,9 @@ export default function VerifyEmail() {
-
Verify your email
+
{t('verify_email.title')}
- We sent a 6-digit code to {email}
+ {t('verify_email.subtitle', { email })}
@@ -95,7 +97,7 @@ export default function VerifyEmail() {
diff --git a/src/pages/VipUpgrade.tsx b/src/pages/VipUpgrade.tsx
index ae42c6f..897ceae 100644
--- a/src/pages/VipUpgrade.tsx
+++ b/src/pages/VipUpgrade.tsx
@@ -4,62 +4,64 @@ import type { ApiResponse } from '../types'
import { useAuthStore } from '../store/useAuthStore'
import { Crown, CheckCircle2, Shield, Zap, Info, Loader2, AlertCircle, Star, Sparkles, Clock } from 'lucide-react'
import { Navigate } from 'react-router-dom'
-
-const PACKAGES = [
- {
- code: 'VIP_1_MONTH',
- name: '1 Month',
- price: 50000,
- perMonth: 50000,
- duration: '30 days',
- badge: null,
- popular: false,
- },
- {
- code: 'VIP_3_MONTHS',
- name: '3 Months',
- price: 135000,
- perMonth: 45000,
- duration: '90 days',
- badge: 'Save 10%',
- popular: true,
- },
- {
- code: 'VIP_1_YEAR',
- name: '1 Year',
- price: 450000,
- perMonth: 37500,
- duration: '365 days',
- badge: 'Save 25%',
- popular: false,
- },
-] as const
-
-const FEATURES = [
- 'Bypass all ad interstitials automatically',
- 'Unlimited short links creation',
- 'Priority email support 24/7',
- 'Advanced link analytics (Coming soon)',
-]
-
-function formatDateTime(dateStr: string): string {
- return new Date(dateStr).toLocaleDateString('vi-VN', {
- day: '2-digit', month: '2-digit', year: 'numeric',
- hour: '2-digit', minute: '2-digit', second: '2-digit',
- })
-}
-
-function getRemainingDays(expiresAt: string): number {
- const diffMs = new Date(expiresAt).getTime() - Date.now()
- return Math.max(0, Math.ceil(diffMs / (1000 * 60 * 60 * 24)))
-}
+import { useTranslation } from 'react-i18next'
export default function VipUpgrade() {
+ const { t, i18n } = useTranslation()
const { user, setAuth } = useAuthStore()
const [selectedPackage, setSelectedPackage] = useState('VIP_3_MONTHS')
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState('')
+ const PACKAGES = [
+ {
+ code: 'VIP_1_MONTH',
+ name: t('vip.packages.1_month'),
+ price: 50000,
+ perMonth: 50000,
+ duration: t('vip.packages.duration', { count: 30 }),
+ badge: null,
+ popular: false,
+ },
+ {
+ code: 'VIP_3_MONTHS',
+ name: t('vip.packages.3_months'),
+ price: 135000,
+ perMonth: 45000,
+ duration: t('vip.packages.duration', { count: 90 }),
+ badge: t('vip.packages.save', { percent: 10 }),
+ popular: true,
+ },
+ {
+ code: 'VIP_1_YEAR',
+ name: t('vip.packages.1_year'),
+ price: 450000,
+ perMonth: 37500,
+ duration: t('vip.packages.duration', { count: 365 }),
+ badge: t('vip.packages.save', { percent: 25 }),
+ popular: false,
+ },
+ ] as const
+
+ const FEATURES = [
+ t('vip.benefits.feature_ads'),
+ t('vip.benefits.feature_links'),
+ t('vip.benefits.feature_support'),
+ t('vip.benefits.feature_analytics'),
+ ]
+
+ function formatDateTime(dateStr: string): string {
+ return new Date(dateStr).toLocaleDateString(i18n.language === 'en' ? 'en-US' : 'vi-VN', {
+ day: '2-digit', month: '2-digit', year: 'numeric',
+ hour: '2-digit', minute: '2-digit', second: '2-digit',
+ })
+ }
+
+ function getRemainingDays(expiresAt: string): number {
+ const diffMs = new Date(expiresAt).getTime() - Date.now()
+ return Math.max(0, Math.ceil(diffMs / (1000 * 60 * 60 * 24)))
+ }
+
// Refresh user data from backend on mount to get latest vipExpiresAt
useEffect(() => {
const fetchProfile = async () => {
@@ -100,24 +102,24 @@ export default function VipUpgrade() {
if (data.success && data.data) {
window.location.href = data.data
} else {
- setError(data.message || 'Failed to initialize payment.')
+ setError(data.message || t('vip.checkout.error_init'))
}
} catch (err: any) {
- setError(err.response?.data?.message || 'An error occurred while creating payment link.')
+ setError(err.response?.data?.message || t('vip.checkout.error_default'))
} finally {
setIsLoading(false)
}
}
const formatPrice = (price: number) => {
- return price.toLocaleString('vi-VN')
+ return price.toLocaleString(i18n.language === 'en' ? 'en-US' : 'vi-VN')
}
return (
-
Upgrade Your Experience
-
Get exclusive features, bypass ads on all your short links, and supercharge your LinkForge account.
+
{t('vip.title')}
+
{t('vip.subtitle')}
{/* VIP Status Banner */}
@@ -127,16 +129,16 @@ export default function VipUpgrade() {
-
VIP Active
+
{t('vip.status.active')}
{user.vipExpiresAt ? (
- Expires: {formatDateTime(user.vipExpiresAt)}
- ({getRemainingDays(user.vipExpiresAt)} days remaining)
+ {t('vip.status.expires', { date: formatDateTime(user.vipExpiresAt) })}
+ {t('vip.status.remaining', { count: getRemainingDays(user.vipExpiresAt) })}
) : (
- Permanent — No expiration
+ {t('vip.status.permanent')}
)}
@@ -168,7 +170,7 @@ export default function VipUpgrade() {
{pkg.popular && (
- Popular
+ {t('vip.packages.popular')}
)}
@@ -181,11 +183,11 @@ export default function VipUpgrade() {
{formatPrice(pkg.price)}
- VND
+ {t('vip.checkout.currency')}
{pkg.code !== 'VIP_1_MONTH' && (
- ~{formatPrice(pkg.perMonth)} VND / month
+ {t('vip.packages.per_month', { price: formatPrice(pkg.perMonth) })}
)}
@@ -200,7 +202,7 @@ export default function VipUpgrade() {
)}