@allbluecn/web-app 0.10.3 → 0.11.1

package/src/server/email/outbox.ts

@@ -0,0 +1,141 @@
+import { render } from '@react-email/render'
+import { createElement } from 'react'
+import { randomBytes } from 'crypto'
+import { prisma } from '@allbluecn/database'
+import { GUEST_USER_ID } from '@/server/desktop-guest'
+import { getTemplate, type EmailCategory, type EmailLocale } from './registry'
+import { sendByDriver, resolveDriver } from './sender'
+import { checkEmailEligibility } from './preferences'
+import { buildUnsubscribeHeaders } from './deliverability'
+
+const DAILY_LIMIT_BY_CATEGORY: Partial<Record<EmailCategory, number>> = {
+  notification: 10,
+}
+
+function isUniqueViolation(err: unknown): boolean {
+  return (err as { code?: string })?.code === 'P2002'
+}
+
+export interface OutboxSendParams {
+  key: string
+  to: string
+  locale: EmailLocale
+  userId?: string
+  dedupeKey?: string
+  vars: Record<string, unknown>
+  /** 覆盖默认 HMAC 退订 URL（DB-token 场景，如 changelog 订阅者）。
+   * 传入则走覆盖 URL 构造 List-Unsubscribe 头，不调 HMAC；未传则回落到 userId HMAC 路径。 */
+  unsubscribeUrl?: string
+  /** 回复收件人（如团队邀请邮件的邀请人邮箱），透传给底层 driver。 */
+  replyTo?: string
+}
+
+export interface OutboxSendResult {
+  sent: boolean
+  skipped?: boolean
+  skipReason?: string
+}
+
+export async function outboxSend(params: OutboxSendParams): Promise<OutboxSendResult> {
+  const meta = getTemplate(params.key)
+  if (!meta) throw new Error(`email template "${params.key}" not registered`)
+
+  // 邮箱大小写不敏感：入口归一化，下游速率计数 / HMAC 退订 / EmailLog / driver 全一致。
+  const to = params.to.toLowerCase()
+
+  if (params.userId === GUEST_USER_ID || to === 'guest@localhost') {
+    return { sent: false, skipped: true, skipReason: 'guest' }
+  }
+
+  if (params.dedupeKey) {
+    const existing = await prisma.emailLog.findUnique({ where: { dedupeKey: params.dedupeKey } })
+    if (existing) return { sent: false, skipped: true, skipReason: 'dedupe' }
+  }
+
+  const dailyLimit = DAILY_LIMIT_BY_CATEGORY[meta.category] ?? 50
+  const dayStart = new Date()
+  dayStart.setHours(0, 0, 0, 0)
+  const sentToday = await prisma.emailLog.count({
+    where: { to, category: meta.category, sentAt: { gte: dayStart } },
+  })
+  if (sentToday >= dailyLimit) {
+    return { sent: false, skipped: true, skipReason: 'rate-limit' }
+  }
+
+  if (!meta.transactional && params.userId) {
+    const eligibility = await checkEmailEligibility(params.userId, meta.category)
+    if (!eligibility.sendable) {
+      return { sent: false, skipped: true, skipReason: eligibility.reason }
+    }
+  }
+
+  const element = createElement(
+    meta.component,
+    { ...params.vars, locale: params.locale, unsubscribeUrl: params.unsubscribeUrl } as never,
+  )
+  const html = await render(element)
+  const text = await render(element, { plainText: true })
+  const rawSubject = meta.subject[params.locale]
+  const subject = typeof rawSubject === 'function' ? rawSubject(params.vars) : rawSubject
+  const headers: Record<string, string> = {}
+  if (!meta.transactional) {
+    if (params.unsubscribeUrl) {
+      headers['List-Unsubscribe'] = `<${params.unsubscribeUrl}>, <mailto:unsubscribe@allblue.local?subject=unsubscribe>`
+      headers['List-Unsubscribe-Post'] = 'One-Click=List-Unsubscribe'
+    } else if (params.userId) {
+      Object.assign(
+        headers,
+        buildUnsubscribeHeaders({
+          appUrl: process.env.VITE_APP_URL ?? 'http://localhost:3000',
+          userId: params.userId,
+          email: to,
+          category: meta.category,
+        }),
+      )
+    }
+  }
+  let log: { id: string }
+  try {
+    log = await prisma.emailLog.create({
+      data: {
+        to,
+        templateKey: params.key,
+        category: meta.category,
+        status: 'PENDING',
+        provider: resolveDriver(),
+        dedupeKey: params.dedupeKey,
+        userId: params.userId,
+      },
+    })
+  } catch (err) {
+    // 并发同 dedupeKey：前置 findUnique 未命中但 create 撞唯一键，
+    // 说明另一条同键记录刚写入——视为已发送过，直接跳过而非抛错。
+    if (params.dedupeKey && isUniqueViolation(err)) {
+      return { sent: false, skipped: true, skipReason: 'dedupe' }
+    }
+    throw err
+  }
+
+  const result = await sendByDriver({
+    to,
+    subject,
+    html,
+    text,
+    headers,
+    replyTo: params.replyTo,
+  })
+  await prisma.emailLog.update({
+    where: { id: log.id },
+    data: {
+      status: result.ok ? 'SENT' : 'FAILED',
+      messageId: result.messageId,
+      error: result.error,
+      sentAt: result.ok ? new Date() : undefined,
+    },
+  })
+  return { sent: result.ok }
+}
+
+export function generateEmailToken(): string {
+  return randomBytes(32).toString('hex')
+}

package/src/server/email/preferences.ts

@@ -0,0 +1,20 @@
+import { prisma } from '@allbluecn/database'
+import type { EmailCategory } from './registry'
+
+export interface EmailSendEligibility {
+  sendable: boolean
+  reason?: 'unsubscribed-all' | 'unsubscribed-category' | 'suppressed'
+}
+
+export async function checkEmailEligibility(userId: string, category: EmailCategory): Promise<EmailSendEligibility> {
+  const pref = await prisma.emailPreference.findUnique({
+    where: { userId },
+    select: { suppressed: true, unsubscribedAll: true, unsubscribedCategories: true },
+  })
+  if (!pref) return { sendable: true }
+  if (pref.suppressed) return { sendable: false, reason: 'suppressed' }
+  if (pref.unsubscribedAll) return { sendable: false, reason: 'unsubscribed-all' }
+  const cats = Array.isArray(pref.unsubscribedCategories) ? (pref.unsubscribedCategories as string[]) : []
+  if (cats.includes(category)) return { sendable: false, reason: 'unsubscribed-category' }
+  return { sendable: true }
+}

package/src/server/email/registry.ts

@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react'
+
+export type EmailLocale = 'zh' | 'en'
+
+export type EmailCategory = 'auth' | 'team' | 'notification' | 'billing' | 'product'
+
+export interface EmailTemplateProps {
+  locale: EmailLocale
+}
+
+export type EmailSubject = string | ((vars: Record<string, unknown>) => string)
+
+export interface TemplateMeta<TProps = EmailTemplateProps> {
+  key: string
+  category: EmailCategory
+  transactional: boolean
+  subject: { zh: EmailSubject; en: EmailSubject }
+  component: (props: TProps) => ReactElement
+}
+
+// any 为刻意的类型逃逸：模板 props 由各模板组件自带签名，
+// Map 需接受任意 props 形状；消费端（outbox）用运行时插值传 vars。
+const REGISTRY = new Map<string, TemplateMeta<any>>()
+
+export function registerTemplate<TProps>(meta: TemplateMeta<TProps>): void {
+  if (REGISTRY.has(meta.key)) {
+    throw new Error(`email template "${meta.key}" already registered`)
+  }
+  REGISTRY.set(meta.key, meta)
+}
+
+export function getTemplate(key: string): TemplateMeta | undefined {
+  return REGISTRY.get(key)
+}
+
+export function listTemplates(): TemplateMeta[] {
+  return [...REGISTRY.values()]
+}

package/src/server/email/sender.ts

@@ -1,21 +1,44 @@
-export interface EmailParams {
+export interface EmailMessage {
   to: string
   subject: string
-  html?: string
+  html: string
   text?: string
+  headers?: Record<string, string>
+  replyTo?: string
 }
 
-export interface EmailSender {
-  send(params: EmailParams): Promise<void>
+export interface SendResult {
+  ok: boolean
+  messageId: string | null
+  bounced: boolean
+  error?: string
 }
 
-export function getEmailSender(): EmailSender {
-  return {
-    send: async (params) => {
-      console.log(`[email] To: ${params.to}, Subject: ${params.subject}`)
-      if (params.text) {
-        console.log(`[email] Text: ${params.text}`)
-      }
-    },
+export type EmailDriver = 'smtp' | 'resend' | 'console'
+
+export function resolveDriver(): EmailDriver {
+  const v = process.env.EMAIL_DRIVER
+  if (v === 'smtp' || v === 'resend' || v === 'console') return v
+  return 'console'
+}
+
+export async function sendByDriver(msg: EmailMessage): Promise<SendResult> {
+  const driver = resolveDriver()
+  try {
+    if (driver === 'smtp') {
+      const { sendBySmtp } = await import('./drivers/smtp')
+      const r = await sendBySmtp(msg)
+      return { ok: true, ...r }
+    }
+    if (driver === 'resend') {
+      const { sendByResend } = await import('./drivers/resend')
+      const r = await sendByResend(msg)
+      return { ok: true, ...r }
+    }
+    const { sendByConsole } = await import('./drivers/console')
+    const r = await sendByConsole(msg)
+    return { ok: true, ...r }
+  } catch (err) {
+    return { ok: false, messageId: null, bounced: false, error: err instanceof Error ? err.message : String(err) }
   }
-}
+}

package/src/server/email/templates/_base/button.tsx

@@ -0,0 +1,12 @@
+import { Button } from '@react-email/components'
+
+export function EmailButton({ href, label }: { href: string; label: string }) {
+  return (
+    <Button
+      href={href}
+      className="bg-fg text-base text-fg-inverted inline-block rounded-lg px-7 py-4 text-center font-sans leading-6"
+    >
+      {label}
+    </Button>
+  )
+}

package/src/server/email/templates/_base/email-layout.tsx

@@ -0,0 +1,117 @@
+import type { ReactNode } from 'react'
+import { Body, Container, Head, Heading, Html, Img, Link, Section, Tailwind, Text } from '@react-email/components'
+import { allblueTailwindConfig } from './theme'
+import { AllblueFonts } from './theme-fonts'
+import type { EmailLocale } from '../../registry'
+
+const LOGO_URL = `${process.env.VITE_APP_URL ?? 'https://allblue.local'}/logo/allblue-logo-light.png`
+
+const SLOGAN: Record<EmailLocale, string> = {
+  zh: 'AllBlue · 理想之海 — 让每一个想法被看见。',
+  en: 'AllBlue — Where every idea finds its sea.',
+}
+
+const TRANSACTIONAL_FOOTER: Record<EmailLocale, string> = {
+  zh: '这是一封事务性邮件，您之所以收到它是因为您在 AllBlue 有账号操作。',
+  en: 'You received this transactional email because of an action on your AllBlue account.',
+}
+
+const UNSUBSCRIBE_LABEL: Record<EmailLocale, string> = {
+  zh: '退订',
+  en: 'Unsubscribe',
+}
+
+const UNSUBSCRIBE_HINT: Record<EmailLocale, string> = {
+  zh: '不想再收到这类邮件？',
+  en: "Don't want these emails?",
+}
+
+const NOTIFICATION_FOOTER: Record<EmailLocale, string> = {
+  zh: '这是 AllBlue 的通知邮件，可通过下方链接退订。',
+  en: 'This is a notification from AllBlue. Unsubscribe via the link below.',
+}
+
+export interface EmailLayoutProps {
+  locale: EmailLocale
+  children: ReactNode
+  preview?: string
+  heading?: string
+  unsubscribeUrl?: string
+  footerKind?: 'transactional' | 'notification'
+}
+
+export function EmailLayout({
+  locale,
+  children,
+  preview,
+  heading,
+  unsubscribeUrl,
+  footerKind = 'transactional',
+}: EmailLayoutProps) {
+  const footer =
+    footerKind === 'notification'
+      ? NOTIFICATION_FOOTER[locale]
+      : TRANSACTIONAL_FOOTER[locale]
+  return (
+    <Tailwind config={allblueTailwindConfig}>
+      <Html>
+        <Head>
+          <AllblueFonts />
+        </Head>
+        <Body className="bg-bg-2 m-0 font-sans text-center">
+          <Container className="mobile:mt-0 mx-auto mt-8 w-full max-w-[640px]">
+            <Section>
+              <Section className="bg-bg mobile:px-2 px-6 py-4">
+                <Section className="mb-3 px-6 text-left">
+                  <Img
+                    src={LOGO_URL}
+                    alt="AllBlue"
+                    width={32}
+                    className="inline-block align-middle"
+                  />
+                </Section>
+
+                <Section className="bg-bg-2 mobile:px-6 mobile:py-12 rounded-[8px] px-[40px] py-[64px] text-center">
+                  <Section className="mb-6">
+                    <Img
+                      src={LOGO_URL}
+                      alt="AllBlue"
+                      width={48}
+                      className="mx-auto mb-5 block"
+                    />
+                  </Section>
+                  {heading ? (
+                    <Heading as="h1" className="text-3xl text-fg m-0 mb-6 font-sans">
+                      {heading}
+                    </Heading>
+                  ) : null}
+                  {children}
+                </Section>
+
+                {/* Footer — 无办公地址 */}
+                <Section className="bg-bg">
+                  <Section className="px-6 py-10 text-center">
+                    <Text className="text-sm text-fg-3 mx-auto mt-0 mb-8 max-w-[280px] text-center font-sans">
+                      {SLOGAN[locale]}
+                    </Text>
+                    <Text className="text-xs text-fg-3 mt-4 mb-5 text-center font-sans">
+                      {footer}
+                    </Text>
+                    {unsubscribeUrl ? (
+                      <Text className="text-xs text-fg-3 m-0 text-center font-sans">
+                        {UNSUBSCRIBE_HINT[locale]}{' '}
+                        <Link href={unsubscribeUrl} className="text-fg-3 underline">
+                          {UNSUBSCRIBE_LABEL[locale]}
+                        </Link>
+                      </Text>
+                    ) : null}
+                  </Section>
+                </Section>
+              </Section>
+            </Section>
+          </Container>
+        </Body>
+      </Html>
+    </Tailwind>
+  )
+}

package/src/server/email/templates/_base/theme-fonts.tsx

@@ -0,0 +1,43 @@
+import { Font } from '@react-email/components'
+
+export function AllblueFonts() {
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');`,
+        }}
+      />
+      <Font
+        fontFamily="Inter"
+        fallbackFontFamily={['Arial', 'sans-serif']}
+        webFont={{
+          url: 'https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZg.ttf',
+          format: 'truetype',
+        }}
+        fontWeight={400}
+        fontStyle="normal"
+      />
+      <Font
+        fontFamily="Inter"
+        fallbackFontFamily={['Arial', 'sans-serif']}
+        webFont={{
+          url: 'https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf',
+          format: 'truetype',
+        }}
+        fontWeight={500}
+        fontStyle="normal"
+      />
+      <Font
+        fontFamily="Inter"
+        fallbackFontFamily={['Arial', 'sans-serif']}
+        webFont={{
+          url: 'https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf',
+          format: 'truetype',
+        }}
+        fontWeight={600}
+        fontStyle="normal"
+      />
+    </>
+  )
+}

package/src/server/email/templates/_base/theme.ts

@@ -0,0 +1,22 @@
+import type { TailwindConfig } from '@react-email/components'
+
+export const allblueTailwindConfig: TailwindConfig = {
+  theme: {
+    extend: {
+      colors: {
+        bg: '#FFFFFF',
+        'bg-2': '#F3F4F6',
+        fg: '#14171E',
+        'fg-2': '#43454B',
+        'fg-3': '#7B7D81',
+        'fg-inverted': '#FFFFFF',
+        stroke: '#F0F0F0',
+        'stroke-strong': '#E4E4E7',
+        brand: '#2563eb',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+}

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,
+  })
+}