@allbluecn/web-app 0.11.0 → 0.11.2

package/src/server/email/templates/auth/reset-password.tsx

@@ -0,0 +1,58 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface ResetPasswordProps {
+  locale: EmailLocale
+  url: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '重置你的密码',
+    preview: '重置你的 AllBlue 密码',
+    heading: '重置密码',
+    greeting: '你好：',
+    body: '我们收到了重置你 AllBlue 账户密码的请求。请点击下方按钮设置新密码（链接 15 分钟内有效，且只能使用一次）。如果按钮无法点击，请复制以下链接到浏览器打开：',
+    cta: '重置密码',
+    ignore: '如果这不是你发起的请求，你的密码仍然安全，无需任何操作。',
+    urlLabel: '链接：',
+  },
+  en: {
+    subject: 'Reset your password',
+    preview: 'Reset your AllBlue password',
+    heading: 'Reset password',
+    greeting: 'Hello,',
+    body: 'We received a request to reset your AllBlue password. Click the button below to set a new one (the link is valid for 15 minutes and can be used only once). If the button does not work, copy this link into your browser:',
+    cta: 'Reset password',
+    ignore: 'If you did not request this, your password is safe — no action is needed.',
+    urlLabel: 'Link:',
+  },
+} as const
+
+function ResetPasswordEmail({ locale, url, unsubscribeUrl }: ResetPasswordProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mt-0 mb-6 font-sans">{t.greeting}</Text>
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={url} label={t.cta} />
+      </Section>
+      <Text className="text-sm text-fg-3 break-all font-sans">{t.urlLabel} {url}</Text>
+      <Text className="text-sm text-fg-3 mt-8 font-sans">{t.ignore}</Text>
+    </EmailLayout>
+  )
+}
+
+export function registerResetPasswordTemplate() {
+  registerTemplate({
+    key: 'auth.reset-password',
+    category: 'auth',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: ResetPasswordEmail,
+  })
+}

package/src/server/email/templates/auth/verify-email.tsx

@@ -0,0 +1,59 @@
+import { Link, Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface VerifyEmailProps {
+  locale: EmailLocale
+  url: string
+  username: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '验证您的邮箱',
+    preview: '验证您的 AllBlue 邮箱地址',
+    heading: '我们快完成了！',
+    greeting: (u: string) => `你好，${u}：`,
+    body: '感谢注册 AllBlue。请点击下方按钮验证您的邮箱地址（24 小时内有效）。如果按钮无法点击，请复制以下链接到浏览器打开：',
+    cta: '验证邮箱',
+    ignore: '如果这不是你的操作，请忽略本邮件。',
+    urlLabel: '链接：',
+  },
+  en: {
+    subject: 'Verify your email',
+    preview: 'Verify your AllBlue email address',
+    heading: "We're almost there!",
+    greeting: (u: string) => `Hi ${u},`,
+    body: 'Thank you for signing up for AllBlue. Click the button below to verify your email address (link valid for 24 hours). If the button does not work, copy this link into your browser:',
+    cta: 'Verify email',
+    ignore: 'If this was not you, please ignore this email.',
+    urlLabel: 'Link:',
+  },
+} as const
+
+function VerifyEmailEmail({ locale, url, username, unsubscribeUrl }: VerifyEmailProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mt-0 mb-6 font-sans">{t.greeting(username)}</Text>
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={url} label={t.cta} />
+      </Section>
+      <Text className="text-sm text-fg-3 break-all font-sans">{t.urlLabel} {url}</Text>
+      <Text className="text-sm text-fg-3 mt-8 font-sans">{t.ignore}</Text>
+    </EmailLayout>
+  )
+}
+
+export function registerVerifyEmailTemplate() {
+  registerTemplate({
+    key: 'auth.verify-email',
+    category: 'auth',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: VerifyEmailEmail,
+  })
+}

package/src/server/email/templates/auth/welcome.tsx

@@ -0,0 +1,49 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface WelcomeProps {
+  locale: EmailLocale
+  dashboardUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '邮箱验证成功，欢迎加入 AllBlue',
+    preview: '欢迎加入 AllBlue',
+    heading: '欢迎加入 AllBlue',
+    body: '你的邮箱已验证成功。现在可以完整使用 AllBlue 的全部功能了。',
+    cta: '进入工作台',
+  },
+  en: {
+    subject: 'Email verified — welcome to AllBlue',
+    preview: 'Welcome to AllBlue',
+    heading: 'Welcome to AllBlue',
+    body: 'Your email has been verified. You now have full access to AllBlue.',
+    cta: 'Go to dashboard',
+  },
+} as const
+
+function WelcomeEmail({ locale, dashboardUrl, unsubscribeUrl }: WelcomeProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={dashboardUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerWelcomeTemplate() {
+  registerTemplate({
+    key: 'auth.welcome',
+    category: 'auth',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: WelcomeEmail,
+  })
+}

package/src/server/email/templates/billing/payment-receipt.tsx

@@ -0,0 +1,51 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface PaymentReceiptProps {
+  locale: EmailLocale
+  planName: string
+  periodEnd: string
+  dashboardUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '支付成功——AllBlue 订阅',
+    preview: '你的支付已成功',
+    heading: '支付成功',
+    body: (plan: string, end: string) => `你的 AllBlue「${plan}」订阅支付成功，当前周期至 ${end}。`,
+    cta: '查看订阅',
+  },
+  en: {
+    subject: 'Payment received — AllBlue subscription',
+    preview: 'Your payment was successful',
+    heading: 'Payment received',
+    body: (plan: string, end: string) => `Your AllBlue "${plan}" subscription payment was successful. Current period ends ${end}.`,
+    cta: 'View subscription',
+  },
+} as const
+
+function PaymentReceiptEmail({ locale, planName, periodEnd, dashboardUrl, unsubscribeUrl }: PaymentReceiptProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(planName, periodEnd)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={dashboardUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerPaymentReceiptTemplate() {
+  registerTemplate({
+    key: 'billing.payment-receipt',
+    category: 'billing',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: PaymentReceiptEmail,
+  })
+}

package/src/server/email/templates/billing/subscription-canceled.tsx

@@ -0,0 +1,51 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface SubscriptionCanceledProps {
+  locale: EmailLocale
+  planName: string
+  endDate: string
+  dashboardUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '订阅已取消',
+    preview: '你的订阅已取消',
+    heading: '订阅已取消',
+    body: (plan: string, end: string) => `你的 AllBlue「${plan}」订阅已取消，服务将持续至 ${end}。可随时重新订阅。`,
+    cta: '重新订阅',
+  },
+  en: {
+    subject: 'Subscription canceled',
+    preview: 'Your subscription was canceled',
+    heading: 'Canceled',
+    body: (plan: string, end: string) => `Your AllBlue "${plan}" subscription was canceled. Service continues until ${end}. You can resubscribe any time.`,
+    cta: 'Resubscribe',
+  },
+} as const
+
+function SubscriptionCanceledEmail({ locale, planName, endDate, dashboardUrl, unsubscribeUrl }: SubscriptionCanceledProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(planName, endDate)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={dashboardUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerSubscriptionCanceledTemplate() {
+  registerTemplate({
+    key: 'billing.subscription-canceled',
+    category: 'billing',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: SubscriptionCanceledEmail,
+  })
+}

package/src/server/email/templates/billing/subscription-ending.tsx

@@ -0,0 +1,51 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface SubscriptionEndingProps {
+  locale: EmailLocale
+  planName: string
+  endDate: string
+  dashboardUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '你的订阅即将到期',
+    preview: '订阅即将到期',
+    heading: '即将到期',
+    body: (plan: string, end: string) => `你的 AllBlue「${plan}」订阅将于 ${end} 到期，请及时续订。`,
+    cta: '续订',
+  },
+  en: {
+    subject: 'Your subscription is ending soon',
+    preview: 'Subscription ending soon',
+    heading: 'Ending soon',
+    body: (plan: string, end: string) => `Your AllBlue "${plan}" subscription ends on ${end}. Renew to keep your access.`,
+    cta: 'Renew',
+  },
+} as const
+
+function SubscriptionEndingEmail({ locale, planName, endDate, dashboardUrl, unsubscribeUrl }: SubscriptionEndingProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(planName, endDate)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={dashboardUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerSubscriptionEndingTemplate() {
+  registerTemplate({
+    key: 'billing.subscription-ending',
+    category: 'billing',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: SubscriptionEndingEmail,
+  })
+}

package/src/server/email/templates/notification/mirror.tsx

@@ -0,0 +1,50 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface NotificationMirrorProps {
+  locale: EmailLocale
+  title: string
+  body?: string
+  link?: string
+  linkLabel?: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '你有一条新通知',
+    defaultLinkLabel: '查看详情',
+  },
+  en: {
+    subject: 'You have a new notification',
+    defaultLinkLabel: 'View details',
+  },
+} as const
+
+function NotificationMirrorEmail({ locale, title, body, link, linkLabel, unsubscribeUrl }: NotificationMirrorProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={title} heading={title} unsubscribeUrl={unsubscribeUrl} footerKind="notification">
+      {body ? (
+        <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{body}</Text>
+      ) : null}
+      {link ? (
+        <Section className="mb-6 text-center">
+          <EmailButton href={link} label={linkLabel ?? t.defaultLinkLabel} />
+        </Section>
+      ) : null}
+    </EmailLayout>
+  )
+}
+
+export function registerNotificationMirrorTemplate() {
+  registerTemplate({
+    key: 'notification.mirror',
+    category: 'notification',
+    transactional: false,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: NotificationMirrorEmail,
+  })
+}

package/src/server/email/templates/product/changelog-confirm.tsx

@@ -0,0 +1,53 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface ChangelogConfirmProps {
+  locale: EmailLocale
+  confirmUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '确认订阅 AllBlue 开发更新',
+    preview: '请确认订阅 AllBlue 开发更新',
+    heading: '确认订阅',
+    body: '感谢订阅 AllBlue 开发更新。请点击下方按钮确认订阅（链接 24 小时内有效）。无营销邮件，可随时退订。',
+    cta: '确认订阅',
+    urlLabel: '如果按钮无法点击，请复制以下链接：',
+  },
+  en: {
+    subject: 'Confirm your AllBlue updates subscription',
+    preview: 'Confirm your AllBlue developer updates subscription',
+    heading: 'Confirm subscription',
+    body: 'Thanks for subscribing to AllBlue developer updates. Click the button below to confirm your subscription (link valid for 24 hours). No marketing emails. Unsubscribe any time.',
+    cta: 'Confirm subscription',
+    urlLabel: 'If the button does not work, copy this link:',
+  },
+} as const
+
+function ChangelogConfirmEmail({ locale, confirmUrl, unsubscribeUrl }: ChangelogConfirmProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="notification">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={confirmUrl} label={t.cta} />
+      </Section>
+      <Text className="text-sm text-fg-3 break-all font-sans">{t.urlLabel}</Text>
+      <Text className="text-sm text-fg-3 break-all font-sans">{confirmUrl}</Text>
+    </EmailLayout>
+  )
+}
+
+export function registerChangelogConfirmTemplate() {
+  registerTemplate({
+    key: 'product.changelog-confirm',
+    category: 'product',
+    transactional: false,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: ChangelogConfirmEmail,
+  })
+}

package/src/server/email/templates/product/changelog-release.tsx

@@ -0,0 +1,65 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface ChangelogReleaseProps {
+  locale: EmailLocale
+  version: string
+  highlights: string
+  detailUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: 'AllBlue v{version} 发布',
+    preview: 'AllBlue 新版本发布',
+    heading: '新版本发布',
+    body: (version: string) => `AllBlue v${version} 已发布。`,
+    highlightsLabel: '本次更新要点：',
+    cta: '查看更新日志',
+  },
+  en: {
+    subject: 'AllBlue v{version} released',
+    preview: 'New AllBlue version released',
+    heading: 'New release',
+    body: (version: string) => `AllBlue v${version} has been released.`,
+    highlightsLabel: 'Highlights:',
+    cta: 'View changelog',
+  },
+} as const
+
+function ChangelogReleaseEmail({ locale, version, highlights, detailUrl, unsubscribeUrl }: ChangelogReleaseProps) {
+  const t = T[locale]
+  const highlightsList = highlights ? highlights.split('\n').filter(Boolean) : []
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="notification">
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-6 max-w-[380px] font-sans">{t.body(version)}</Text>
+      {highlightsList.length > 0 ? (
+        <Section className="mb-8">
+          <Text className="text-sm text-fg-3 m-0 mb-2 font-sans">{t.highlightsLabel}</Text>
+          {highlightsList.map((line, i) => (
+            <Text key={i} className="font-14 text-fg-2 m-0 font-sans">· {line}</Text>
+          ))}
+        </Section>
+      ) : null}
+      <Section className="mb-6 text-center">
+        <EmailButton href={detailUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerChangelogReleaseTemplate() {
+  registerTemplate({
+    key: 'product.changelog-release',
+    category: 'product',
+    transactional: false,
+    subject: {
+      zh: (vars) => `AllBlue v${(vars.version as string) ?? ''} 发布`,
+      en: (vars) => `AllBlue v${(vars.version as string) ?? ''} released`,
+    },
+    component: ChangelogReleaseEmail,
+  })
+}

package/src/server/email/templates/team/apply-notify.tsx

@@ -0,0 +1,53 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface TeamApplyNotifyProps {
+  locale: EmailLocale
+  applicantEmail: string
+  approveUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '新的团队加入申请',
+    preview: '有人申请加入你的团队',
+    heading: '加入申请',
+    greeting: '你好：',
+    body: (email: string) => `有人以邮箱 ${email} 申请加入你的团队，请前往管理页面处理。`,
+    cta: '查看申请',
+  },
+  en: {
+    subject: 'New team join request',
+    preview: 'Someone requested to join your team',
+    heading: 'Join request',
+    greeting: 'Hi,',
+    body: (email: string) => `Someone with email ${email} requested to join your team. Please review it in the management page.`,
+    cta: 'Review request',
+  },
+} as const
+
+function TeamApplyNotifyEmail({ locale, applicantEmail, approveUrl, unsubscribeUrl }: TeamApplyNotifyProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mt-0 mb-6 font-sans">{t.greeting}</Text>
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(applicantEmail)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={approveUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerTeamApplyNotifyTemplate() {
+  registerTemplate({
+    key: 'team.apply-notify',
+    category: 'team',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: TeamApplyNotifyEmail,
+  })
+}

package/src/server/email/templates/team/approved.tsx

@@ -0,0 +1,53 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface TeamApprovedProps {
+  locale: EmailLocale
+  teamName?: string
+  inviteUrl: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '你的加入申请已通过',
+    preview: '团队申请已批准',
+    heading: '申请已通过',
+    greeting: '你好：',
+    body: (team?: string) => (team ? `你的加入「${team}」团队的申请已通过。` : '你的团队加入申请已通过。'),
+    cta: '加入团队',
+  },
+  en: {
+    subject: 'Your join request was approved',
+    preview: 'Team request approved',
+    heading: 'Request approved',
+    greeting: 'Hi,',
+    body: (team?: string) => (team ? `Your request to join "${team}" has been approved.` : 'Your team join request has been approved.'),
+    cta: 'Join team',
+  },
+} as const
+
+function TeamApprovedEmail({ locale, teamName, inviteUrl, unsubscribeUrl }: TeamApprovedProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mt-0 mb-6 font-sans">{t.greeting}</Text>
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(teamName)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={inviteUrl} label={t.cta} />
+      </Section>
+    </EmailLayout>
+  )
+}
+
+export function registerTeamApprovedTemplate() {
+  registerTemplate({
+    key: 'team.approved',
+    category: 'team',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: TeamApprovedEmail,
+  })
+}

package/src/server/email/templates/team/invite.tsx

@@ -0,0 +1,57 @@
+import { Section, Text } from '@react-email/components'
+import { EmailLayout } from '../_base/email-layout'
+import { EmailButton } from '../_base/button'
+import { registerTemplate, type EmailLocale } from '../../registry'
+
+interface TeamInviteProps {
+  locale: EmailLocale
+  ownerUsername: string
+  inviteUrl: string
+  expiresAt: string
+  unsubscribeUrl?: string
+}
+
+const T = {
+  zh: {
+    subject: '邀请你加入 AllBlue 团队',
+    preview: '你收到一个团队邀请',
+    heading: '团队邀请',
+    greeting: '你好：',
+    body: (owner: string) => `${owner || '团队成员'} 邀请你加入 AllBlue 团队。点击下方按钮接受邀请（${'过期时间见下'}）。`,
+    cta: '接受邀请',
+    expiresLabel: '有效期至：',
+  },
+  en: {
+    subject: 'You are invited to an AllBlue team',
+    preview: 'You received a team invitation',
+    heading: 'Team invitation',
+    greeting: 'Hi,',
+    body: (owner: string) => `${owner || 'A team member'} invited you to join an AllBlue team. Click the button below to accept.`,
+    cta: 'Accept invite',
+    expiresLabel: 'Valid until:',
+  },
+} as const
+
+function TeamInviteEmail({ locale, ownerUsername, inviteUrl, expiresAt, unsubscribeUrl }: TeamInviteProps) {
+  const t = T[locale]
+  return (
+    <EmailLayout locale={locale} preview={t.preview} heading={t.heading} unsubscribeUrl={unsubscribeUrl} footerKind="transactional">
+      <Text className="text-base text-fg-2 mt-0 mb-6 font-sans">{t.greeting}</Text>
+      <Text className="text-base text-fg-2 mx-auto mt-0 mb-8 max-w-[380px] font-sans">{t.body(ownerUsername)}</Text>
+      <Section className="mb-6 text-center">
+        <EmailButton href={inviteUrl} label={t.cta} />
+      </Section>
+      <Text className="text-sm text-fg-3 font-sans">{t.expiresLabel} {expiresAt}</Text>
+    </EmailLayout>
+  )
+}
+
+export function registerTeamInviteTemplate() {
+  registerTemplate({
+    key: 'team.invite',
+    category: 'team',
+    transactional: true,
+    subject: { zh: T.zh.subject, en: T.en.subject },
+    component: TeamInviteEmail,
+  })
+}