From ef2229b9eca52914f75b6515c0fc112cd8d96791 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Tue, 29 Nov 2022 20:30:16 -0700
Subject: [PATCH 1/5] Build the initial MVP for submitting the feature
 suggestion form

---
 src/hooks/useGCloudStorage.ts            | 21 +++++++
 src/pages/Feedback/Suggestions/index.tsx | 72 +++++++++++++++++++++++-
 src/types/posthog.ts                     |  1 +
 3 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useGCloudStorage.ts

diff --git a/src/hooks/useGCloudStorage.ts b/src/hooks/useGCloudStorage.ts
new file mode 100644
index 000000000..04e63481d
--- /dev/null
+++ b/src/hooks/useGCloudStorage.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react"
+
+const bucket = "threshold_dapp_feedback"
+
+const useGCloudStorage: () => (file: File) => Promise<string> = () => {
+  return useCallback(async (file) => {
+    const formData = new FormData()
+
+    formData.append("file", file)
+    formData.append("key", file.name)
+
+    return fetch(`https://storage.googleapis.com/${bucket}`, {
+      method: "POST",
+      body: formData,
+    }).then((resp) => {
+      return `https://storage.cloud.google.com/${bucket}/${file.name}`
+    })
+  }, [])
+}
+
+export default useGCloudStorage
diff --git a/src/pages/Feedback/Suggestions/index.tsx b/src/pages/Feedback/Suggestions/index.tsx
index 2c7bcfba6..a2abd5272 100644
--- a/src/pages/Feedback/Suggestions/index.tsx
+++ b/src/pages/Feedback/Suggestions/index.tsx
@@ -1,9 +1,75 @@
-import React from "react"
-import { Box } from "@threshold-network/components"
+import React, { useState } from "react"
+import {
+  BodyLg,
+  Button,
+  Card,
+  Divider,
+  FileUploader,
+  H5,
+  Select,
+  Textarea,
+} from "@threshold-network/components"
 import { PageComponent } from "../../../types"
+import useGCloudStorage from "../../../hooks/useGCloudStorage"
+import Link from "../../../components/Link"
+import { ExternalHref } from "../../../enums"
+import { useCapture } from "../../../hooks/posthog"
+import { PosthogEvent } from "../../../types/posthog"
+
+const featureCategoryOptions = ["Upgrade", "Staking"]
 
 const Suggestions: PageComponent = () => {
-  return <Box>suggestions page</Box>
+  const captureSuggestionSubmit = useCapture(PosthogEvent.SuggestionSubmit)
+
+  const [file, setFile] = useState<File | null>(null)
+  const uploadToGCP = useGCloudStorage()
+  const [featureCategory, setFeatureCategory] = useState("")
+  const [suggestionText, setSuggestionText] = useState("")
+
+  const handleSubmit = async () => {
+    let fileLink = ""
+    if (file) {
+      fileLink = await uploadToGCP(file)
+    }
+
+    captureSuggestionSubmit({
+      file: fileLink,
+      category: featureCategory,
+      suggestion: suggestionText,
+    })
+  }
+
+  return (
+    <Card>
+      <H5>What suggestions do you have?</H5>
+      <Divider />
+      <BodyLg>
+        Submit your suggestions for product improvements by using this form. To
+        discuss ideas with other Threshold users and DAO members, consider
+        posting it in the{" "}
+        <Link href={ExternalHref.thresholdDiscord} isExternal>
+          Discord
+        </Link>
+      </BodyLg>
+      <Select
+        placeholder="Select option"
+        value={featureCategory}
+        onChange={(e) => setFeatureCategory(e.target.value)}
+      >
+        {featureCategoryOptions.map((opt) => (
+          <option value={opt} key={opt}>
+            {opt}
+          </option>
+        ))}
+      </Select>
+      <Textarea
+        value={suggestionText}
+        onChange={(e) => setSuggestionText(e.target.value)}
+      />
+      <FileUploader onFileUpload={(file) => setFile(file)} />
+      <Button onClick={handleSubmit}>Submit Suggestion</Button>
+    </Card>
+  )
 }
 
 Suggestions.route = {
diff --git a/src/types/posthog.ts b/src/types/posthog.ts
index dbb309ee6..dba8d27fa 100644
--- a/src/types/posthog.ts
+++ b/src/types/posthog.ts
@@ -1,3 +1,4 @@
 export enum PosthogEvent {
   ClosedModal = "Closed Modal",
+  SuggestionSubmit = "Submitted Suggestion",
 }

From 6a8a693d6e3d2e643e23cc776214df2c0fa15858 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Wed, 30 Nov 2022 08:54:43 -0700
Subject: [PATCH 2/5] Builds the suggestion page with file upload

---
 src/pages/Feedback/Suggestions/index.tsx | 86 ++++++++++++++++--------
 1 file changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/pages/Feedback/Suggestions/index.tsx b/src/pages/Feedback/Suggestions/index.tsx
index a2abd5272..29553d4c1 100644
--- a/src/pages/Feedback/Suggestions/index.tsx
+++ b/src/pages/Feedback/Suggestions/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import {
+  Box,
   BodyLg,
   Button,
   Card,
@@ -7,7 +8,9 @@ import {
   FileUploader,
   H5,
   Select,
+  Stack,
   Textarea,
+  BodySm,
 } from "@threshold-network/components"
 import { PageComponent } from "../../../types"
 import useGCloudStorage from "../../../hooks/useGCloudStorage"
@@ -24,6 +27,7 @@ const Suggestions: PageComponent = () => {
   const [file, setFile] = useState<File | null>(null)
   const uploadToGCP = useGCloudStorage()
   const [featureCategory, setFeatureCategory] = useState("")
+  console.log("setFeatureCategory", featureCategory)
   const [suggestionText, setSuggestionText] = useState("")
 
   const handleSubmit = async () => {
@@ -41,33 +45,61 @@ const Suggestions: PageComponent = () => {
 
   return (
     <Card>
-      <H5>What suggestions do you have?</H5>
-      <Divider />
-      <BodyLg>
-        Submit your suggestions for product improvements by using this form. To
-        discuss ideas with other Threshold users and DAO members, consider
-        posting it in the{" "}
-        <Link href={ExternalHref.thresholdDiscord} isExternal>
-          Discord
-        </Link>
-      </BodyLg>
-      <Select
-        placeholder="Select option"
-        value={featureCategory}
-        onChange={(e) => setFeatureCategory(e.target.value)}
-      >
-        {featureCategoryOptions.map((opt) => (
-          <option value={opt} key={opt}>
-            {opt}
-          </option>
-        ))}
-      </Select>
-      <Textarea
-        value={suggestionText}
-        onChange={(e) => setSuggestionText(e.target.value)}
-      />
-      <FileUploader onFileUpload={(file) => setFile(file)} />
-      <Button onClick={handleSubmit}>Submit Suggestion</Button>
+      <Stack spacing={8}>
+        <H5>What suggestions do you have?</H5>
+        <Divider />
+        <BodyLg>
+          Submit your suggestions for product improvements by using this form.
+          To discuss ideas with other Threshold users and DAO members, consider
+          posting it in the{" "}
+          <Link href={ExternalHref.thresholdDiscord} isExternal>
+            Discord
+          </Link>
+        </BodyLg>
+
+        <Box>
+          <BodySm mb={2} fontWeight="bold">
+            Feature Category:
+          </BodySm>
+          <Select
+            placeholder="Select option"
+            value={featureCategory}
+            onChange={(e) => setFeatureCategory(e.target.value)}
+          >
+            {featureCategoryOptions.map((opt) => (
+              <option value={opt} key={opt}>
+                {opt}
+              </option>
+            ))}
+          </Select>
+        </Box>
+        <Box>
+          <BodySm mb={2} fontWeight="bold">
+            Suggestions
+          </BodySm>
+          <Textarea
+            value={suggestionText}
+            onChange={(e) => setSuggestionText(e.target.value)}
+            placeholder="Enter text"
+            minH="220px"
+          />
+        </Box>
+        <FileUploader
+          onFileUpload={(file) => setFile(file)}
+          headerHelperText="Optional"
+          footerHelperText="File can be video or photo. Must be less than 2MB"
+          accept="image/*"
+          m="auto"
+          w="full"
+          maxW="full"
+        />
+        <Button
+          disabled={suggestionText === "" || featureCategory === ""}
+          onClick={handleSubmit}
+        >
+          Submit Suggestion
+        </Button>
+      </Stack>
     </Card>
   )
 }

From d4be8b4480ebef89c084ee74eb401bb501d3c0e9 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Tue, 6 Dec 2022 09:41:30 -0700
Subject: [PATCH 3/5] Adds the succes modal and loading state to the suggestion
 form

---
 src/pages/Feedback/Suggestions/index.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pages/Feedback/Suggestions/index.tsx b/src/pages/Feedback/Suggestions/index.tsx
index 29553d4c1..7472210e0 100644
--- a/src/pages/Feedback/Suggestions/index.tsx
+++ b/src/pages/Feedback/Suggestions/index.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import {
-  Box,
   BodyLg,
+  BodySm,
+  Box,
   Button,
   Card,
   Divider,
@@ -10,27 +11,29 @@ import {
   Select,
   Stack,
   Textarea,
-  BodySm,
 } from "@threshold-network/components"
 import { PageComponent } from "../../../types"
 import useGCloudStorage from "../../../hooks/useGCloudStorage"
 import Link from "../../../components/Link"
-import { ExternalHref } from "../../../enums"
+import { ExternalHref, ModalType } from "../../../enums"
 import { useCapture } from "../../../hooks/posthog"
 import { PosthogEvent } from "../../../types/posthog"
+import { useModal } from "../../../hooks/useModal"
+import { FeedbackSubmissionType } from "../../../components/Modal/FeedbackSubmissionModal"
 
 const featureCategoryOptions = ["Upgrade", "Staking"]
 
 const Suggestions: PageComponent = () => {
   const captureSuggestionSubmit = useCapture(PosthogEvent.SuggestionSubmit)
-
   const [file, setFile] = useState<File | null>(null)
+  const { openModal } = useModal()
+  const [isLoading, setIsLoading] = useState(false)
   const uploadToGCP = useGCloudStorage()
   const [featureCategory, setFeatureCategory] = useState("")
-  console.log("setFeatureCategory", featureCategory)
   const [suggestionText, setSuggestionText] = useState("")
 
   const handleSubmit = async () => {
+    setIsLoading(true)
     let fileLink = ""
     if (file) {
       fileLink = await uploadToGCP(file)
@@ -41,6 +44,11 @@ const Suggestions: PageComponent = () => {
       category: featureCategory,
       suggestion: suggestionText,
     })
+
+    setIsLoading(false)
+    openModal(ModalType.FeedbackSubmission, {
+      type: FeedbackSubmissionType.Suggestion,
+    })
   }
 
   return (
@@ -56,7 +64,6 @@ const Suggestions: PageComponent = () => {
             Discord
           </Link>
         </BodyLg>
-
         <Box>
           <BodySm mb={2} fontWeight="bold">
             Feature Category:
@@ -94,6 +101,7 @@ const Suggestions: PageComponent = () => {
           maxW="full"
         />
         <Button
+          isLoading={isLoading}
           disabled={suggestionText === "" || featureCategory === ""}
           onClick={handleSubmit}
         >

From 92c030c28b3b46161927b4c6889775eedcc575cb Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Tue, 6 Dec 2022 10:56:28 -0700
Subject: [PATCH 4/5] Adds override boolean to the posthog capture hook

---
 src/enums/env.ts                         |  2 +-
 src/hooks/posthog/useCapture.ts          | 16 +++++++++++++---
 src/hooks/posthog/usePosthog.ts          |  1 -
 src/pages/Feedback/Suggestions/index.tsx |  5 ++++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/enums/env.ts b/src/enums/env.ts
index fca839db1..b120fd603 100644
--- a/src/enums/env.ts
+++ b/src/enums/env.ts
@@ -7,5 +7,5 @@ export enum EnvVariable {
   FEATURE_FLAG_POSTHOG = "FEATURE_FLAG_POSTHOG",
   FEATURE_FLAG_FEEDBACK_MODULE = "FEATURE_FLAG_FEEDBACK_MODULE",
   POSTHOG_HOSTNAME_HTTP = "POSTHOG_HOSTNAME_HTTP",
-  POSTHOG_API_KEY = "POSTHOH_API_KEY",
+  POSTHOG_API_KEY = "POSTHOG_API_KEY",
 }
diff --git a/src/hooks/posthog/useCapture.ts b/src/hooks/posthog/useCapture.ts
index da437632c..c06d2d070 100644
--- a/src/hooks/posthog/useCapture.ts
+++ b/src/hooks/posthog/useCapture.ts
@@ -4,14 +4,24 @@ import { featureFlags } from "../../constants"
 import * as posthog from "../../posthog"
 import { useAnalytics } from "../useAnalytics"
 
-export const useCapture = (eventName: PosthogEvent) => {
+export const useCapture = (
+  eventName: PosthogEvent,
+  overrideConsent = false
+) => {
   const { isAnalyticsEnabled } = useAnalytics()
 
   return useCallback(
     (params) => {
       if (!featureFlags.POSTHOG) return
-      if (!isAnalyticsEnabled) return
-      posthog.capture(eventName, params)
+
+      if (overrideConsent) {
+        if (!isAnalyticsEnabled) {
+          posthog.init()
+        }
+        posthog.capture(eventName, params)
+      } else if (isAnalyticsEnabled) {
+        posthog.capture(eventName, params)
+      }
     },
     [eventName, isAnalyticsEnabled]
   )
diff --git a/src/hooks/posthog/usePosthog.ts b/src/hooks/posthog/usePosthog.ts
index a1810d734..12082b61a 100644
--- a/src/hooks/posthog/usePosthog.ts
+++ b/src/hooks/posthog/usePosthog.ts
@@ -10,7 +10,6 @@ export const usePosthog = () => {
 
   useEffect(() => {
     if (featureFlags.POSTHOG && isAnalyticsEnabled) {
-      console.log(" init pothog !!!!")
       posthog.init()
     }
   }, [isAnalyticsEnabled])
diff --git a/src/pages/Feedback/Suggestions/index.tsx b/src/pages/Feedback/Suggestions/index.tsx
index 7472210e0..7b2ec2e3b 100644
--- a/src/pages/Feedback/Suggestions/index.tsx
+++ b/src/pages/Feedback/Suggestions/index.tsx
@@ -24,7 +24,10 @@ import { FeedbackSubmissionType } from "../../../components/Modal/FeedbackSubmis
 const featureCategoryOptions = ["Upgrade", "Staking"]
 
 const Suggestions: PageComponent = () => {
-  const captureSuggestionSubmit = useCapture(PosthogEvent.SuggestionSubmit)
+  const captureSuggestionSubmit = useCapture(
+    PosthogEvent.SuggestionSubmit,
+    true
+  )
   const [file, setFile] = useState<File | null>(null)
   const { openModal } = useModal()
   const [isLoading, setIsLoading] = useState(false)

From 72dde91820a0905d05163f1c17cda58cc84c2b57 Mon Sep 17 00:00:00 2001
From: George Weiler <georgejweiler@gmail.com>
Date: Wed, 14 Dec 2022 11:40:57 -0700
Subject: [PATCH 5/5] updates yarn lock file

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fa4b67524..0913cd590 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5371,9 +5371,9 @@
     "@openzeppelin/contracts" "^4.1.0"
 
 "@threshold-network/components@development":
-  version "1.0.0-dev.23"
-  resolved "https://registry.npmjs.org/@threshold-network/components/-/components-1.0.0-dev.23.tgz#a08a61359a51654070b880e3f017edc2bb555d2e"
-  integrity sha512-eFAZ+xy7TEwXrttyyjJmJ8NwivvNIOmmU52VNlp3Zb42xJ5lLE65zbtgpHmODZ8ClMhFWQLYfqHoRIO4+fq74w==
+  version "1.0.0-dev.29"
+  resolved "https://registry.yarnpkg.com/@threshold-network/components/-/components-1.0.0-dev.29.tgz#5b837e86dad45d34e8056939c7be322c13439dd0"
+  integrity sha512-G76fuQxo/+yS0fk9DpryFajZyUi2tjuZEPSvyMpd1pdk/aXKlHy8R6ClbdcIDU9H/XDhgh1djS5K0+e+n/YljA==
 
 "@threshold-network/solidity-contracts@1.2.0-dev.17", "@threshold-network/solidity-contracts@development":
   version "1.2.0-dev.17"