feat: Adding smtpJS

S-ayanide · Oct 9, 2022 · 9516c94 · 9516c94
1 parent 2a31b7a
commit 9516c94
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -9,5 +9,6 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script src="https://smtpjs.com/v3/smtp.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
     "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
-    "@emailjs/browser": "^3.7.0",
     "easy-peasy": "^5.1.0",
     "firebase": "^9.10.0",
     "react": "^18.2.0",

diff --git a/src/components/AddFriend.tsx b/src/components/AddFriend.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import emailjs from '@emailjs/browser';
 import Checked from '../assets/checked.png';
+import ReactDOMServer from 'react-dom/server';
 import { useStoreState } from '../store';
 
 const AddFriend: React.FC = () => {
@@ -14,31 +14,58 @@ const AddFriend: React.FC = () => {
     const target = e.target as HTMLInputElement;
     if (Object.values(target)[0].value === '') setError('Please enter an email address');
     else {
-      // eslint-disable-next-line import/no-named-as-default-member
-      emailjs
-        .send(
-          import.meta.env.VITE_EMAILJS_SERVICE_ID,
-          import.meta.env.VITE_EMAILJS_TEMPLATE_ID,
-          {
-            from_name: currentUser?.displayName,
-            to_name: Object.values(target)[0].value,
-            to_email: Object.values(target)[0].value,
-            reply_to: Object.values(target)[0].value,
-          },
-          import.meta.env.VITE_EMAILJS_PUBLIC_KEY,
-        )
-        .then(
-          (result) => {
-            if (result.status === 200) {
-              setError('');
-              setIsEmailSent(true);
-            }
-          },
-          (error) => {
-            setError(error.text);
-            setIsEmailSent(false);
-          },
-        );
+      const emailBody = ReactDOMServer.renderToStaticMarkup(
+        <div style={{ backgroundColor: 'rgb(237,218,205)', width: '100%' }}>
+          <div className="centerText">
+            <img
+              style={{ width: '150px', height: 'auto', marginLeft: '2.5%' }}
+              src="https://i.ibb.co/SvXD6Dy/mote.png"
+              alt="Mate"
+            />
+          </div>
+          <div style={{ backgroundColor: 'white', width: '90%', padding: '10px', marginLeft: '3%' }}>
+            <p>
+              Hello {Object.values(target)[0].value},
+              <br />
+              <br />
+              Mate is a new age, instant messaging service that also provides optional end-to-end encrypted chats and
+              video calling, file sharing, and several other features.
+            </p>
+            <p>
+              has given you a special invite to join them on Mate, and carry on the conversation.
+              <br />
+              <br />
+              Don&apos;t miss out on this opportunity and click here to accept your invitation:{' '}
+              <a href="http://localhost:5173/signup" target="_blank" rel="noopener noreferrer">
+                Accept Invitation
+              </a>
+              <br />
+              <br />
+            </p>
+          </div>
+          <br />
+          <p style={{ fontSize: '12px', marginLeft: '3%', paddingBottom: '3%' }}>
+            Best wishes,
+            <br />
+            Sayan
+            <br />
+            (Creator of Mate)
+          </p>
+        </div>,
+      );
+
+      Email.send({
+        Host: 'smtp.elasticemail.com',
+        Username: import.meta.env.VITE_SMTPJS_SMTP_USERNAME,
+        Password: import.meta.env.VITE_SMTPJS_SMTP_PASSWORD,
+        To: Object.values(target)[0].value,
+        From: import.meta.env.VITE_SMTPJS_SMTP_USERNAME,
+        Subject: `${currentUser?.displayName} has invited you to join Mate`,
+        Body: emailBody,
+      }).then(() => {
+        setError('');
+        setIsEmailSent(true);
+      });
     }
   };
 

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1 +1,31 @@
 /// <reference types="vite/client" />
+
+// Type definitions for SmtpJs
+// Project: https://smtpjs.com/
+// Definitions by: Linda Paiste https://github.com/lindapaiste
+
+// SmtpJS exposes a variable `Email` on the global `window` object
+declare namespace Email {
+  type Attachment =
+    | {
+        name: string;
+        path: string;
+      }
+    | {
+        name: string;
+        data: string; // base64 format
+      };
+
+  interface EmailData {
+    Username: string;
+    Password: string;
+    Host: string;
+    To: string | string[];
+    From: string;
+    Subject: string;
+    Body: string | HTML;
+    Attachments?: Attachment[];
+  }
+
+  function send(email: EmailData): Promise<string>;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -255,13 +255,6 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@emailjs/browser@^3.7.0":
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/@emailjs/browser/-/browser-3.7.0.tgz#6ee7cf286a6b9cf45d12707846e24749976f550c"
-  integrity sha512-qjMKx0uCtFUiZkO6C3XYYtmdHqaoOlt2kcxsYD536u5rHZlfo4DAQGwTVo/y2wunVG5rUgSn3TFKZ7vPfgX6LQ==
-  dependencies:
-    eslint-config-standard-with-typescript "^22.0.0"
-
 "@esbuild/[email protected]":
   version "0.15.9"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.9.tgz#7e1221604ab88ed5021ead74fa8cca4405e1e431"
@@ -906,16 +899,6 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.0.0":
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.39.0.tgz#93fa0bc980a3a501e081824f6097f7ca30aaa22b"
-  integrity sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.39.0"
-    "@typescript-eslint/types" "5.39.0"
-    "@typescript-eslint/typescript-estree" "5.39.0"
-    debug "^4.3.4"
-
 "@typescript-eslint/parser@^5.38.1":
   version "5.38.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.38.1.tgz#c577f429f2c32071b92dff4af4f5fbbbd2414bd0"
@@ -934,14 +917,6 @@
     "@typescript-eslint/types" "5.38.1"
     "@typescript-eslint/visitor-keys" "5.38.1"
 
-"@typescript-eslint/[email protected]":
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz#873e1465afa3d6c78d8ed2da68aed266a08008d0"
-  integrity sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==
-  dependencies:
-    "@typescript-eslint/types" "5.39.0"
-    "@typescript-eslint/visitor-keys" "5.39.0"
-
 "@typescript-eslint/[email protected]":
   version "5.38.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.38.1.tgz#7f038fcfcc4ade4ea76c7c69b2aa25e6b261f4c1"
@@ -957,11 +932,6 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.38.1.tgz#74f9d6dcb8dc7c58c51e9fbc6653ded39e2e225c"
   integrity sha512-QTW1iHq1Tffp9lNfbfPm4WJabbvpyaehQ0SrvVK2yfV79SytD9XDVxqiPvdrv2LK7DGSFo91TB2FgWanbJAZXg==
 
-"@typescript-eslint/[email protected]":
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.39.0.tgz#f4e9f207ebb4579fd854b25c0bf64433bb5ed78d"
-  integrity sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==
-
 "@typescript-eslint/[email protected]":
   version "5.38.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.1.tgz#657d858d5d6087f96b638ee383ee1cff52605a1e"
@@ -975,19 +945,6 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/[email protected]":
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz#c0316aa04a1a1f4f7f9498e3c13ef1d3dc4cf88b"
-  integrity sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==
-  dependencies:
-    "@typescript-eslint/types" "5.39.0"
-    "@typescript-eslint/visitor-keys" "5.39.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/[email protected]":
   version "5.38.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.38.1.tgz#e3ac37d7b33d1362bb5adf4acdbe00372fb813ef"
@@ -1008,14 +965,6 @@
     "@typescript-eslint/types" "5.38.1"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/[email protected]":
-  version "5.39.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz#8f41f7d241b47257b081ddba5d3ce80deaae61e2"
-  integrity sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==
-  dependencies:
-    "@typescript-eslint/types" "5.39.0"
-    eslint-visitor-keys "^3.3.0"
-
 "@vitejs/plugin-react@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz#4c99df15e71d2630601bd3018093bdc787d40e55"
@@ -1576,19 +1525,6 @@ eslint-config-prettier@^8.5.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-config-standard-with-typescript@^22.0.0:
-  version "22.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-22.0.0.tgz#5b91941797da779e17fcb3ba418e3a3ab31fdb2f"
-  integrity sha512-VA36U7UlFpwULvkdnh6MQj5GAV2Q+tT68ALLAwJP0ZuNXU2m0wX07uxX4qyLRdHgSzH4QJ73CveKBuSOYvh7vQ==
-  dependencies:
-    "@typescript-eslint/parser" "^5.0.0"
-    eslint-config-standard "17.0.0"
-
-[email protected]:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz#fd5b6cf1dcf6ba8d29f200c461de2e19069888cf"
-  integrity sha512-/2ks1GKyqSOkH7JFvXJicu0iMpoojkwB+f5Du/1SC0PtBL+s8v30k9njRZ21pm2drKYm2342jFnGWzttxPmZVg==
-
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"