=>
+ generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+ RootPage({ config, importMap, params, searchParams })
+
+export default Page
diff --git a/examples/email/src/app/(payload)/admin/importMap.js b/examples/email/src/app/(payload)/admin/importMap.js
new file mode 100644
index 00000000000..8ef7021383f
--- /dev/null
+++ b/examples/email/src/app/(payload)/admin/importMap.js
@@ -0,0 +1 @@
+export const importMap = {}
diff --git a/examples/email/src/app/(payload)/api/[...slug]/route.ts b/examples/email/src/app/(payload)/api/[...slug]/route.ts
new file mode 100644
index 00000000000..183cf457f62
--- /dev/null
+++ b/examples/email/src/app/(payload)/api/[...slug]/route.ts
@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)
diff --git a/examples/email/src/app/(payload)/api/graphql-playground/route.ts b/examples/email/src/app/(payload)/api/graphql-playground/route.ts
new file mode 100644
index 00000000000..3a5eb92625b
--- /dev/null
+++ b/examples/email/src/app/(payload)/api/graphql-playground/route.ts
@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)
diff --git a/examples/email/src/app/(payload)/api/graphql/route.ts b/examples/email/src/app/(payload)/api/graphql/route.ts
new file mode 100644
index 00000000000..2069ff86b0a
--- /dev/null
+++ b/examples/email/src/app/(payload)/api/graphql/route.ts
@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)
diff --git a/examples/email/src/app/(payload)/custom.scss b/examples/email/src/app/(payload)/custom.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/examples/email/src/app/(payload)/layout.tsx b/examples/email/src/app/(payload)/layout.tsx
new file mode 100644
index 00000000000..7f8698e1380
--- /dev/null
+++ b/examples/email/src/app/(payload)/layout.tsx
@@ -0,0 +1,32 @@
+import type { ServerFunctionClient } from 'payload'
+
+import '@payloadcms/next/css'
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+ children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+ 'use server'
+ return handleServerFunctions({
+ ...args,
+ config,
+ importMap,
+ })
+}
+
+const Layout = ({ children }: Args) => (
+
+ {children}
+
+)
+
+export default Layout
diff --git a/examples/email/src/collections/Newsletter.ts b/examples/email/src/collections/Newsletter.ts
index b63813e4ba7..8788a2e153c 100644
--- a/examples/email/src/collections/Newsletter.ts
+++ b/examples/email/src/collections/Newsletter.ts
@@ -1,28 +1,12 @@
-import type { CollectionConfig } from 'payload/types'
-import generateEmailHTML from '../email/generateEmailHTML'
+import type { CollectionConfig } from 'payload'
-const Newsletter: CollectionConfig = {
+import { generateEmailHTML } from '../email/generateEmailHTML'
+
+export const Newsletter: CollectionConfig = {
slug: 'newsletter-signups',
admin: {
defaultColumns: ['name', 'email'],
},
- hooks: {
- afterChange: [
- async ({ doc, operation, req }) => {
- if (operation === 'create') {
- req.payload.sendEmail({
- to: doc.email,
- from: 'sender@example.com',
- subject: 'Thanks for signing up!',
- html: await generateEmailHTML({
- headline: 'Welcome to the newsletter!',
- content: `${doc.name ? `Hi ${doc.name}!` : 'Hi!'} We'll be in touch soon...
`,
- }),
- })
- }
- },
- ],
- },
fields: [
{
name: 'name',
@@ -34,6 +18,25 @@ const Newsletter: CollectionConfig = {
required: true,
},
],
+ hooks: {
+ afterChange: [
+ async ({ doc, operation, req }) => {
+ if (operation === 'create') {
+ req.payload
+ .sendEmail({
+ from: 'sender@example.com',
+ html: await generateEmailHTML({
+ content: `${doc.name ? `Hi ${doc.name}!` : 'Hi!'} We'll be in touch soon...
`,
+ headline: 'Welcome to the newsletter!',
+ }),
+ subject: 'Thanks for signing up!',
+ to: doc.email,
+ })
+ .catch((error) => {
+ console.error('Error sending email:', error)
+ })
+ }
+ },
+ ],
+ },
}
-
-export default Newsletter
diff --git a/examples/email/src/collections/Users.ts b/examples/email/src/collections/Users.ts
index c1cd92aa69c..7b541c891ad 100644
--- a/examples/email/src/collections/Users.ts
+++ b/examples/email/src/collections/Users.ts
@@ -1,22 +1,22 @@
-import type { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload'
-import generateForgotPasswordEmail from '../email/generateForgotPasswordEmail'
-import generateVerificationEmail from '../email/generateVerificationEmail'
+import { generateForgotPasswordEmail } from '../email/generateForgotPasswordEmail'
+import { generateVerificationEmail } from '../email/generateVerificationEmail'
-const Users: CollectionConfig = {
+export const Users: CollectionConfig = {
slug: 'users',
+ admin: {
+ useAsTitle: 'email',
+ },
auth: {
- verify: {
- generateEmailSubject: () => 'Verify your email',
- generateEmailHTML: generateVerificationEmail,
- },
forgotPassword: {
- generateEmailSubject: () => 'Reset your password',
generateEmailHTML: generateForgotPasswordEmail,
+ generateEmailSubject: () => 'Reset your password',
+ },
+ verify: {
+ generateEmailHTML: generateVerificationEmail,
+ generateEmailSubject: () => 'Verify your email',
},
- },
- admin: {
- useAsTitle: 'email',
},
fields: [
{
@@ -25,5 +25,3 @@ const Users: CollectionConfig = {
},
],
}
-
-export default Users
diff --git a/examples/email/src/email/generateEmailHTML.ts b/examples/email/src/email/generateEmailHTML.ts
index 40e34993c28..bc1b6ac0448 100644
--- a/examples/email/src/email/generateEmailHTML.ts
+++ b/examples/email/src/email/generateEmailHTML.ts
@@ -1,24 +1,17 @@
+import ejs from 'ejs'
import fs from 'fs'
-import Handlebars from 'handlebars'
-import inlineCSS from 'inline-css'
+import juice from 'juice'
import path from 'path'
-const template = fs.readFileSync
- ? fs.readFileSync(path.join(__dirname, './template.html'), 'utf8')
- : ''
+export const generateEmailHTML = async (data: any): Promise => {
+ const templatePath = path.join(process.cwd(), 'src/email/template.ejs')
+ const templateContent = fs.readFileSync(templatePath, 'utf8')
-// Compile the template
-const getHTML = Handlebars.compile(template)
+ // Compile and render the template with EJS
+ const preInlinedCSS = ejs.render(templateContent, { ...data, cta: data.cta || {} })
-const generateEmailHTML = async (data): Promise => {
- const preInlinedCSS = getHTML(data)
+ // Inline CSS
+ const html = juice(preInlinedCSS)
- const html = await inlineCSS(preInlinedCSS, {
- url: ' ',
- removeStyleTags: false,
- })
-
- return html
+ return Promise.resolve(html)
}
-
-export default generateEmailHTML
diff --git a/examples/email/src/email/generateForgotPasswordEmail.ts b/examples/email/src/email/generateForgotPasswordEmail.ts
index e82ef250746..590cf464e35 100644
--- a/examples/email/src/email/generateForgotPasswordEmail.ts
+++ b/examples/email/src/email/generateForgotPasswordEmail.ts
@@ -1,13 +1,24 @@
-import generateEmailHTML from './generateEmailHTML'
+import type { PayloadRequest } from 'payload'
-const generateForgotPasswordEmail = async ({ token }): Promise =>
- generateEmailHTML({
- headline: 'Locked out?',
+import { generateEmailHTML } from './generateEmailHTML'
+
+type ForgotPasswordEmailArgs =
+ | {
+ req?: PayloadRequest
+ token?: string
+ user?: any
+ }
+ | undefined
+
+export const generateForgotPasswordEmail = async (
+ args: ForgotPasswordEmailArgs,
+): Promise => {
+ return generateEmailHTML({
content: 'Let's get you back in.
',
cta: {
buttonLabel: 'Reset your password',
- url: `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/reset-password?token=${token}`,
+ url: `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/reset-password?token=${args?.token}`,
},
+ headline: 'Locked out?',
})
-
-export default generateForgotPasswordEmail
+}
diff --git a/examples/email/src/email/generateVerificationEmail.ts b/examples/email/src/email/generateVerificationEmail.ts
index 819afddf6f5..e8a59becd3a 100644
--- a/examples/email/src/email/generateVerificationEmail.ts
+++ b/examples/email/src/email/generateVerificationEmail.ts
@@ -1,16 +1,26 @@
-import generateEmailHTML from './generateEmailHTML'
+import { generateEmailHTML } from './generateEmailHTML'
-const generateVerificationEmail = async (args): Promise => {
- const { user, token } = args
+type User = {
+ email: string
+ name?: string
+}
+
+type GenerateVerificationEmailArgs = {
+ token: string
+ user: User
+}
+
+export const generateVerificationEmail = async (
+ args: GenerateVerificationEmailArgs,
+): Promise => {
+ const { token, user } = args
return generateEmailHTML({
- headline: 'Verify your account',
content: `Hi${user.name ? ' ' + user.name : ''}! Validate your account by clicking the button below.
`,
cta: {
buttonLabel: 'Verify',
url: `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/verify?token=${token}&email=${user.email}`,
},
+ headline: 'Verify your account',
})
}
-
-export default generateVerificationEmail
diff --git a/examples/email/src/email/template.ejs b/examples/email/src/email/template.ejs
new file mode 100644
index 00000000000..514324096c5
--- /dev/null
+++ b/examples/email/src/email/template.ejs
@@ -0,0 +1,327 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | |
+
+
+
+
+
+
+
+
+
+ 
+
+ |
+
+
+ | |
+
+
+
+
+ <%= headline %>
+ |
+
+
+ |
+
+ <%- content %>
+
+
+ <% if (cta) { %>
+
+ <% } %>
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- | |
-
-
-
-
-
-
- |
-
-
-
-
- |
-
-
- | |
-
-
-
-
- {{headline}}
- |
-
-
- |
-
- {{{content}}}
-
-
- {{#if cta}}
-
- {{/if}}
- |
-
-
-
- |
-
-
-
- |
-
-
-
- |
-
-
-
- |
-
-
-