├── src
    ├── utils
    │   ├── updater.ts
    │   ├── fetcher.ts
    │   ├── campaign.ts
    │   └── apiMiddleware.ts
    ├── pages
    │   ├── _document.tsx
    │   ├── confirm-success.tsx
    │   ├── api
    │   │   ├── testConnection.ts
    │   │   ├── pixel
    │   │   │   └── [[...slug]].tsx
    │   │   ├── link
    │   │   │   └── [[...slug]].tsx
    │   │   ├── testEmail.ts
    │   │   ├── unsubscribe.ts
    │   │   ├── accounts.ts
    │   │   ├── auth
    │   │   │   └── [...nextauth].js
    │   │   ├── templates.ts
    │   │   ├── subscribers.ts
    │   │   ├── import.ts
    │   │   ├── confirm.ts
    │   │   ├── track.ts
    │   │   ├── send.ts
    │   │   ├── campaigns.ts
    │   │   ├── dashboard.ts
    │   │   ├── subscribe.ts
    │   │   ├── admin.ts
    │   │   └── settings.ts
    │   ├── _app.tsx
    │   ├── index.tsx
    │   ├── app
    │   │   ├── settings.tsx
    │   │   ├── index.tsx
    │   │   ├── campaigns
    │   │   │   ├── new.tsx
    │   │   │   └── index.tsx
    │   │   ├── subscribers.tsx
    │   │   ├── templates.tsx
    │   │   └── Layout.tsx
    │   └── setup.tsx
    ├── components
    │   ├── NumberCard.tsx
    │   ├── BrowserMockup.tsx
    │   ├── BrowserMockup.module.css
    │   ├── NewSubscribers.tsx
    │   ├── NewsletterSettings.tsx
    │   └── ImportForm.tsx
    └── styles
    │   ├── Templates.module.css
    │   └── globals.css
├── .github
    └── FUNDING.yml
├── .eslintrc.json
├── public
    └── favicon.ico
├── next.config.js
├── mailer.json
├── .env.dist
├── postcss.config.js
├── .gitignore
├── tsconfig.json
├── lib
    ├── auth.ts
    ├── templates
    │   ├── tracking-pixel.ts
    │   ├── unsubscribe.ts
    │   ├── welcome.ts
    │   └── confirmation.ts
    ├── models
    │   ├── templates.ts
    │   ├── settings.ts
    │   ├── admin.ts
    │   ├── subscriber.ts
    │   └── campaigns.ts
    ├── db.ts
    └── email.ts
├── LICENSE
├── package.json
└── README.md


/src/utils/updater.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: wweb_dev
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vincenius/OpenMailer/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/src/utils/fetcher.ts:
--------------------------------------------------------------------------------
1 | const fetcher = async (...args: Parameters<typeof fetch>): Promise<any> => {
2 |   const response = await fetch(...args);
3 |   const data = await response.json();
4 |   return data;
5 | };
6 | 
7 | export default fetcher


--------------------------------------------------------------------------------
/mailer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "apps": [
 3 |         {
 4 |             "name": "mailer",
 5 |             "script": "npm",
 6 |             "args": "run start",
 7 |             "env": {
 8 |                 "NODE_ENV": "production"
 9 |             }
10 |         }
11 |     ]
12 | }


--------------------------------------------------------------------------------
/.env.dist:
--------------------------------------------------------------------------------
1 | MONGODB_URI=mongodb+srv://your-uri
2 | 
3 | BASE_URL=http://localhost:3000 # where you host open mailer
4 | NEXTAUTH_URL=http://localhost:3000
5 | AUTH_SECRET=random-secret
6 | 
7 | CORS_ORIGIN=* # from where you want to allow signups
8 | API_KEY=random-key # eg. an uuid: https://www.uuidgenerator.net/
9 | 


--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: {
 3 |     'postcss-preset-mantine': {},
 4 |     'postcss-simple-vars': {
 5 |       variables: {
 6 |         'mantine-breakpoint-xs': '36em',
 7 |         'mantine-breakpoint-sm': '48em',
 8 |         'mantine-breakpoint-md': '62em',
 9 |         'mantine-breakpoint-lg': '75em',
10 |         'mantine-breakpoint-xl': '88em',
11 |       },
12 |     },
13 |   },
14 | };


--------------------------------------------------------------------------------
/src/utils/campaign.ts:
--------------------------------------------------------------------------------
 1 | import { Campaign } from '../../lib/models/campaigns';
 2 | 
 3 | export const getOpens = (campaign: Campaign | null) =>
 4 |   campaign?.users.reduce((acc, curr) => acc + (curr.opens > 0 ? 1 : 0), 0)
 5 | 
 6 | export const getUniqueClicks = (campaign: Campaign | null) =>
 7 |   campaign?.users.reduce((acc, curr) => acc + (curr.clicks.length > 0 ? 1 : 0), 0)
 8 | 
 9 | export const getRate = (count: number, received: number) =>
10 |   parseFloat(((count / received) * 100).toFixed(1))


--------------------------------------------------------------------------------
/src/components/NumberCard.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Card, Text } from '@mantine/core';
 3 | 
 4 | type Props = {
 5 |     title: string,
 6 |     count: number,
 7 |     symbol?: string,
 8 | }
 9 | 
10 | const NumberCard = (props: Props) => {
11 |     return <Card shadow="sm" padding="lg" radius="md" withBorder mr="md">
12 |         <Text>{props.title}</Text>
13 |         <Text size="xl" fw={700}>{props.count}{props.symbol}</Text>
14 |     </Card>
15 | }
16 | 
17 | export default NumberCard
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | import.csv


--------------------------------------------------------------------------------
/src/styles/Templates.module.css:
--------------------------------------------------------------------------------
 1 | /*  */
 2 | .cardHeaderContainer {
 3 |   position: relative;
 4 |   height: 200px;
 5 |   overflow: hidden;
 6 | }
 7 | 
 8 | .cardHeaderOverlay {
 9 |   position: absolute;
10 |   top: 0;
11 |   left: 0;
12 |   width: 100%;
13 |   height: 100%;
14 |   background: linear-gradient(180deg, rgba(9,9,121,0) 70%, rgba(222, 227, 237, 1) 100%);
15 |   z-index: 1;
16 | }
17 | 
18 | .placeholder {
19 |   text-align: center;
20 |   width: 100%;
21 |   opacity: 0.4;
22 |   font-size: 1.6em;
23 |   margin: 2em 0;
24 |   text-transform: uppercase;
25 |   display: inline-block;
26 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "paths": {
17 |       "@/*": ["./src/*"]
18 |     }
19 |   },
20 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
21 |   "exclude": ["node_modules"]
22 | }
23 | 


--------------------------------------------------------------------------------
/lib/auth.ts:
--------------------------------------------------------------------------------
 1 | import { NextApiResponse } from 'next'
 2 | import { getServerSession } from "next-auth/next"
 3 | import { authOptions } from "../src/pages/api/auth/[...nextauth]"
 4 | import { CustomRequest } from './db'
 5 | 
 6 | const withAuth = async (
 7 |   req: CustomRequest,
 8 |   res: NextApiResponse,
 9 |   handler: (req: CustomRequest, res: NextApiResponse) => Promise<void>
10 | ) => {
11 |   const session = await getServerSession(req, res, authOptions)
12 | 
13 |   if (session) {
14 |     await handler(req, res)
15 |   } else {
16 |     res.status(401).json({ message: 'Unauthorized' })
17 |   }
18 | }
19 | 
20 | export default withAuth


--------------------------------------------------------------------------------
/src/pages/confirm-success.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import { Flex, Card, Title, Text } from '@mantine/core';
 3 | 
 4 | export default function ConfirmSuccess() {
 5 |   return (<Flex align="center" justify="center">
 6 |     <Head>
 7 |       <title>Successfully subscribed!</title>
 8 |     </Head>
 9 |     <Card shadow="md" m="xl" withBorder maw={500}>
10 |       <Title order={1} mb="md">Successfully subscribed!</Title>
11 |       <Text mb="md">You have successfully subscribed to our newsletter. Be on the lookout for our emails, which will be arriving shortly.</Text>
12 |       <Text>Thank you for joining!</Text>
13 |     </Card>
14 |   </Flex>)
15 | }
16 | 


--------------------------------------------------------------------------------
/src/pages/api/testConnection.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse, NextApiRequest } from 'next'
 2 | import sendEmail from '../../../lib/email'
 3 | 
 4 | type Result = {
 5 |   message: string,
 6 | }
 7 | 
 8 | async function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Result>
11 | ) {
12 |   if (req.method === 'POST') {
13 |     const result = await sendEmail(req.body.email, '[Testing email connection]', 'This is an OpenMailer test email', req.body)
14 | 
15 |     res.status(200).json({ message: result })
16 |   } else {
17 |     res.status(405).json({ message: 'Method not allowed' })
18 |   }
19 | 
20 |   return Promise.resolve()
21 | }
22 | 
23 | export default handler;


--------------------------------------------------------------------------------
/src/components/BrowserMockup.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactNode } from 'react'
 2 | import { Box, Card } from '@mantine/core'
 3 | import classes from './BrowserMockup.module.css'
 4 | 
 5 | type Props = {
 6 |   children: ReactNode,
 7 | }
 8 | 
 9 | const BrowserMockup = (props: Props) => {
10 |     return <Box w="100%">
11 |       <Card shadow="md" withBorder mih={200}>
12 |         <Card.Section>
13 |           <div className={classes.browserHead}>
14 |             <div className={classes.browserDots}></div>
15 |           </div>
16 |         </Card.Section>
17 |         <Box mih={100}>
18 |           {props.children}
19 |         </Box>
20 |       </Card>
21 |     </Box>
22 | }
23 | 
24 | export default BrowserMockup
25 | 


--------------------------------------------------------------------------------
/lib/templates/tracking-pixel.ts:
--------------------------------------------------------------------------------
 1 | export type TrackingProps = {
 2 |   userId: string;
 3 |   emailId: string;
 4 |   list: string;
 5 | };
 6 | 
 7 | const getImage = ({ userId = '', emailId = '', list = '' }: TrackingProps) => {
 8 |   return `<mj-image src="${process.env.BASE_URL}/api/pixel/${userId}/${emailId}/${list}"></mj-image>`
 9 | }
10 | 
11 | export const getPixelHtml = ({ userId = '', emailId = '', list = '' }: TrackingProps) => {
12 |   return `<img
13 |     src="${process.env.BASE_URL}/api/pixel/${userId}/${emailId}/${list}"
14 |     style="border:0;display:block;outline:=none;text-decoration:none;height:auto;width:10px;font-size:13px;"
15 |     width="10" height="auto"
16 |   />`
17 | }
18 | 
19 | export default getImage
20 | 


--------------------------------------------------------------------------------
/src/components/BrowserMockup.module.css:
--------------------------------------------------------------------------------
 1 | .browserHead {
 2 |   position: sticky;
 3 |   z-index: 100;
 4 |   height: 30px;
 5 |   width: 100%;
 6 |   top: 0;
 7 |   background: #e8e8e8;
 8 |   display: flex;
 9 |   align-items: center;
10 | }
11 | 
12 | .browserDots {
13 |   width: 12px;
14 |   height: 12px;
15 |   border-radius: 12px;
16 |   margin: 0 30px;
17 |   background-color: #ffbb00;
18 | }
19 | 
20 | .browserDots::before, .browserDots::after {
21 |   width: 12px;
22 |   height: 12px;
23 |   border-radius: 12px;
24 |   content: " ";
25 |   position: absolute;
26 | }
27 | 
28 | .browserDots::before {
29 |   margin: 0 -18px;
30 |   background-color: #ff4f4d;
31 | }
32 | 
33 | .browserDots::after {
34 |   margin: 0 18px;
35 |   background-color: #00ce15;
36 | }


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import '@/styles/globals.css'
 2 | import '@mantine/core/styles.css';
 3 | import '@mantine/dates/styles.css';
 4 | import '@mantine/notifications/styles.css';
 5 | import '@mantine/code-highlight/styles.css';
 6 | import '@mantine/dropzone/styles.css';
 7 | 
 8 | import type { AppProps } from 'next/app'
 9 | import { MantineProvider, createTheme } from '@mantine/core';
10 | import { Notifications } from '@mantine/notifications';
11 | import { SessionProvider } from "next-auth/react"
12 | 
13 | const theme = createTheme({
14 |   /** Put your mantine theme override here */
15 | });
16 | 
17 | export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
18 |   return <SessionProvider session={session}>
19 |       <MantineProvider theme={theme}>
20 |         <Notifications />
21 |         <Component {...pageProps} />
22 |       </MantineProvider>
23 |   </SessionProvider>
24 | }
25 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import useSWR from 'swr'
 3 | import { useSession } from "next-auth/react"
 4 | import { useRouter } from 'next/navigation'
 5 | import { LoadingOverlay } from '@mantine/core'
 6 | import fetcher from '../utils/fetcher'
 7 | 
 8 | export default function Home() {
 9 |   const { data: { initialized } = {}, error, isLoading } = useSWR('/api/admin', fetcher)
10 |   const { data: session } = useSession()
11 |   const router = useRouter()
12 | 
13 |   useEffect(() => {
14 |     if (session !== undefined && !isLoading) {
15 |       const path = initialized
16 |         ? session !== null
17 |           ? '/app'
18 |           : '/api/auth/signin'
19 |         : '/setup'
20 | 
21 |       router.push(path)
22 |     }
23 |   }, [session, router, isLoading, initialized])
24 | 
25 |   return <LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
26 | }
27 | 


--------------------------------------------------------------------------------
/src/pages/app/settings.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { useFetch } from '@/utils/apiMiddleware'
 3 | import NewsetterSettings from '@/components/NewsletterSettings';
 4 | import { notifications } from '@mantine/notifications';
 5 | import Layout from './Layout'
 6 | 
 7 | export default function Subscribers() {
 8 |   const [loading, setLoading] = useState(false);
 9 |   const { data = {}, error, isLoading, mutate } = useFetch(`/api/settings`)
10 | 
11 |   const onSuccess = () => {
12 |     notifications.show({
13 |       color: 'green',
14 |       title: 'Success',
15 |       message: `Successfully updated the newsletter settings!`,
16 |     });
17 |   }
18 | 
19 |   return (
20 |     <Layout title="Settings" isLoading={isLoading}>
21 |       {!isLoading && <NewsetterSettings
22 |         loading={loading}
23 |         setLoading={setLoading}
24 |         onSuccess={onSuccess}
25 |         isUpdate={true}
26 |         defaultValues={data}
27 |         buttonCaption="Submit"
28 |       />}
29 |     </Layout>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/pages/api/pixel/[[...slug]].tsx:
--------------------------------------------------------------------------------
 1 | import { ImageResponse } from '@vercel/og'
 2 | import type { NextApiRequest } from 'next'
 3 | 
 4 | export const config = {
 5 |   runtime: 'edge',
 6 | }
 7 | 
 8 | const handler = async (req: NextApiRequest) => {
 9 |   const {searchParams} = new URL(req.url || '');
10 |   const params = searchParams.getAll('slug')
11 | 
12 |   if (params.length === 3) {
13 |     const userId = params[0];
14 |     const campaignId = params[1];
15 |     const list = params[2];
16 | 
17 |     fetch(`${process.env.BASE_URL}/api/track`, {
18 |       method: 'POST',
19 |       headers: {
20 |         'Content-Type': 'application/json',
21 |       },
22 |       body: JSON.stringify({
23 |         api_key: process.env.API_KEY,
24 |         type: 'open',
25 |         userId,
26 |         campaignId,
27 |         list,
28 |       }),
29 |     })
30 |   }
31 | 
32 | 
33 |   return new ImageResponse(
34 |     (<div></div>),
35 |     {
36 |       width: 1,
37 |       height: 1,
38 |     }
39 |   )
40 | }
41 | 
42 | export default handler


--------------------------------------------------------------------------------
/src/pages/api/link/[[...slug]].tsx:
--------------------------------------------------------------------------------
 1 | import type { NextApiRequest, NextApiResponse } from 'next'
 2 | 
 3 | const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 4 |   res.setHeader('Cache-Control', 'no-store')
 5 | 
 6 |   const { slug = [] } = req.query
 7 | 
 8 |   if (slug.length === 4) {
 9 |     const userId = atob(slug[0]);
10 |     const campaignId = atob(slug[1]);
11 |     const link = atob(slug[2]);
12 |     const list = atob(slug[3]);
13 | 
14 |     fetch(`${process.env.BASE_URL}/api/track`, {
15 |       cache: 'no-store',
16 |       method: 'POST',
17 |       headers: {
18 |         'Content-Type': 'application/json',
19 |       },
20 |       body: JSON.stringify({
21 |         api_key: process.env.API_KEY,
22 |         type: 'click',
23 |         userId,
24 |         campaignId,
25 |         link,
26 |         list,
27 |       }),
28 |     })
29 | 
30 |     res.redirect(301, link)
31 |   } else if (slug.length === 3) { // legacy emails
32 |     const link = atob(slug[2]);
33 |     res.redirect(301, link)
34 |   }
35 | 
36 |   res.status(404).end()
37 | }
38 | 
39 | export default handler


--------------------------------------------------------------------------------
/lib/models/templates.ts:
--------------------------------------------------------------------------------
 1 | import { Db, Collection, WithId, ObjectId } from 'mongodb';
 2 | 
 3 | export interface Templates {
 4 |   _id?: ObjectId,
 5 |   name: string,
 6 |   subject: string,
 7 |   html: string,
 8 | }
 9 | 
10 | export class TemplatesDAO {
11 |   private collection: Collection<Templates>;
12 | 
13 |   constructor(db: Db) {
14 |     this.collection = db.collection<Templates>('templates');
15 |   }
16 | 
17 |   async getAll(query: Object): Promise<Templates[] | []> {
18 |     return await this.collection.find(query).toArray();
19 |   }
20 | 
21 |   async getByQuery(query: Object): Promise<Templates> {
22 |     const result = await this.collection.find(query).toArray()
23 |     return result[0];
24 |   }
25 | 
26 |   async updateByQuery(query: Object, update: Object): Promise<WithId<Templates> | null> {
27 |     const result = await this.collection.findOneAndUpdate(
28 |       query,
29 |       { $set: update },
30 |       { returnDocument: 'after' }
31 |     )
32 |     return result;
33 |   }
34 | 
35 |   async create(Templates: Templates): Promise<void> {
36 |     await this.collection.insertOne(Templates);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Vincent Will
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/pages/api/testEmail.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withAuth from '../../../lib/auth';
 3 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 4 | import { sendCampaign } from '../../../lib/email';
 5 | 
 6 | type Result = {
 7 |   message: string,
 8 | }
 9 | 
10 | async function handleTestSend(req: CustomRequest, res: NextApiResponse<Result>) {
11 |   const list = req.headers['x-mailing-list']?.toString() || ''
12 | 
13 |   const link = `${process.env.BASE_URL}/api/confirm?id=test-confirm&list=${list}`
14 |   const regex = new RegExp('{{CONFIRMATION_LINK}}', 'g');
15 |   const html = (req.body.html || '').replace(regex, link)
16 |   const result = await sendCampaign(req.body.testEmail, req.body.subject, html, { userId: 'test-user', templateId: 'test-campaign', list })
17 | 
18 |   res.status(200).json({ message: result })
19 | }
20 | 
21 | async function handler(
22 |   req: CustomRequest,
23 |   res: NextApiResponse<Result>
24 | ) {
25 |   if (req.method === 'POST') {
26 |     await withAuth(req, res, handleTestSend)
27 |   } else {
28 |     res.status(405).json({ message: 'Method not allowed' })
29 |   }
30 | 
31 |   return Promise.resolve()
32 | }
33 | 
34 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/lib/models/settings.ts:
--------------------------------------------------------------------------------
 1 | import { Db, Collection, WithId, ObjectId } from 'mongodb';
 2 | 
 3 | export interface Settings {
 4 |   _id?: ObjectId,
 5 |   name: string,
 6 |   email: string,
 7 |   api_key: string,
 8 |   database: string,
 9 |   sending_type: string, // 'email' or 'ses'
10 |   ses_key?: string,
11 |   ses_secret?: string,
12 |   ses_region?: string,
13 |   email_pass?: string,
14 |   email_host?: string,
15 | }
16 | 
17 | export class SettingsDAO {
18 |   private collection: Collection<Settings>;
19 | 
20 |   constructor(db: Db) {
21 |     this.collection = db.collection<Settings>('settings');
22 |   }
23 | 
24 |   async getAll(query: Object): Promise<Settings[] | []> {
25 |     return await this.collection.find(query).toArray();
26 |   }
27 | 
28 |   async getByQuery(query: Object): Promise<Settings> {
29 |     const result = await this.collection.find(query).toArray()
30 |     return result[0];
31 |   }
32 | 
33 |   async updateByQuery(query: Object, update: Object): Promise<WithId<Settings> | null> {
34 |     const result = await this.collection.findOneAndUpdate(
35 |       query,
36 |       { $set: update },
37 |       { returnDocument: 'after' }
38 |     )
39 |     return result;
40 |   }
41 | 
42 |   async create(settings: Settings): Promise<void> {
43 |     await this.collection.insertOne(settings);
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/pages/api/unsubscribe.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { ObjectId } from 'mongodb'
 3 | import withMongoDB, { CustomRequest, listExists } from '../../../lib/db'
 4 | import { SubscriberDAO } from '../../../lib/models/subscriber'
 5 | 
 6 | type Result = {
 7 |   message: string,
 8 | }
 9 | 
10 | const handleUnsubscribe = async (req: CustomRequest, res: NextApiResponse<Result>) => {
11 |   const id = (req.query.id || '').toString()
12 |   if (id !== 'test-user') {
13 |     const subscriberDAO = new SubscriberDAO(req.db);
14 |     await subscriberDAO.updateByQuery(
15 |       { _id: new ObjectId(id) },
16 |       { unsubscribedAt: new Date() }
17 |     );
18 |   }
19 | 
20 |   res.status(200).json({ message: 'Successfully unsubscribed'})
21 | }
22 | 
23 | async function handler(
24 |   req: CustomRequest,
25 |   res: NextApiResponse<Result>
26 | ) {
27 |   if (req.method === 'GET') {
28 |     const list = (req.query.list || '').toString()
29 | 
30 |     const validList = await listExists(req, res, list)
31 |     if (validList) {
32 |       await withMongoDB(handleUnsubscribe, list)(req, res)
33 |     } else {
34 |       res.status(400).json({ message: 'invalid link - please contact the newsletter owner' })
35 |     }
36 |   } else {
37 |     res.status(405).json({ message: 'Method not allowed' })
38 |   }
39 | }
40 | 
41 | export default handler;


--------------------------------------------------------------------------------
/lib/templates/unsubscribe.ts:
--------------------------------------------------------------------------------
 1 | export type TrackingProps = {
 2 |   userId: string;
 3 |   list: string;
 4 | };
 5 | 
 6 | const getUnsubscribe = ({ userId = '', list = '' }: TrackingProps) => {
 7 |   return `<div style="margin:0px auto;max-width:600px;">
 8 |   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
 9 |     <tbody>
10 |       <tr>
11 |         <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
12 |           <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
13 | <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
14 | <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
15 |   <tbody>
16 |         <tr>
17 |           <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
18 | <div style="font-family:helvetica;font-size:16px;line-height:1;text-align:center;color:#000000;"><a href="${process.env.BASE_URL}/api/unsubscribe?id=${userId}&list=${list}">Unsubscribe</a><span></span></div>
19 |           </td>
20 |         </tr>
21 |   </tbody>
22 | </table>
23 | </div>
24 | 
25 |     <!--[if mso | IE]></td></tr></table><![endif]-->
26 |         </td>
27 |       </tr>
28 |     </tbody>
29 |   </table>
30 | </div>`
31 | }
32 | 
33 | export default getUnsubscribe
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "open-mailer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@mantine/code-highlight": "^7.2.2",
13 |     "@mantine/core": "^7.2.1",
14 |     "@mantine/dates": "^7.2.1",
15 |     "@mantine/dropzone": "^7.2.2",
16 |     "@mantine/hooks": "^7.2.1",
17 |     "@mantine/notifications": "^7.2.1",
18 |     "@tabler/icons-react": "^2.39.0",
19 |     "@vercel/og": "^0.5.18",
20 |     "aws-sdk": "^2.1480.0",
21 |     "dayjs": "^1.11.10",
22 |     "jsonschema": "^1.4.1",
23 |     "mjml": "^4.14.1",
24 |     "mongodb": "^6.1.0",
25 |     "next": "13.5.4",
26 |     "next-auth": "^4.23.2",
27 |     "nextjs-cors": "^2.1.2",
28 |     "nodemailer": "^6.9.6",
29 |     "papaparse": "^5.4.1",
30 |     "react": "^18",
31 |     "react-dom": "^18",
32 |     "recharts": "^2.9.0",
33 |     "swr": "^2.2.4",
34 |     "uuid": "^9.0.1"
35 |   },
36 |   "devDependencies": {
37 |     "@types/mjml": "^4.7.2",
38 |     "@types/node": "^20.8.5",
39 |     "@types/nodemailer": "^6.4.13",
40 |     "@types/papaparse": "^5.3.11",
41 |     "@types/react": "^18",
42 |     "@types/react-dom": "^18",
43 |     "@types/uuid": "^9.0.5",
44 |     "csv-parse": "^5.5.2",
45 |     "eslint": "^8",
46 |     "eslint-config-next": "13.5.4",
47 |     "postcss": "^8.4.31",
48 |     "postcss-preset-mantine": "^1.8.0",
49 |     "postcss-simple-vars": "^7.0.1",
50 |     "ts-node": "^10.9.1",
51 |     "typescript": "^5.2.2"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/utils/apiMiddleware.ts:
--------------------------------------------------------------------------------
 1 | import { useLocalStorage } from '@mantine/hooks';
 2 | import useSWR from 'swr'
 3 | import { notifications } from '@mantine/notifications';
 4 | 
 5 | export const useFetch = (url: string) => {
 6 |   const [mailingList] = useLocalStorage({ key: 'selected-mailing-list' });
 7 | 
 8 |   const fetcher = async ([url, mailingList]: [string, string?]): Promise<any> => {
 9 |     const data = mailingList
10 |       ? await fetch(url, {
11 |         headers: { 'x-mailing-list': mailingList },
12 |       }).then(res => res.json())
13 |       : undefined
14 | 
15 |     return data;
16 |   };
17 | 
18 |   return useSWR([url, mailingList], fetcher)
19 | }
20 | 
21 | type Props = {
22 |   url: string;
23 |   method: string;
24 |   body: Object;
25 | }
26 | 
27 | export const useUpdate = () => {
28 |   const [mailingList] = useLocalStorage({ key: 'selected-mailing-list' });
29 | 
30 |   const triggerUpdate = async ({ url, method, body }: Props) => {
31 |     try {
32 |       const response = await fetch(url, {
33 |         method,
34 |         headers: {
35 |           'Content-Type': 'application/json',
36 |           'x-mailing-list': mailingList,
37 |         },
38 |         body: JSON.stringify(body),
39 |       });
40 | 
41 |       if (!response.ok) {
42 |         throw new Error(`HTTP error! status: ${response.status}`);
43 |       }
44 | 
45 |       return response.json(); // Assuming you expect a JSON response
46 |     } catch (err) {
47 |       notifications.show({
48 |         color: 'red',
49 |         title: 'Error',
50 |         message: 'Something went wrong...',
51 |       });
52 |     }
53 |   };
54 | 
55 |   return { triggerUpdate };
56 | };
57 | 


--------------------------------------------------------------------------------
/src/pages/api/accounts.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { createHash } from 'crypto'
 3 | import withAuth from '../../../lib/auth';
 4 | import withMongoDB, { CustomRequest } from '../../../lib/db'
 5 | import { AdminDAO } from '../../../lib/models/admin'
 6 | 
 7 | type Result = {
 8 |   message: string,
 9 | } | {
10 |   exists: boolean,
11 | } | {
12 |   count: number,
13 | }
14 | 
15 | const createAccount = async (req: CustomRequest, res: NextApiResponse<Result>) => {
16 |   const adminDAO = new AdminDAO(req.db);
17 |   const hash = createHash('sha256');
18 |   hash.update(req.body.password);
19 |   const hashedPassword = hash.digest('hex');
20 | 
21 |   await adminDAO.createAccount({
22 |     username: req.body.username,
23 |     password: hashedPassword,
24 |     role: 'admin',
25 |   })
26 | 
27 |   res.status(200).json({ message: 'success' })
28 | }
29 | 
30 | async function handler(
31 |   req: CustomRequest,
32 |   res: NextApiResponse<Result>
33 | ) {
34 |   if (req.method === 'POST') {
35 |     const adminDAO = new AdminDAO(req.db);
36 |     const accounts = await adminDAO.getAllByQuery({})
37 |     if (accounts.length > 0) {
38 |       await withAuth(req, res, createAccount)
39 |     } else {
40 |       // first account can be created without auth
41 |       await createAccount(req, res)
42 |     }
43 |   } else if (req.method === 'GET') {
44 |     const adminDAO = new AdminDAO(req.db);
45 |     const accounts = await adminDAO.getAllByQuery({})
46 |     const count = accounts.length
47 | 
48 |     res.status(200).json({ count })
49 |   } else {
50 |     res.status(405).json({ message: 'Method not allowed' })
51 |   }
52 | }
53 | 
54 | export default withMongoDB(handler, 'settings');


--------------------------------------------------------------------------------
/lib/models/admin.ts:
--------------------------------------------------------------------------------
 1 | import { Db, Collection, ObjectId, WithId } from 'mongodb';
 2 | 
 3 | export interface Account {
 4 |   _id?: ObjectId,
 5 |   username: string,
 6 |   password: string,
 7 |   role: string, // admin (maybe restricted roles added in future)
 8 | }
 9 | 
10 | export interface Newsletter {
11 |   _id?: ObjectId,
12 |   name: string,
13 |   database: string,
14 | }
15 | 
16 | export interface Settings {
17 |   _id?: ObjectId,
18 |   newsletters: Newsletter[],
19 | }
20 | 
21 | export class AdminDAO {
22 |   // change to admin with accounts & settings collections
23 |   private settingsCollection: Collection<Settings>;
24 |   private accountsCollection: Collection<Account>;
25 | 
26 |   constructor(db: Db) {
27 |     this.settingsCollection = db.collection<Settings>('settings');
28 |     this.accountsCollection = db.collection<Account>('accounts');
29 |   }
30 | 
31 |   async getSettings(): Promise<Settings> {
32 |     const result = await this.settingsCollection.find().toArray()
33 |     return result[0];
34 |   }
35 | 
36 |   async createSettings(settings: Settings): Promise<void> {
37 |     await this.settingsCollection.insertOne(settings);
38 |   }
39 | 
40 |   async updateSettings(query: Object, update: Object): Promise<WithId<Settings> | null> {
41 |     const result = await this.settingsCollection.findOneAndUpdate(
42 |       query,
43 |       { $set: update },
44 |       { returnDocument: 'after' }
45 |     )
46 |     return result;
47 |   }
48 | 
49 |   async getAllByQuery(query: Object): Promise<Account[] | []> {
50 |     return await this.accountsCollection.find(query).toArray();
51 |   }
52 | 
53 |   async createAccount(user: Account): Promise<void> {
54 |     await this.accountsCollection.insertOne(user);
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].js:
--------------------------------------------------------------------------------
 1 | import { MongoClient } from 'mongodb'
 2 | import { createHash } from 'crypto'
 3 | import NextAuth from "next-auth"
 4 | import CredentialsProvider from "next-auth/providers/credentials"
 5 | import { AdminDAO } from '../../../../lib/models/admin'
 6 | 
 7 | const uri = process.env.MONGODB_URI || ''
 8 | const options = {}
 9 | 
10 | export const authOptions = {
11 |   secret: process.env.AUTH_SECRET,
12 |   providers: [
13 |     CredentialsProvider({
14 |       name: 'Credentials',
15 |       credentials: {
16 |         username: { label: "Username", type: "text", placeholder: "jsmith" },
17 |         password: { label: "Password", type: "password" }
18 |       },
19 |       async authorize(credentials, req) {
20 |         let mongoClient
21 |         try {
22 |           const client = new MongoClient(uri, options);
23 |           mongoClient= await client.connect();
24 |           const db = client.db('settings');
25 | 
26 |           const adminDAO = new AdminDAO(db);
27 |           const [account] = await adminDAO.getAllByQuery({ username: credentials.username })
28 |           const hash = createHash('sha256');
29 |           hash.update(credentials.password);
30 |           const inputPasswordHash = hash.digest('hex');
31 | 
32 |           if (account && account.password == inputPasswordHash) {
33 |             return { username: credentials.username }
34 |           } else {
35 |             return null
36 |           }
37 |         } catch (error) {
38 |           console.error('Error occurred:', error);
39 |           return null
40 |         } finally {
41 |           if (mongoClient) {
42 |             mongoClient.close()
43 |           }
44 |         }
45 |       }
46 |     })
47 |   ],
48 | }
49 | 
50 | export default NextAuth(authOptions)


--------------------------------------------------------------------------------
/src/pages/api/templates.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 3 | import withAuth from '../../../lib/auth';
 4 | import { Templates, TemplatesDAO } from '../../../lib/models/templates'
 5 | 
 6 | type Result = {
 7 |   message: string,
 8 | }
 9 | 
10 | async function getTemplates(req: CustomRequest, res: NextApiResponse<Templates[] | Result>) {
11 |   try {
12 |     const templatesDao = new TemplatesDAO(req.db);
13 |     const templates = await templatesDao.getAll({});
14 |     res.status(200).json(templates)
15 |   } catch (e) {
16 |     console.error(e)
17 |     res.status(500).json({ message: 'Internal Server Error' })
18 |   }
19 | }
20 | 
21 | async function updateTemplate(req: CustomRequest, res: NextApiResponse<Templates[] | Result>) {
22 |   try {
23 |     const templatesDao = new TemplatesDAO(req.db);
24 |     const templates = await templatesDao.getAll({});
25 |     const template = templates.find((t) => t.name === req.body.name);
26 |     if (template) {
27 |       await templatesDao.updateByQuery({ name: req.body.name }, { html: req.body.html, subject: req.body.subject });
28 |     } else {
29 |       await templatesDao.create(req.body)
30 |     }
31 | 
32 |     res.status(200).json({ message: 'Success' })
33 |   } catch (e) {
34 |     console.error(e)
35 |     res.status(500).json({ message: 'Internal Server Error' })
36 |   }
37 | }
38 | 
39 | async function handler(
40 |   req: CustomRequest,
41 |   res: NextApiResponse<Templates[] | Result>
42 | ) {
43 |   if (req.method === 'GET') {
44 |     await withAuth(req, res, getTemplates)
45 |   } else if (req.method === 'PUT') {
46 |     await withAuth(req, res, updateTemplate)
47 |   } else {
48 |     res.status(405).json({ message: 'Method not allowed' })
49 |   }
50 | 
51 |   return Promise.resolve()
52 | }
53 | 
54 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/src/pages/api/subscribers.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 3 | import withAuth from '../../../lib/auth';
 4 | import { SubscriberDAO, Subscriber } from '../../../lib/models/subscriber'
 5 | 
 6 | type Error = {
 7 |   message: string,
 8 | }
 9 | 
10 | type Response = {
11 |   subscribers: Subscriber[],
12 |   total: number,
13 | }
14 | 
15 | async function getSubscribers(req: CustomRequest, res: NextApiResponse<Response | Error>) {
16 |   try {
17 |     const { page = '1' } = req.query;
18 |     const p = Array.isArray(page)
19 |       ? parseInt(page[0], 10)
20 |       : parseInt(page, 10);
21 | 
22 |     const subscriberDAO = new SubscriberDAO(req.db);
23 |     const [total, subscribers] = await Promise.all([
24 |       subscriberDAO.getCount({}),
25 |       subscriberDAO.getAll({}, p),
26 |     ])
27 |     res.status(200).json({
28 |       subscribers,
29 |       total,
30 |     })
31 |   } catch (e) {
32 |     console.error(e)
33 |     res.status(500).json({ message: 'Internal Server Error' })
34 |   }
35 | }
36 | 
37 | async function deleteSubscriber(req: CustomRequest, res: NextApiResponse<Response | Error>) {
38 |   try {
39 |     const { email } = req.body;
40 |     const subscriberDAO = new SubscriberDAO(req.db);
41 |     await subscriberDAO.deleteByQuery({ email });
42 | 
43 |     res.status(200).json({
44 |       message: 'success'
45 |     })
46 |   } catch (e) {
47 |     console.error(e)
48 |     res.status(500).json({ message: 'Internal Server Error' })
49 |   }
50 | }
51 | 
52 | async function handler(
53 |   req: CustomRequest,
54 |   res: NextApiResponse<Subscriber[] | Error>
55 | ) {
56 |   if (req.method === 'GET') {
57 |     await withAuth(req, res, getSubscribers)
58 |   } else if (req.method === 'DELETE') {
59 |     await withAuth(req, res, deleteSubscriber)
60 |   } else {
61 |     res.status(405).json({ message: 'Method not allowed' })
62 |   }
63 | 
64 |   return Promise.resolve()
65 | }
66 | 
67 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/lib/models/subscriber.ts:
--------------------------------------------------------------------------------
 1 | import { Db, Collection, WithId, ObjectId } from 'mongodb';
 2 | 
 3 | export interface Subscriber {
 4 |   _id?: ObjectId,
 5 |   email: string;
 6 |   createdAt: Date;
 7 |   name: string | null;
 8 |   groups: string[];
 9 |   confirmed: boolean;
10 |   confirmationId: string,
11 |   received: number,
12 |   opened: number,
13 |   clicked: number,
14 |   location?: string;
15 |   unsubscribedAt?: Date,
16 | }
17 | 
18 | export class SubscriberDAO {
19 |   private collection: Collection<Subscriber>;
20 | 
21 |   constructor(db: Db) {
22 |     this.collection = db.collection<Subscriber>('subscribers');
23 |   }
24 | 
25 |   async getAll(query: Object, page?: number): Promise<Subscriber[] | []> {
26 |     let cursor = this.collection.find(query).sort({ createdAt: -1 });
27 | 
28 |     if (page && 50) {
29 |       const skipAmount = (page - 1) * 50;
30 |       cursor = cursor.skip(skipAmount).limit(50);
31 |     }
32 | 
33 |     return await cursor.toArray();
34 |   }
35 | 
36 |   async getByQuery(query: Object): Promise<Subscriber> {
37 |     const result = await this.collection.find(query).toArray()
38 |     return result[0];
39 |   }
40 | 
41 |   async getCount(query: Object): Promise<number> {
42 |     return await this.collection.countDocuments(query);
43 |   }
44 | 
45 |   async updateByQuery(query: Object, update: Object): Promise<WithId<Subscriber> | null> {
46 |     const result = await this.collection.findOneAndUpdate(
47 |       query,
48 |       { $set: update },
49 |       { returnDocument: 'after' }
50 |     )
51 |     return result;
52 |   }
53 | 
54 |   async deleteByQuery (query: Object): Promise<WithId<Subscriber> | null> {
55 |     const result = await this.collection.findOneAndDelete(query)
56 |     return result;
57 |   }
58 | 
59 |   async increaseTrack(query: Object, field: string): Promise<WithId<Subscriber> | null> {
60 |     const result = await this.collection.findOneAndUpdate(
61 |       query,
62 |       { $inc: { [field]: 1 } },
63 |       { returnDocument: 'after' }
64 |     )
65 |     return result;
66 |   }
67 | 
68 |   async create(user: Subscriber): Promise<void> {
69 |     await this.collection.insertOne(user);
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/pages/api/import.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { v4 as uuidv4 } from 'uuid';
 3 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 4 | import { SubscriberDAO, Subscriber } from '../../../lib/models/subscriber'
 5 | import withAuth from '../../../lib/auth';
 6 | 
 7 | type Result = {
 8 |   message: string,
 9 | } | {
10 |   progress: number,
11 | }
12 | 
13 | let globalState = { progress: 0 }
14 | 
15 | async function createSubscriber(req: CustomRequest, res: NextApiResponse<Subscriber[] | Result>) {
16 |   try {
17 |     const subscribers = req.body
18 |     const subscriberDAO = new SubscriberDAO(req.db);
19 |     globalState.progress = 0
20 | 
21 |     res.status(200).json({ message: 'success' })
22 | 
23 |     for (let i = 0; i < subscribers.length; i++) {
24 |       await new Promise(resolve => setTimeout(resolve, 500))
25 |       globalState.progress = (i+1)
26 |       const { email, received = 0, opened = 0, clicked = 0, createdAt, location } = subscribers[i]
27 |       const existingSubscriber = await subscriberDAO.getByQuery({ email })
28 | 
29 |       if (!existingSubscriber) {
30 |         const confirmationId = uuidv4();
31 |         await subscriberDAO.create({
32 |           email,
33 |           name: null,
34 |           createdAt: new Date(createdAt),
35 |           confirmed: true,
36 |           confirmationId,
37 |           groups: [],
38 |           location: location,
39 |           received: parseInt(received, 10),
40 |           opened: parseInt(opened, 10),
41 |           clicked: parseInt(clicked, 10),
42 |         });
43 |       }
44 |     };
45 |   }
46 |   catch (e) {
47 |     console.error(e)
48 |     res.status(500).json({ message: 'Internal Server Error' })
49 |   }
50 | }
51 | 
52 | async function handler(
53 |   req: CustomRequest,
54 |   res: NextApiResponse<Subscriber[] | Result>
55 | ) {
56 |   if (req.method === 'POST') {
57 |     await withAuth(req, res, createSubscriber)
58 |   } else if (req.method === 'GET') {
59 |     res.status(200).json(globalState)
60 |   } else {
61 |     res.status(405).json({ message: 'Method not allowed' })
62 |   }
63 | 
64 |   return Promise.resolve()
65 | }
66 | 
67 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/src/pages/api/confirm.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withMongoDB, { CustomRequest, listExists } from '../../../lib/db'
 3 | import { SubscriberDAO, Subscriber } from '../../../lib/models/subscriber'
 4 | import { sendWelcomeEmail } from '../../../lib/email'
 5 | 
 6 | type Error = {
 7 |   message: string,
 8 | }
 9 | 
10 | const confirmSubscriber = async (req: CustomRequest, res: NextApiResponse<Subscriber[] | Error>) => {
11 |   const subscriberDAO = new SubscriberDAO(req.db);
12 |   const subscriber = await subscriberDAO.getByQuery({ confirmationId: req.query.id })
13 |   const list = req.query.list?.toString() || ''
14 | 
15 |   if (subscriber) {
16 |     await subscriberDAO.updateByQuery(
17 |       { confirmationId: req.query.id },
18 |       { confirmed: true }
19 |     );
20 |     if (!subscriber.confirmed) {
21 |       const userId = (subscriber._id || '').toString()
22 |       await sendWelcomeEmail(subscriber.email, list, userId)
23 |     }
24 |     res.redirect(301, `${process.env.BASE_URL}/confirm-success`)
25 |   } else {
26 |     res.status(400).json({
27 |       message: 'Invalid confirmation link',
28 |     })
29 |   }
30 | }
31 | 
32 | async function handler(
33 |   req: CustomRequest,
34 |   res: NextApiResponse<Subscriber[] | Error>
35 | ) {
36 |   if (req.method === 'GET') {
37 |     try {
38 |       if (!req.query.id || !req.query.list) {
39 |         res.status(400).json({
40 |           message: 'Invalid confirmation link',
41 |         })
42 |       } else if (req.query.id === 'test-confirm') {
43 |         res.redirect(301, `${process.env.BASE_URL}/confirm-success`)
44 |       } else {
45 |         const validList = await listExists(req, res, req.query.list.toString())
46 |         if (validList) {
47 |           await withMongoDB(confirmSubscriber, req.query.list.toString())(req, res)
48 |         } else {
49 |           res.status(400).json({ message: 'list does not exist' })
50 |         }
51 |       }
52 |     } catch (e) {
53 |       console.error(e)
54 |       res.status(500).json({ message: 'Internal Server Error' })
55 |     }
56 |   } else {
57 |     res.status(405).json({ message: 'Method not allowed' })
58 |   }
59 | 
60 |   return Promise.resolve()
61 | }
62 | 
63 | export default handler;


--------------------------------------------------------------------------------
/src/pages/api/track.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 3 | import { CampaignDAO } from '../../../lib/models/campaigns'
 4 | import { SubscriberDAO } from '../../../lib/models/subscriber'
 5 | import { ObjectId } from 'mongodb';
 6 | 
 7 | type Result = {
 8 |   message: string,
 9 | }
10 | 
11 | const handleTrack = async (req: CustomRequest, res: NextApiResponse<Result>) => {
12 |   const campaingDao = new CampaignDAO(req.db);
13 |   const subscriberDAO = new SubscriberDAO(req.db);
14 |   try {
15 |     if (req.body.type === 'open') {
16 |       const updatedCampaign = await campaingDao.trackOpen(req.body.campaignId, req.body.userId)
17 |       const updatedUser = updatedCampaign?.users.find(u => u.id === req.body.userId)
18 |       if (updatedUser?.opens === 1) {
19 |         await subscriberDAO.increaseTrack({ _id: new ObjectId(req.body.userId) }, 'opened')
20 |       }
21 |     } else if (req.body.type === 'click') {
22 |       const updatedCampaign = await campaingDao.trackClick(req.body.campaignId, req.body.userId, req.body.link)
23 |       const updatedUser = updatedCampaign?.users.find(u => u.id === req.body.userId)
24 |       if (updatedUser?.clicks.length === 1) {
25 |         await subscriberDAO.increaseTrack({ _id: new ObjectId(req.body.userId) }, 'clicked')
26 |       }
27 |       if (updatedUser?.opens === 0) { // tacking pixel apparently didn't work - so track open here
28 |         await subscriberDAO.increaseTrack({ _id: new ObjectId(req.body.userId) }, 'opened')
29 |       }
30 |     }
31 |     res.status(200).json({ message: 'success' })
32 |   } catch(err) {
33 |     console.error('Error on tracking:', err)
34 |     res.status(500).json({ message: 'Internal Server Error' })
35 |   }
36 | }
37 | 
38 | async function handler(
39 |   req: CustomRequest,
40 |   res: NextApiResponse<Result>
41 | ) {
42 |   if (req.method === 'POST') {
43 |     if (req.body.api_key === process.env.API_KEY) {
44 |       const { list } = req.body
45 |       await withMongoDB(handleTrack, list)(req, res)
46 |     } else {
47 |       res.status(401).json({ message: 'Unauthorized' })
48 |     }
49 |   } else {
50 |     res.status(405).json({ message: 'Method not allowed' })
51 |   }
52 | }
53 | 
54 | export default handler;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | <img src="https://github.com/Vincenius/OpenMailer/assets/43953403/f4c5f1ce-6ef5-4ab7-9569-8778d2990980" width="300" alt="OpenMailer logo">
 4 | 
 5 | <h3><em>OpenMailer is a minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc...</em></h3>
 6 | <p>
 7 | <img src="https://img.shields.io/github/contributors/Vincenius/OpenMailer?style=plastic" alt="Contributors">
 8 | <img src="https://img.shields.io/github/forks/Vincenius/OpenMailer" alt="Forks">
 9 | <img src="https://img.shields.io/github/stars/Vincenius/OpenMailer" alt="Stars">
10 | <img src="https://img.shields.io/github/license/Vincenius/OpenMailer?" alt="Licence">
11 | <img src="https://img.shields.io/github/issues/Vincenius/OpenMailer" alt="Issues">
12 | <img src="https://img.shields.io/github/languages/count/Vincenius/OpenMailer" alt="Languages">
13 | <img src="https://img.shields.io/github/repo-size/Vincenius/OpenMailer" alt="Repository Size">
14 | </p>
15 | 
16 | <img src="https://github.com/Vincenius/OpenMailer/assets/43953403/5a2f25db-ab5b-4e85-9ee0-b502d6479a65" alt="Screenshots of different pages of OpenMailer">
17 | </div>
18 | 
19 | ## Features
20 | 
21 | - creation of multiple email lists
22 | 
23 | - sending emails either via credentials or AWS SES using nodemailer
24 | 
25 | - a POST endpoint for subscribing
26 | 
27 | - import functionality for subscribers
28 | 
29 | - double opt-in and unsubscribe logic
30 | 
31 | - sending plain HTML campaigns
32 | 
33 | - click & open rate tracking per campaing & subscriber
34 | 
35 | - click statistics for links
36 | 
37 | ## Setup
38 | 
39 | *Disclaimer: Hosting on Vercel does not work properly at the moment because of long running background tasks*
40 | 
41 | 1. Create a MongoDB database. Your database user should have admin permissions.
42 | 
43 | 2. Install dependencies with `npm i` or `yarn`
44 | 
45 | 3. Copy `.env.dist` to `.env.local` and update the configuration
46 | 
47 | 4. Run locally with `npm run dev`. To run the production version use `npm run build` and `npm run start`.
48 | 
49 | If you need additional instructions, here is a guide on how to self-host applications on an Ubuntu server: [https://dev.to/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple](https://dev.to/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple)
50 | 


--------------------------------------------------------------------------------
/src/pages/api/send.ts:
--------------------------------------------------------------------------------
 1 | import { ObjectId } from 'mongodb';
 2 | import type { NextApiResponse } from 'next'
 3 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 4 | import { CampaignDAO, Campaign } from '../../../lib/models/campaigns'
 5 | import { SubscriberDAO } from '../../../lib/models/subscriber'
 6 | import { sendCampaign } from '../../../lib/email';
 7 | 
 8 | type Result = {
 9 |   message: string,
10 | }
11 | 
12 | async function handleCampaignSend(req: CustomRequest, res: NextApiResponse<Result>) {
13 |   const campaignDao = new CampaignDAO(req.db);
14 |   const subscriberDAO = new SubscriberDAO(req.db);
15 |   const mailingList = req.headers['x-mailing-list']?.toString() || ''
16 | 
17 |   const campaign = await campaignDao.getByQuery({ id: req.body.campaignId })
18 |   const allPendingUsers = campaign.users.filter(u => u.status !== 'success')
19 |   const sendingUsers = allPendingUsers.splice(0, 10)
20 | 
21 |   const promises = sendingUsers.map(async u => {
22 |     const query = { _id: new ObjectId(u.id) }
23 |     const user = await subscriberDAO.getByQuery(query)
24 |     const result = await sendCampaign(user.email, campaign.subject, campaign.html, { userId: u.id, templateId: req.body.campaignId, list: mailingList })
25 | 
26 |     if (result === 'success') {
27 |       await subscriberDAO.increaseTrack(query, 'received')
28 |     }
29 | 
30 |     return campaignDao.updateStatus(req.body.campaignId, u.id, result)
31 |   })
32 | 
33 |   await Promise.all(promises)
34 | 
35 |   if (allPendingUsers.length > 0) { // call recursively if pending users left
36 |     fetch(`${process.env.BASE_URL}/api/send`, {
37 |       method: 'POST',
38 |       headers: {
39 |         'Content-Type': 'application/json',
40 |         'x-mailing-list': mailingList,
41 |       },
42 |       body: JSON.stringify(req.body),
43 |     })
44 |   }
45 | 
46 |   res.status(200).json({ message:'success' })
47 | }
48 | 
49 | async function handler(
50 |   req: CustomRequest,
51 |   res: NextApiResponse<Campaign[] | Result>
52 | ) {
53 |   if (req.method === 'POST') {
54 |     if (req.body.api_key === process.env.API_KEY) {
55 |       await handleCampaignSend(req, res)
56 |     } else {
57 |       res.status(401).json({ message: 'Unauthorized' })
58 |     }
59 |   } else {
60 |     res.status(405).json({ message: 'Method not allowed' })
61 |   }
62 | 
63 |   return Promise.resolve()
64 | }
65 | 
66 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/src/pages/api/campaigns.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { v4 as uuidv4 } from 'uuid';
 3 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 4 | import withAuth from '../../../lib/auth';
 5 | import { CampaignDAO, Campaign } from '../../../lib/models/campaigns'
 6 | import { SubscriberDAO } from '../../../lib/models/subscriber'
 7 | 
 8 | type Result = {
 9 |   message: string,
10 | }
11 | 
12 | async function getCampaigns(req: CustomRequest, res: NextApiResponse<Campaign[] | Result>) {
13 |   try {
14 |     const campaignDao = new CampaignDAO(req.db);
15 |     const campaigns = await campaignDao.getAll();
16 |     res.status(200).json(campaigns)
17 |   } catch (e) {
18 |     console.error(e)
19 |     res.status(500).json({ message: 'Internal Server Error' })
20 |   }
21 | }
22 | 
23 | async function sendCampaign(req: CustomRequest, res: NextApiResponse<Result>) {
24 |   const campaignDao = new CampaignDAO(req.db);
25 |   const subscriberDAO = new SubscriberDAO(req.db);
26 |   const subscribers = await subscriberDAO.getAll({ $and: [
27 |     { "unsubscribedAt": { $exists: false }},
28 |     { "confirmed": true },
29 |   ] });
30 |   const newCampaignId = uuidv4();
31 | 
32 |   await campaignDao.create({
33 |     id: newCampaignId,
34 |     createdAt: new Date(),
35 |     subject: req.body.subject,
36 |     html: req.body.html,
37 |     users: subscribers.map(s => ({
38 |       id: (s._id || '').toString(),
39 |       status: 'pending',
40 |       opens: 0,
41 |       clicks: [],
42 |     }))
43 |   })
44 | 
45 |   fetch(`${process.env.BASE_URL}/api/send`, {
46 |     method: 'POST',
47 |     headers: {
48 |       'Content-Type': 'application/json',
49 |       'x-mailing-list': req.headers['x-mailing-list']?.toString() || ''
50 |     },
51 |     body: JSON.stringify({
52 |       api_key: process.env.API_KEY,
53 |       campaignId: newCampaignId,
54 |     }),
55 |   })
56 | 
57 |   res.status(200).json({ message:'success' })
58 | }
59 | 
60 | async function handler(
61 |   req: CustomRequest,
62 |   res: NextApiResponse<Campaign[] | Result>
63 | ) {
64 |   if (req.method === 'GET') {
65 |     await withAuth(req, res, getCampaigns)
66 |   } else if (req.method === 'POST') {
67 |     await withAuth(req, res, sendCampaign)
68 |   } else {
69 |     res.status(405).json({ message: 'Method not allowed' })
70 |   }
71 | 
72 |   return Promise.resolve()
73 | }
74 | 
75 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/src/pages/api/dashboard.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import withMongoDB, { CustomRequest } from '../../../lib/db';
 3 | import withAuth from '../../../lib/auth';
 4 | import { CampaignDAO, Campaign } from '../../../lib/models/campaigns'
 5 | import { SubscriberDAO } from '../../../lib/models/subscriber'
 6 | 
 7 | type Error = {
 8 |   message: string,
 9 | }
10 | 
11 | type SubChartResult = {
12 |   date: string,
13 |   subscribes: number,
14 | }
15 | 
16 | type Result = {
17 |   subscribers: SubChartResult[],
18 |   campaign: Campaign | null,
19 |   subscriberCount: number,
20 | }
21 | 
22 | const getDashboardData = async (req: CustomRequest, res: NextApiResponse<Result>) => {
23 |   const subscriberDAO = new SubscriberDAO(req.db);
24 |   const campaignDAO = new CampaignDAO(req.db);
25 |   const sevenDaysAgo = new Date();
26 |   sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
27 |   sevenDaysAgo.setUTCHours(0,0,0,0);
28 | 
29 |   const subscribed = await subscriberDAO.getAll({ "createdAt": { $gte: sevenDaysAgo } })
30 |   const unsubscribed = await subscriberDAO.getAll({ "unsubscribedAt": { $gte: sevenDaysAgo } })
31 |   const subscriberCount = await subscriberDAO.getCount({ $and: [
32 |     { "unsubscribedAt": { $exists: false }},
33 |     { "confirmed": true },
34 |   ] })
35 | 
36 |   const currentDate = new Date();
37 |   const subscribers = [];
38 |   for (let i = 0; i < 7; i++) {
39 |     const date = currentDate.toISOString().substring(0, 10)
40 | 
41 |     const dateSubs = subscribed
42 |       .filter(s => s.createdAt.toISOString().substring(0, 10) === date)
43 |       .length
44 |     const dateUnsubs = unsubscribed
45 |       .filter(s => !!s.unsubscribedAt)
46 |       .filter(s => (s.unsubscribedAt || new Date()).toISOString().substring(0, 10) === date)
47 |       .length
48 | 
49 |     currentDate.setDate(currentDate.getDate() - 1);
50 | 
51 |     subscribers.push({ date, subscribes: dateSubs - dateUnsubs })
52 |   }
53 | 
54 |   const campaign = await campaignDAO.getLatest()
55 | 
56 |   res.status(200).json({
57 |     subscribers: subscribers.reverse(),
58 |     campaign,
59 |     subscriberCount,
60 |   })
61 | }
62 | 
63 | async function handler(
64 |   req: CustomRequest,
65 |   res: NextApiResponse<Result | Error>
66 | ) {
67 |   if (req.method === 'GET') {
68 |     await withAuth(req, res, getDashboardData)
69 |   } else {
70 |     res.status(405).json({ message: 'Method not allowed' })
71 |   }
72 | }
73 | 
74 | export default withMongoDB(handler);


--------------------------------------------------------------------------------
/src/components/NewSubscribers.tsx:
--------------------------------------------------------------------------------
 1 | import { CodeHighlight } from '@mantine/code-highlight';
 2 | import { Card, LoadingOverlay, Tabs } from '@mantine/core'
 3 | import { useLocalStorage } from '@mantine/hooks'
 4 | 
 5 | import { useFetch } from '@/utils/apiMiddleware'
 6 | 
 7 | const curlCode = (url: string, list: string) => `curl -X POST -H "Content-Type: application/json" \\
 8 | -d '{"list": "${list}", "email": "subscriber@example.com"}' \\
 9 | ${url}/api/subscribe`
10 | 
11 | const jsCode = (url: string, list: string) => `fetch("${url}/api/subscribe", {
12 |   method: 'POST',
13 |   headers: {
14 |     'Content-Type': 'application/json',
15 |   },
16 |   body: JSON.stringify({
17 |     list: '${list}',
18 |     email: 'subscriber@example.com', // replace with user email
19 |   }),
20 | })`
21 | 
22 | const htmlCode = (url: string, list: string) => `<form action="${url}/api/subscribe" method="POST">
23 |   <label for="email">Email:</label><br>
24 |   <input type="email" id="email" name="email" required><br>
25 |   <input type="text" id="list" name="list" value="${list}" style="display: none;" required>
26 |   <button type="submit">Submit</button>
27 | </form>`
28 | 
29 | 
30 | export default function NewSubscribers() {
31 |   const { data = {}, error, isLoading } = useFetch('/api/admin')
32 |   const [mailingList] = useLocalStorage({ key: 'selected-mailing-list' });
33 |   const { base_url } = data;
34 | 
35 |   return (<>
36 |     <Card shadow="sm" padding="lg" radius="md" withBorder mr="md">
37 |       <LoadingOverlay visible={!!isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
38 |       <Tabs defaultValue="javascript">
39 |         <Tabs.List mb="md">
40 |           <Tabs.Tab value="javascript">
41 |             JavaScript
42 |           </Tabs.Tab>
43 |           <Tabs.Tab value="form">
44 |             HTML Form
45 |           </Tabs.Tab>
46 |           <Tabs.Tab value="curl">
47 |             cURL
48 |           </Tabs.Tab>
49 |         </Tabs.List>
50 | 
51 |         <Tabs.Panel value="javascript">
52 |           <CodeHighlight code={jsCode(base_url, mailingList)} language="javascript" />
53 |         </Tabs.Panel>
54 | 
55 |         <Tabs.Panel value="form">
56 |           <CodeHighlight code={htmlCode(base_url, mailingList)} language="html" />
57 |         </Tabs.Panel>
58 | 
59 |         <Tabs.Panel value="curl">
60 |           <CodeHighlight code={curlCode(base_url, mailingList)} language="bash" />
61 |         </Tabs.Panel>
62 |       </Tabs>
63 |     </Card>
64 |     </>)
65 | }


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --max-width: 1100px;
  3 |   --border-radius: 12px;
  4 |   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
  5 |     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
  6 |     'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
  7 | 
  8 |   --foreground-rgb: 0, 0, 0;
  9 |   --background-start-rgb: 214, 219, 220;
 10 |   --background-end-rgb: 255, 255, 255;
 11 | 
 12 |   --primary-glow: conic-gradient(
 13 |     from 180deg at 50% 50%,
 14 |     #16abff33 0deg,
 15 |     #0885ff33 55deg,
 16 |     #54d6ff33 120deg,
 17 |     #0071ff33 160deg,
 18 |     transparent 360deg
 19 |   );
 20 |   --secondary-glow: radial-gradient(
 21 |     rgba(255, 255, 255, 1),
 22 |     rgba(255, 255, 255, 0)
 23 |   );
 24 | 
 25 |   --tile-start-rgb: 239, 245, 249;
 26 |   --tile-end-rgb: 228, 232, 233;
 27 |   --tile-border: conic-gradient(
 28 |     #00000080,
 29 |     #00000040,
 30 |     #00000030,
 31 |     #00000020,
 32 |     #00000010,
 33 |     #00000010,
 34 |     #00000080
 35 |   );
 36 | 
 37 |   --callout-rgb: 238, 240, 241;
 38 |   --callout-border-rgb: 172, 175, 176;
 39 |   --card-rgb: 180, 185, 188;
 40 |   --card-border-rgb: 131, 134, 135;
 41 | }
 42 | 
 43 | @media (prefers-color-scheme: dark) {
 44 |   :root {
 45 |     --foreground-rgb: 255, 255, 255;
 46 |     --background-start-rgb: 0, 0, 0;
 47 |     --background-end-rgb: 0, 0, 0;
 48 | 
 49 |     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
 50 |     --secondary-glow: linear-gradient(
 51 |       to bottom right,
 52 |       rgba(1, 65, 255, 0),
 53 |       rgba(1, 65, 255, 0),
 54 |       rgba(1, 65, 255, 0.3)
 55 |     );
 56 | 
 57 |     --tile-start-rgb: 2, 13, 46;
 58 |     --tile-end-rgb: 2, 5, 19;
 59 |     --tile-border: conic-gradient(
 60 |       #ffffff80,
 61 |       #ffffff40,
 62 |       #ffffff30,
 63 |       #ffffff20,
 64 |       #ffffff10,
 65 |       #ffffff10,
 66 |       #ffffff80
 67 |     );
 68 | 
 69 |     --callout-rgb: 20, 20, 20;
 70 |     --callout-border-rgb: 108, 108, 108;
 71 |     --card-rgb: 100, 100, 100;
 72 |     --card-border-rgb: 200, 200, 200;
 73 |   }
 74 | }
 75 | 
 76 | * {
 77 |   box-sizing: border-box;
 78 |   padding: 0;
 79 |   margin: 0;
 80 | }
 81 | 
 82 | html,
 83 | body {
 84 |   max-width: 100vw;
 85 |   overflow-x: hidden;
 86 | }
 87 | 
 88 | body {
 89 |   color: rgb(var(--foreground-rgb));
 90 |   background: linear-gradient(
 91 |       to bottom,
 92 |       transparent,
 93 |       rgb(var(--background-end-rgb))
 94 |     )
 95 |     rgb(var(--background-start-rgb));
 96 | }
 97 | 
 98 | a {
 99 |   color: inherit;
100 |   text-decoration: none;
101 | }
102 | 
103 | @media (prefers-color-scheme: dark) {
104 |   html {
105 |     color-scheme: dark;
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/src/pages/api/subscribe.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { v4 as uuidv4 } from 'uuid';
 3 | import NextCors from 'nextjs-cors';
 4 | import withMongoDB, { CustomRequest, listExists } from '../../../lib/db';
 5 | import { SubscriberDAO, Subscriber } from '../../../lib/models/subscriber'
 6 | import { validate } from 'jsonschema';
 7 | import { sendConfirmationEmail } from '../../../lib/email';
 8 | 
 9 | type Error = {
10 |   message: string,
11 | }
12 | 
13 | type Response = {
14 |   subscribers: Subscriber[],
15 |   total: number,
16 | }
17 | 
18 | async function createSubscriber(req: CustomRequest, res: NextApiResponse<string | Error>) {
19 |   try {
20 |     const subscriberDAO = new SubscriberDAO(req.db);
21 |     const existingSubscriber = await subscriberDAO.getByQuery({ email: req.body.email })
22 | 
23 |     if (!existingSubscriber) {
24 |       const confirmationId = uuidv4();
25 |       await subscriberDAO.create({
26 |         email: req.body.email,
27 |         name: req.body.name || null,
28 |         createdAt: new Date(),
29 |         confirmed: false,
30 |         confirmationId,
31 |         groups: req.body.groups || [],
32 |         received: 0,
33 |         opened: 0,
34 |         clicked: 0,
35 |       });
36 |       await sendConfirmationEmail(req.body.email, { confirmationId, list: req.body.list })
37 |     }
38 | 
39 |     res.status(200).send('Successfully subscribed!')
40 |   } catch (e) {
41 |     console.error(e)
42 |     res.status(500).json({ message: 'Internal Server Error' })
43 |   }
44 | }
45 | 
46 | async function handler(
47 |   req: CustomRequest,
48 |   res: NextApiResponse<Subscriber[] | Error>
49 | ) {
50 |   if (req.method === 'POST') {
51 |     await NextCors(req, res, {
52 |       // Options
53 |       methods: ['GET', 'POST', 'OPTIONS'],
54 |       origin: process.env.CORS_ORIGIN,
55 |       optionsSuccessStatus: 200,
56 |     });
57 | 
58 |     const schema = {
59 |       "type": "object",
60 |       "properties": {
61 |         "list": {"type": "string"},
62 |         "email": {"type": "string", "format": "email",},
63 |         "name": {"type": "string"},
64 |         "groups": {"type": "array"},
65 |       },
66 |       "required": ["email", "list"]
67 |     };
68 |     const inputValidation = validate(req.body, schema)
69 |     if (inputValidation.errors.length) {
70 |       res.status(400).json({ message: 'wrong input' })
71 |     } else {
72 |       const validList = await listExists(req, res, req.body.list)
73 |       if (validList) {
74 |         await withMongoDB(createSubscriber, req.body.list)(req, res)
75 |       } else {
76 |         res.status(400).json({ message: 'list does not exist' })
77 |       }
78 |     }
79 |   } else if (req.method === 'OPTIONS') {
80 |     await NextCors(req, res, {
81 |       // Options
82 |       methods: ['GET', 'POST', 'OPTIONS'],
83 |       origin: process.env.CORS_ORIGIN,
84 |       optionsSuccessStatus: 200,
85 |     });
86 | 
87 |     res.status(200).end()
88 |   } else {
89 |     res.status(405).json({ message: 'Method not allowed' })
90 |   }
91 | 
92 |   return Promise.resolve()
93 | }
94 | 
95 | export default handler;


--------------------------------------------------------------------------------
/src/pages/api/admin.ts:
--------------------------------------------------------------------------------
  1 | import type { NextApiResponse } from 'next'
  2 | import { getServerSession } from "next-auth/next"
  3 | import withMongoDB, { CustomRequest } from '../../../lib/db'
  4 | import { AdminDAO, Settings } from '../../../lib/models/admin'
  5 | import withAuth from '../../../lib/auth';
  6 | import { authOptions } from "../api/auth/[...nextauth]"
  7 | 
  8 | const getDBName = (inputString: string) => {
  9 |   let modifiedString = inputString.toLowerCase();
 10 |   modifiedString = modifiedString.replace(/[^\w\s]/g, ''); // Remove special characters
 11 |   modifiedString = modifiedString.replace(/\s+/g, '-'); // Replace spaces with "-"
 12 |   return modifiedString;
 13 | }
 14 | 
 15 | interface SettingsWithUrl extends Settings {
 16 |   base_url: string,
 17 | }
 18 | 
 19 | type Result = {
 20 |   message: string,
 21 | } | {
 22 |   initialized: boolean,
 23 | } | SettingsWithUrl
 24 | 
 25 | const updateSettings = async (req: CustomRequest, res: NextApiResponse<Result>) => {
 26 |   const adminDAO = new AdminDAO(req.db);
 27 |   const settings = await adminDAO.getSettings();
 28 | 
 29 |   if (!settings) {
 30 |     await adminDAO.createSettings(req.body)
 31 |   } else {
 32 |     await adminDAO.updateSettings({ _id: settings._id }, req.body)
 33 |   }
 34 | 
 35 |   res.status(200).json({ message: 'success' })
 36 | }
 37 | 
 38 | const addNewsletter = async (req: CustomRequest, res: NextApiResponse<Result>) => {
 39 |   const adminDAO = new AdminDAO(req.db);
 40 |   const settings = await adminDAO.getSettings();
 41 | 
 42 |   let dbName = getDBName(req.body.name);
 43 | 
 44 |   if (settings) { // newsletters exist already
 45 |     let i = 1
 46 |     while (settings.newsletters.find((n) => n.database === dbName)) {
 47 |       i++;
 48 |       dbName = `${getDBName(req.body.name)}-${i}`
 49 |     }
 50 | 
 51 |     await adminDAO.updateSettings({ _id: settings._id }, {
 52 |       newsletters: [
 53 |         ...settings.newsletters,
 54 |         {
 55 |           name: req.body.name,
 56 |           database: dbName,
 57 |         }
 58 |       ],
 59 |     })
 60 |   } else { // first newsletter
 61 |     await adminDAO.createSettings({
 62 |       newsletters: [{
 63 |         name: req.body.name,
 64 |         database: dbName,
 65 |       }]
 66 |     })
 67 |   }
 68 | 
 69 |   res.status(200).json({ message: dbName })
 70 | }
 71 | 
 72 | async function handler(
 73 |   req: CustomRequest,
 74 |   res: NextApiResponse<Result>
 75 | ) {
 76 |   if (req.method === 'GET') {
 77 |     const adminDAO = new AdminDAO(req.db);
 78 |     const settings = await adminDAO.getSettings();
 79 |     const session = await getServerSession(req, res, authOptions)
 80 |     const initialized = (settings?.newsletters || []).length > 0
 81 | 
 82 |     if (session) {
 83 |       res.status(200).json({
 84 |         ...(settings || {}),
 85 |         initialized,
 86 |         base_url: process.env.BASE_URL,
 87 |       })
 88 |     } else {
 89 |       res.status(200).json({ initialized })
 90 |     }
 91 |   } else if (req.method === 'POST') {
 92 |     await withAuth(req, res, updateSettings)
 93 |   } else if (req.method ==='PUT') {
 94 |     await withAuth(req, res, addNewsletter)
 95 |   } {
 96 |     res.status(405).json({ message: 'Method not allowed' })
 97 |   }
 98 | }
 99 | 
100 | export default withMongoDB(handler, 'settings');


--------------------------------------------------------------------------------
/lib/models/campaigns.ts:
--------------------------------------------------------------------------------
  1 | import { Db, Collection, ObjectId, WithId } from 'mongodb';
  2 | 
  3 | export interface User {
  4 |   id: string,
  5 |   status: string,
  6 |   opens: number,
  7 |   clicks: string[],
  8 | }
  9 | 
 10 | export interface Campaign {
 11 |   _id?: ObjectId,
 12 |   id: string,
 13 |   createdAt: Date;
 14 |   subject: string;
 15 |   html: string;
 16 |   users: User[];
 17 | }
 18 | 
 19 | export class CampaignDAO {
 20 |   private collection: Collection<Campaign>;
 21 | 
 22 |   constructor(db: Db) {
 23 |     this.collection = db.collection<Campaign>('campaigns');
 24 |   }
 25 | 
 26 |   async getAll(): Promise<Campaign[] | []> {
 27 |     return await this.collection.find().toArray();
 28 |   }
 29 | 
 30 |   async getByQuery(query: Object): Promise<Campaign> {
 31 |     const result = await this.collection.find(query).toArray()
 32 |     return result[0];
 33 |   }
 34 | 
 35 |   async getLatest(): Promise<Campaign | null> {
 36 |     const result = await this.collection.findOne({}, {sort: {createdAt: -1}})
 37 |     return result
 38 |   }
 39 | 
 40 |   async addUserByQuery(query: Object, update: User): Promise<WithId<Campaign> | null> {
 41 |     const result = await this.collection.findOneAndUpdate(
 42 |       query,
 43 |       { $push: { users: update } },
 44 |       { returnDocument: 'after' }
 45 |     )
 46 |     return result;
 47 |   }
 48 | 
 49 |   async trackOpen(campaignId: string, userId: string): Promise<WithId<Campaign> | null> {
 50 |     const result = await this.collection.findOneAndUpdate(
 51 |       {
 52 |         id: campaignId,
 53 |         'users.id': userId,
 54 |       },
 55 |       { $inc: { 'users.$.opens': 1 }},
 56 |       { returnDocument: 'after' }
 57 |     )
 58 |     return result;
 59 |   }
 60 | 
 61 |   async trackClick(campaignId: string, userId: string, link: string): Promise<WithId<Campaign> | null> {
 62 |     console.log('TRACK', userId, link)
 63 |     const result = await this.collection.findOneAndUpdate(
 64 |       {
 65 |         id: campaignId,
 66 |         'users.id': userId,
 67 |       },
 68 |       { $push: { 'users.$.clicks': link }},
 69 |       { returnDocument: 'after' }
 70 |     )
 71 |     return result;
 72 |   }
 73 | 
 74 |   async updateStatus(campaignId: string, userId: string, status: string): Promise<WithId<Campaign> | null> {
 75 |     const result = await this.collection.findOneAndUpdate(
 76 |       {
 77 |         id: campaignId,
 78 |         'users.id': userId,
 79 |       },
 80 |       { $set: { 'users.$.status': status } },
 81 |       { returnDocument: 'after' }
 82 |     )
 83 |     return result;
 84 |   }
 85 | 
 86 |   // async updateUserByQuery(campaignId: string, userId: string, update: Object): Promise<WithId<Campaign> | null> {
 87 |   //   const mappedUpdate = Object.entries(update).reduce((acc, [key, value]) => ({
 88 |   //     ...acc,
 89 |   //     [`users.$.${key}`]: value,
 90 |   //   }))
 91 |   //   console.log('DBG', mappedUpdate)
 92 |   //   const result = await this.collection.findOneAndUpdate(
 93 |   //     {
 94 |   //       id: campaignId,
 95 |   //       'users.id': userId,
 96 |   //     },
 97 |   //     { $set: mappedUpdate },
 98 |   //     { returnDocument: 'after' }
 99 |   //   )
100 |   //   return result;
101 |   // }
102 | 
103 |   async create(user: Campaign): Promise<void> {
104 |     await this.collection.insertOne(user);
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/lib/db.ts:
--------------------------------------------------------------------------------
  1 | import { MongoClient, Db } from 'mongodb';
  2 | import { NextApiRequest, NextApiResponse } from 'next';
  3 | import { AdminDAO } from './models/admin'
  4 | import { SettingsDAO } from './models/settings';
  5 | import { TemplatesDAO } from './models/templates';
  6 | 
  7 | export interface CustomRequest extends NextApiRequest {
  8 |   dbClient: MongoClient;
  9 |   db: Db,
 10 | }
 11 | 
 12 | if (!process.env.MONGODB_URI) {
 13 |   throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
 14 | }
 15 | 
 16 | const uri = process.env.MONGODB_URI || ''
 17 | const options = {}
 18 | 
 19 | 
 20 | const withMongoDB = (
 21 |   handler: (req: CustomRequest, res: NextApiResponse) => Promise<void>,
 22 |   databaseName?: string,
 23 | ) => {
 24 |   return async (req: NextApiRequest, res: NextApiResponse) => {
 25 |     let mongoClient
 26 |     try {
 27 |       const database = databaseName || req.headers['x-mailing-list']?.toString()
 28 |       const client = new MongoClient(uri, options);
 29 |       mongoClient= await client.connect();
 30 |       const db = client.db(database);
 31 | 
 32 |       // Augment the request object with the MongoDB client and database
 33 |       const customReq: CustomRequest = Object.assign(req, {
 34 |         dbClient: client,
 35 |         db,
 36 |       });
 37 | 
 38 |       await handler(customReq, res);
 39 |     } catch (error) {
 40 |       console.error('Error occurred:', error);
 41 |       res.status(500).json({ error: 'Internal Server Error' });
 42 |     } finally {
 43 |       if (mongoClient) {
 44 |         mongoClient.close()
 45 |       }
 46 |     }
 47 |   };
 48 | };
 49 | 
 50 | export const listExists = async (req: NextApiRequest, res: NextApiResponse, listName: string) => {
 51 |   let mongoClient
 52 |   try {
 53 |     const client = new MongoClient(uri, options);
 54 |     mongoClient= await client.connect();
 55 |     const db = client.db('settings');
 56 |     const adminDAO = new AdminDAO(db)
 57 |     const settings = await adminDAO.getSettings()
 58 | 
 59 |     return settings && !!settings.newsletters.find(newsletter => newsletter.database === listName)
 60 |   } catch (error) {
 61 |     console.error('Error occurred:', error);
 62 |     res.status(500).json({ error: 'Internal Server Error' });
 63 |   } finally {
 64 |     if (mongoClient) {
 65 |       mongoClient.close()
 66 |     }
 67 |   }
 68 | }
 69 | 
 70 | export const getSettings = async (listName: string) => {
 71 |   let mongoClient
 72 |   try {
 73 |     const client = new MongoClient(uri, options);
 74 |     mongoClient= await client.connect();
 75 |     const db = client.db('settings');
 76 |     const adminDAO = new AdminDAO(db)
 77 | 
 78 |     const newsletterDb = client.db(listName);
 79 |     const settingsDAO = new SettingsDAO(newsletterDb)
 80 |     const templatesDAO = new TemplatesDAO(newsletterDb)
 81 | 
 82 |     const [newsletterSettings, settings, templates] = await Promise.all([
 83 |       settingsDAO.getAll({}),
 84 |       adminDAO.getSettings(),
 85 |       templatesDAO.getAll({}),
 86 |     ])
 87 | 
 88 |     return {
 89 |       ...settings,
 90 |       ...newsletterSettings[0],
 91 |       templates,
 92 |     }
 93 |   } catch (error) {
 94 |     console.error('Error occurred:', error);
 95 |     return null
 96 |   } finally {
 97 |     if (mongoClient) {
 98 |       mongoClient.close()
 99 |     }
100 |   }
101 | }
102 | 
103 | export default withMongoDB;
104 | 


--------------------------------------------------------------------------------
/src/pages/app/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Flex, Title, Text } from '@mantine/core'
 2 | import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 3 | // import styles from '@/styles/Home.module.css'
 4 | import NumberCard from '@/components/NumberCard';
 5 | import NewSubscribers from '@/components/NewSubscribers';
 6 | import ImportForm from '@/components/ImportForm';
 7 | import Layout from './Layout'
 8 | import { getOpens, getUniqueClicks, getRate } from '../../utils/campaign';
 9 | import { useFetch } from '../../utils/apiMiddleware'
10 | 
11 | type SubChartResult = {
12 |   date: string,
13 |   subscribes: number,
14 |   subscriberCount: number,
15 | }
16 | 
17 | export default function Home() {
18 |   const { data = {}, error, isLoading, mutate } = useFetch('/api/dashboard')
19 |   const subscribers: SubChartResult[] = data.subscribers || []
20 | 
21 |   const gradientOffset = () => {
22 |     const dataMax = Math.max(...subscribers.map((i) => i.subscribes));
23 |     const dataMin = Math.min(...subscribers.map((i) => i.subscribes));
24 | 
25 |     if (dataMax <= 0) {
26 |       return 0;
27 |     }
28 |     if (dataMin >= 0) {
29 |       return 1;
30 |     }
31 | 
32 |     return dataMax / (dataMax - dataMin);
33 |   };
34 |   const off = gradientOffset();
35 | 
36 |   const lastReceived = data.campaign?.users.length || 0
37 |   const lastOpened = getRate(getOpens(data.campaign) || 0, lastReceived)
38 |   const lastClicked = getRate(getUniqueClicks(data.campaign) || 0, lastReceived)
39 | 
40 |   if (isLoading) {
41 |     return (<Layout title="Dashboard" isLoading={true}>
42 |     </Layout>)
43 |   }
44 | 
45 |   if (data.subscriberCount === 0) {
46 |     return (<Layout title="Dashboard" isLoading={false}>
47 |       <Title size="h1" mb="sm">Welcome to OpenMailer</Title>
48 |       <Text mb="lg">Get started by adding or importing your first subscribers.</Text>
49 | 
50 |       <ImportForm onSuccess={() => mutate()}/>
51 |       <NewSubscribers />
52 |     </Layout>)
53 |   }
54 | 
55 |   return (
56 |     <Layout title="Dashboard" isLoading={isLoading}>
57 |       <Title size="h1" mb="md">Welcome back!</Title>
58 |       <Flex mb="xl">
59 |         <NumberCard title="Subscribers" count={data.subscriberCount} />
60 |         <NumberCard title="Recent Open Rate" count={lastOpened || 0} symbol="%" />
61 |         <NumberCard title="Recent Click Rate" count={lastClicked || 0} symbol="%" />
62 |       </Flex>
63 |       <Title size="h4" mb="md">Recent Subscriber Growth</Title>
64 |       <Flex>
65 |         <ResponsiveContainer  width="100%" height={300}>
66 |           <AreaChart
67 |             width={500}
68 |             height={400}
69 |             data={subscribers}
70 |             margin={{
71 |               top: 10,
72 |               right: 30,
73 |               left: 0,
74 |               bottom: 0,
75 |             }}
76 |           >
77 |             <CartesianGrid strokeDasharray="3 3" />
78 |             <XAxis dataKey="date" />
79 |             <YAxis />
80 |             <Tooltip />
81 |             <defs>
82 |               <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
83 |                 <stop offset={off} stopColor="#2b8a3e" stopOpacity={1} />
84 |                 <stop offset={off} stopColor="#fa5252" stopOpacity={1} />
85 |               </linearGradient>
86 |             </defs>
87 |             <Area type="monotone" dataKey="subscribes" stroke="#2C2E33" fill="url(#splitColor)" />
88 |           </AreaChart>
89 |         </ResponsiveContainer>
90 |       </Flex>
91 |     </Layout>
92 |   )
93 | }
94 | 


--------------------------------------------------------------------------------
/src/pages/api/settings.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiResponse } from 'next'
 2 | import { ObjectId } from 'mongodb'
 3 | import withMongoDB, { CustomRequest } from '../../../lib/db'
 4 | import { Settings, SettingsDAO } from '../../../lib/models/settings'
 5 | import { TemplatesDAO } from '../../../lib/models/templates'
 6 | import { AdminDAO } from '../../../lib/models/admin'
 7 | import withAuth from '../../../lib/auth';
 8 | import { getSubject, getHtml } from '../../../lib/templates/confirmation'
 9 | 
10 | type Result = {
11 |   message: string,
12 | }
13 | 
14 | const addSettings = async (req: CustomRequest, res: NextApiResponse<Result>) => {
15 |   const settingsDAO = new SettingsDAO(req.db);
16 |   const templateDAO = new TemplatesDAO(req.db)
17 |   await Promise.all([
18 |     settingsDAO.create(req.body),
19 |     templateDAO.create({
20 |       name: 'confirmation',
21 |       subject: getSubject(req.body.name),
22 |       html: getHtml(req.body.name),
23 |     }),
24 |   ])
25 | 
26 |   res.status(200).json({ message:'success' })
27 | }
28 | 
29 | const getSettings = async (req: CustomRequest, res: NextApiResponse<Settings>) => {
30 |   const settingsDAO = new SettingsDAO(req.db);
31 |   const result = await settingsDAO.getAll({});
32 | 
33 |   res.status(200).json(result[0])
34 | }
35 | 
36 | const updateSettings = async (req: CustomRequest, res: NextApiResponse<Settings | null>) => {
37 |   const settingsDAO = new SettingsDAO(req.db);
38 |   const { _id, ...update } = req.body
39 |   const result = await settingsDAO.updateByQuery({ _id: new ObjectId(_id) }, update);
40 |   res.status(200).json(result)
41 | }
42 | 
43 | const updateAdmin = async (req: CustomRequest, res: NextApiResponse<Settings | null>) => {
44 |   const adminDAO = new AdminDAO(req.db);
45 |   const settings = await adminDAO.getSettings();
46 |   const updatedNewsletters = settings.newsletters.map((n) => n.database === req.body.database
47 |     ? { ...n, name: req.body.name }
48 |     : n)
49 | 
50 |   await adminDAO.updateSettings({ _id: settings._id }, { newsletters: updatedNewsletters });
51 | }
52 | 
53 | const deleteNewsletter = async (req: CustomRequest, res: NextApiResponse<Settings | null>) => {
54 |   const adminDAO = new AdminDAO(req.db);
55 |   const settings = await adminDAO.getSettings();
56 |   const updatedNewsletters = settings.newsletters.filter((n) => n.database !== req.body.database);
57 | 
58 |   await adminDAO.updateSettings({ _id: settings._id }, { newsletters: updatedNewsletters });
59 | }
60 | 
61 | const deleteDatabases = async (req: CustomRequest, res: NextApiResponse<Result>) => {
62 |   await req.db.dropDatabase()
63 | 
64 |   res.status(200).json({ message:'success' })
65 | }
66 | 
67 | async function handleSettings(req: CustomRequest, res: NextApiResponse<Result | Settings[]>) {
68 |   if (req.method === 'GET') {
69 |     await withMongoDB(getSettings)(req, res)
70 |   } else if (req.method === 'POST') {
71 |     const { database } = req.body;
72 | 
73 |     await withMongoDB(addSettings, database)(req, res)
74 |   } else if (req.method === 'PUT') {
75 |     await withMongoDB(updateAdmin, 'settings')(req, res);
76 |     await withMongoDB(updateSettings)(req, res)
77 |   } else if (req.method === 'DELETE') {
78 |     await withMongoDB(deleteNewsletter, 'settings')(req, res);
79 |     await withMongoDB(deleteDatabases)(req, res)
80 |   } else {
81 |     res.status(405).json({ message: 'Method not allowed' })
82 |   }
83 | }
84 | 
85 | async function handler(
86 |   req: CustomRequest,
87 |   res: NextApiResponse<Result | Settings[]>
88 | ) {
89 |   await withAuth(req, res, handleSettings)
90 | }
91 | 
92 | export default handler;


--------------------------------------------------------------------------------
/src/pages/app/campaigns/new.tsx:
--------------------------------------------------------------------------------
  1 | import { useRouter } from 'next/navigation'
  2 | import { useState } from 'react';
  3 | import { TextInput, Textarea, Flex, Box, Button, Modal, Text } from '@mantine/core';
  4 | import { useDisclosure } from '@mantine/hooks';
  5 | import { notifications } from '@mantine/notifications';
  6 | import Layout from "../Layout";
  7 | import { useUpdate, useFetch } from '@/utils/apiMiddleware'
  8 | import BrowserMockup from '@/components/BrowserMockup'
  9 | 
 10 | export default function NewCampaign() {
 11 |   const router = useRouter()
 12 |   const [subject, setSubject] = useState('');
 13 |   const [html, setHtml] = useState('<html><body>Preview</body></html>');
 14 |   const [loading, setLoading] = useState(false);
 15 |   const [testEmail, setTestEmail] = useState('');
 16 |   const [opened, { open, close }] = useDisclosure(false);
 17 |   const [confirmOpened, { open: confirmOpen, close: confirmClose }] = useDisclosure(false);
 18 |   const { triggerUpdate } = useUpdate()
 19 |   const { data = {}, error, isLoading } = useFetch('/api/dashboard')
 20 | 
 21 |   const sendCampaign = ({ test = false }) => {
 22 |     setLoading(true)
 23 |     const url = test ? '/api/testEmail' : '/api/campaigns';
 24 |     triggerUpdate({ url, method: 'POST', body: {
 25 |       subject,
 26 |       html,
 27 |       testEmail,
 28 |     }}).then(() => {
 29 |       if (test) {
 30 |         close()
 31 |         notifications.show({
 32 |           color: 'green',
 33 |           title: 'Success',
 34 |           message: `Successfully sent test email to ${testEmail}!`,
 35 |         });
 36 |       } else {
 37 |         confirmClose()
 38 |         router.push('/app/campaigns')
 39 |         notifications.show({
 40 |           color: 'green',
 41 |           title: 'Success',
 42 |           message: `Successfully started campaign!`,
 43 |         });
 44 |       }
 45 |     }).finally(() => {
 46 |       setLoading(false)
 47 |     })
 48 |   }
 49 | 
 50 |   return (
 51 |     <Layout title="Campaigns" isLoading={false}>
 52 |       <Flex>
 53 |         <Box w="100%" mr="md">
 54 |           <TextInput
 55 |             value={subject}
 56 |             onChange={(event) => setSubject(event.currentTarget.value)}
 57 |             label="Subject"
 58 |             mb="md"
 59 |           />
 60 |           <Textarea
 61 |             value={html}
 62 |             onChange={(event) => setHtml(event.currentTarget.value)}
 63 |             label="HTML"
 64 |             mb="md"
 65 |             autosize
 66 |             minRows={4}
 67 |             maxRows={12}
 68 |           />
 69 |           {/* GROUPS */}
 70 | 
 71 |           <Flex>
 72 |             <Button loading={loading} onClick={confirmOpen} mr="md">
 73 |               Send now
 74 |             </Button>
 75 |             <Button loading={loading} onClick={open} variant="outline">
 76 |               Send test email
 77 |             </Button>
 78 |           </Flex>
 79 | 
 80 |         </Box>
 81 |         <BrowserMockup>
 82 |           <div dangerouslySetInnerHTML={{__html: html}} />
 83 |         </BrowserMockup>
 84 |       </Flex>
 85 | 
 86 |       <Modal opened={opened} onClose={close} title="Send test email">
 87 |         <TextInput
 88 |           label="Test email address"
 89 |           value={testEmail}
 90 |           onChange={(event) => setTestEmail(event.currentTarget.value)}
 91 |           type="email"
 92 |           mb="md"
 93 |         />
 94 | 
 95 |         <Button loading={loading} onClick={() => sendCampaign({ test: true })}>
 96 |           Send now
 97 |         </Button>
 98 |       </Modal>
 99 | 
100 |       <Modal opened={confirmOpened} title="Are you sure?" size="sm" onClose={confirmClose}>
101 |         <Text mb="md">
102 |           Your campaign “<b>{subject}</b>” will be send out to <b>{data.subscriberCount}</b> subscribers.
103 |         </Text>
104 | 
105 |         <Button loading={loading} onClick={() => sendCampaign({ test: false })}>
106 |           Send now
107 |         </Button>
108 |       </Modal>
109 |     </Layout>
110 |   )
111 | }


--------------------------------------------------------------------------------
/src/pages/app/subscribers.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { Table, ThemeIcon, Tooltip, Flex, Pagination, Button, Modal, ActionIcon } from '@mantine/core';
 3 | import { IconCheck, IconX, IconDots, IconTrash } from '@tabler/icons-react';
 4 | import { useDisclosure } from '@mantine/hooks';
 5 | import NumberCard from '@/components/NumberCard';
 6 | import NewSubscribers from '@/components/NewSubscribers';
 7 | import ImportForm from '@/components/ImportForm';
 8 | import { useFetch, useUpdate } from '@/utils/apiMiddleware'
 9 | import Layout from './Layout'
10 | import { Subscriber } from '../../../lib/models/subscriber';
11 | 
12 | export default function Subscribers() {
13 |   const [opened, { open, close }] = useDisclosure(false);
14 |   const [page, setPage] = useState(1)
15 |   const { data = {}, error, isLoading, mutate } = useFetch(`/api/subscribers?page=${page}`)
16 |   const { total = 0, subscribers = [] } = data
17 |   const { triggerUpdate } = useUpdate()
18 | 
19 |   const deleteSub = async (email: string) => {+
20 |     // todo loading state
21 |     triggerUpdate({ url: '/api/subscribers', method: 'DELETE', body: { email } }).then(() => {
22 |       mutate() // todo optimistic update https://swr.vercel.app/docs/mutation#bound-mutate
23 |     })
24 |   }
25 | 
26 |   return (
27 |     <Layout title="Subscribers" isLoading={isLoading}>
28 |       <Flex mb="lg" justify="space-between" align="center">
29 |         <NumberCard title="Subscriber Count" count={total} />
30 |         <Flex direction="column">
31 |           <Button onClick={open} mb="md">Show subscribe form</Button>
32 |           <ImportForm onSuccess={() => mutate()}/>
33 |         </Flex>
34 |       </Flex>
35 |       <Table striped>
36 |         <Table.Thead>
37 |           <Table.Tr>
38 |             <Table.Th>Email</Table.Th>
39 |             <Table.Th>Status</Table.Th>
40 |             <Table.Th>Created At</Table.Th>
41 |             <Table.Th>Recieved</Table.Th>
42 |             <Table.Th>Opened</Table.Th>
43 |             <Table.Th>Clicked</Table.Th>
44 |             <Table.Th></Table.Th>
45 |           </Table.Tr>
46 |         </Table.Thead>
47 |         <Table.Tbody>{subscribers
48 |           .sort((a: Subscriber, b: Subscriber) => new Date(b.createdAt).getTime() > new Date(a.createdAt).getTime())
49 |           .map((elem: Subscriber) =>
50 |             <Table.Tr key={elem.email}>
51 |               <Table.Td>{elem.email}</Table.Td>
52 |               <Table.Td>
53 |                 <ThemeIcon color={elem.unsubscribedAt ? 'red' : elem.confirmed ? 'green' : 'grey'}>
54 |                   {elem.unsubscribedAt
55 |                     ? <IconX />
56 |                     : elem.confirmed
57 |                       ? <IconCheck style={{ width: '70%', height: '70%' }} />
58 |                       : <IconDots style={{ width: '70%', height: '70%' }} />
59 |                   }
60 |                 </ThemeIcon>
61 |               </Table.Td>
62 |               <Table.Td>{new Date(elem.createdAt).toLocaleDateString()}</Table.Td>
63 |               <Table.Td>{elem.received}</Table.Td>
64 |               <Table.Td>
65 |                 <Tooltip label={elem.opened}>
66 |                   <span>{elem.opened === 0 ? 0 : (elem.opened/elem.received * 100).toFixed(1)}</span>
67 |                 </Tooltip>
68 |               </Table.Td>
69 |               <Table.Td>
70 |                 <Tooltip label={elem.clicked}>
71 |                   <span>{elem.clicked === 0 ? 0 : (elem.clicked/elem.received * 100).toFixed(1)}</span>
72 |                 </Tooltip>
73 |               </Table.Td>
74 |               <Table.Td>
75 |                 <ActionIcon variant="light" color="red" aria-label="delete" onClick={() => deleteSub(elem.email)}>
76 |                   <IconTrash style={{ width: '70%', height: '70%' }} stroke={1.5} />
77 |                 </ActionIcon>
78 |               </Table.Td>
79 |             </Table.Tr>
80 |           )}
81 |         </Table.Tbody>
82 |       </Table>
83 | 
84 |       { total > 50 && <Pagination value={page} onChange={setPage} total={total / 50} mt="md" mb="xl" /> }
85 | 
86 |       <Modal opened={opened} onClose={close} title="Subscribe form" size="xl">
87 |         <NewSubscribers />
88 |       </Modal>
89 |     </Layout>
90 |   )
91 | }
92 | 


--------------------------------------------------------------------------------
/src/pages/setup.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import useSWR from 'swr'
  3 | import { useSession } from "next-auth/react"
  4 | import { signIn } from "next-auth/react"
  5 | import { useRouter } from 'next/navigation'
  6 | import Head from 'next/head'
  7 | import { Card, Title, Flex, Button, TextInput, Stepper, Text, LoadingOverlay } from '@mantine/core';
  8 | import NewsetterSettings from '../components/NewsletterSettings';
  9 | import fetcher from '../utils/fetcher'
 10 | 
 11 | export default function Setup() {
 12 |   const router = useRouter()
 13 |   const { data: { initialized } = {}, isLoading: adminLoading } = useSWR('/api/admin', fetcher)
 14 |   const { data: { count } = {}, isLoading: accountsLoading } = useSWR('/api/accounts', fetcher)
 15 |   const { data: session } = useSession()
 16 |   const [active, setActive] = useState(0);
 17 |   const [loading, setLoading] = useState(false);
 18 |   const [formValues, setFormValues] = useState<any>({})
 19 |   const isLoading = adminLoading || accountsLoading
 20 | 
 21 |   useEffect(() => {
 22 |     if (!isLoading) {
 23 |       if (initialized) {
 24 |         router.push('/app')
 25 |       } else if (!session && count > 0) {
 26 |         router.push('/api/auth/signin')
 27 |       } else if (session) {
 28 |         setActive(1)
 29 |       }
 30 |     }
 31 |   }, [session, isLoading, initialized, router, count])
 32 | 
 33 |   const handleChange = (target: EventTarget): void => {
 34 |     const inputElement = target as HTMLInputElement;
 35 |     setFormValues({
 36 |       ...formValues,
 37 |       [inputElement.name]: inputElement.value,
 38 |     })
 39 |   }
 40 | 
 41 |   const nextStep = () => setActive((current: number) => (current < 3 ? current + 1 : current));
 42 |   // const prevStep = () => setActive((current: number) => (current > 0 ? current - 1 : current));
 43 | 
 44 |   const handleSubmit = (e: React.SyntheticEvent): void => {
 45 |     e.preventDefault();
 46 |     setLoading(true)
 47 |     const uri = active === 0 ? '/api/accounts' : '/api/admin';
 48 |     fetch(uri, {
 49 |       method: 'POST',
 50 |       headers: {
 51 |         'Content-Type': 'application/json',
 52 |       },
 53 |       body: JSON.stringify(formValues),
 54 |     }).then(() => {
 55 |       if (active === 0) {
 56 |         signIn('credentials', { redirect: false, ...formValues })
 57 |         setFormValues({
 58 |           base_url: window.location.origin,
 59 |         })
 60 |       }
 61 |       nextStep()
 62 |     }).finally(() => {
 63 |       setLoading(false)
 64 |     })
 65 |   }
 66 | 
 67 |   const onSuccess = () => {
 68 |     router.push('/app?setup=done')
 69 |   }
 70 | 
 71 |   return <>
 72 |     <Head>
 73 |       <title>OpenMailer</title>
 74 |       <meta name="description" content="A minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc..." />
 75 |       <meta name="viewport" content="width=device-width, initial-scale=1" />
 76 |       <link rel="icon" href="/favicon.ico" />
 77 |     </Head>
 78 |       <Flex justify="center">
 79 |         <Card shadow="sm" padding="lg" radius="md" withBorder m="xl" w={760}>
 80 |           { isLoading && <LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} /> }
 81 | 
 82 |           <Stepper active={active}>
 83 |             <Stepper.Step label="Account" description="Create an admin account" loading={loading && active === 0}>
 84 |               <form onSubmit={handleSubmit}>
 85 |                 <Title size="h3" mb="md" order={2}>Create an admin account</Title>
 86 | 
 87 |                 <TextInput
 88 |                   label="Username"
 89 |                   placeholder="Username"
 90 |                   mb="md"
 91 |                   name="username"
 92 |                   onChange={(event) => handleChange(event.currentTarget)}
 93 |                   required
 94 |                 />
 95 |                 <TextInput
 96 |                   label="Password"
 97 |                   placeholder="Password"
 98 |                   mb="xl"
 99 |                   type="password"
100 |                   name="password"
101 |                   onChange={(event) => handleChange(event.currentTarget)}
102 |                   required
103 |                 />
104 |                 <Flex justify="flex-end">
105 |                   <Button type="submit" loading={loading}>Continue</Button>
106 |                 </Flex>
107 |               </form>
108 |             </Stepper.Step>
109 |             <Stepper.Step label="Email" description="Create your mailing list" loading={loading && active === 1}>
110 |               <Title size="h3" mb="md" order={1}>Create your mailing list</Title>
111 | 
112 |               <NewsetterSettings loading={loading} setLoading={setLoading} onSuccess={onSuccess} />
113 |             </Stepper.Step>
114 |           </Stepper>
115 |         </Card>
116 |       </Flex>
117 |   </>
118 | }
119 | 


--------------------------------------------------------------------------------
/lib/email.ts:
--------------------------------------------------------------------------------
  1 | import AWS from 'aws-sdk'
  2 | import nodemailer, { SentMessageInfo } from 'nodemailer'
  3 | import { getPixelHtml } from './templates/tracking-pixel'
  4 | import getUnsubscribe from './templates/unsubscribe'
  5 | import { getSettings } from './db'
  6 | 
  7 | type TemplateProps = {
  8 |   userId: string;
  9 |   templateId: string;
 10 |   list: string;
 11 | };
 12 | 
 13 | type ConfirmProps = {
 14 |   list: string;
 15 |   confirmationId: string;
 16 | };
 17 | 
 18 | const getTransporter = (settings: any) => {
 19 |   let transporter
 20 |   if (settings.ses_key && settings.ses_secret) {
 21 |     AWS.config.update({
 22 |       apiVersion: '2010-12-01',
 23 |       accessKeyId: settings.ses_key,
 24 |       secretAccessKey: settings.ses_secret,
 25 |       region: settings.ses_region,
 26 |     });
 27 | 
 28 |     transporter = nodemailer.createTransport({
 29 |       SES: new AWS.SES()
 30 |     })
 31 |   } else {
 32 |     transporter = nodemailer.createTransport({
 33 |       host: settings.email_host,
 34 |       port: 465,
 35 |       secure: true,
 36 |       auth: {
 37 |         user: settings.email,
 38 |         pass: settings.email_pass,
 39 |       },
 40 |     } as nodemailer.TransportOptions);
 41 |   }
 42 |   return transporter
 43 | }
 44 | 
 45 | 
 46 | const mapLinks = (mjml: string, userId: string, campaignId: string, list: string) => {
 47 |   let updatedMjml = mjml;
 48 |   const regex = /href="([^"]+)"/g;
 49 |   let match;
 50 | 
 51 |   while ((match = regex.exec(mjml)) !== null) {
 52 |     const mappedLink = `href="${process.env.BASE_URL}/api/link/${btoa(userId)}/${btoa(campaignId)}/${btoa(match[1])}/${btoa(list)}"`
 53 |     updatedMjml = updatedMjml.replace(match[0], mappedLink);
 54 |   }
 55 | 
 56 |   return updatedMjml;
 57 | }
 58 | 
 59 | const attachUnsubscribeAndPixel = (html: string, unsubscribeLink: string, trackingPixel: string) => {
 60 |   let result = html
 61 |   if (html.includes('</body>')) {
 62 |     result = html.replace('</body>', `${unsubscribeLink}${trackingPixel}</body>`)
 63 |   } else {
 64 |     result = `${html}${unsubscribeLink}${trackingPixel}`
 65 |   }
 66 | 
 67 |   return result
 68 | }
 69 | 
 70 | export const sendConfirmationEmail = async (to: string, props: ConfirmProps) => {
 71 |   const link = `${process.env.BASE_URL}/api/confirm?id=${props.confirmationId}&list=${props.list}`
 72 |   const settings = await getSettings(props.list)
 73 |   const template = settings?.templates.find(template => template.name === 'confirmation')
 74 |   const subject = template?.subject || 'Confirm your email address'
 75 |   const regex = new RegExp('{{CONFIRMATION_LINK}}', 'g');
 76 |   const html = (template?.html || '').replace(regex, link)
 77 | 
 78 |   return sendEmail(to, subject, html, settings)
 79 | }
 80 | 
 81 | export const sendCampaign = async (to: string, subject: string, html: string, props: TemplateProps) => {
 82 |   const settings = await getSettings(props.list)
 83 |   const injectedLinksHtml = mapLinks(html, props.userId, props.templateId, props.list)
 84 |   const trackingPixel = getPixelHtml({ userId: props.userId, emailId: props.templateId, list: props.list })
 85 |   const unsubscribeLink = getUnsubscribe({ userId: props.userId, list: props.list })
 86 |   const finalHtml = attachUnsubscribeAndPixel(injectedLinksHtml, unsubscribeLink, trackingPixel)
 87 | 
 88 |   return sendEmail(to, subject, finalHtml, settings)
 89 | }
 90 | 
 91 | export const sendWelcomeEmail = async (to: string, list: string, userId: string) => {
 92 |   const settings = await getSettings(list)
 93 |   const template = settings?.templates.find(template => template.name === 'welcome')
 94 | 
 95 |   if (template) {
 96 |     const subject = template?.subject || 'Confirm your email address'
 97 |     const unsubscribeLink = getUnsubscribe({ userId, list })
 98 |     const finalHtml = attachUnsubscribeAndPixel(template?.html || '', unsubscribeLink, '')
 99 | 
100 |     return sendEmail(to, subject, finalHtml, settings)
101 |   }
102 | }
103 | 
104 | const sendEmail = async (to: string, subject: string, html: string, settings: any) => {
105 |   try {
106 |     const transporter = getTransporter(settings)
107 |     const result: SentMessageInfo = await transporter.sendMail({
108 |       from: `${settings.name} <${settings.email}>`,
109 |       to: `${to} <${to}>`,
110 |       subject,
111 |       html,
112 |     })
113 | 
114 |     if (!settings.ses_key || !settings.ses_secret) {
115 |       if (result.accepted[0]) {
116 |         // console.info('Successfully send email:', subject, result);
117 |         return 'success';
118 |       } else if (result.rejected[0]) {
119 |         console.error('Failed to send email:', subject, result);
120 |         return 'rejected';
121 |       } else {
122 |         console.error('Unexpected error on sending email:', subject, result);
123 |         return 'errored';
124 |       }
125 |     }
126 | 
127 |     return 'success'
128 |   } catch (err) {
129 |     console.error('Unexpected error on sending email:', subject, err);
130 |     return 'errored'
131 |   }
132 | }
133 | 
134 | export default sendEmail


--------------------------------------------------------------------------------
/src/pages/app/templates.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import { useFetch, useUpdate } from '@/utils/apiMiddleware'
  3 | import { notifications } from '@mantine/notifications';
  4 | import { SimpleGrid, Card, Text, Button, Modal, Flex, Box, Textarea, TextInput } from '@mantine/core';
  5 | import { useDisclosure } from '@mantine/hooks';
  6 | import { Templates } from '../../../lib/models/templates'
  7 | import Layout from './Layout'
  8 | import BrowserMockup from '@/components/BrowserMockup';
  9 | import classes from '@/styles/Templates.module.css'
 10 | 
 11 | type TemplateProps = {
 12 |   name: string,
 13 |   title: string,
 14 |   data: Templates,
 15 |   mutate: () => Promise<any>,
 16 | }
 17 | 
 18 | const TemplateCard = (props: TemplateProps) => {
 19 |   const [opened, { open, close }] = useDisclosure(false);
 20 |   const [html, setHtml] = useState(props?.data?.html);
 21 |   const [subject, setSubject] = useState(props?.data?.subject);
 22 |   const [loading, setLoading] = useState(false);
 23 |   const [testEmail, setTestEmail] = useState('');
 24 |   const { triggerUpdate } = useUpdate();
 25 | 
 26 |   useEffect(() => {
 27 |     if (!html && !subject && (props?.data?.html || props?.data?.subject)) {
 28 |       setHtml(props?.data?.html);
 29 |       setSubject(props?.data?.subject);
 30 |     }
 31 |   }, [props.data, html, subject])
 32 | 
 33 |   const sendTestEmail = () => {
 34 |     setLoading(true)
 35 |     triggerUpdate({ url: '/api/testEmail', method: 'POST', body: {
 36 |       subject,
 37 |       html,
 38 |       testEmail,
 39 |     }}).then(() => {
 40 |       notifications.show({
 41 |         color: 'green',
 42 |         title: 'Success',
 43 |         message: `Successfully sent test email to ${testEmail}!`,
 44 |       });
 45 |     }).finally(() => {
 46 |       setLoading(false)
 47 |     })
 48 |   }
 49 | 
 50 |   const saveTemplate = () => {
 51 |     setLoading(true)
 52 |     triggerUpdate({ url: '/api/templates/', method: 'PUT', body: {
 53 |       name: props.name,
 54 |       subject,
 55 |       html,
 56 |     }}).then(() => {
 57 |       close()
 58 |       props.mutate()
 59 |       notifications.show({
 60 |         color: 'green',
 61 |         title: 'Success',
 62 |         message: `Successfully saved template!`,
 63 |       });
 64 |     }).finally(() => {
 65 |       setLoading(false)
 66 |     })
 67 |   }
 68 | 
 69 |   return <Card shadow="sm" radius="md" withBorder>
 70 |     <Card.Section mb="md" withBorder>
 71 |       <div className={classes.cardHeaderContainer}>
 72 |         <BrowserMockup>
 73 |           { props.data && props.data.html && <div dangerouslySetInnerHTML={{__html: props.data.html}} /> }
 74 |           { (!props.data ||!props.data.html) && <span className={classes.placeholder}>Inactive...</span> }
 75 |         </BrowserMockup>
 76 |         <div className={classes.cardHeaderOverlay}></div>
 77 |       </div>
 78 |     </Card.Section>
 79 |     <Text fw={500} mb="md">{props.title}</Text>
 80 |     { props.data && props.data.subject && <Text mb="md" fs="italic">{props.data.subject}</Text> }
 81 | 
 82 |     <Button onClick={open}>Edit</Button>
 83 | 
 84 |     <Modal opened={opened} onClose={close} title="Edit template" size="xl">
 85 |       <Flex>
 86 |         <Box w="100%" mr="md">
 87 |           <TextInput
 88 |             value={subject}
 89 |             onChange={(event) => setSubject(event.currentTarget.value)}
 90 |             label="Subject"
 91 |             mb="md"
 92 |           />
 93 |           <Textarea
 94 |             value={html}
 95 |             onChange={(event) => setHtml(event.currentTarget.value)}
 96 |             label="HTML"
 97 |             mb="md"
 98 |             autosize
 99 |             minRows={4}
100 |             maxRows={12}
101 |           />
102 | 
103 |           <TextInput
104 |             value={testEmail}
105 |             onChange={(event) => setTestEmail(event.currentTarget.value)}
106 |             label="Test Email"
107 |             mb="md"
108 |           />
109 | 
110 |           <Flex>
111 |             <Button loading={loading} onClick={sendTestEmail} variant="outline" mr="md" disabled={!testEmail}>
112 |               Send test email
113 |             </Button>
114 |             <Button loading={loading} onClick={saveTemplate}>
115 |               Save
116 |             </Button>
117 |           </Flex>
118 | 
119 |         </Box>
120 |         <BrowserMockup>
121 |           <div dangerouslySetInnerHTML={{__html: html}} />
122 |         </BrowserMockup>
123 |       </Flex>
124 |     </Modal>
125 |   </Card>
126 | }
127 | 
128 | export default function Templates() {
129 |   const { data = [], error, isLoading, mutate } = useFetch('/api/templates')
130 | 
131 |   return (
132 |     <Layout title="Templates" isLoading={isLoading}>
133 |       <SimpleGrid cols={{ base: 1, xs: 2, sm: 2, lg: 3, xl: 4 }} spacing={20}>
134 |         <TemplateCard name="confirmation" title="Confirmation Email" data={...data.find((d: Templates) => d.name === 'confirmation')} mutate={mutate} />
135 |         <TemplateCard name="welcome" title="Welcome Email" data={...data.find((d: Templates) => d.name === 'welcome')} mutate={mutate} />
136 |       </SimpleGrid>
137 |     </Layout>
138 |   )
139 | }
140 | 


--------------------------------------------------------------------------------
/src/pages/app/campaigns/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import Link from 'next/link'
  3 | import { Table, Tooltip, ActionIcon, Modal, Text, Card, Flex, Button } from '@mantine/core';
  4 | import { IconEye } from '@tabler/icons-react'
  5 | import { useFetch } from '@/utils/apiMiddleware'
  6 | import Layout from '../Layout'
  7 | import { getOpens, getUniqueClicks } from '../../../utils/campaign'
  8 | import { Campaign } from '../../../../lib/models/campaigns';
  9 | 
 10 | // https://mantine.dev/core/pagination/
 11 | 
 12 | type CampaignModalProps = {
 13 |   campaign: Campaign | null,
 14 |   onClose: () => void,
 15 | };
 16 | 
 17 | const DetailsModal = ({ campaign, onClose }: CampaignModalProps) => {
 18 |   const regex = /href="([^"]+)"/g;
 19 |   const uniqueLinks: string[] = [];
 20 | 
 21 |   let match;
 22 |   while ((match = regex.exec(campaign?.html || '')) !== null) {
 23 |     const href = match[1];
 24 |     if (!uniqueLinks.includes(href)) {
 25 |       uniqueLinks.push(href);
 26 |     }
 27 |   }
 28 | 
 29 |   const linkTableData = uniqueLinks?.map((link: string) => ({
 30 |     link,
 31 |     totalClicks: campaign?.users?.reduce((acc, curr) => acc + curr.clicks.filter(c => c === link).length, 0),
 32 |     uniqueClicks: campaign?.users?.reduce((acc, curr) => acc + (curr.clicks.filter(c => c === link).length > 0 ? 1 : 0), 0)
 33 |   }))
 34 | 
 35 |   return <Modal opened={!!campaign} onClose={onClose} title="Campaign Details" size="auto">
 36 |     <Flex mb="xl">
 37 |       <Card shadow="sm" padding="lg" radius="md" withBorder mr="md">
 38 |         <Text>Received</Text>
 39 |         <Text size="xl" fw={700}>
 40 |           {campaign?.users.length === campaign?.users?.filter(u => u.status !== 'pending').length
 41 |             ? campaign?.users.length
 42 |             : `${campaign?.users?.filter(u => u.status !== 'pending').length}/${campaign?.users.length}`}
 43 |         </Text>
 44 |       </Card>
 45 |       <Card shadow="sm" padding="lg" radius="md" withBorder mr="md">
 46 |         <Text>Unique Opens</Text>
 47 |         <Text size="xl" fw={700}>
 48 |           {getOpens(campaign)}
 49 |         </Text>
 50 |       </Card>
 51 |       <Card shadow="sm" padding="lg" radius="md" withBorder mr="md">
 52 |         <Text>Unique Clicks</Text>
 53 |         <Text size="xl" fw={700}>
 54 |           {getUniqueClicks(campaign)}
 55 |         </Text>
 56 |       </Card>
 57 |     </Flex>
 58 | 
 59 |     <Table striped>
 60 |       <Table.Thead>
 61 |         <Table.Tr>
 62 |           <Table.Th>URL</Table.Th>
 63 |           <Table.Th>Total Clicks</Table.Th>
 64 |           <Table.Th>Unique Clicks</Table.Th>
 65 |         </Table.Tr>
 66 |       </Table.Thead>
 67 |       <Table.Tbody>
 68 | 
 69 |         {linkTableData?.sort((a, b) => (b.totalClicks || 0) - (a.totalClicks || 0)).map((data) =>
 70 |           <Table.Tr key={data.link}>
 71 |             <Table.Td>{data.link}</Table.Td>
 72 |             <Table.Td>{data.totalClicks}</Table.Td>
 73 |             <Table.Td>{data.uniqueClicks}</Table.Td>
 74 |           </Table.Tr>
 75 |         )}
 76 |       </Table.Tbody>
 77 |     </Table>
 78 |   </Modal>
 79 | }
 80 | 
 81 | export default function Campaigns() {
 82 |   const { data = [], error, isLoading } = useFetch('/api/campaigns')
 83 |   const [campaignDetails, setCampaignDetails] = useState<Campaign | null>(null)
 84 | 
 85 |   const closeDetailsModal = () => {
 86 |     setCampaignDetails(null)
 87 |   }
 88 | 
 89 |   return (
 90 |     <Layout title="Campaigns" isLoading={isLoading}>
 91 |       <Button
 92 |         component={Link}
 93 |         href="/app/campaigns/new"
 94 |         size="md" mb="md"
 95 |       >
 96 |         New Campaign
 97 |       </Button>
 98 |       <Table striped>
 99 |         <Table.Thead>
100 |           <Table.Tr>
101 |             <Table.Th>Created At</Table.Th>
102 |             <Table.Th>Subject</Table.Th>
103 |             <Table.Th>Recieved</Table.Th>
104 |             <Table.Th>Opened</Table.Th>
105 |             <Table.Th>Clicked</Table.Th>
106 |             <Table.Th></Table.Th>
107 |           </Table.Tr>
108 |         </Table.Thead>
109 |         <Table.Tbody>{data
110 |           .sort((a:any, b:any) => b.createdAt.localeCompare(a.createdAt))
111 |           .map((elem: Campaign) => {
112 |             const received = elem.users.length
113 |             const opened = elem.users.reduce((acc, user) => acc + (user.opens > 0 ? 1 : 0), 0)
114 |             const clicked = elem.users.reduce((acc, user) => acc + (user.clicks.length > 0 ? 1 : 0), 0)
115 |             const pending = elem.users.filter(u => u.status !== 'success').length
116 | 
117 |             return <Table.Tr key={elem.subject}>
118 |               <Table.Td>{new Date(elem.createdAt).toLocaleDateString()}</Table.Td>
119 |               <Table.Td>{elem.subject}</Table.Td>
120 |               <Table.Td>{pending === 0 ? received : `${received - pending} / ${received}`}</Table.Td>
121 |               <Table.Td>
122 |                 <Tooltip label={opened}>
123 |                   <span>{opened === 0 ? 0 : (opened/received * 100).toFixed(1)}</span>
124 |                 </Tooltip>
125 |               </Table.Td>
126 |               <Table.Td>
127 |                 <Tooltip label={clicked}>
128 |                   <span>{clicked === 0 ? 0 : (clicked/received * 100).toFixed(1)}</span>
129 |                 </Tooltip>
130 |               </Table.Td>
131 |               <Table.Td>
132 |                 <ActionIcon variant="filled" onClick={() => setCampaignDetails(elem)}>
133 |                   <IconEye />
134 |                 </ActionIcon>
135 |               </Table.Td>
136 |             </Table.Tr>
137 |           })}
138 |         </Table.Tbody>
139 |       </Table>
140 |       <DetailsModal campaign={campaignDetails} onClose={closeDetailsModal} />
141 |     </Layout>
142 |   )
143 | }
144 | 


--------------------------------------------------------------------------------
/src/pages/app/Layout.tsx:
--------------------------------------------------------------------------------
  1 | import { ReactNode, useEffect, useState } from 'react'
  2 | import useSWR from 'swr'
  3 | import Head from 'next/head'
  4 | import Link from 'next/link'
  5 | import { useRouter } from 'next/router'
  6 | import { signOut, useSession } from "next-auth/react"
  7 | import { useDisclosure, useLocalStorage } from '@mantine/hooks'
  8 | import { AppShell, Burger, NavLink, Title, Flex, LoadingOverlay, Select, Modal, Text } from '@mantine/core'
  9 | import { IconHome2, IconMail, IconUsersGroup, IconTemplate, IconSettings, IconLogout2 } from '@tabler/icons-react';
 10 | import NewsetterSettings from '@/components/NewsletterSettings'
 11 | import fetcher from '../../utils/fetcher'
 12 | import { Newsletter } from '../../../lib/models/admin'
 13 | 
 14 | type LayoutProps = {
 15 |   title: String,
 16 |   isLoading: Boolean,
 17 |   children: ReactNode
 18 | }
 19 | 
 20 | export default function Layout(props: LayoutProps) {
 21 |   const [loading, setLoading] = useState(false)
 22 |   const [opened, { toggle }] = useDisclosure();
 23 |   const [modalOpened, { open, close }] = useDisclosure(false);
 24 |   const { asPath: path } = useRouter();
 25 |   const { data: session } = useSession();
 26 |   const [mailingList, setMailingList] = useLocalStorage({ key: 'selected-mailing-list' });
 27 | 
 28 |   const { data: { initialized, newsletters = [] } = {}, isLoading, mutate } = useSWR('/api/admin', fetcher)
 29 |   const router = useRouter()
 30 |   const activeList = newsletters.find((n: Newsletter) => n.database === mailingList)
 31 | 
 32 |   const onCreateSuccess = (database: string | undefined) => {
 33 |     if (database) {
 34 |       mutate()
 35 |       setMailingList(database)
 36 |       router.push('/app')
 37 |       close()
 38 |     }
 39 |   }
 40 | 
 41 |   useEffect(() => {
 42 |     if (session !== undefined && !isLoading) {
 43 |       if (!initialized || session === null) {
 44 |         const path = initialized
 45 |           ? '/api/auth/signin'
 46 |           : '/setup'
 47 | 
 48 |         router.push(path)
 49 |       } else {
 50 |         // mantine local storage hook returns undefined initially on re-render
 51 |         // prevent resetting the value by checking if it exists via native localstorage
 52 |         const item = localStorage.getItem('selected-mailing-list')
 53 |         if (!item) {
 54 |           setMailingList(newsletters[0].database)
 55 |         }
 56 |       }
 57 |     }
 58 |   }, [session, router, isLoading, initialized, newsletters, setMailingList, mailingList])
 59 | 
 60 |   return (
 61 |     <>
 62 |       <Head>
 63 |         <title>OpenMailer</title>
 64 |         <meta name="description" content="A minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc..." />
 65 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 66 |         <link rel="icon" href="/favicon.ico" />
 67 |       </Head>
 68 |       <main>
 69 |         <LoadingOverlay visible={!!props.isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
 70 |         <AppShell
 71 |           header={{ height: 60 }}
 72 |           navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}
 73 |           padding="md"
 74 |         >
 75 |           <AppShell.Header>
 76 |             <Flex style={{ height: '100%' }} align="center" justify="space-between">
 77 |               <Flex ml="lg">
 78 |                 <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
 79 |                 <Title size="h3">OpenMailer | {props.title}</Title>
 80 |               </Flex>
 81 | 
 82 |               <Select
 83 |                 placeholder="Mailing List"
 84 |                 data={[
 85 |                   ...newsletters.map((n: Newsletter) => ({ value: n.database, label: n.name})),
 86 |                   { value: '_new', label: 'Create new'}
 87 |                 ]}
 88 |                 size="xs"
 89 |                 mr="lg"
 90 |                 value={activeList?.database}
 91 |                 onChange={val => {
 92 |                   if (val === '_new') {
 93 |                     open()
 94 |                   } else if (val) {
 95 |                     setMailingList(val)
 96 |                   }
 97 |                 }}
 98 |                 allowDeselect={false}
 99 |               />
100 |             </Flex>
101 |           </AppShell.Header>
102 | 
103 |           <AppShell.Footer>
104 |             <Text ta="right" pr="sm">
105 |               <a href="https://github.com/Vincenius/open-mailer">GitHub</a> | <a href="https://ko-fi.com/wweb_dev">Donate ❤️</a>
106 |             </Text>
107 |           </AppShell.Footer>
108 | 
109 |           <AppShell.Navbar p="md">
110 |             <NavLink label="Dashboard" href="/app" active={path === '/app'} component={Link} leftSection={<IconHome2 size="1rem" stroke={1.5} />} />
111 |             <NavLink label="Campaigns" href="/app/campaigns" active={path === '/app/campaigns'} component={Link} leftSection={<IconMail size="1rem" stroke={1.5} />} />
112 |             <NavLink label="Subscribers" href="/app/subscribers" active={path === '/app/subscribers'} component={Link} leftSection={<IconUsersGroup size="1rem" stroke={1.5} />} />
113 |             <NavLink label="Templates" href="/app/templates" active={path === '/app/templates'} component={Link} leftSection={<IconTemplate size="1rem" stroke={1.5} />} />
114 |             <NavLink label="Settings" href="/app/settings" active={path === '/app/settings'} component={Link} leftSection={<IconSettings size="1rem" stroke={1.5} />} />
115 |             <NavLink label="Logout" onClick={() => signOut()} leftSection={<IconLogout2 size="1rem" stroke={1.5} />} />
116 |           </AppShell.Navbar>
117 | 
118 |           { mailingList && <AppShell.Main>{props.children}</AppShell.Main> }
119 | 
120 |           <Modal opened={modalOpened} onClose={close} title="Create new mailing list" size="xl">
121 |             <NewsetterSettings
122 |               loading={loading}
123 |               setLoading={setLoading}
124 |               onSuccess={onCreateSuccess}
125 |               buttonCaption="Create"/>
126 |           </Modal>
127 |         </AppShell>
128 |       </main>
129 |     </>
130 |   )
131 | }
132 | 


--------------------------------------------------------------------------------
/lib/templates/welcome.ts:
--------------------------------------------------------------------------------
 1 | import getTrackingPixel from './tracking-pixel'
 2 | 
 3 | export type EmailProps = {
 4 |   userId: string;
 5 |   list: string;
 6 | };
 7 | 
 8 | export const campaignId = 'welcome'
 9 | export const subject = '🚀 Welcome to WebDev Town! Your Weekly Web Dev Newsletter 💻'
10 | 
11 | const getEmail = ({ userId, list }: EmailProps) => {
12 |   return `<mjml>
13 |     <mj-head>
14 |       <mj-attributes>
15 |         <mj-text font-size="16px" font-family="helvetica" />
16 |         <mj-button font-family="helvetica" />
17 |       </mj-attributes>
18 |       <mj-style> a { color: #017a8c; } .bg > table { background-image: linear-gradient(158deg, rgba(84, 84, 84, 0.03) 0%, rgba(84, 84, 84, 0.03) 20%,rgba(219, 219, 219, 0.03) 20%, rgba(219, 219, 219, 0.03) 40%,rgba(54, 54, 54, 0.03) 40%, rgba(54, 54, 54, 0.03) 60%,rgba(99, 99, 99, 0.03) 60%, rgba(99, 99, 99, 0.03) 80%,rgba(92, 92, 92, 0.03) 80%, rgba(92, 92, 92, 0.03) 100%),linear-gradient(45deg, rgba(221, 221, 221, 0.02) 0%, rgba(221, 221, 221, 0.02) 14.286%,rgba(8, 8, 8, 0.02) 14.286%, rgba(8, 8, 8, 0.02) 28.572%,rgba(52, 52, 52, 0.02) 28.572%, rgba(52, 52, 52, 0.02) 42.858%,rgba(234, 234, 234, 0.02) 42.858%, rgba(234, 234, 234, 0.02) 57.144%,rgba(81, 81, 81, 0.02) 57.144%, rgba(81, 81, 81, 0.02) 71.42999999999999%,rgba(239, 239, 239, 0.02) 71.43%, rgba(239, 239, 239, 0.02) 85.71600000000001%,rgba(187, 187, 187, 0.02) 85.716%, rgba(187, 187, 187, 0.02) 100.002%),linear-gradient(109deg, rgba(33, 33, 33, 0.03) 0%, rgba(33, 33, 33, 0.03) 12.5%,rgba(147, 147, 147, 0.03) 12.5%, rgba(147, 147, 147, 0.03) 25%,rgba(131, 131, 131, 0.03) 25%, rgba(131, 131, 131, 0.03) 37.5%,rgba(151, 151, 151, 0.03) 37.5%, rgba(151, 151, 151, 0.03) 50%,rgba(211, 211, 211, 0.03) 50%, rgba(211, 211, 211, 0.03) 62.5%,rgba(39, 39, 39, 0.03) 62.5%, rgba(39, 39, 39, 0.03) 75%,rgba(55, 55, 55, 0.03) 75%, rgba(55, 55, 55, 0.03) 87.5%,rgba(82, 82, 82, 0.03) 87.5%, rgba(82, 82, 82, 0.03) 100%),linear-gradient(348deg, rgba(42, 42, 42, 0.02) 0%, rgba(42, 42, 42, 0.02) 20%,rgba(8, 8, 8, 0.02) 20%, rgba(8, 8, 8, 0.02) 40%,rgba(242, 242, 242, 0.02) 40%, rgba(242, 242, 242, 0.02) 60%,rgba(42, 42, 42, 0.02) 60%, rgba(42, 42, 42, 0.02) 80%,rgba(80, 80, 80, 0.02) 80%, rgba(80, 80, 80, 0.02) 100%),linear-gradient(120deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,rgba(67, 67, 67, 0.03) 14.286%, rgba(67, 67, 67, 0.03) 28.572%,rgba(134, 134, 134, 0.03) 28.572%, rgba(134, 134, 134, 0.03) 42.858%,rgba(19, 19, 19, 0.03) 42.858%, rgba(19, 19, 19, 0.03) 57.144%,rgba(101, 101, 101, 0.03) 57.144%, rgba(101, 101, 101, 0.03) 71.42999999999999%,rgba(205, 205, 205, 0.03) 71.43%, rgba(205, 205, 205, 0.03) 85.71600000000001%,rgba(53, 53, 53, 0.03) 85.716%, rgba(53, 53, 53, 0.03) 100.002%),linear-gradient(45deg, rgba(214, 214, 214, 0.03) 0%, rgba(214, 214, 214, 0.03) 16.667%,rgba(255, 255, 255, 0.03) 16.667%, rgba(255, 255, 255, 0.03) 33.334%,rgba(250, 250, 250, 0.03) 33.334%, rgba(250, 250, 250, 0.03) 50.001000000000005%,rgba(231, 231, 231, 0.03) 50.001%, rgba(231, 231, 231, 0.03) 66.668%,rgba(241, 241, 241, 0.03) 66.668%, rgba(241, 241, 241, 0.03) 83.33500000000001%,rgba(31, 31, 31, 0.03) 83.335%, rgba(31, 31, 31, 0.03) 100.002%),linear-gradient(59deg, rgba(224, 224, 224, 0.03) 0%, rgba(224, 224, 224, 0.03) 12.5%,rgba(97, 97, 97, 0.03) 12.5%, rgba(97, 97, 97, 0.03) 25%,rgba(143, 143, 143, 0.03) 25%, rgba(143, 143, 143, 0.03) 37.5%,rgba(110, 110, 110, 0.03) 37.5%, rgba(110, 110, 110, 0.03) 50%,rgba(34, 34, 34, 0.03) 50%, rgba(34, 34, 34, 0.03) 62.5%,rgba(155, 155, 155, 0.03) 62.5%, rgba(155, 155, 155, 0.03) 75%,rgba(249, 249, 249, 0.03) 75%, rgba(249, 249, 249, 0.03) 87.5%,rgba(179, 179, 179, 0.03) 87.5%, rgba(179, 179, 179, 0.03) 100%),linear-gradient(241deg, rgba(58, 58, 58, 0.02) 0%, rgba(58, 58, 58, 0.02) 25%,rgba(124, 124, 124, 0.02) 25%, rgba(124, 124, 124, 0.02) 50%,rgba(254, 254, 254, 0.02) 50%, rgba(254, 254, 254, 0.02) 75%,rgba(52, 52, 52, 0.02) 75%, rgba(52, 52, 52, 0.02) 100%),linear-gradient(90deg, #ffffff,#ffffff); !important }; </mj-style>
19 |     </mj-head>
20 |     <mj-body>
21 |       <mj-section css-class="bg" border-radius="0 0 10px 10px">
22 |         <mj-column>
23 |           <mj-image src="https://webdev.town/logo.png" width="100px" padding-bottom="20px" alt="WebDev Town" fluid-on-mobile="true" />
24 |           <mj-text align="center" color="#1d1d1d">
25 |             <h2>🚀 Welcome Aboard!</h2>
26 |           </mj-text>
27 |         </mj-column>
28 |       </mj-section>
29 |       <mj-section>
30 |         <mj-column>
31 |           <mj-text>Hi,<br/>Thank you for subscribing to the <a href="https://webdev.town">WebDev Town</a> Newsletter.</mj-text>
32 |           <mj-text><br/><i>📅 What to Expect:</i></mj-text>
33 |           <mj-text>Each <b>Wednesday morning</b>, I'll send you an e-mail with the most valuable web development resources right to your inbox.</mj-text>
34 |           <mj-text><br/><i>📚 Check Out What's Already Here:</i></mj-text>
35 |           <mj-text>Can't wait for the next issue? You can find all previous resources and some useful collections on the website: </mj-text>
36 |           </mj-text>
37 |           <mj-text>
38 |             <a href="https://webdev.town"> 🔗All resources from previous issues </a>
39 |           </mj-text>
40 |           <mj-text>
41 |             <a href="https://webdev.town/collections/backgrounds"> 🖼️Ultimate Collection Of Websites For Creative Backgrounds </a>
42 |           </mj-text>
43 |           <mj-text>
44 |             <a href="https://webdev.town/collections/icons"> 💻A Curated List Of Websites For Free Icon Sets </a>
45 |           </mj-text>
46 |           <mj-text><i><br/>💡 Share Your Knowledge:</i></mj-text>
47 |         <mj-text>Do you have a side project, or a valuable resources you'd like to share with the community? I'd love to hear from you! Just hit "reply" to this email and send your links or feedback. You can also submit your links directly through the <a href="https://webdev.town/submit">online portal</a>.
48 |   </mj-text>
49 |           <mj-text> Thank you once again. I really do appreciate having you on board.<br/>Feel free to reach out anytime if you have questions, suggestions, or just want to chat about web development.</mj-text>
50 |           <mj-text> Cheers,<br>Vincent</mj-text>
51 |             <mj-text>P.S. You can also follow me on <a href="https://twitter.com/wweb_dev">Twitter</a>. I'm sharing insights how I'm building and growing this newsletter, along with other side-projects.</mj-text>
52 |         </mj-column>
53 |       </mj-section>
54 |       <mj-section>
55 |         <mj-column>
56 |           <mj-text align="center">
57 |             <a href="${process.env.BASE_URL}/api/unsubscribe?id=${userId}&list=${list}">Unsubscribe</a><span>
58 |           </mj-text>
59 |         </mj-column>
60 |         ${getTrackingPixel({ userId, emailId: 'welcome', list })}
61 |       </mj-section>
62 |     </mj-body>
63 |   </mjml>`
64 | }
65 | 
66 | export default getEmail


--------------------------------------------------------------------------------
/lib/templates/confirmation.ts:
--------------------------------------------------------------------------------
  1 | export const getHtml = (name: string) => {
  2 |   return `<!DOCTYPE html>
  3 |     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  4 |       <head>
  5 |           <title> </title>
  6 |           <!--[if !mso]><!-->
  7 |           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8 |           <!--<![endif]-->
  9 |           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 10 |           <meta name="viewport" content="width=device-width, initial-scale=1" />
 11 |           <style type="text/css">
 12 |               #outlook a {
 13 |                   padding: 0;
 14 |               }
 15 |               body {
 16 |                   margin: 0;
 17 |                   padding: 0;
 18 |                   -webkit-text-size-adjust: 100%;
 19 |                   -ms-text-size-adjust: 100%;
 20 |               }
 21 |               table,
 22 |               td {
 23 |                   border-collapse: collapse;
 24 |                   mso-table-lspace: 0pt;
 25 |                   mso-table-rspace: 0pt;
 26 |               }
 27 |               img {
 28 |                   border: 0;
 29 |                   height: auto;
 30 |                   line-height: 100%;
 31 |                   outline: none;
 32 |                   text-decoration: none;
 33 |                   -ms-interpolation-mode: bicubic;
 34 |               }
 35 |               p {
 36 |                   display: block;
 37 |                   margin: 13px 0;
 38 |               }
 39 |           </style>
 40 |           <!--[if mso]>
 41 |               <noscript>
 42 |                   <xml>
 43 |                       <o:OfficeDocumentSettings>
 44 |                           <o:AllowPNG />
 45 |                           <o:PixelsPerInch>96</o:PixelsPerInch>
 46 |                       </o:OfficeDocumentSettings>
 47 |                   </xml>
 48 |               </noscript>
 49 |           <![endif]-->
 50 |           <!--[if lte mso 11]>
 51 |               <style type="text/css">
 52 |                   .mj-outlook-group-fix {
 53 |                       width: 100% !important;
 54 |                   }
 55 |               </style>
 56 |           <![endif]-->
 57 |   
 58 |           <style type="text/css">
 59 |               @media only screen and (min-width: 480px) {
 60 |                   .mj-column-per-100 {
 61 |                       width: 100% !important;
 62 |                       max-width: 100%;
 63 |                   }
 64 |               }
 65 |           </style>
 66 |           <style media="screen and (min-width:480px)">
 67 |               .moz-text-html .mj-column-per-100 {
 68 |                   width: 100% !important;
 69 |                   max-width: 100%;
 70 |               }
 71 |           </style>
 72 |           <style type="text/css"></style>
 73 |           <style type="text/css"></style>
 74 |       </head>
 75 |       <body style="word-spacing: normal;">
 76 |           <div style="">
 77 |               <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
 78 |               <div style="margin: 0px auto; max-width: 600px;">
 79 |                   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
 80 |                       <tbody>
 81 |                           <tr>
 82 |                               <td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center;">
 83 |                                   <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
 84 |                                   <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
 85 |                                       <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;" width="100%">
 86 |                                           <tbody>
 87 |                                               <tr>
 88 |                                                   <td align="left" style="font-size: 0px; padding: 10px 25px; word-break: break-word;">
 89 |                                                       <div style="font-family: helvetica; font-size: 16px; line-height: 1; text-align: left; color: #000000;"><h2>Verify your E-Mail</h2></div>
 90 |                                                   </td>
 91 |                                               </tr>
 92 | 
 93 |                                               <tr>
 94 |                                                   <td align="left" style="font-size: 0px; padding: 10px 25px; word-break: break-word;">
 95 |                                                       <div style="font-family: helvetica; font-size: 16px; line-height: 1; text-align: left; color: #000000;">Thanks for your interest in ${name}!</div>
 96 |                                                   </td>
 97 |                                               </tr>
 98 | 
 99 |                                               <tr>
100 |                                                   <td align="left" style="font-size: 0px; padding: 10px 25px; word-break: break-word;">
101 |                                                       <div style="font-family: helvetica; font-size: 16px; line-height: 1; text-align: left; color: #000000;">
102 |                                                           To start receiving the newsletter at this email address, confirm your subscription by clicking the link below
103 |                                                       </div>
104 |                                                   </td>
105 |                                               </tr>
106 | 
107 |                                               <tr>
108 |                                                   <td align="left" style="font-size: 0px; padding: 10px 25px; word-break: break-word;">
109 |                                                       <div style="font-family: helvetica; font-size: 16px; line-height: 1; text-align: left; color: #000000;"><a href="{{CONFIRMATION_LINK}}">{{CONFIRMATION_LINK}}</a></div>
110 |                                                   </td>
111 |                                               </tr>
112 |                                               <tr>
113 |                                                   <td align="left" style="font-size: 0px; padding: 10px 25px; word-break: break-word;">
114 |                                                       <div style="font-family: helvetica; font-size: 16px; line-height: 1; text-align: left; color: #000000;">
115 |                                                           If you feel this email reached you in error or you didn't sign up for ${name} please disregard this email.
116 |                                                       </div>
117 |                                                   </td>
118 |                                               </tr>
119 |                                           </tbody>
120 |                                       </table>
121 |                                   </div>
122 |                                   <!--[if mso | IE]></td></tr></table><![endif]-->
123 |                               </td>
124 |                           </tr>
125 |                       </tbody>
126 |                   </table>
127 |               </div>
128 |               <!--[if mso | IE]></td></tr></table><![endif]-->
129 |           </div>
130 |       </body>
131 |   </html>
132 |   `
133 | }
134 | 
135 | export const getSubject = (name: string) => `${name} | Confirm your email address`


--------------------------------------------------------------------------------
/src/components/NewsletterSettings.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import useSWR from 'swr'
  3 | import { useDisclosure, useLocalStorage } from '@mantine/hooks'
  4 | import { notifications } from '@mantine/notifications';
  5 | import { Text, TextInput, Flex, Button, SegmentedControl, Popover, Modal } from '@mantine/core'
  6 | import { useUpdate } from '../utils/apiMiddleware'
  7 | import fetcher from '../utils/fetcher'
  8 | import { Settings } from '../../lib/models/settings'
  9 | 
 10 | type Props = {
 11 |   loading: boolean,
 12 |   setLoading: (loading: boolean) => void,
 13 |   onSuccess?: (database?: string) => void,
 14 |   isUpdate?: boolean,
 15 |   defaultValues?: Settings,
 16 |   buttonCaption?: string,
 17 | }
 18 | 
 19 | const NewsetterSettings = (props: Props) => {
 20 |   const { loading, setLoading } = props
 21 |   const [formValues, setFormValues] = useState<any>(!props.isUpdate
 22 |     ? { sending_type: 'ses' }
 23 |     : props.defaultValues)
 24 |   const { triggerUpdate } = useUpdate()
 25 |   const [opened, { open, close }] = useDisclosure(false);
 26 |   const { data: { newsletters = [] } = {}, mutate } = useSWR('/api/admin', fetcher)
 27 |   const [mailingList, setMailingList] = useLocalStorage({ key: 'selected-mailing-list' });
 28 | 
 29 |   const handleSubmit = async (e: React.SyntheticEvent) => {
 30 |     e.preventDefault();
 31 |     setLoading(true)
 32 |     let database
 33 | 
 34 |     if (props.isUpdate) {
 35 |       await triggerUpdate({ url: '/api/settings', method: 'PUT', body: formValues })
 36 |     } else {
 37 |       const { message } = await triggerUpdate({ url: '/api/admin', method: 'PUT', body: { name: formValues.name }})
 38 |       database = message
 39 | 
 40 |       await triggerUpdate({ url: '/api/settings', method: 'POST', body: { ...formValues, database } })
 41 |     }
 42 | 
 43 |     if (props.onSuccess) {
 44 |       props.onSuccess(database)
 45 |     }
 46 |     setLoading(false)
 47 |   }
 48 | 
 49 |   const handleDelete = async () => {
 50 |     setLoading(true)
 51 | 
 52 |     await triggerUpdate({ url: '/api/settings', method: 'DELETE', body: formValues })
 53 |     const newSelected = newsletters.filter((n: any) => n.database !== formValues.database)[0]
 54 |     mutate()
 55 |     setMailingList(newSelected?.database)
 56 |     close()
 57 |     notifications.show({
 58 |       color: 'green',
 59 |       title: 'Success',
 60 |       message: `Successfully deleted the list!`,
 61 |     });
 62 | 
 63 |     setLoading(false)
 64 |   }
 65 | 
 66 |   const testConnection = async () => {
 67 |     setLoading(true)
 68 |     const { message: result } = await triggerUpdate({ url: '/api/testConnection', method: 'POST', body: formValues })
 69 |     console.log(result)
 70 |     if (result === 'success') {
 71 |       notifications.show({
 72 |         color: 'green',
 73 |         title: 'Success',
 74 |         message: `Successfully triggered a test email! You should have received an email.`,
 75 |       });
 76 |     } else {
 77 |       notifications.show({
 78 |         color: 'red',
 79 |         title: 'Error',
 80 |         message: `Something went wrong! Check the server logs for more details.`,
 81 |       });
 82 |     }
 83 |     setLoading(false)
 84 |   }
 85 | 
 86 |   const handleChange = (target: EventTarget): void => {
 87 |     const inputElement = target as HTMLInputElement;
 88 |     setFormValues({
 89 |       ...formValues,
 90 |       [inputElement.name]: inputElement.value,
 91 |     })
 92 |   }
 93 | 
 94 |   return <form onSubmit={handleSubmit}>
 95 |     <TextInput
 96 |       label="Newsletter Name"
 97 |       placeholder="My Awesome Newsetter"
 98 |       mb="md"
 99 |       name="name"
100 |       onChange={(event) => handleChange(event.currentTarget)}
101 |       required
102 |       defaultValue={props.defaultValues?.name}
103 |     />
104 | 
105 |     <TextInput
106 |       label="Email"
107 |       placeholder="info@example.com"
108 |       description="The email address you want to use to send the emails."
109 |       mb="md"
110 |       name="email"
111 |       type="email"
112 |       onChange={(event) => handleChange(event.currentTarget)}
113 |       required
114 |       defaultValue={props.defaultValues?.email}
115 |     />
116 | 
117 |     <Text size="sm" fw={500}>Sending Type</Text>
118 |     <Text size="xs" mb="xs" c="dimmed">
119 |       How do you want to send your emails?&nbsp;
120 | 
121 |       <Popover width={200} position="bottom" withArrow shadow="md">
122 |         <Popover.Target>
123 |           <u style={{ cursor: 'pointer' }}>What should I choose?</u>
124 |         </Popover.Target>
125 |         <Popover.Dropdown>
126 |           <Text size="xs">
127 |             Sending via your email accont is only recommended for small lists (up to ~100-200 subscribers).
128 |             Usually email providers limit or block bulk sending. Check your provider for more info.<br/>
129 |             It is recommended to set up <a href="https://aws.amazon.com/ses/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "underline" }}>AWS SES</a> instead.
130 |             This ensures that your emails are delivered to your subscribers.
131 |           </Text>
132 |         </Popover.Dropdown>
133 |       </Popover>
134 |     </Text>
135 |     <SegmentedControl
136 |       data={[
137 |         { label: 'SES', value: 'ses' },
138 |         { label: 'E-Mail', value: 'email' }
139 |       ]}
140 |       value={formValues.sending_type}
141 |       onChange={val => setFormValues({...formValues, sending_type: val })}
142 |       mb="md"
143 |     />
144 | 
145 |     { formValues.sending_type === 'ses' && <>
146 |       <TextInput
147 |         label="SES Access Key ID"
148 |         placeholder="SES Access Key ID"
149 |         mb="md"
150 |         name="ses_key"
151 |         onChange={(event) => handleChange(event.currentTarget)}
152 |         required
153 |         defaultValue={props.defaultValues?.ses_key}
154 |       />
155 |       <TextInput
156 |         label="SES Secret Access Key"
157 |         placeholder="SES Secret Access Key"
158 |         mb="md"
159 |         name="ses_secret"
160 |         type="password"
161 |         onChange={(event) => handleChange(event.currentTarget)}
162 |         required
163 |         defaultValue={props.defaultValues?.ses_secret}
164 |       />
165 |       <TextInput
166 |         label="SES Region"
167 |         placeholder="SES Region"
168 |         mb="md"
169 |         name="ses_region"
170 |         onChange={(event) => handleChange(event.currentTarget)}
171 |         required
172 |         defaultValue={props.defaultValues?.ses_region}
173 |       />
174 |     </> }
175 | 
176 |     { formValues.sending_type === 'email' && <>
177 |       <TextInput
178 |         label="Email Password"
179 |         placeholder="Password of the email used above"
180 |         mb="md"
181 |         name="email_pass"
182 |         type="password"
183 |         onChange={(event) => handleChange(event.currentTarget)}
184 |         required
185 |         defaultValue={props.defaultValues?.email_pass}
186 |       />
187 |       <TextInput
188 |         label="Email Host"
189 |         placeholder="smtp.example.com"
190 |         mb="md"
191 |         name="email_host"
192 |         onChange={(event) => handleChange(event.currentTarget)}
193 |         required
194 |         defaultValue={props.defaultValues?.email_host}
195 |       />
196 |     </> }
197 | 
198 |     <Flex justify="space-between">
199 |       <Button onClick={testConnection} loading={loading} variant="outline">Test connection</Button>
200 |       <Flex justify="flex-end">
201 |         { props.isUpdate && <Button color="red" variant="outline" mr="md" onClick={open}>Delete</Button>}
202 |         <Button type="submit" loading={loading}>{props.buttonCaption || 'Continue'}</Button>
203 |       </Flex>
204 |     </Flex>
205 | 
206 |     <Modal opened={opened} title="Are you sure?" size="sm" onClose={close}>
207 |       Deleting the mailing list will remove all subscribers and campaings. This can not be reversed.
208 | 
209 |       <Flex justify="flex-end" mt="md">
210 |         <Button loading={loading} variant="outline" mr="md" onClick={close}>Cancel</Button>
211 |         <Button loading={loading} color="red" onClick={handleDelete}>Delete</Button>
212 |       </Flex>
213 |     </Modal>
214 |   </form>
215 | }
216 | 
217 | export default NewsetterSettings
218 | 


--------------------------------------------------------------------------------
/src/components/ImportForm.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import { Button, Modal, Group, Text, rem, Stepper, Table, Flex, NumberInput, Select, Box } from '@mantine/core'
  3 | import { useDisclosure } from '@mantine/hooks';
  4 | import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
  5 | import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
  6 | import { notifications } from '@mantine/notifications';
  7 | import Papa from 'papaparse';
  8 | import { useUpdate } from '../utils/apiMiddleware'
  9 | 
 10 | type Props = {
 11 |   onSuccess?: () => void,
 12 | }
 13 | 
 14 | type ImportProps = {
 15 |   start: number,
 16 |   emailCol: number,
 17 |   createdAtCol?: number | null,
 18 |   receivedCol?: number | null,
 19 |   openedCol?: number | null,
 20 |   clickedCol?: number | null,
 21 |   locationCol?: number | null,
 22 | }
 23 | 
 24 | function indexToExcelHeader(index: number): string {
 25 |   let dividend = index + 1;
 26 |   let columnName = '';
 27 | 
 28 |   while (dividend > 0) {
 29 |     let modulo = (dividend - 1) % 26;
 30 |     columnName = String.fromCharCode(65 + modulo) + columnName;
 31 |     dividend = parseInt(((dividend - modulo) / 26).toString(), 10);
 32 |   }
 33 | 
 34 |   return columnName;
 35 | }
 36 | 
 37 | export default function ImportForm(props: Props) {
 38 |   const { onSuccess } = props
 39 |   const [loading, setLoading] = useState(false);
 40 |   const [progress, setProgress] = useState(0);
 41 |   const [total, setTotal] = useState(0);
 42 |   const [active, setActive] = useState(0);
 43 |   const [data, setData] = useState([]);
 44 |   const [opened, { open, close }] = useDisclosure(false);
 45 |   const [importOptions, setImportOptions] = useState<ImportProps>({
 46 |     start: 1,
 47 |     emailCol: 0,
 48 |   });
 49 |   const { triggerUpdate } = useUpdate()
 50 | 
 51 |   const openModal = () => {
 52 |     setLoading(false)
 53 |     setTotal(0)
 54 |     setActive(0)
 55 |     setProgress(0)
 56 |     open()
 57 |   }
 58 | 
 59 |   const parseCsv = (files: any) => {
 60 |     setLoading(true);
 61 |     Papa.parse(files[0], { complete: (results: any) => {
 62 |       setActive(1)
 63 |       setLoading(false)
 64 |       setData(results.data)
 65 |     } })
 66 |   }
 67 | 
 68 |   const monitorProgress = async (count: number) => {
 69 |     const { progress: tmpProgress } = await fetch('/api/import', { method: 'GET' }).then(res => res.json())
 70 |     setProgress(tmpProgress)
 71 | 
 72 |     if (tmpProgress === count) {
 73 |       setLoading(false)
 74 |       close()
 75 |       notifications.show({
 76 |         color: 'green',
 77 |         title: 'Success',
 78 |         message: `Successfully imported ${count} subscribers...`,
 79 |       });
 80 |       if (onSuccess) {
 81 |         onSuccess()
 82 |       }
 83 |     } else {
 84 |       await new Promise(resolve => setTimeout(resolve, 1000))
 85 |       monitorProgress(count)
 86 |     }
 87 |   }
 88 | 
 89 |   const startImport = () => {
 90 |     const copyData = Array.from(data);
 91 |     copyData.splice(0, (importOptions.start - 1));
 92 |     const subscribers = copyData.map(row => ({
 93 |       email: row[importOptions.emailCol],
 94 |       createdAt: importOptions.createdAtCol && row[importOptions.createdAtCol],
 95 |       received: importOptions.receivedCol && row[importOptions.receivedCol],
 96 |       opened: importOptions.openedCol && row[importOptions.openedCol],
 97 |       clicked: importOptions.clickedCol && row[importOptions.clickedCol],
 98 |       location: importOptions.locationCol && row[importOptions.locationCol],
 99 |     })).filter(e => !!e.email)
100 |     setTotal(subscribers.length)
101 |     setLoading(true)
102 |     triggerUpdate({ url: '/api/import', method: 'POST', body: subscribers })
103 |     monitorProgress(subscribers.length)
104 |   }
105 | 
106 |   const columns = ((data[0] || []) as String[]).map((elem: any, index: number) => indexToExcelHeader(index));
107 | 
108 |   return <>
109 |     <Button
110 |       mb="lg"
111 |       onClick={openModal}
112 |     >
113 |       Import Subscribers
114 |     </Button>
115 | 
116 |     <Modal opened={opened} onClose={close} title="Import Subscribers" size="xl">
117 |       <Stepper active={active}>
118 |         <Stepper.Step label="Upload CSV file">
119 |           <Dropzone
120 |             onDrop={parseCsv}
121 |             onReject={(files) => console.log('rejected files', files)}
122 |             maxSize={3 * 1024 ** 2}
123 |             accept={[MIME_TYPES.csv]}
124 |             multiple={false}
125 |             loading={loading}
126 |           >
127 |             <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
128 |               <Dropzone.Accept>
129 |                 <IconUpload
130 |                   style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
131 |                   stroke={1.5}
132 |                 />
133 |               </Dropzone.Accept>
134 |               <Dropzone.Reject>
135 |                 <IconX
136 |                   style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
137 |                   stroke={1.5}
138 |                 />
139 |               </Dropzone.Reject>
140 |               <Dropzone.Idle>
141 |                 <IconPhoto
142 |                   style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
143 |                   stroke={1.5}
144 |                 />
145 |               </Dropzone.Idle>
146 | 
147 |               <div>
148 |                 <Text size="xl" inline>
149 |                   Drag your CSV file here or click to select files
150 |                 </Text>
151 |                 <Text size="sm" c="dimmed" inline mt={7}>
152 |                   Your file should not exceed 5mb.
153 |                 </Text>
154 |               </div>
155 |             </Group>
156 |           </Dropzone>
157 |         </Stepper.Step>
158 |         <Stepper.Step label="Select import fields">
159 |           <Table striped>
160 |             <Table.Thead>
161 |               <Table.Tr>
162 |                 <Table.Td></Table.Td>
163 |                 { columns.map(c => <Table.Td key={`table-head-${c}`}>
164 |                   {c}
165 |                 </Table.Td> )}
166 |               </Table.Tr>
167 |             </Table.Thead>
168 |             <Table.Tbody>{
169 |               data.slice(0,5).map((row: Array<any>, i) => (
170 |                 <Table.Tr key={`table-${i}`}>
171 |                   <Table.Td>{i+1}</Table.Td>
172 |                   {row.map((column, j) => <Table.Td key={`table-${i}-${j}`}>{column}</Table.Td> )}
173 |                 </Table.Tr>
174 |               ))
175 |             }</Table.Tbody>
176 |           </Table>
177 |           {data.length > 5 && <Text mb="md" ta="center">
178 |             ...{data.length - 5} more rows
179 |           </Text>}
180 | 
181 |           <form onSubmit={(e) => {
182 |             e.preventDefault()
183 |             setActive(2)
184 |           }}>
185 |             <Flex mb="md">
186 |               <NumberInput
187 |                 label="First row"
188 |                 description="Choose row from where import starts"
189 |                 required
190 |                 allowDecimal={false}
191 |                 mr="md"
192 |                 onChange={(val) => setImportOptions({ ...importOptions, start: parseInt(String(val), 10) })}
193 |                 defaultValue={1}
194 |               />
195 |               <Select
196 |                 label="Email address"
197 |                 description="The column including the email address"
198 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
199 |                 onChange={(val) => setImportOptions({ ...importOptions, emailCol: val ? parseInt(val) : 1 })}
200 |                 defaultValue={importOptions.emailCol?.toString()}
201 |                 required
202 |               />
203 |             </Flex>
204 | 
205 |             <Flex mb="md">
206 |               <Select
207 |                 label="Created at (optional)"
208 |                 clearable
209 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
210 |                 onChange={(val) => setImportOptions({ ...importOptions, createdAtCol: val ? parseInt(val) : null })}
211 |                 defaultValue={importOptions.createdAtCol?.toString()}
212 |                 mr="md"
213 |               />
214 | 
215 |               <Select
216 |                 label="Emails received (optional)"
217 |                 clearable
218 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
219 |                 onChange={(val) => setImportOptions({ ...importOptions, receivedCol: val ? parseInt(val) : null })}
220 |                 defaultValue={importOptions.receivedCol?.toString()}
221 |                 mr="md"
222 |               />
223 |               <Select
224 |                 label="Emails opened (optional)"
225 |                 clearable
226 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
227 |                 onChange={(val) => setImportOptions({ ...importOptions, openedCol: val ? parseInt(val) : null })}
228 |                 defaultValue={importOptions.openedCol?.toString()}
229 |               />
230 |             </Flex>
231 |             <Flex>
232 |               <Select
233 |                 label="Emails clicked (optional)"
234 |                 clearable
235 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
236 |                 onChange={(val) => setImportOptions({ ...importOptions, clickedCol: val ? parseInt(val) : null })}
237 |                 defaultValue={importOptions.clickedCol?.toString()}
238 |                 mr="md"
239 |               />
240 | 
241 |               <Select
242 |                 label="Location (optional)"
243 |                 clearable
244 |                 data={columns.map((column, i) => ({ value: i.toString(), label: column }))}
245 |                 onChange={(val) => setImportOptions({ ...importOptions, locationCol: val ? parseInt(val) : null })}
246 |                 defaultValue={importOptions.locationCol?.toString()}
247 |               />
248 |             </Flex>
249 | 
250 |             <Flex mt="md">
251 |               <Button onClick={() => setActive(0)} variant="outline" mr="md" loading={loading}>Back</Button>
252 |               <Button type="submit" loading={loading}>Continue</Button>
253 |             </Flex>
254 |           </form>
255 |         </Stepper.Step>
256 |         <Stepper.Step label="Confirm">
257 |           <Text mb="sm">An example import subscriber will look like this:</Text>
258 |           {active === 2 && <Box p="sm" bg="blue.1">
259 |             <Text>Email: <i>{data[importOptions.start - 1][importOptions.emailCol]}</i></Text>
260 |             { importOptions.createdAtCol && <Text>Created at: <i>{data[importOptions.start - 1][importOptions.createdAtCol]}</i></Text> }
261 |             { importOptions.receivedCol && <Text>Emails received: <i>{data[importOptions.start - 1][importOptions.receivedCol]}</i></Text> }
262 |             { importOptions.openedCol && <Text>Emails opened: <i>{data[importOptions.start - 1][importOptions.openedCol]}</i></Text> }
263 |             { importOptions.clickedCol && <Text>Emails clicked: <i>{data[importOptions.start - 1][importOptions.clickedCol]}</i></Text> }
264 |             { importOptions.locationCol && <Text>Location: <i>{data[importOptions.start - 1][importOptions.locationCol]}</i></Text> }
265 |           </Box> }
266 | 
267 |           { loading && <Text mt="md" ta="center">Importing... ({progress} / {total})</Text> }
268 | 
269 |           <Flex mt="md">
270 |             <Button onClick={() => setActive(1)} variant="outline" mr="md">Back</Button>
271 |             <Button onClick={startImport}>Start import</Button>
272 |           </Flex>
273 |         </Stepper.Step>
274 |       </Stepper>
275 |     </Modal>
276 |   </>
277 | }
278 | 


--------------------------------------------------------------------------------