From 3d86e68a9fc7e7b52d9ffc193ae45d931ca3bc6b Mon Sep 17 00:00:00 2001
From: Nicholas Charriere <nicholascharriere@gmail.com>
Date: Sat, 27 Jul 2024 16:06:58 -0700
Subject: [PATCH] Add optional email + send from API to avoid CORS

---
 packages/api/server/http.mts                    | 17 +++++++++++++++++
 packages/web/src/components/feedback-dialog.tsx | 16 +++++++++++++---
 packages/web/src/lib/server.ts                  | 17 +++++++++++++++++
 packages/web/src/lib/utils.ts                   | 15 ---------------
 4 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/packages/api/server/http.mts b/packages/api/server/http.mts
index 795ae3da..59f7ce93 100644
--- a/packages/api/server/http.mts
+++ b/packages/api/server/http.mts
@@ -272,6 +272,23 @@ router.delete('/secrets/:name', cors(), async (req, res) => {
   return res.json({ result: updated });
 });
 
+router.options('/feedback', cors());
+router.post('/feedback', cors(), async (req, res) => {
+  const { feedback, email } = req.body;
+  // Every time you modify the appscript here, you'll need to update the URL below
+  // @TODO: once we have an env variable setup, we can use that here.
+  const url =
+    'https://script.google.com/macros/s/AKfycbxPrg8z47SkJnHyoZBYqNtkcH8hBe12f-f2UJJ3PcIHmKdbMMuJuPoOemEB1ib8a_IKCg/exec';
+
+  const result = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify({ feedback, email }),
+    headers: { 'Content-Type': 'text/plain;charset=utf-8' },
+  });
+
+  return res.json({ success: result.ok });
+});
+
 type NpmSearchResult = {
   package: {
     name: string;
diff --git a/packages/web/src/components/feedback-dialog.tsx b/packages/web/src/components/feedback-dialog.tsx
index e7dbb582..c2d274d4 100644
--- a/packages/web/src/components/feedback-dialog.tsx
+++ b/packages/web/src/components/feedback-dialog.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { sendFeedback } from '@/lib/utils';
+import { sendFeedback } from '@/lib/server';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import {
   Dialog,
   DialogContent,
@@ -19,6 +20,8 @@ export default function FeedbackDialog({
   onOpenChange: (open: boolean) => void;
 }) {
   const [feedback, setFeedback] = useState('');
+  const [email, setEmail] = useState('');
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-xl">
@@ -27,7 +30,7 @@ export default function FeedbackDialog({
           <DialogDescription asChild>
             <div className="pt-4 flex flex-col gap-2">
               <p>
-                We're always looking to improve Srcbook, and your feedback is invaluable.
+                We're always looking to improve Srcbook and your feedback is invaluable.
                 <br />
                 You can open a public{' '}
                 <a
@@ -43,11 +46,18 @@ export default function FeedbackDialog({
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               />
+              <Input
+                type="text"
+                value={email}
+                placeholder="Email (optional)"
+                onChange={(e) => setEmail(e.target.value)}
+              />
               <Button
                 disabled={!feedback}
                 onClick={() => {
-                  sendFeedback(feedback);
+                  sendFeedback({ feedback, email });
                   setFeedback('');
+                  setEmail('');
                   toast.info('Thanks for the feedback!');
                   onOpenChange(false);
                 }}
diff --git a/packages/web/src/lib/server.ts b/packages/web/src/lib/server.ts
index c93ae91f..c8d2dc7e 100644
--- a/packages/web/src/lib/server.ts
+++ b/packages/web/src/lib/server.ts
@@ -360,3 +360,20 @@ export async function loadSrcbookExamples(): Promise<SrcbookExamplesResponse> {
 
   return response.json();
 }
+
+type FeedbackRequestType = {
+  feedback: string;
+  email: string;
+};
+
+export async function sendFeedback({ feedback, email }: FeedbackRequestType) {
+  const response = await fetch(API_BASE_URL + '/feedback', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ feedback, email }),
+  });
+
+  if (!response.ok) {
+    console.error(response);
+  }
+}
diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts
index 4fbe708f..aea59803 100644
--- a/packages/web/src/lib/utils.ts
+++ b/packages/web/src/lib/utils.ts
@@ -27,18 +27,3 @@ export function getTitleForSession(session: SessionType) {
   const titleCell = session.cells.find((cell: CellType) => cell.type === 'title') as TitleCellType;
   return titleCell?.text;
 }
-
-// POST feedback to Google Sheets
-// Because of CORS, we don't get a response here so this is a fire and forget.
-export async function sendFeedback(feedback: string) {
-  const url =
-    'https://script.google.com/macros/s/AKfycbxbNh5sEvmvuaYZyuNYY6vULEX1vyhkHrqoyfuUMBz3PG5RcekCVcuC4-ceboefxgF0FA/exec';
-
-  await fetch(url, {
-    method: 'POST',
-    redirect: 'follow',
-    mode: 'no-cors',
-    body: JSON.stringify({ feedback }),
-    headers: { 'Content-Type': 'text/plain;charset=utf-8' },
-  });
-}