refactor: optimize intl messages for contact form

messages/en.json

@@ -55,15 +55,22 @@
     "title": "Contact",
     "description": "We'll help you find the right plan for your business",
     "subtitle": "We'll help you find the right plan for your business",
-    "formTitle": "Contact Us",
-    "formDescription": "If you have any questions or feedback, please reach out to our team",
-    "name": "Name",
-    "email": "Email",
-    "message": "Message",
-    "submit": "Submit",
-    "submitting": "Submitting...",
-    "success": "Message sent successfully",
-    "fail": "Failed to send message"
+    "form": {
+      "title": "Contact Us",
+      "description": "If you have any questions or feedback, please reach out to our team",
+      "name": "Name",
+      "email": "Email",
+      "message": "Message",
+      "submit": "Submit",
+      "submitting": "Submitting...",
+      "success": "Message sent successfully",
+      "fail": "Failed to send message",
+      "nameMinLength": "Name must be at least 3 characters",
+      "nameMaxLength": "Name must not exceed 30 characters",
+      "emailValidation": "Please enter a valid email address",
+      "messageMinLength": "Message must be at least 10 characters",
+      "messageMaxLength": "Message must not exceed 500 characters"
+    }
   },
   "WaitlistPage": {
     "title": "Waitlist",

messages/zh.json

@@ -49,15 +49,22 @@
     "title": "联系我们",
     "description": "我们帮助您找到合适的计划",
     "subtitle": "我们帮助您找到合适的计划",
-    "formTitle": "联系我们",
-    "formDescription": "如果您有任何问题或反馈，欢迎联系我们的团队",
-    "name": "姓名",
-    "email": "邮箱",
-    "message": "消息",
-    "submit": "提交",
-    "submitting": "提交中...",
-    "success": "消息发送成功",
-    "fail": "消息发送失败"
+    "form": {
+      "title": "联系我们",
+      "description": "如果您有任何问题或反馈，请随时联系我们的团队",
+      "name": "姓名",
+      "email": "邮箱",
+      "message": "消息",
+      "submit": "提交",
+      "submitting": "提交中...",
+      "success": "消息发送成功",
+      "fail": "消息发送失败",
+      "nameMinLength": "姓名必须至少包含 3 个字符",
+      "nameMaxLength": "姓名必须不超过 30 个字符",
+      "emailValidation": "请输入有效的邮箱地址",
+      "messageMinLength": "消息必须至少包含 10 个字符",
+      "messageMaxLength": "消息必须不超过 500 个字符"
+    }
   },
   "WaitlistPage": {
     "title": "邮件列表",
@@ -371,25 +378,25 @@
     }
   },
   "Mail": {
-		"common": {
+    "common": {
       "team": "MkSaaS 团队",
       "copyright": "©️ {year} 版权所有。"
-		},
-		"verifyEmail": {
-			"title": "你好，{name}。",
-			"body": "请点击下面的链接验证您的邮箱地址。",
-			"confirmEmail": "确认邮箱",
-			"subject": "验证您的邮箱"
-		},
-		"forgotPassword": {
-			"title": "你好，{name}。",
-			"body": "请点击下面的链接重置您的密码。",
-			"resetPassword": "重置密码",
-			"subject": "重置您的密码"
-		},
-		"subscribeNewsletter": {
-			"body": "感谢您订阅我们的邮件列表，我们将为您提供最新的新闻和更新。",
-			"subject": "感谢您的订阅"
-		}
-	}
+    },
+    "verifyEmail": {
+      "title": "你好，{name}。",
+      "body": "请点击下面的链接验证您的邮箱地址。",
+      "confirmEmail": "确认邮箱",
+      "subject": "验证您的邮箱"
+    },
+    "forgotPassword": {
+      "title": "你好，{name}。",
+      "body": "请点击下面的链接重置您的密码。",
+      "resetPassword": "重置密码",
+      "subject": "重置您的密码"
+    },
+    "subscribeNewsletter": {
+      "body": "感谢您订阅我们的邮件列表，我们将为您提供最新的新闻和更新。",
+      "subject": "感谢您的订阅"
+    }
+  }
 }

src/components/contact/contact-form-card.tsx

@@ -29,7 +29,7 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 export function ContactFormCard() {
-  const t = useTranslations('ContactPage');
+  const t = useTranslations('ContactPage.form');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | undefined>('');
 
@@ -37,15 +37,15 @@ export function ContactFormCard() {
   const formSchema = z.object({
     name: z
       .string()
-      .min(3, { message: 'Name must be at least 3 characters' })
-      .max(30, { message: 'Name must not exceed 30 characters' }),
+      .min(3, t('nameMinLength'))
+      .max(30, t('nameMaxLength')),
     email: z
       .string()
-      .email({ message: 'Please enter a valid email address' }),
+      .email(t('emailValidation')),
     message: z
       .string()
-      .min(10, { message: 'Message must be at least 10 characters' })
-      .max(500, { message: 'Message must not exceed 500 characters' }),
+      .min(10, t('messageMinLength'))
+      .max(500, t('messageMaxLength')),
   });
 
   // Initialize the form
@@ -88,10 +88,10 @@ export function ContactFormCard() {
     <Card className="mx-auto max-w-lg overflow-hidden">
       <CardHeader>
         <CardTitle className="text-lg font-bold">
-          {t('formTitle')}
+          {t('title')}
         </CardTitle>
         <CardDescription>
-          {t('formDescription')}
+          {t('description')}
         </CardDescription>
       </CardHeader>
       <Form {...form}>

src/mail/emails/contact-message.tsx

@@ -1,32 +0,0 @@
-import { defaultMessages } from '@/i18n/messages';
-import { routing } from '@/i18n/routing';
-import EmailLayout from '@/mail/components/email-layout';
-import type { BaseEmailProps } from '@/mail/types';
-import { Heading, Text } from '@react-email/components';
-import { createTranslator } from 'use-intl/core';
-
-interface SubscribeNewsletterProps extends BaseEmailProps {
-}
-
-export function SubscribeNewsletter({ locale, messages }: SubscribeNewsletterProps) {
-  const t = createTranslator({
-    locale,
-    messages,
-  });
-
-  return (
-    <EmailLayout locale={locale} messages={messages}>
-      <Heading className="text-xl">
-        {t('Mail.subscribeNewsletter.subject')}
-      </Heading>
-      <Text>{t('Mail.subscribeNewsletter.body')}</Text>
-    </EmailLayout>
-  );
-}
-
-SubscribeNewsletter.PreviewProps = {
-  locale: routing.defaultLocale,
-  messages: defaultMessages,
-};
-
-export default SubscribeNewsletter;