added feedback implementation

main.tf

@@ -93,6 +93,18 @@ resource "aws_dynamodb_table" "byteshare-user" {
   }
 }
 
+resource "aws_dynamodb_table" "byteshare-feedback" {
+  provider = aws.aws
+  name         = "byteshare-feedback"
+  billing_mode = "PAY_PER_REQUEST"
+  hash_key     = "feedback_id"
+
+  attribute {
+    name = "feedback_id"
+    type = "S"
+  }
+}
+
 resource "aws_dynamodb_table" "byteshare-subscriber" {
   provider = aws.aws
   name         = "byteshare-subscriber"

middleware/main.py

@@ -39,9 +39,11 @@
 table_name = "byteshare-upload-metadata"
 user_table_name = "byteshare-user"
 subscriber_table_name = "byteshare-subscriber"
+feedback_table_name = "byteshare-feedback"
 dynamodb = DynamoDBManager(table_name)
 user_dynamodb = DynamoDBManager(user_table_name)
 subscriber_dynamodb = DynamoDBManager(subscriber_table_name)
+feedback_dynamodb = DynamoDBManager(feedback_table_name)
 
 
 class StatusEnum(PythonEnum):
@@ -74,6 +76,11 @@ class AddUser(BaseModel):
     registration: str
     email: str
 
+class Feedback(BaseModel):
+    name: str
+    email: str
+    message: str
+
 
 @app.get("/health")
 def health_check():
@@ -319,6 +326,29 @@ def post_upload_return_link_qr(body: PostUpload, upload_id: str):
         "downloads_allowed": str(upload_metadata["max_download"]),
     }
 
+@app.post("/feedback")
+def post_feedback(body: Feedback):
+    """
+    Add feedback received from users to DB
+
+    Parameters:
+    - name: name of the user
+    - email: email address of user
+    - message: feedback
+
+
+    Returns:
+    - None
+    """
+
+    feedback = {
+        "feedback_id": uuid.uuid4().hex,
+        "email": body.email,
+        "name": body.name,
+        "message": body.message
+    }
+    feedback_dynamodb.create_item(feedback)
+
 
 @app.post("/user")
 def webhook_post_user_send_email(body: AddUser):
@@ -356,7 +386,7 @@ def webhook_post_user_send_email(body: AddUser):
 
   <p>We established ByteShare to make file sharing easy, hassle-free and secure.</p>
 
-  <p>I’d love to hear what you think of our product. Is there anything we should work on or improve? <a href="https://byteshare.io/feedback" style="color: #007bff; text-decoration: none;">Let us know</a>.</p>
+  <p>I’d love to hear what you think of our product. Is there anything we should work on or improve? <a href="https://byteshare.io" style="color: #007bff; text-decoration: none;">Let us know</a>.</p>
   <p>You can also <a href="https://github.com/ambujraj/ByteShare" style="color: #007bff; text-decoration: none;">star us on Github</a></p>
 
   <p>I'm always happy to help and read our customers' suggestions.</p>

ui/src/components/header.tsx

@@ -1,9 +1,17 @@
-import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import React, { useEffect } from 'react'
+import { toast } from 'sonner'
+import React, { useEffect, useState } from 'react'
 import { Button } from './ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover'
+import { Label } from './ui/label'
+import { Input } from './ui/input'
+import { Textarea } from './ui/textarea'
 
 export const Header = ({ authorised, statusLoaded }) => {
+  const [feedbackName, setFeedbackName] = useState('')
+  const [feedbackEmail, setFeedbackEmail] = useState('')
+  const [feedbackMessage, setFeedbackMessage] = useState('')
+  const [popoverOpen, setPopoverOpen] = useState(false)
   const router = useRouter()
   useEffect(() => {
     const script = document.createElement('script')
@@ -15,6 +23,29 @@ export const Header = ({ authorised, statusLoaded }) => {
       document.body.removeChild(script)
     }
   }, [])
+
+  const handleFeedbackSubmit = async (event) => {
+    event.preventDefault()
+    setPopoverOpen(false)
+
+    const apiBaseURL = process.env.NEXT_PUBLIC_API_BASE_URL
+    const feedbackJSON = {
+      name: feedbackName,
+      email: feedbackEmail,
+      message: feedbackMessage,
+    }
+
+    await fetch(apiBaseURL + '/feedback', {
+      method: 'POST',
+      body: JSON.stringify(feedbackJSON),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    toast.success('Your feedback has been received.😃')
+  }
+
   return (
     <nav className="bg-white border-gray-200 dark:bg-gray-900 z-10">
       <div className="flex flex-wrap items-center justify-between md:mx-10 p-4 sm:mx-auto">
@@ -81,13 +112,60 @@ export const Header = ({ authorised, statusLoaded }) => {
         >
           <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
             <li>
-              <Button
-                variant="ghost"
-                onClick={() => router.push('/features')}
-                className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              >
-                Features
-              </Button>
+              <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+                  >
+                    Feedback
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-80">
+                  <form onSubmit={handleFeedbackSubmit}>
+                    <div className="grid gap-4 py-4">
+                      <div className="grid grid-cols-4 items-center gap-2">
+                        <Label htmlFor="name" className="text-left">
+                          Name
+                        </Label>
+                        <Input
+                          id="name"
+                          value={feedbackName}
+                          onChange={(e) => setFeedbackName(e.target.value)}
+                          className="col-span-4"
+                        />
+                      </div>
+                      <div className="grid grid-cols-4 items-center gap-2">
+                        <Label htmlFor="email" className="text-left">
+                          Email
+                        </Label>
+                        <Input
+                          id="email"
+                          type="email"
+                          value={feedbackEmail}
+                          onChange={(e) => setFeedbackEmail(e.target.value)}
+                          className="col-span-4"
+                        />
+                      </div>
+                      <div className="grid grid-cols-4 items-center gap-2">
+                        <Label htmlFor="message" className="text-left">
+                          Message<span className="text-red-500">*</span>
+                        </Label>
+                        <Textarea
+                          id="message"
+                          value={feedbackMessage}
+                          onChange={(e) => setFeedbackMessage(e.target.value)}
+                          className="col-span-4"
+                          required
+                        />
+                      </div>
+                    </div>
+                    <Button type="submit" className="flex justify-end">
+                      Submit
+                    </Button>
+                  </form>
+                </PopoverContent>
+              </Popover>
             </li>
             <li>
               <Button
@@ -100,11 +178,15 @@ export const Header = ({ authorised, statusLoaded }) => {
             </li>
             <li>
               <Button
-                variant="ghost"
-                onClick={() => router.push('/feedback')}
-                className="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+                variant="default"
+                onClick={() => router.push('/pricing')}
+                className="
+                block py-2 px-4
+                text-white rounded
+                hover:bg-blue-700
+              "
               >
-                Tell us
+                Upgrade
               </Button>
             </li>
           </ul>

ui/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }