feat: add contact page (#547)

* feat: add contact page

* refactor: move out cookies from RightSide

src/App.tsx

@@ -10,6 +10,7 @@ import Footer from './components/Footer';
 import GlobalStyle from './GlobalStyle';
 import isOfflineMode from './lib/isOfflineMode';
 import DebugPage from './pages/DebugPage';
+import { ContactPage } from './pages/ContactPage/ContactPage';
 import FavoritesPage from './pages/FavoritesPage';
 import { PageLayout } from './components/Layout/PageLayout';
 import DeleteAccountPage from './pages/DeleteAccountPage';
@@ -84,6 +85,7 @@ function App() {
               element={<NewPasswordPage setErrorMessage={handledError} />}
             />
             <Route path="/debug" element={<DebugPage />} />
+            <Route path="/contact" element={<ContactPage />} />
             <Route
               path="/delete-account"
               element={<DeleteAccountPage setError={handledError} />}

src/components/NavigationBar/NavigationBar.tsx

@@ -4,12 +4,14 @@ import { useCookies } from 'react-cookie';
 
 import { Navbar } from './styled';
 import { RightSide } from './components/RightSide';
+import useNavbarEnd from './helpers/useNavbarEnd';
+import { get2ankiApi } from '../../lib/backend/get2ankiApi';
 
 function NavigationBar() {
   const [cookies] = useCookies(['token']);
   const [active, setActive] = useState(false);
-
   const path = window.location.pathname;
+  const loggedInNavbar = useNavbarEnd(path, get2ankiApi());
 
   return (
     <Navbar
@@ -42,7 +44,8 @@ function NavigationBar() {
         id="navbar"
         className={`is-flex-grow-0	navbar-menu ${active ? 'is-active' : ''}`}
       >
-        <RightSide cookies={cookies} path={path} />
+        {cookies.token && loggedInNavbar}
+        {!cookies.token && <RightSide path={path} />}
       </div>
 
     </Navbar>

src/components/NavigationBar/components/RightSide.tsx

@@ -1,18 +1,17 @@
-import useNavbarEnd from '../helpers/useNavbarEnd';
-import { get2ankiApi } from '../../../lib/backend/get2ankiApi';
+import React from 'react';
+
 import NavbarItem from '../NavbarItem';
 import { getVisibleText } from '../../../lib/text/getVisibleText';
 
 interface RightSideProps {
-  cookies: Record<string, string>;
   path: string;
 }
 
-export function RightSide({ cookies, path }: Readonly<RightSideProps>) {
-  if (cookies.token) {
-    return useNavbarEnd(path, get2ankiApi());
-  }
+export function RightSide({ path }: Readonly<RightSideProps>) {
   return <div className="navbar-end">
+    <NavbarItem href="/contact" path={path}>
+      {getVisibleText('navigation.contact')}
+    </NavbarItem>
     <NavbarItem path="pricing" href="/pricing">
       {getVisibleText('navigation.pricing')}
     </NavbarItem>

src/components/NavigationBar/helpers/useNavbarEnd.tsx

@@ -22,6 +22,9 @@ export default function useNavbarEnd(path: string, backend: Backend) {
 
   return (
     <div className="navbar-end">
+      <NavbarItem href="/contact" path={path}>
+        {getVisibleText('navigation.contact')}
+      </NavbarItem>
       {!isLoading && !isPaying && <NavbarItem href="/pricing" path={path}>
         {getVisibleText('navigation.pricing')}
       </NavbarItem>}

src/lib/text/app.document.json

@@ -21,5 +21,6 @@
   "card.options": "Card Options",
   "favorites.empty": "You have no favorites!",
   "navigation.login.google": "Login with Google",
-  "navigation.register.google": "Register with Google"
+  "navigation.register.google": "Register with Google",
+  "navigation.contact": "Contact"
 }

src/pages/ContactPage/ContactPage.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export function ContactPage() {
+  return (
+    <section className="section">
+      <div className="container content">
+        <h2 className="title is-2">Contact/Support</h2>
+        <p>I’m here to help! If you have any questions, feedback, or need assistance, don’t hesitate to reach out.
+        </p>
+
+        <h3 className="title is-3">Main Developer</h3>
+        <p>
+          Hi, I’m Alexander Alemayhu, the main developer of this project. I’m always happy to hear from you and help out
+          with any issues you might have.
+        </p>
+        <p>
+          Email: <a href="mailto:[email protected]">[email protected]</a>
+        </p>
+
+        <h3 className="title is-3">How to Reach Us</h3>
+        <p>To make things quicker and easier, please include the following in your email:</p>
+        <ul>
+          <li>Your name</li>
+          <li>A brief description of your question or issue</li>
+          <li>Steps to reproduce the issue (if it is a technical problem)</li>
+          <li>Any screenshots or logs that might help</li>
+        </ul>
+        <p>We aim to get back to you within 24-48 hours. </p>
+        <p>
+          Thank you for being part of our community!
+        </p>
+      </div>
+    </section>
+
+  );
+}