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/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 = () => { + 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..7b2ec2e3b 100644 --- a/src/pages/Feedback/Suggestions/index.tsx +++ b/src/pages/Feedback/Suggestions/index.tsx @@ -1,9 +1,118 @@ -import React from "react" -import { Box } from "@threshold-network/components" +import React, { useState } from "react" +import { + BodyLg, + BodySm, + Box, + Button, + Card, + Divider, + FileUploader, + H5, + Select, + Stack, + Textarea, +} from "@threshold-network/components" import { PageComponent } from "../../../types" +import useGCloudStorage from "../../../hooks/useGCloudStorage" +import Link from "../../../components/Link" +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 = () => { - return suggestions page + const captureSuggestionSubmit = useCapture( + PosthogEvent.SuggestionSubmit, + true + ) + const [file, setFile] = useState(null) + const { openModal } = useModal() + const [isLoading, setIsLoading] = useState(false) + const uploadToGCP = useGCloudStorage() + const [featureCategory, setFeatureCategory] = useState("") + const [suggestionText, setSuggestionText] = useState("") + + const handleSubmit = async () => { + setIsLoading(true) + let fileLink = "" + if (file) { + fileLink = await uploadToGCP(file) + } + + captureSuggestionSubmit({ + file: fileLink, + category: featureCategory, + suggestion: suggestionText, + }) + + setIsLoading(false) + openModal(ModalType.FeedbackSubmission, { + type: FeedbackSubmissionType.Suggestion, + }) + } + + return ( + + +
What suggestions do you have?
+ + + 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{" "} + + Discord + + + + + Feature Category: + + + + + + Suggestions + +