From 1e368913aba072b34ba009b8dbdb4eab4b661923 Mon Sep 17 00:00:00 2001
From: ntr <ntr@mnml.gg>
Date: Mon, 19 Sep 2022 19:34:04 +1000
Subject: [PATCH] info page

---
 TODO.md                                       | 10 +++-
 api/src/offers.ts                             |  2 +-
 client/src/app.tsx                            |  6 ++-
 client/src/components/{header.tsx => nav.tsx} |  9 ++--
 client/src/routes/info.tsx                    | 49 +++++++++++++++++++
 client/src/style/index.less                   | 31 ++++++++----
 6 files changed, 90 insertions(+), 17 deletions(-)
 rename client/src/components/{header.tsx => nav.tsx} (90%)
 create mode 100644 client/src/routes/info.tsx

diff --git a/TODO.md b/TODO.md
index 8497ed6..e127861 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,12 +1,20 @@
 # TODO
 
+info page
+    minimum quality
+
+acp page needs to fetch offers list
+
+on logged in need to redirect to offers
+
+discord!
+
 want added -> wants added
     spamming discogs and generating offers on every want add
 
 push offers
 cover off admin routes and commands
 
-minimum quality
 
 listen / notify
     on offers
diff --git a/api/src/offers.ts b/api/src/offers.ts
index a8e0574..77faffe 100644
--- a/api/src/offers.ts
+++ b/api/src/offers.ts
@@ -12,7 +12,7 @@ export enum Status {
     Pending      = 'Pending',
     Accepted     = 'Accepted',
     Declined     = 'Declined',
-    Ordered      = 'Ordered',
+    Confirmed    = 'Confirmed',
     Complete     = 'Complete',
 }
 
diff --git a/client/src/app.tsx b/client/src/app.tsx
index 6d3c5a4..cf60a90 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -6,13 +6,14 @@ import { Provider } from 'react-redux'
 
 import createWs from './ws';
 
-import Header from './components/header';
+import Nav from './components/nav';
 
 import Offers from './routes/offers';
 import Acp from './routes/acp';
 import Login from './routes/login';
 import Search from './routes/search';
 import List from './routes/list';
+import Info from './routes/info';
 
 import store, { userState, wsState, State } from './store'
 
@@ -29,13 +30,14 @@ const Main = () => {
 
     return (
         <main id="app">
-            <Header />
+            <Nav />
             <Router>
                 <Route path="/" component={Offers} />
                 <Route path="/login" component={Login} mode="login" />
                 <Route path="/register" component={Login} mode="register" />
                 <Route path="/search" component={Search} />
                 <Route path="/list" component={List} />
+                <Route path="/info" component={Info} />
 
                 {/* ACP */}
                 <Route path="/offers/acp" component={Acp} />
diff --git a/client/src/components/header.tsx b/client/src/components/nav.tsx
similarity index 90%
rename from client/src/components/header.tsx
rename to client/src/components/nav.tsx
index 2c17ced..f8e93c9 100644
--- a/client/src/components/header.tsx
+++ b/client/src/components/nav.tsx
@@ -10,12 +10,15 @@ function showAdmin(user) {
     return user && user.email === 'ntr@mnml.gg';
 }
 
-const Header = () => {
+const DEFAULT_ROUTE = '/info';
+
+const Nav = () => {
     const dispatch = useDispatch()
     const user = useSelector((state: State) => state.user);
 
     useEffect(() => {
         if (!user) route('/login');
+        route(DEFAULT_ROUTE)
     }, [user])
 
     async function logoutClick(e) {
@@ -47,7 +50,7 @@ const Header = () => {
 
     const userNav = () => (
         <nav>
-            <a href="/account">Account</a>
+            <a href="/info">Info</a>
             <a href="/auth/logout" onClick={logoutClick}>Logout</a>
         </nav>
     )
@@ -61,4 +64,4 @@ const Header = () => {
     );
 }
 
-export default Header;
+export default Nav;
diff --git a/client/src/routes/info.tsx b/client/src/routes/info.tsx
new file mode 100644
index 0000000..b067a7e
--- /dev/null
+++ b/client/src/routes/info.tsx
@@ -0,0 +1,49 @@
+import { h } from 'preact';
+
+const Info = () => {
+    return (
+        <div class='info'>
+            <div class='words'>
+                <section>
+                    <h1>Info</h1>
+                    <p> Thanks for signing up! </p>
+                    <p> Mates Crates is a record importing service in alpha. </p>
+                    <p> Its purpose is to reduce the cost of shipping vinyl records to Melbourne, Australia. </p>
+                </section>
+
+                <section>
+                    <h3>How It Works</h3>
+                    <p> First, add some records to your <span class='alt'>List</span> on the <a href='/search'>Search Page</a>. </p>
+                    <p> Mates Crates will then make offers to you for releases you add to your <a href='/list'>List</a>. </p>
+                </section>
+
+                <section>
+                    <h2>Offers</h2>
+                    <p> Think of offers like an expression of interest, they are not confirmed until they are set to <span class='alt-text'>Confirmed</span> status. </p>
+                    <p> After that they will be shipped to Melbourne and ready for pick up. </p>
+                </section>
+
+                <section>
+                    <h2>Pick Up</h2>
+                    <p> Use the contact options to get in touch. </p>
+                    <p> Payment is cash on delivery. </p>
+                </section>
+
+                <section>
+                    <h2>FAQ</h2>
+                    <h3> Record Condition </h3>
+                    <p> All Mates Crates offers are for records that are either mint condition or close to it. </p>
+                    <h3> Delivery Times </h3>
+                    <p> Records are usually available for pickup within a week. We order in bulk, which often means express, insured shipping to Melbourne. </p>
+                </section>
+            </div>
+            <section class='contact'>
+                <h2>Contact</h2>
+                <p><a href='mailto:ntr@mnml.gg'>Email</a></p>
+                <p><a href='https://discord.gg/QfjY8WNQyx'>Discord</a></p>
+            </section>
+        </div>
+    );
+};
+
+export default Info;
diff --git a/client/src/style/index.less b/client/src/style/index.less
index 59e92a2..3d45963 100644
--- a/client/src/style/index.less
+++ b/client/src/style/index.less
@@ -184,15 +184,23 @@ button, [type=submit] {
         }
     }
 
-    .info {
-        p {
-            margin-bottom: var(--base-spacing);
-        }
-    }
 
 }
 
-.alt-text {
+.info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    section {
+        margin-bottom: var(--base-spacing);
+    }
+
+    .contact {
+        text-align: center;
+    }
+}
+
+.alt-text, .alt {
     font-family: var(--secondary-font-family);
     // font-size: var(--small-font-size);
     text-transform: uppercase;
@@ -272,12 +280,8 @@ form {
 }
 
 a {
-    // padding-left: var(--base-spacing);
-    margin-right: var(--base-spacing);
-
     color: var(--secondary-font-color);
     font-family: var(--secondary-font-family);
-    font-size: var(--small-font-size);
     text-transform: uppercase;
 
     &:hover {
@@ -285,6 +289,13 @@ a {
     }
 }
 
+nav {
+    a {
+        font-size: var(--small-font-size);
+        margin-right: var(--base-spacing);
+    }
+}
+
 
 header {
     display: grid;