Change Email Confirmation Email

1import type { ReactNode } from "react"
2import {
3  Body,
4  Button,
5  Container,
6  Head,
7  Heading,
8  Hr,
9  Html,
10  Img,
11  Link,
12  Preview,
13  pixelBasedPreset,
14  Section,
15  Tailwind,
16  Text
17} from "react-email"
18 
19import { cn } from "../../../lib/utils"
20import {
21  type EmailClassNames,
22  type EmailColors,
23  EmailStyles
24} from "./email-styles"
25 
26const changeEmailConfirmationEmailLocalization = {
27  CONFIRM_EMAIL_CHANGE: "Confirm your email change",
28  LOGO: "Logo",
29  EMAIL_CHANGE_REQUESTED:
30    "Someone requested to change the email address for your {appName} account.",
31  CURRENT_EMAIL: "Current email:",
32  NEW_EMAIL: "New email:",
33  APPROVE_EMAIL_CHANGE: "Approve email change",
34  OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
35  THIS_LINK_EXPIRES_IN_MINUTES:
36    "This link expires in {expirationMinutes} minutes.",
37  EMAIL_SENT_BY: "Email sent by {appName}.",
38  IF_YOU_DIDNT_REQUEST_EMAIL_CHANGE:
39    "If you didn't request this change, you can safely ignore this email. Your email address will stay the same.",
40  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
41}
42 
43/**
44 * Localization strings for the ChangeEmailConfirmationEmail component.
45 */
46export type ChangeEmailConfirmationEmailLocalization =
47  typeof changeEmailConfirmationEmailLocalization
48 
49/**
50 * Props for the ChangeEmailConfirmationEmail component.
51 */
52export interface ChangeEmailConfirmationEmailProps {
53  /** Confirmation URL sent by Better Auth to the user's current email address */
54  url: string
55  /** User's current email address */
56  currentEmail?: string
57  /** Requested new email address */
58  newEmail?: string
59  /** Name of the application sending the email */
60  appName?: string
61  /** Number of minutes until the confirmation link expires */
62  expirationMinutes?: number
63  /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
64  logoURL?: string | { light: string; dark: string }
65  /** Custom CSS class names for styling specific parts of the email */
66  classNames?: EmailClassNames
67  /** Custom color scheme for light and dark modes */
68  colors?: EmailColors
69  /** Whether to show the "Powered by better-auth" footer */
70  poweredBy?: boolean
71  /** Whether to enable dark mode support */
72  darkMode?: boolean
73  /** Additional React nodes to inject into the email head */
74  head?: ReactNode
75  /**
76   * Localization overrides for customizing email text
77   * @remarks `ChangeEmailConfirmationEmailLocalization`
78   */
79// … truncated