From 2ea2d16af9f743529cc5b3275ef8fea845d744c7 Mon Sep 17 00:00:00 2001
From: Guru Prathosh <86939870+iamprathosh@users.noreply.github.com>
Date: Sat, 11 Jan 2025 19:32:57 +0530
Subject: [PATCH] Add feedback button functionality

Fixes #495

Add feedback button functionality to the website's interface.

* **App Component**: Import and add the `FeedbackButton` component inside the `MatomoProvider` component in `src/App.tsx`.
* **CSS Styling**: Add styles for the `.feedback-button` class in `src/app.css` to position and style the feedback button.
* **Feedback Button Component**: Create a new `FeedbackButton` component in `src/components/FeedbackButton.tsx` that renders a floating button and opens a modal with a feedback form on click.
* **Feedback Form Component**: Create a new `FeedbackForm` component in `src/components/FeedbackForm.tsx` that renders a modal with a form for user feedback and handles form submission.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/apertium/apertium-html-tools/issues/495?shareId=XXXX-XXXX-XXXX-XXXX).
---
 src/App.tsx                       |  2 ++
 src/app.css                       | 22 ++++++++++++++++
 src/components/FeedbackButton.tsx | 42 +++++++++++++++++++++++++++++++
 src/components/FeedbackForm.tsx   | 42 +++++++++++++++++++++++++++++++
 4 files changed, 108 insertions(+)
 create mode 100644 src/components/FeedbackButton.tsx
 create mode 100644 src/components/FeedbackForm.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8780ccb22..509dff96e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import { Mode as TranslatorMode } from './components/translator';
 import { Path as WebpageTranslationPath } from './components/translator/WebpageTranslationForm';
 import WithInstallationAlert from './components/WithInstallationAlert';
 import WithLocale from './components/WithLocale';
+import FeedbackButton from './components/FeedbackButton';
 
 const Interfaces = {
   [Mode.Translation]: Translator,
@@ -135,6 +136,7 @@ const App = ({ setLocale }: { setLocale: React.Dispatch<React.SetStateAction<str
           </div>
           <Footer pushRef={pushRef} wrapRef={wrapRef} />
         </WithInstallationAlert>
+        <FeedbackButton />
       </StringsContext.Provider>
     </MatomoProvider>
   );
diff --git a/src/app.css b/src/app.css
index e68ba1fec..07e33ac70 100644
--- a/src/app.css
+++ b/src/app.css
@@ -12,3 +12,25 @@
 .btn-primary:hover {
   background-color: #385a7f;
 }
+
+.feedback-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #446e9b;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.feedback-button:hover {
+  background-color: #385a7f;
+}
diff --git a/src/components/FeedbackButton.tsx b/src/components/FeedbackButton.tsx
new file mode 100644
index 000000000..17f10d5e9
--- /dev/null
+++ b/src/components/FeedbackButton.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const FeedbackButton = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Handle form submission logic here
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button className="feedback-button" onClick={handleShow}>
+        Feedback
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Feedback</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={handleSubmit}>
+            <Form.Group controlId="feedbackForm.ControlTextarea">
+              <Form.Label>Your Feedback</Form.Label>
+              <Form.Control as="textarea" rows={3} required />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default FeedbackButton;
diff --git a/src/components/FeedbackForm.tsx b/src/components/FeedbackForm.tsx
new file mode 100644
index 000000000..8d58bfcbc
--- /dev/null
+++ b/src/components/FeedbackForm.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const FeedbackForm = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Handle form submission logic here
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button className="feedback-button" onClick={handleShow}>
+        Feedback
+      </Button>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Feedback</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form onSubmit={handleSubmit}>
+            <Form.Group controlId="feedbackForm.ControlTextarea">
+              <Form.Label>Your Feedback</Form.Label>
+              <Form.Control as="textarea" rows={3} required />
+            </Form.Group>
+            <Button variant="primary" type="submit">
+              Submit
+            </Button>
+          </Form>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default FeedbackForm;