@cogito.ai/cli 0.4.2 → 0.4.4

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/forgot-password/page.tsx

@@ -12,42 +12,93 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
-import { requestPasswordReset } from '@/features/auth'
-import { forgotPasswordSchema, type ForgotPasswordInput } from '@/lib/validations/auth'
+import { sendPasswordResetOTP, resetPasswordWithOTP } from '@/features/auth'
+import { resetPasswordWithOTPSchema, type ResetPasswordWithOTPInput } from '@/lib/validations/auth'
 import type { ActionResult } from '@/core/types/auth'
 
 export default function ForgotPasswordPage() {
   const t = useTranslations('auth')
   const routeParams = useParams<{ locale: string }>()
   const locale = routeParams.locale ?? 'en'
-  const [isSent, setIsSent] = useState(false)
-  const [submittedEmail, setSubmittedEmail] = useState('')
+  const [step, setStep] = useState<'send' | 'verify'>('send')
+  const [email, setEmail] = useState('')
+  const [countdown, setCountdown] = useState(0)
 
-  const { register, handleSubmit, formState: { errors }, reset } = useForm<ForgotPasswordInput>({
-    resolver: zodResolver(forgotPasswordSchema),
-    defaultValues: { email: '' },
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+  } = useForm<ResetPasswordWithOTPInput>({
+    resolver: zodResolver(resetPasswordWithOTPSchema),
+    defaultValues: { email: '', token: '', password: '', confirmPassword: '' },
   })
 
-  const [state, formAction, isPending] = useActionState<ActionResult | null, FormData>(
-    requestPasswordReset,
+  const [sendState, sendAction, isSendPending] = useActionState<ActionResult | null, FormData>(
+    sendPasswordResetOTP,
     null,
   )
 
+  const [verifyState, verifyAction, isVerifyPending] = useActionState<
+    ActionResult | null,
+    FormData
+  >(resetPasswordWithOTP, null)
+
+  useEffect(() => {
+    if (sendState?.error) {
+      toast.error(sendState.error)
+    } else if (sendState?.data !== undefined && sendState.error === null) {
+      toast.success('验证码已发送，请检查邮箱')
+      setStep('verify')
+      startCountdown()
+    }
+  }, [sendState])
+
+  useEffect(() => {
+    if (verifyState?.error) {
+      toast.error(verifyState.error)
+    }
+  }, [verifyState])
+
   useEffect(() => {
-    if (state?.error) toast.error(state.error)
-  }, [state])
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000)
+      return () => clearTimeout(timer)
+    }
+    return undefined
+  }, [countdown])
+
+  function startCountdown() {
+    setCountdown(60)
+  }
+
+  async function onSendOTP(data: { email: string }) {
+    const formData = new FormData()
+    formData.append('email', data.email)
+    setEmail(data.email)
+    setValue('email', data.email)
+    sendAction(formData)
+  }
+
+  async function onResendOTP() {
+    if (countdown > 0) return
+    const formData = new FormData()
+    formData.append('email', email)
+    sendAction(formData)
+  }
 
-  async function onSubmit(data: ForgotPasswordInput) {
+  async function onSubmit(data: ResetPasswordWithOTPInput) {
     const formData = new FormData()
     formData.append('email', data.email)
+    formData.append('token', data.token)
+    formData.append('password', data.password)
+    formData.append('confirmPassword', data.confirmPassword)
     formData.append('locale', locale)
-    await formAction(formData)
-    setSubmittedEmail(data.email)
-    setIsSent(true)
-    reset()
+    verifyAction(formData)
   }
 
-  if (isSent) {
+  if (step === 'send') {
     return (
       <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
         <div className="flex w-full max-w-sm flex-col gap-6">
@@ -61,14 +112,38 @@ export default function ForgotPasswordPage() {
           <Card>
             <CardHeader className="text-center">
               <CardTitle className="text-xl">{t('forgotPasswordTitle')}</CardTitle>
+              <CardDescription>{t('forgotPasswordSubtitle')}</CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <p className="text-center text-sm text-muted-foreground">
-                {t('forgotPasswordSent', { email: submittedEmail })}
-              </p>
-              <Button asChild variant="outline" className="w-full">
-                <Link href={`/${locale}/login`}>{t('backToLogin')}</Link>
-              </Button>
+            <CardContent>
+              <form onSubmit={handleSubmit(onSendOTP)}>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="email">{t('emailLabel')}</FieldLabel>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder={t('emailPlaceholder')}
+                      autoComplete="email"
+                      {...register('email')}
+                    />
+                    {errors.email && (
+                      <FieldDescription className="text-destructive">
+                        {errors.email.message}
+                      </FieldDescription>
+                    )}
+                  </Field>
+                  <Field>
+                    <Button type="submit" className="w-full" disabled={isSendPending}>
+                      {isSendPending ? '\u2026' : t('sendVerificationCode')}
+                    </Button>
+                    <FieldDescription className="text-center">
+                      <Link href={`/${locale}/login`} className="underline underline-offset-4">
+                        {t('backToLogin')}
+                      </Link>
+                    </FieldDescription>
+                  </Field>
+                </FieldGroup>
+              </form>
             </CardContent>
           </Card>
         </div>
@@ -76,6 +151,7 @@ export default function ForgotPasswordPage() {
     )
   }
 
+  // step === 'verify'
   return (
     <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
@@ -88,8 +164,8 @@ export default function ForgotPasswordPage() {
 
         <Card>
           <CardHeader className="text-center">
-            <CardTitle className="text-xl">{t('forgotPasswordTitle')}</CardTitle>
-            <CardDescription>{t('forgotPasswordSubtitle')}</CardDescription>
+            <CardTitle className="text-xl">{t('resetPasswordTitle')}</CardTitle>
+            <CardDescription>{t('resetPasswordSubtitle')}</CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleSubmit(onSubmit)}>
@@ -97,27 +173,80 @@ export default function ForgotPasswordPage() {
               <FieldGroup>
                 <Field>
                   <FieldLabel htmlFor="email">{t('emailLabel')}</FieldLabel>
+                  <Input id="email" type="email" readOnly value={email} {...register('email')} />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="token">{t('verificationCodeLabel')}</FieldLabel>
+                  <Input
+                    id="token"
+                    type="text"
+                    placeholder={t('verificationCodePlaceholder')}
+                    maxLength={6}
+                    {...register('token')}
+                  />
+                  {errors.token && (
+                    <FieldDescription className="text-destructive">
+                      {errors.token.message}
+                    </FieldDescription>
+                  )}
+                  <FieldDescription className="mt-1">
+                    {countdown > 0 ? (
+                      <span className="text-muted-foreground">
+                        {t('resendIn', { seconds: countdown })}
+                      </span>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={onResendOTP}
+                        className="text-sm text-primary hover:underline"
+                      >
+                        {t('resendCode')}
+                      </button>
+                    )}
+                  </FieldDescription>
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="password">{t('newPasswordLabel')}</FieldLabel>
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder={t('newPasswordPlaceholder')}
+                    autoComplete="new-password"
+                    {...register('password')}
+                  />
+                  {errors.password && (
+                    <FieldDescription className="text-destructive">
+                      {errors.password.message}
+                    </FieldDescription>
+                  )}
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="confirmPassword">{t('confirmPasswordLabel')}</FieldLabel>
                   <Input
-                    id="email"
-                    type="email"
-                    placeholder={t('emailPlaceholder')}
-                    autoComplete="email"
-                    {...register('email')}
+                    id="confirmPassword"
+                    type="password"
+                    placeholder={t('confirmPasswordPlaceholder')}
+                    autoComplete="new-password"
+                    {...register('confirmPassword')}
                   />
-                  {errors.email && (
+                  {errors.confirmPassword && (
                     <FieldDescription className="text-destructive">
-                      {errors.email.message}
+                      {errors.confirmPassword.message}
                     </FieldDescription>
                   )}
                 </Field>
                 <Field>
-                  <Button type="submit" className="w-full" disabled={isPending}>
-                    {isPending ? '\u2026' : t('sendResetLink')}
+                  <Button type="submit" className="w-full" disabled={isVerifyPending}>
+                    {isVerifyPending ? '\u2026' : t('resetPassword')}
                   </Button>
                   <FieldDescription className="text-center">
-                    <Link href={`/${locale}/login`} className="underline underline-offset-4">
-                      {t('backToLogin')}
-                    </Link>
+                    <button
+                      type="button"
+                      onClick={() => setStep('send')}
+                      className="text-sm text-muted-foreground hover:text-foreground"
+                    >
+                      {t('changeEmail')}
+                    </button>
                   </FieldDescription>
                 </Field>
               </FieldGroup>

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/login/page.tsx

@@ -28,7 +28,10 @@ export default function LoginPage() {
   const routeParams = useParams<{ locale: string }>()
   const locale = routeParams.locale ?? 'en'
 
-  const { register, formState: { errors } } = useForm<SignInInput>({
+  const {
+    register,
+    formState: { errors },
+  } = useForm<SignInInput>({
     resolver: zodResolver(signInSchema),
     defaultValues: { email: '', password: '' },
   })
@@ -41,7 +44,10 @@ export default function LoginPage() {
 
   async function handleGithub() {
     const result = await signInWithGithubForLocale(locale)
-    if (result.error) { toast.error(result.error); return }
+    if (result.error) {
+      toast.error(result.error)
+      return
+    }
     if (result.data?.url) router.push(result.data.url)
   }
 
@@ -72,7 +78,11 @@ export default function LoginPage() {
                       className="w-full"
                       onClick={handleGithub}
                     >
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="size-4">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        className="size-4"
+                      >
                         <path
                           d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                           fill="currentColor"

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/reset-password/page.tsx

@@ -23,7 +23,10 @@ export default function ResetPasswordPage() {
   const locale = routeParams.locale ?? 'en'
   const error = searchParams.get('error')
 
-  const { register, formState: { errors } } = useForm<ResetPasswordInput>({
+  const {
+    register,
+    formState: { errors },
+  } = useForm<ResetPasswordInput>({
     resolver: zodResolver(resetPasswordSchema),
     defaultValues: { password: '', confirmPassword: '' },
   })

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/signup/page.tsx

@@ -11,12 +11,7 @@ import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from '@/components/ui/field'
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { signUp } from '@/features/auth'
 import { signUpSchema, type SignUpInput } from '@/lib/validations/auth'
 import type { ActionResult } from '@/core/types/auth'
@@ -28,15 +23,18 @@ export default function SignupPage() {
   const locale = routeParams.locale ?? 'en'
   const [verifyEmail, setVerifyEmail] = useState<string | null>(null)
 
-  const { register, formState: { errors } } = useForm<SignUpInput>({
+  const {
+    register,
+    formState: { errors },
+  } = useForm<SignUpInput>({
     resolver: zodResolver(signUpSchema),
     defaultValues: { email: '', password: '', confirmPassword: '' },
   })
 
-  const [state, formAction, isPending] = useActionState<ActionResult<SignUpSuccessData> | null, FormData>(
-    signUp,
-    null,
-  )
+  const [state, formAction, isPending] = useActionState<
+    ActionResult<SignUpSuccessData> | null,
+    FormData
+  >(signUp, null)
 
   useEffect(() => {
     if (state?.error) toast.error(state.error)
@@ -56,9 +54,7 @@ export default function SignupPage() {
           <Card>
             <CardHeader className="text-center">
               <CardTitle className="text-xl">{t('verifyEmailTitle')}</CardTitle>
-              <CardDescription>
-                {t('verifyEmailMessage', { email: verifyEmail })}
-              </CardDescription>
+              <CardDescription>{t('verifyEmailMessage', { email: verifyEmail })}</CardDescription>
             </CardHeader>
             <CardContent>
               <div className="text-center">
@@ -158,9 +154,14 @@ export default function SignupPage() {
           </Card>
           <FieldDescription className="px-6 text-center">
             {t('termsText')}{' '}
-            <Link href={`/${locale}/terms`} className="underline underline-offset-4">{t('termsLink')}</Link>
-            {' '}{t('andText')}{' '}
-            <Link href={`/${locale}/privacy`} className="underline underline-offset-4">{t('privacyLink')}</Link>.
+            <Link href={`/${locale}/terms`} className="underline underline-offset-4">
+              {t('termsLink')}
+            </Link>{' '}
+            {t('andText')}{' '}
+            <Link href={`/${locale}/privacy`} className="underline underline-offset-4">
+              {t('privacyLink')}
+            </Link>
+            .
           </FieldDescription>
         </div>
       </div>

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/dashboard/page.tsx

@@ -8,11 +8,7 @@ import { getCurrentUser } from '@/features/auth/server'
 
 import data from '@/components/dashboard/data.json'
 
-export default async function DashboardPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function DashboardPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   const user = await getCurrentUser()
 

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/payment/[paymentId]/page.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { usePaymentStatus } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function PaymentStatusPage() {
+  const t = useTranslations('payment')
+  const router = useRouter()
+  const params = useParams()
+  const paymentId = params.paymentId as string
+
+  const [paymentMethod, setPaymentMethod] = useState<string>('')
+  const [orderNo, setOrderNo] = useState<string>('')
+
+  useEffect(() => {
+    async function fetchPayment() {
+      const supabase = createBrowserClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      )
+      const { data } = await supabase.from('payments').select('*').eq('id', paymentId).single()
+
+      if (data) {
+        setPaymentMethod(data.payment_method)
+        setOrderNo(data.order_no)
+      }
+    }
+    fetchPayment()
+  }, [paymentId])
+
+  const { data: paymentStatus } = usePaymentStatus(orderNo, paymentMethod, {
+    enabled: !!orderNo && !!paymentMethod,
+  })
+
+  const status = paymentStatus?.status || 'pending'
+
+  return (
+    <div className="container mx-auto max-w-2xl px-4 py-10">
+      <h1 className="text-2xl font-bold mb-6">{t('statusTitle')}</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            {t('paymentStatus')}
+            <Badge
+              variant={
+                status === 'paid' ? 'default' : status === 'failed' ? 'destructive' : 'secondary'
+              }
+            >
+              {t(status)}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {status === 'paid' && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl">✓</div>
+              <p className="text-lg font-medium">{t('paymentSuccess')}</p>
+              <Button onClick={() => router.push('/dashboard')}>{t('goToDashboard')}</Button>
+            </div>
+          )}
+
+          {status === 'failed' && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl">✗</div>
+              <p className="text-lg font-medium">{t('paymentFailed')}</p>
+              <Button onClick={() => router.push('/pricing')}>{t('tryAgain')}</Button>
+            </div>
+          )}
+
+          {status === 'pending' && (
+            <div className="text-center space-y-4">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto" />
+              <p className="text-lg font-medium">{t('paymentPending')}</p>
+              <p className="text-sm text-muted-foreground">{t('paymentPendingDescription')}</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/payment/checkout/page.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { useSubscriptionPlan } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function CheckoutPage() {
+  const t = useTranslations('payment')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const planCode = searchParams.get('plan') || ''
+  const cycle = (searchParams.get('cycle') as 'monthly' | 'yearly') || 'monthly'
+
+  const { data: plan, isLoading } = useSubscriptionPlan(planCode)
+  const [paymentMethod, setPaymentMethod] = useState<'alipay' | 'wechat'>('alipay')
+  const [coupon, setCoupon] = useState('')
+  const [couponError, setCouponError] = useState('')
+  const [isProcessing, setIsProcessing] = useState(false)
+
+  if (!planCode) {
+    router.push('/pricing')
+    return null
+  }
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto max-w-2xl px-4 py-10">
+        <div className="flex justify-center py-20">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      </div>
+    )
+  }
+
+  const amount = cycle === 'monthly' ? plan?.price_monthly : plan?.price_yearly
+
+  const handleSubmit = async () => {
+    setIsProcessing(true)
+    try {
+      // Validate coupon (stub)
+      if (coupon && coupon !== 'DISCOUNT10') {
+        setCouponError(t('invalidCoupon'))
+        setIsProcessing(false)
+        return
+      }
+      setCouponError('')
+
+      const supabase = createBrowserClient(
+        process.env.NEXT_PUBLIC_SUPABASE_URL!,
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      )
+      const {
+        data: { user },
+      } = await supabase.auth.getUser()
+      if (!user) {
+        router.push('/login')
+        return
+      }
+
+      // Create payment record
+      const res = await fetch('/api/payments/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userId: user.id,
+          planId: plan?.id,
+          amount,
+          paymentMethod,
+          billingCycle: cycle,
+        }),
+      })
+
+      if (!res.ok) throw new Error('Failed to create payment')
+      const payment = await res.json()
+
+      // Initiate payment
+      if (paymentMethod === 'alipay') {
+        const { initiateAlipayPayment } = await import('@/features/subscription/alipay/client')
+        await initiateAlipayPayment(payment.id, user.id)
+      } else {
+        const { initiateWechatPayment } = await import('@/features/subscription/wechat/client')
+        const result = await initiateWechatPayment(payment.id, user.id)
+        if (result.type === 'qrcode') {
+          router.push(`/payment/${payment.id}`)
+        }
+      }
+    } catch (error) {
+      setCouponError(t('paymentError'))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto max-w-2xl px-4 py-10">
+      <h1 className="text-2xl font-bold mb-6">{t('checkoutTitle')}</h1>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('orderSummary')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex justify-between">
+            <span>{t('plan')}</span>
+            <span className="font-medium">{plan?.plan_name}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>{t('billingCycle')}</span>
+            <span className="font-medium">{cycle === 'monthly' ? t('monthly') : t('yearly')}</span>
+          </div>
+          <div className="flex justify-between text-lg font-bold">
+            <span>{t('total')}</span>
+            <span>¥{((amount || 0) / 100).toFixed(2)}</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('paymentMethod')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup
+            value={paymentMethod}
+            onValueChange={(v) => setPaymentMethod(v as 'alipay' | 'wechat')}
+            className="space-y-3"
+          >
+            <div className="flex items-center space-x-2 border rounded-lg p-4">
+              <RadioGroupItem value="alipay" id="alipay" />
+              <Label htmlFor="alipay" className="flex-1 cursor-pointer">
+                {t('alipay')}
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2 border rounded-lg p-4">
+              <RadioGroupItem value="wechat" id="wechat" />
+              <Label htmlFor="wechat" className="flex-1 cursor-pointer">
+                {t('wechatPay')}
+              </Label>
+            </div>
+          </RadioGroup>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t('coupon')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Input
+            placeholder={t('couponPlaceholder')}
+            value={coupon}
+            onChange={(e) => setCoupon(e.target.value)}
+          />
+          {couponError && <p className="text-sm text-destructive mt-2">{couponError}</p>}
+        </CardContent>
+      </Card>
+
+      <Button className="w-full" size="lg" onClick={handleSubmit} disabled={isProcessing}>
+        {isProcessing ? t('processing') : t('confirmPayment')}
+      </Button>
+    </div>
+  )
+}