From dd13baa7a8896ed25008a3efe8cc4826162e9994 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 5 Jul 2022 15:40:26 -0700
Subject: [PATCH] feat: :sparkles: Umami Analytics added

---
 components/Login.js       |  4 +++-
 package-lock.json         | 14 +++++++-------
 package.json              |  2 +-
 pages/_app.js             |  7 +++++++
 pages/rsvp/[id].js        |  3 +++
 pages/rsvp/index.js       |  9 +++++++--
 utils/handleUmamiEvent.js |  7 +++++++
 7 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 utils/handleUmamiEvent.js

diff --git a/components/Login.js b/components/Login.js
index d26167e..bbb13aa 100644
--- a/components/Login.js
+++ b/components/Login.js
@@ -168,7 +168,9 @@ const Login = () => {
             onChange={handleChange}
             className="penguin"
           />
-          <button type="submit">Login</button>
+          <button type="submit" className="umami--click--login">
+            Login
+          </button>
         </fieldset>
       </FormStyles>
     </div>
diff --git a/package-lock.json b/package-lock.json
index daf1b59..5b3424a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "react-icons": "^4.4.0",
         "sharp": "^0.30.7",
         "styled-components": "^5.3.5",
-        "swr": "^1.0.1",
+        "swr": "^1.3.0",
         "waait": "^1.0.5"
       },
       "devDependencies": {
@@ -11558,9 +11558,9 @@
       }
     },
     "node_modules/swr": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
-      "integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
       "peerDependencies": {
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
@@ -20774,9 +20774,9 @@
       "dev": true
     },
     "swr": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
-      "integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
       "requires": {}
     },
     "symbol-tree": {
diff --git a/package.json b/package.json
index 37d3400..7915abb 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "react-icons": "^4.4.0",
     "sharp": "^0.30.7",
     "styled-components": "^5.3.5",
-    "swr": "^1.0.1",
+    "swr": "^1.3.0",
     "waait": "^1.0.5"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index 588af40..ce2cc20 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -65,6 +65,13 @@ function MyApp({ Component, pageProps }) {
             as="font"
             crossOrigin=""
           />
+          <script
+            async
+            defer
+            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+            src={process.env.NEXT_PUBLIC_UMAMI_URL}
+            data-do-not-track="true"
+          />
           <noscript>
             <link rel="stylesheet" href="assets/css/noscript.css" />
           </noscript>
diff --git a/pages/rsvp/[id].js b/pages/rsvp/[id].js
index f6d2a17..7d82290 100644
--- a/pages/rsvp/[id].js
+++ b/pages/rsvp/[id].js
@@ -12,6 +12,7 @@ import Guest from '../../models/Guest';
 import connectDb from '../../utils/db';
 import { CalendarIcon, MapIcon } from '../../lib/svgs';
 import Modal from '../../components/Modal';
+import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
 
 const RSVPGroupStyles = styled.div`
   h2 {
@@ -211,6 +212,7 @@ export default function SingleGroupPage({ group }) {
       console.log('res.message', res.message);
 
       if (res.message === 'SUCCESS') {
+        handleUmamiEvent('RSVP SUCCESS', 'success-rsvp');
         setMessage(
           `Successfully submitted your RSVP${
             body.guests.length > 1 ? 's' : ''
@@ -218,6 +220,7 @@ export default function SingleGroupPage({ group }) {
         );
         openModal();
       } else {
+        handleUmamiEvent('RSVP FAILURE', 'failure-rsvp');
         setErrorCount(errorCount + 1);
         setErrorMsg('Unable to RSVP Your Group');
       }
diff --git a/pages/rsvp/index.js b/pages/rsvp/index.js
index 3ad924d..57db389 100644
--- a/pages/rsvp/index.js
+++ b/pages/rsvp/index.js
@@ -7,6 +7,7 @@ import Form from '../../components/styles/Form';
 import fetchJson from '../../lib/fetchJson';
 import useForm from '../../lib/useForm';
 import useUser from '../../lib/useUser';
+import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
 
 const RSVPStyles = styled.div`
   display: grid;
@@ -51,17 +52,19 @@ export default function RsvpPage() {
       });
 
       if (res.status === 'SUCCESS') {
+        handleUmamiEvent('Fetch RSVP SUCCESS', 'success-fetch-rsvp');
         router.push({
           pathname: `/rsvp/${res.groupId}`,
         });
       } else {
+        handleUmamiEvent('Fetch RSVP FAILURE', 'failure-fetch-rsvp');
         setErrorCount(errorCount + 1);
         setErrorMsg('Unable to RSVP');
       }
     } catch (error) {
       // console.error('An unexpected error happened:', error);
       setErrorCount(errorCount + 1);
-      setErrorMsg('Unable to RSVP');
+      setErrorMsg('Unable to find your RSVP');
     }
   }
 
@@ -115,7 +118,9 @@ export default function RsvpPage() {
               onChange={handleChange}
             />
           </label>
-          <button type="submit">Click to RSVP</button>
+          <button type="submit" className="umami--click--find-rsvp">
+            Find Your RSVP
+          </button>
         </fieldset>
       </Form>
     </RSVPStyles>
diff --git a/utils/handleUmamiEvent.js b/utils/handleUmamiEvent.js
new file mode 100644
index 0000000..de1324d
--- /dev/null
+++ b/utils/handleUmamiEvent.js
@@ -0,0 +1,7 @@
+async function handleUmamiEvent(eventValue, eventType) {
+  if (typeof window !== 'undefined') {
+    window?.umami?.trackEvent(eventValue, eventType);
+  }
+}
+
+export { handleUmamiEvent };