Send emails with PDF attachments (#9)

* Change text

* SMTP config

* Read for email edit

* Ready for send mails

* Tag subject & body

* Send success

* Refactor mail merge

* Bump version

Author: manhtai

.erb/assets/demo.png

@@ -1,4 +1,4 @@
 exports.default = async function notarizeMacos(context) {
-  console.warn('Skipping notarizing step. Packaging is not running in CI');
+  console.warn('Skipping notarizing step.');
   return;
 };

.erb/scripts/Notarize.js

@@ -1,11 +1,10 @@
 [![Test](https://github.com/plainlab/plainmerge/actions/workflows/test.yml/badge.svg)](https://github.com/plainlab/plainmerge/actions/workflows/test.yml)
-![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/plainlab/plainmerge)
+[![Release](https://img.shields.io/github/v/release/plainlab/plainmerge)](https://github.com/plainlab/plainmerge/releases)
 
 # PlainMerge - An offline PDF mail merger
 
 ![PlainMerge](./.erb/assets/plainmerge.png)
 
-
 ## What is this?
 
 Imagine you want to fill a PDF form for 100 employees with a specific name and address
@@ -21,12 +20,13 @@ You got 100 different PDFs for each employee now.
 
 ## Features
 
-- Drag & drop fields to customize PDF template
-- Support native PDF forms
-- Edit multiple-pages PDFs
-- Support `.xlsx`, `.xls` and `.ods` Excel files
-- Cross-platform: macOS, Windows, Linux
-- Work offline
+- [x] Drag & drop fields to customize PDF template
+- [x] Support native PDF forms
+- [x] Support multiple-pages PDFs
+- [x] Support `.xlsx`, `.xls` and `.ods` Excel files
+- [x] Send out emails with PDF attachments
+- [x] Cross-platform: macOS, Windows, Linux
+- [x] Work offline
 
 ## Demo
 

README.md

@@ -172,6 +172,7 @@
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
     "@types/node": "14.14.10",
+    "@types/qs": "^6.9.7",
     "@types/react": "^16.9.44",
     "@types/react-color": "^3.0.5",
     "@types/react-dom": "^16.9.9",
@@ -180,6 +181,7 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
     "@types/webpack-env": "^1.15.2",
+    "@types/yaireo__tagify": "^4.7.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "autoprefixer": "^10.3.1",
@@ -252,14 +254,18 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@yaireo/tagify": "^4.7.2",
     "caniuse-lite": "^1.0.30001246",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
+    "electron-store": "^8.0.1",
     "electron-updater": "^4.3.4",
     "glob": "^7.1.7",
     "history": "^5.0.0",
     "jsqr": "^1.4.0",
+    "nodemailer": "^6.6.3",
     "pdf-lib": "^1.16.0",
+    "qs": "^6.10.1",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",

package.json

@@ -1,3 +1,5 @@
+@import '@yaireo/tagify/dist/tagify.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -11,15 +13,22 @@
     @apply outline-none hover:opacity-80 active:text-gray-300 active:outline-none focus:outline-none;
   }
 
-  input[type='radio'] {
-    @apply focus:outline-none;
+  .tagify {
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset border bg-white;
   }
 
-  input {
+  input[type='radio'] {
     @apply focus:outline-none;
   }
 
+  input[type='text'],
+  input[type='number'],
+  input[type='password'],
   textarea {
-    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset;
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset border py-1 px-2;
+  }
+
+  select {
+    @apply rounded outline-none active:outline-none focus:ring-2 focus:outline-none focus:ring-blue-500 border py-1 px-2;
   }
 }

src/App.global.css

@@ -1,21 +1,28 @@
 import React from 'react';
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import qs from 'qs';
 import Main from './components/Main';
 import './App.global.css';
 import './helpers/fontAwesome';
+import MailMerge from './components/merge/MailMerge';
 
 export default function App() {
   return (
     <Router>
       <Switch>
-        <Route path="/" component={Main} />
+        <Route
+          path="*"
+          render={(props) => {
+            const { search } = props.location;
+            const so = qs.parse(search.slice(search.lastIndexOf('?') + 1));
+            return so.page === 'merge' ? (
+              <MailMerge configPath={decodeURIComponent(so.config as string)} />
+            ) : (
+              <Main />
+            );
+          }}
+        />
       </Switch>
-      <Redirect from="*" to="/new" />
     </Router>
   );
 }

src/App.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { NavLink, Route } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { NavLink, Route, useHistory, useLocation } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Helmet } from 'react-helmet';
 
 import MergeList from './merge/MergeList';
 import MergeNew from './merge/MergeNew';
+import Config from './email/Config';
 
 const allRoutes = [
   {
@@ -14,14 +15,29 @@ const allRoutes = [
     Component: MergeNew,
   },
   {
-    icon: <FontAwesomeIcon icon="list" />,
+    icon: <FontAwesomeIcon icon="history" />,
     path: '/list',
     name: 'Mail merge list',
     Component: MergeList,
   },
+  {
+    icon: <FontAwesomeIcon icon="cog" />,
+    path: '/config',
+    name: 'Configuration',
+    Component: Config,
+  },
 ];
 
 const Main = () => {
+  const history = useHistory();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.pathname.endsWith('index.html')) {
+      history.push('/new');
+    }
+  }, []);
+
   return (
     <div className="absolute inset-0 flex">
       {/* Left sidebar */}